/* ============================================================ GRUPO SUMMUM — colors_and_type.css Sistema de tokens compartidos por las 6 marcas del grupo. Notas: - El sistema es el mismo en las 6 marcas; SÓLO cambia el "accent" (el color del estado / la doble u oscilante). - El fondo es siempre el papel (#FAFAF7). Modo oscuro disponible vía html[data-theme="dark"]. - Fuentes: Fraunces (display), Geist (sans), Geist Mono. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap'); :root { /* ============ FONT FAMILIES ============ */ --display: 'Fraunces', 'Instrument Serif', Georgia, serif; /* @kind font */ --serif: 'Fraunces', 'Instrument Serif', Georgia, serif; /* @kind font */ --sans: 'Geist', 'Inter', system-ui, sans-serif; /* @kind font */ --mono: 'Geist Mono', ui-monospace, monospace; /* @kind font */ /* ============ NEUTRAL PALETTE (compartida) ============ */ --paper: #FAFAF7; /* fondo principal */ --paper-soft: #F0EDE5; /* fondo secundario / hover */ --paper-warm: #F6E9D7; /* warm beige (cards cálidos) */ --paper-cream: #F7F2E5; /* sec-cover, papelería */ --ink: #0A0A0A; /* tinta principal */ --ink-soft: #16140F; /* tinta secundaria (footer alt) */ /* fg sobre papel */ --fg: #0A0A0A; --fg-dim: rgba(10, 10, 10, 0.62); --fg-mute: rgba(10, 10, 10, 0.42); --fg-faint: rgba(10, 10, 10, 0.18); --line: rgba(10, 10, 10, 0.10); --line-strong: rgba(10, 10, 10, 0.22); /* fg sobre tinta (invertido) */ --inv: #FAFAF7; --inv-dim: rgba(250, 250, 247, 0.70); --inv-mute: rgba(250, 250, 247, 0.45); --inv-line: rgba(250, 250, 247, 0.14); /* ============ ACCENT POR EMPRESA ============ Cambia --accent y --accent-deep en la raíz de cada sub-marca. Por defecto: marketing (naranja). */ --accent: #FF5E1A; --accent-deep: #E04F0F; --accent-soft: rgba(255, 94, 26, 0.12); /* tokens auxiliares cálidos */ --yellow: #FFD66B; --gold: #B89968; /* ocre champán apagado, no metalizado */ --gold-deep:#8E7344; --gold-soft:#E0CBA6; /* gradiente dorado refinado: monocromático, sin reflejos */ --gold-grad: linear-gradient(135deg, #A88959 0%, #C9A876 55%, #8E6F3E 100%); /* @kind color */ /* ============ SHAPE ============ */ --radius-sm: 8px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; /* ============ SHADOW ============ */ --shadow-1: 0 1px 0 var(--line); --shadow-2: 0 4px 14px rgba(10, 10, 10, 0.06); --shadow-3: 0 12px 32px rgba(10, 10, 10, 0.10); --shadow-4: 0 28px 64px rgba(10, 10, 10, 0.14); /* ============ LAYOUT ============ */ --max: 1680px; --pad-x: 56px; --nav-h: 88px; /* ============ SEMÁNTICOS (vinculados a la escala) ============ */ --h1-size: clamp(56px, 8vw, 132px); --h2-size: clamp(40px, 5.5vw, 84px); --h3-size: clamp(28px, 3.5vw, 48px); --h4-size: clamp(20px, 2vw, 28px); --lead-size: 20px; --body-size: 15px; --body-l-size: 17px; --eyebrow-size: 11px; } /* ============================================================ PALETAS POR SUB-MARCA Aplica una de estas clases al (o al ) para activar el accent de la empresa. ============================================================ */ .brand-marketing { --accent: #FF5E1A; --accent-deep: #E04F0F; --accent-soft: rgba(255,94,26,0.12); --accent-on-dark: #FF7B3F; } .brand-consultoria { --accent: #0A0A0A; --accent-deep: #000000; --accent-soft: rgba(10,10,10,0.06); --accent-on-dark: #E0CBA6; } .brand-sistemas { --accent: #D89856; --accent-deep: #B87C3C; --accent-soft: rgba(216,152,86,0.14); --accent-on-dark: #E8B375; } .brand-ia { --accent: #5A95D6; --accent-deep: #3F77B6; --accent-soft: rgba(90,149,214,0.14); --accent-on-dark: #7CB0E6; } .brand-calidad { --accent: #5FB394; --accent-deep: #408F73; --accent-soft: rgba(95,179,148,0.14); --accent-on-dark: #7BC9A9; } /* paleta "paraguas" Summum — ocre champán apagado (sin metaliz) */ .brand-summum { --accent: #B89968; --accent-deep: #8E7344; --accent-soft: rgba(184,153,104,0.14); --accent-on-dark: #D6BC8E; --accent-grad: var(--gold-grad); } /* ============================================================ MODO OSCURO (raro en el grupo; sí en footers) ============================================================ */ html[data-theme="dark"] { --paper: #0F0E0C; --paper-soft: #18170F; --paper-warm: #1F1B14; --ink: #FAFAF7; --fg: #FAFAF7; --fg-dim: rgba(250,250,247,0.70); --fg-mute: rgba(250,250,247,0.45); --fg-faint: rgba(250,250,247,0.18); --line: rgba(250,250,247,0.14); --line-strong: rgba(250,250,247,0.28); --inv: #0F0E0C; --inv-dim: rgba(15,14,12,0.70); --inv-mute: rgba(15,14,12,0.45); --inv-line: rgba(15,14,12,0.14); } /* ============================================================ RESET MÍNIMO + DEFAULTS ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } /* ============================================================ TIPOGRAFÍA SEMÁNTICA ============================================================ */ .eyebrow { font-family: var(--mono); font-size: var(--eyebrow-size); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); font-weight: 500; } .eyebrow.on-dark { color: var(--inv-mute); } .eyebrow .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; transform: translateY(-1px); } .h-display, .h1, .h2, .h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; margin: 0; } .h1 { font-size: var(--h1-size); } .h2 { font-size: var(--h2-size); } .h3 { font-size: var(--h3-size); } .h4 { font-family: var(--display); font-size: var(--h4-size); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } /* Italics — la firma del sistema. Siempre cursiva + accent. */ .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; } .it.accent { color: var(--accent); } /* Subrayado amarillo (energy mark) — sólo Marketing por ahora */ .underline-mark { background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-size: 100% 28%; background-position: 0 86%; padding: 0 4px; } .lead { font-size: var(--lead-size); line-height: 1.5; max-width: 56ch; color: var(--fg); } .body-l { font-size: var(--body-l-size); line-height: 1.55; color: var(--fg); } .body { font-size: var(--body-size); line-height: 1.55; color: var(--fg-dim); } p { margin: 0 0 1em; } /* Code / mono */ code, .mono { font-family: var(--mono); } /* ============================================================ UTILIDADES DE LAYOUT ============================================================ */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); } .stack { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; } .gap-4 { gap: 32px; } .gap-5 { gap: 48px; } /* ============================================================ A11Y ============================================================ */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ RESPONSIVE BASE ============================================================ */ @media (max-width: 900px) { :root { --pad-x: 24px; --nav-h: 64px; } }