/* ════════════════════════════════════════════════════════════════════
JANUS CREDIT — Foundations: Color & Type
SOFOM ENR · Crédito privado con garantía fiduciaria inmobiliaria
Import this file + the Google Fonts link below into any artifact.
════════════════════════════════════════════════════════════════════ */
:root {
/* ── PRIMARIES ──────────────────────────────────────────────── */
--jc-white: #ffffff; /* 60% — fondo base, contenido extenso */
--jc-cream: #f5f0e8; /* 25% — acento cálido, secciones alternas */
--jc-black: #0a0a08; /* 15% — peso: nav, footer, portada */
--jc-gold: #c9a84c; /* acento exclusivo — NUNCA fondo de área */
/* ── SECONDARIES ────────────────────────────────────────────── */
--jc-ink: #2a2620; /* texto principal */
--jc-stone: #8c8272; /* texto secundario */
--jc-gold-light: #e8d49a; /* dorado claro — tints, hovers */
--jc-gold-pale: #f7f0dc; /* dorado pálido — fondos sutiles de dato */
--jc-cream-deep: #ede8df; /* crema profunda — bordes, divisores */
/* ── LINE / RULE ────────────────────────────────────────────── */
--jc-rule: rgba(201,168,76,0.22); /* hairline dorada estándar */
--jc-rule-soft: rgba(201,168,76,0.07); /* hairline en tablas */
--jc-rule-dark: rgba(201,168,76,0.12); /* hairline sobre negro */
/* ── TEXT ON DARK ───────────────────────────────────────────── */
--jc-on-dark: rgba(245,240,232,1); /* crema sólida */
--jc-on-dark-soft: rgba(245,240,232,0.45); /* secundario sobre negro */
--jc-on-dark-faint: rgba(245,240,232,0.2); /* terciario sobre negro */
/* ── SEMANTIC FG / BG ───────────────────────────────────────── */
--jc-bg: var(--jc-white);
--jc-bg-alt: var(--jc-cream);
--jc-bg-invert: var(--jc-black);
--jc-fg: var(--jc-ink);
--jc-fg-muted: var(--jc-stone);
--jc-accent: var(--jc-gold);
/* ── TYPE FAMILIES ──────────────────────────────────────────── */
--jc-font-logo: 'Marcellus', Georgia, serif; /* SOLO wordmark */
--jc-font-display: 'Cormorant Garamond', Georgia, serif; /* títulos */
--jc-font-body: 'DM Sans', system-ui, sans-serif; /* cuerpo */
--jc-font-mono: 'DM Mono', ui-monospace, monospace; /* datos/labels */
/* ── TYPE WEIGHTS ───────────────────────────────────────────── */
--jc-w-light: 300;
--jc-w-regular: 400;
--jc-w-medium: 500;
--jc-w-semi: 600;
/* ── TYPE SCALE (px refs from brand book) ───────────────────── */
--jc-h1: clamp(3.5rem, 6vw, 5.5rem); /* Cormorant 300, -0.02em */
--jc-h2: clamp(2rem, 3.5vw, 3rem); /* Cormorant 300, -0.01em */
--jc-h3: 1.75rem; /* Cormorant 600, 0 */
--jc-lead: 1.0625rem; /* DM Sans 400 */
--jc-body: 0.9375rem; /* DM Sans 300 */
--jc-small: 0.8125rem; /* DM Sans 300 */
--jc-eyebrow: 0.6rem; /* DM Mono 400, 0.3em */
--jc-label: 0.6875rem; /* DM Mono 400, 0.2em */
/* ── SPACING (8pt-ish, editorial) ──────────────────────────── */
--jc-space-1: 0.25rem;
--jc-space-2: 0.5rem;
--jc-space-3: 0.75rem;
--jc-space-4: 1rem;
--jc-space-6: 1.5rem;
--jc-space-8: 2rem;
--jc-space-12: 3rem;
--jc-space-16: 4rem;
--jc-space-24: 6rem;
--jc-section-x: 5rem; /* horizontal padding de sección */
--jc-section-y: 6rem; /* vertical padding de sección */
/* ── RADII — el sistema es de bordes RECTOS ─────────────────── */
--jc-radius-0: 0; /* default: todo recto, incl. el símbolo */
--jc-radius-sm: 2px; /* máximo permitido en controles UI sutiles */
/* ── ELEVATION — austero, casi sin sombra ───────────────────── */
--jc-shadow-none: none;
--jc-shadow-card: 0 1px 2px rgba(42,38,32,0.04); /* apenas perceptible */
--jc-shadow-pop: 0 12px 32px -12px rgba(42,38,32,0.18); /* menús / overlays */
/* ── BORDERS ────────────────────────────────────────────────── */
--jc-border: 1px solid var(--jc-rule);
--jc-border-top-accent: 2px solid var(--jc-gold); /* tarjetas KPI / docs */
/* ── MOTION — fades sobrios, sin bounce ─────────────────────── */
--jc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--jc-dur-fast: 0.18s;
--jc-dur: 0.3s;
--jc-dur-slow: 0.65s;
}
/* ════════════════════════════════════════════════════════════════════
SEMANTIC ELEMENT STYLES — opt-in via .jc-prose or apply directly
════════════════════════════════════════════════════════════════════ */
.jc-eyebrow {
font-family: var(--jc-font-mono);
font-size: var(--jc-eyebrow);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--jc-gold);
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.jc-eyebrow::before {
content: '';
display: block;
width: 1.75rem;
height: 1px;
background: var(--jc-gold);
}
.jc-h1 {
font-family: var(--jc-font-display);
font-weight: var(--jc-w-light);
font-size: var(--jc-h1);
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--jc-ink);
}
.jc-h2 {
font-family: var(--jc-font-display);
font-weight: var(--jc-w-light);
font-size: var(--jc-h2);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--jc-ink);
}
.jc-h3 {
font-family: var(--jc-font-display);
font-weight: var(--jc-w-semi);
font-size: var(--jc-h3);
line-height: 1.1;
color: var(--jc-ink);
}
/* Énfasis dorado en itálica dentro de titulares */
.jc-h1 em, .jc-h2 em, .jc-h3 em {
font-style: italic;
color: var(--jc-gold);
}
.jc-lead {
font-family: var(--jc-font-body);
font-weight: var(--jc-w-regular);
font-size: var(--jc-lead);
line-height: 1.8;
color: var(--jc-stone);
}
.jc-body {
font-family: var(--jc-font-body);
font-weight: var(--jc-w-light);
font-size: var(--jc-body);
line-height: 1.75;
color: var(--jc-ink);
}
.jc-small {
font-family: var(--jc-font-body);
font-weight: var(--jc-w-light);
font-size: var(--jc-small);
line-height: 1.7;
color: var(--jc-stone);
}
.jc-label {
font-family: var(--jc-font-mono);
font-size: var(--jc-label);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--jc-stone);
}
.jc-data {
font-family: var(--jc-font-mono);
font-weight: var(--jc-w-medium);
font-size: 0.875rem;
color: var(--jc-ink);
}
/* KPI / cifra de impacto */
.jc-figure {
font-family: var(--jc-font-display);
font-weight: var(--jc-w-light);
font-size: 2.5rem;
line-height: 1;
letter-spacing: -0.02em;
color: var(--jc-gold);
}
/* Wordmark — uso EXCLUSIVO del logo */
.jc-wordmark {
font-family: var(--jc-font-logo);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
color: var(--jc-ink);
}