/* Montserrat is the official D57 family (Google Fonts). Served from Google's CDN; no binaries were supplied with the brand kit. Weights in use: 400 / 600 / 700 / 800. */ /* Montserrat va con en el . */ :root{ /* Primarios */ --color-primary-navy:#071863; --color-primary-mint:#4185f4; /* Tinte claro del Mint, para texto de acento sobre navy (AA: 7.5:1 sobre #071863) */ --color-mint-light:#8ab4f8; --color-primary-green-alt:#06f3b8; /* Secundarios */ --color-secondary-magenta:#890371; --color-secondary-purple:#38006b; --color-secondary-yellow:#ffff00; --color-secondary-orange:#ff6400; /* Neutros */ --color-neutral-black:#000000; --color-neutral-dark-gray:#444444; --color-neutral-light-gray:#d3d3d3; --color-neutral-white:#ffffff; /* Derivados navy (mismo hue, para superficies y bordes en modo oscuro) */ --color-navy-900:#04102f; --color-navy-800:#061446; --color-navy-700:#071863; --color-navy-600:#0d2288; --color-navy-500:#1533ad; /* Alpha helpers */ --color-white-a08:rgba(255,255,255,.08); --color-white-a16:rgba(255,255,255,.16); --color-white-a64:rgba(255,255,255,.64); --color-navy-a08:rgba(7,24,99,.08); --color-navy-a16:rgba(7,24,99,.16); --color-mint-a24:rgba(65,133,244,.24); --color-mint-light-a16:rgba(138,180,248,.16); } :root{ --gradient-aurora-digital:linear-gradient(to right,#4185f4,#06f3b8); /* @kind color */ --gradient-ai-spark:linear-gradient(to right,#890371,#071863); /* @kind color */ --gradient-warm-glow:linear-gradient(to right,#ffff00,#ff6400); /* @kind color */ /* Fondos de atmósfera digital: navy profundo con luz de acento */ --gradient-surface-dark:radial-gradient(120% 120% at 15% 0%,#0d2288 0%,#071863 45%,#04102f 100%); --gradient-surface-ai:radial-gradient(120% 120% at 85% 0%,#890371 0%,#38006b 40%,#071863 100%); --gradient-text-aurora:linear-gradient(to right,#4185f4,#06f3b8); } :root{ --font-family-core:"Montserrat","Helvetica Neue",Arial,sans-serif; --font-family-fallback:Arial,"Helvetica Neue",sans-serif; --font-family-mono:Consolas,"SF Mono",ui-monospace,monospace; --font-weight-regular:400; --font-weight-semibold:600; --font-weight-bold:700; --font-weight-extrabold:800; /* Escala del kit (min–max declarados en el brand kit) */ --font-size-display:64px; --font-size-display-min:48px; --font-size-h1:40px; --font-size-h1-min:36px; --font-size-h2:32px; --font-size-h2-min:28px; --font-size-h3:24px; --font-size-h3-min:22px; --font-size-body-l:20px; --font-size-body-l-min:18px; --font-size-body-m:16px; --font-size-caption:14px; --font-size-caption-min:12px; --font-size-label:16px; --font-size-label-min:14px; --line-height-display:1.1; --line-height-h1:1.15; --line-height-h2:1.2; --line-height-h3:1.3; --line-height-body:1.5; --line-height-caption:1.4; --line-height-label:1.2; --letter-spacing-label:0.02em; --letter-spacing-upper:0.04em; --letter-spacing-display:-0.01em; /* Roles compuestos */ --font-display:var(--font-weight-extrabold) var(--font-size-display)/var(--line-height-display) var(--font-family-core); --font-h1:var(--font-weight-bold) var(--font-size-h1)/var(--line-height-h1) var(--font-family-core); --font-h2:var(--font-weight-semibold) var(--font-size-h2)/var(--line-height-h2) var(--font-family-core); --font-h3:var(--font-weight-semibold) var(--font-size-h3)/var(--line-height-h3) var(--font-family-core); --font-body-l:var(--font-weight-regular) var(--font-size-body-l)/var(--line-height-body) var(--font-family-core); --font-body-m:var(--font-weight-regular) var(--font-size-body-m)/var(--line-height-body) var(--font-family-core); --font-caption:var(--font-weight-regular) var(--font-size-caption)/var(--line-height-caption) var(--font-family-core); --font-label:var(--font-weight-bold) var(--font-size-label)/var(--line-height-label) var(--font-family-core); } :root{ --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px; --space-10:80px; --space-11:120px; /* Aplicaciones fijadas por el kit */ --space-button-inline:24px; /* padding 0 24px */ --space-icon-tile-desktop:72px; /* tile 72x72 */ --space-icon-tile-mobile:56px; /* tile 56x56 */ --space-icon-glyph:40px; /* icono dentro del tile */ --space-logo-clearance:5px; /* área libre = altura del "5" */ --size-logo-min-width:96px; --size-isotipo-min-width:32px; --layout-max-width:1280px; --layout-gutter:32px; --layout-section-y:120px; --grid-columns:12; /* @kind other */ --grid-gap:24px; } :root{ --radius-none:0px; --radius-sm:8px; --radius-md:12px; --radius-tile:16px; /* icon tile — fijado por el kit */ --radius-lg:20px; --radius-card:24px; --radius-xl:32px; --radius-pill:9999px; /* botones, chips y badges: border-radius = height/2 */ --radius-circle:50%; /* isotipo */ --border-width-hairline:1px; --border-width-icon-stroke:1.75px; /* trazo de iconografía: 1.5–2px */ --border-width-focus:2px; } :root{ /* Sombras suaves sobre claro; en oscuro la profundidad viene de la luz de acento */ --shadow-xs:0 1px 2px rgba(7,24,99,.06); --shadow-sm:0 2px 8px rgba(7,24,99,.08); --shadow-md:0 8px 24px rgba(7,24,99,.12); --shadow-lg:0 20px 48px rgba(7,24,99,.16); /* Glows: la marca usa luz, no sombra dura, sobre navy */ --glow-mint:0 0 0 1px rgba(65,133,244,.32),0 12px 40px rgba(65,133,244,.18); --glow-green:0 0 0 1px rgba(6,243,184,.32),0 12px 40px rgba(6,243,184,.18); --glow-magenta:0 0 0 1px rgba(137,3,113,.4),0 12px 40px rgba(137,3,113,.28); --ring-focus:0 0 0 var(--border-width-focus) var(--color-primary-mint); } :root{ --duration-instant:80ms; /* @kind other */ --duration-fast:160ms; /* @kind other */ --duration-base:240ms; /* @kind other */ --duration-slow:400ms; /* @kind other */ --duration-ambient:1200ms; /* @kind other */ --easing-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */ --easing-out:cubic-bezier(0,.6,.2,1); /* @kind other */ --easing-in:cubic-bezier(.6,0,1,.6); /* @kind other */ --transition-base:all var(--duration-base) var(--easing-standard); /* @kind other */ --transition-fast:all var(--duration-fast) var(--easing-standard); /* @kind other */ } :root{ /* Modo oscuro (por defecto de marca): navy */ --surface-page:var(--color-primary-navy); --surface-page-gradient:var(--gradient-surface-dark); --surface-card:var(--color-navy-800); --surface-card-inverse:var(--color-neutral-white); --surface-raised:var(--color-navy-600); --surface-subtle:var(--color-white-a08); --surface-ai:var(--gradient-surface-ai); --text-heading:var(--color-neutral-white); --text-body:var(--color-white-a64); --text-muted:var(--color-neutral-light-gray); /* El Mint puro no alcanza AA como texto sobre navy (4.46:1); el tinte claro sí (7.5:1). --color-primary-mint se sigue usando en rellenos, bordes y gradientes. */ --text-accent:var(--color-mint-light); --text-cta:var(--color-primary-green-alt); --text-on-light-heading:var(--color-primary-navy); --text-on-light-body:var(--color-neutral-dark-gray); --border-subtle:var(--color-white-a16); --border-strong:var(--color-primary-mint); --border-on-light:var(--color-neutral-light-gray); --action-primary-bg:var(--color-primary-navy); --action-primary-text:var(--color-neutral-white); --action-secondary-bg:var(--color-primary-mint); --action-secondary-text:var(--color-primary-navy); --action-cta-bg:var(--color-primary-green-alt); --action-cta-text:var(--color-primary-navy); --action-ai-bg:var(--gradient-ai-spark); --state-hover-darken:10%; --state-active-darken:18%; --state-disabled-opacity:.4; /* @kind other */ --status-active:var(--color-primary-green-alt); --status-pending:var(--color-secondary-yellow); --status-approved:var(--color-primary-mint); --status-cancelled:var(--color-secondary-orange); --status-rejected:var(--color-secondary-magenta); --status-inactive:var(--color-neutral-light-gray); --status-selected:var(--color-primary-navy); } [data-theme="light"]{ --surface-page:var(--color-neutral-white); --surface-page-gradient:none; --surface-card:var(--color-neutral-white); --surface-card-inverse:var(--color-primary-navy); --surface-raised:var(--color-neutral-white); --surface-subtle:var(--color-navy-a08); --text-heading:var(--color-primary-navy); --text-body:var(--color-neutral-dark-gray); --text-muted:var(--color-neutral-dark-gray); --text-accent:var(--color-secondary-magenta); --text-cta:var(--color-primary-navy); --border-subtle:var(--color-neutral-light-gray); } *,*::before,*::after{box-sizing:border-box} body{margin:0;font:var(--font-body-m);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased} h1,h2,h3,h4,p{margin:0} h1{font:var(--font-h1);color:var(--text-heading)} h2{font:var(--font-h2);color:var(--text-heading)} h3{font:var(--font-h3);color:var(--text-heading)} a{color:var(--text-accent);text-decoration:none;transition:var(--transition-fast)} a:hover{color:var(--color-primary-green-alt)} code,pre{font-family:var(--font-family-mono)} ::selection{background:var(--color-primary-mint);color:var(--color-primary-navy)}