/* ============================================================ TREZUM — Colors & Type Alineado al Manual Maestro de Identidad Visual v1.2 Sección 4 (Paleta) · Sección 5 (Tipografía) · Sección 6 (Espaciado) ============================================================ */ /* --- Webfonts -------------------------------------------------- 5.1 BOMBSTAD DISPLAY SEMIBOLD — reservado al wordmark vectorial. 5.2 OUTFIT — sistema completo. Pesos aprobados 400/600/700/800. La fuente se carga async desde HTML (no @import) para preservar PageSpeed — ver CLAUDE.md regla 5. ----------------------------------------------------------------*/ :root { /* ============================================================ PALETA — Sección 4.1 3 institucionales + 2 de soporte. No se añade ningún color. ============================================================ */ /* --- Institucionales (comunicación externa) --- */ --trz-navy: #191C46; /* Estructura, headlines, footers */ --trz-coral: #D05C46; /* Acción, CTA, highlight, KPIs */ --trz-white: #FFFFFF; /* Fondo principal, texto sobre navy */ /* --- Soporte (infraestructura interna) --- */ --trz-text-2: #4A4A62; /* Cuerpo sobre fondo claro */ --trz-gray: #F5F5FA; /* Fondos alternos, inputs */ /* --- Derivados documentados del manual --- */ --trz-border: rgba(25, 28, 70, 0.15); /* 4.1 · bordes sutiles */ --trz-white-85: rgba(255, 255, 255, 0.85); --trz-white-75: rgba(255, 255, 255, 0.75); --trz-white-70: rgba(255, 255, 255, 0.70); --trz-white-50: rgba(255, 255, 255, 0.50); --trz-white-pattern: rgba(255, 255, 255, 0.04); /* 3.2 · patrón */ --trz-white-hero-shape: rgba(255, 255, 255, 0.06); /* 3.2/7.5 · paralelogramo hero blog */ --trz-overlay-navy: rgba(25, 28, 70, 0.70); /* 9.5 · overlay sobre foto (60-80%) */ /* --- Tokens semánticos --- */ --bg-page: var(--trz-white); --bg-alt: var(--trz-gray); --bg-inverse: var(--trz-navy); --fg-1: var(--trz-navy); /* headlines, cuerpo principal sobre claro */ --fg-2: var(--trz-text-2); /* cuerpo/descripciones */ --fg-on-inverse: var(--trz-white); --fg-accent: var(--trz-coral); --border: var(--trz-border); --border-accent: var(--trz-coral); /* ============================================================ TIPOGRAFÍA — Sección 5 ============================================================ */ --font-body: "Outfit", system-ui, -apple-system, "Helvetica Neue", sans-serif; /* BOMBSTAD: solo para wordmark vectorial; no debe renderizarse como webfont en UI. */ /* Pesos aprobados */ --fw-regular: 400; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* Escala tipográfica — 5.2 */ --fs-h1-hero: 56px; /* 48–60 px */ --fs-h1-inner: 44px; /* 40–48 px */ --fs-h2: 32px; /* 30–36 px */ --fs-h3: 24px; /* 22–26 px */ --fs-eyebrow: 12px; /* 11–13 px */ --fs-body: 17px; /* 16–18 px */ --fs-caption: 13px; /* 12–14 px */ --fs-cta: 16px; /* 15–17 px */ /* Line heights — 5.3 */ --lh-headline: 1.15; /* 1.1–1.2 */ --lh-body: 1.7; /* 1.6–1.8 */ /* Letter spacing */ --ls-tight: -0.01em; --ls-normal: 0; --ls-eyebrow: 0.08em; /* 5.2 eyebrow / kicker */ --ls-sig-cargo: 0.13em; /* 11.7 cargo firma correo 0.12–0.15em */ /* ============================================================ ESPACIADO — Sección 6.1 (web) ============================================================ */ --sp-section: 100px; /* 80–120 px entre secciones full-width */ --sp-h2-p: 20px; /* 16–24 px H2 → párrafo */ --sp-p-p: 14px; /* 12–16 px párrafo → párrafo */ --sp-h3-p: 10px; /* 8–12 px H3 → párrafo */ --pad-card-lg: 40px; /* 32–48 px card grande */ --pad-card-md: 24px; /* 20–28 px card mediana */ /* Escala utilitaria 4px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px; --sp-11: 120px; /* ============================================================ BORDER RADIUS — Sección 6.2 Solo tres valores. Cualquier otro es inválido. ============================================================ */ --radius-institutional: 20px; /* cards principales, hero card, CTA navy */ --radius-secondary: 12px; /* cards medianas, callouts, métrica */ --radius-functional: 10px; /* botones, inputs, pills, pill coral 8.7 */ /* ============================================================ SOMBRAS — Sección 6.3 La ÚNICA sombra del sistema es la sombra doble de cards. Botones van planos (sin sombra). ============================================================ */ --shadow-card: 0 12px 60px rgba(25, 28, 70, 0.12), 0 2px 8px rgba(25, 28, 70, 0.06); /* ============================================================ FIRMA VISUAL — Sección 7 ============================================================ */ --gradient-brand: linear-gradient(to right, #D05C46, #191C46); /* 7.1 · franja 4 px */ --brand-accent-h: 4px; /* alto franja */ --brand-bar-w: 3px; /* 7.2 barra vertical coral */ /* ============================================================ SISTEMA GEOMÉTRICO — Sección 3 ============================================================ */ --brand-angle: 21deg; /* 3.1 · ángulo de marca, pendiente ascendente */ /* ============================================================ MOTION ============================================================ */ --dur-fast: 120ms; --dur-base: 200ms; --ease-standard: cubic-bezier(.2, .7, .2, 1); /* ============================================================ LAYOUT ============================================================ */ --max-content: 1200px; --nav-height: 68px; /* 64–72 px desktop (11.1) */ /* ============================================================ ALIASES LEGACY (landing pre-DS) → tokens institucionales Mantienen compatibilidad con style.css y CSS de blogs viejos. Para código nuevo, usar --trz-* directamente. ============================================================ */ --color-primary: var(--trz-navy); --color-accent: var(--trz-coral); --color-text: var(--trz-navy); --color-text-light: var(--trz-text-2); --color-bg: var(--trz-white); --color-bg-input: #FAFAFA; --color-border: var(--trz-border); --color-border-light: rgba(25, 28, 70, 0.08); --color-white-70: rgba(255, 255, 255, 0.78); --color-white-50: rgba(255, 255, 255, 0.6); --color-white-10: rgba(255, 255, 255, 0.1); --font-family: var(--font-body); --radius-sm: var(--radius-functional); --radius-md: var(--radius-secondary); --radius-lg: var(--radius-institutional); --shadow-cta: 0 4px 20px rgba(208, 92, 70, 0.3); --shadow-cta-hover: 0 8px 28px rgba(208, 92, 70, 0.4); } /* ============================================================ BASE ============================================================ */ html, body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--fg-2); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ ESTILOS SEMÁNTICOS Todo headline usa Outfit Extra-bold (800). Highlight coral obligatorio en H1/H2 (se aplica con .hl). ============================================================ */ .h1-hero, .h1, .h2 { font-family: var(--font-body); font-weight: var(--fw-black); /* 800 */ color: var(--trz-navy); line-height: var(--lh-headline); letter-spacing: var(--ls-tight); text-wrap: balance; text-align: left; } .h1-hero { font-size: var(--fs-h1-hero); } .h1 { font-size: var(--fs-h1-inner); } .h2 { font-size: var(--fs-h2); } .h3 { font-family: var(--font-body); font-weight: var(--fw-bold); /* 700 */ color: var(--trz-navy); font-size: var(--fs-h3); line-height: var(--lh-headline); text-align: left; } .body, p { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--fg-2); text-align: left; } .caption { font-size: var(--fs-caption); font-weight: var(--fw-semi); /* 5.2 · caption semi-bold */ color: var(--fg-2); } /* Eyebrow / Kicker — 5.2 */ .eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-semi); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--trz-coral); } /* Highlight coral — 7.4 (obligatorio en H1/H2) */ .hl { color: var(--trz-coral); font-weight: inherit; /* mismo peso que el headline */ } /* CTA text — 5.2 */ .cta-text { font-size: var(--fs-cta); font-weight: var(--fw-semi); letter-spacing: var(--ls-normal); } /* Texto sobre navy — 4.3 */ .on-navy { color: var(--trz-white); } .on-navy .body, .on-navy p { color: var(--trz-white-75); } /* body 75% */ .on-navy-photo p { color: var(--trz-white-85); } /* sobre foto con overlay navy */ /* Cifras tabulares — 10.2 */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Links — 5.2 */ a { color: var(--trz-navy); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--trz-coral); } ::selection { background: var(--trz-coral); color: var(--trz-white); } /* ============================================================ UTILITARIOS DE FIRMA VISUAL — Sección 7 ============================================================ */ /* 7.1 · Franja gradiente brand de 4 px */ .brand-accent-top { position: relative; } .brand-accent-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--brand-accent-h); background: var(--gradient-brand); border-top-left-radius: inherit; border-top-right-radius: inherit; } /* 7.2 · Barra vertical coral */ .coral-bar-left { border-left: var(--brand-bar-w) solid var(--trz-coral); padding-left: 16px; } /* 7.3 · Checks Trezum */ .trz-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--trz-navy); color: var(--trz-white); flex: none; } /* 8.5 · Pill / Badge / Kicker con borde coral */ .trz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid var(--trz-coral); border-radius: var(--radius-functional); font-size: 11px; font-weight: var(--fw-semi); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--trz-coral); background: transparent; } /* 8.7 · Pill coral con ícono (contacto) */ .trz-icon-pill { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--trz-coral); border-radius: var(--radius-functional); color: var(--trz-white); flex: none; }