/* GENERADO — no editar. Fuente: 02-brand/tokens/tokens.css * Regenerar con: 05-website/build.py */ /* Home Refresh — design tokens * FUENTE ÚNICA DE VERDAD DE COLOR. * Fluye hacia: Figma Make, el Figma de desarrollo, el sitio y la papelería. * Nunca al revés. Si un hex aparece hardcodeado fuera de este archivo, es un bug. * * Los azules están muestreados directamente de 02-brand/logo_no_fondo.png * para que el sitio empate exactamente con el logo. */ :root { /* ---- Marca ---- */ --hr-navy: #001F6B; /* primario. Alineado al mockup aprobado el 2026-07-31; antes #003A85. El nuevo es más oscuro, así que el contraste sobre blanco SUBE de 10.80 a 14.91:1. */ --hr-navy-deep: #011A5C; /* hover, headers, fondos oscuros */ --hr-blue: #0058A8; /* secundario. 7.1:1 sobre blanco (AA) */ --hr-cyan: #00A0D0; /* muestreado del logo. 3.03:1 sobre BLANCO, pero 2.87:1 sobre --hr-paper, que es el fondo real de la página: NO cumple el mínimo de 3:1 de componente de interfaz. Solo rellenos grandes decorativos. Para bordes, foco e iconos usar --hr-cyan-ui. */ --hr-cyan-ui: #0093C0; /* el cian oscurecido lo justo para pasar 3:1 sobre paper (3.35:1) y sobre blanco (3.54:1). Este es el que alimenta --hr-accent. */ --hr-slate-on-photo: #3D4B55; /* gris secundario para texto ENCIMA de foto. --hr-slate (#5A6B75) da 3.41:1 sobre las zonas oscuras del héroe de la landing, medido con la foto compuesta bajo el velo. Este da 5.55:1. Reforzar el velo también servía, pero exigía tanto blanco que apagaba la foto. */ --hr-cyan-bright: #00AEEF; /* cian exacto del mockup, muestreado de la imagen. Decisión de Alex el 2026-07-31, con la medida sobre la mesa: con texto blanco encima da 2.53:1 y el mínimo WCAG para texto es 4.5:1. Solo lo usa la franja .lp-strip. NO usar para texto ni para nada que dependa de leerse. */ --hr-cyan-deep: #007FAE; /* cian para RELLENOS que llevan texto blanco ENCIMA. El más brillante del tono del mockup (#00AEEF) que aún da 4.5:1 con blanco — exactamente 4.52:1. */ --hr-cyan-text: #0077A0; /* cian para TEXTO sobre fondo claro. Es el mismo problema al revés: como texto sobre --hr-paper, --hr-cyan-deep solo da 4.28:1. Este da 4.80:1. Un único token no puede servir a los dos usos: relleno quiere el más claro posible y texto el más oscuro. Lo usan .chip y .field .req. */ --hr-cyan-soft: #E6F4FA; /* fondos de sección, tarjetas destacadas */ /* ---- Neutros ---- */ --hr-white: #FFFFFF; --hr-paper: #F7F9FA; /* fondo de página */ --hr-mist: #D8E0E0; /* bordes suaves. muestreado del logo */ --hr-line: #C8D2D8; /* bordes y separadores */ --hr-slate: #5A6B75; /* texto secundario. 5.2:1 sobre blanco (AA) */ --hr-ink: #14202B; /* texto principal */ /* ---- Semánticos ---- */ --hr-bg: var(--hr-paper); --hr-surface: var(--hr-white); --hr-surface-alt: var(--hr-cyan-soft); /* tarjetas y bandas destacadas */ --hr-text: var(--hr-ink); --hr-text-muted: var(--hr-slate); --hr-border: var(--hr-line); --hr-primary: var(--hr-navy); --hr-primary-hover: var(--hr-navy-deep); /* La capa semántica es donde se hace cumplir la accesibilidad: el acento * apunta al cian corregido, no al muestreado del logo. */ --hr-accent: var(--hr-cyan-ui); /* Titulares. La referencia usa un navy casi negro para el titular y un azul * brillante para las palabras de énfasis (efecto bicolor). * El #1684fb de la referencia da 3.3:1 sobre blanco y falla AA para texto: * el énfasis usa --hr-blue (7.1:1) y el efecto se conserva igual. */ --hr-navy-deepest: #001845; /* titulares. Ajustado con el navy nuevo. */ --hr-heading: var(--hr-navy-deepest); --hr-heading-accent: var(--hr-blue); /* ---- Sobre banda oscura ---- * Para secciones full-bleed en navy. No dependen del modo: la banda es * oscura en claro y en oscuro, así que estos valores son fijos. */ --hr-dark-band: var(--hr-navy-deep); --hr-on-dark: var(--hr-white); --hr-on-dark-muted: rgba(255,255,255,.72); /* 8.6:1 sobre #002B6B */ --hr-on-dark-border: rgba(255,255,255,.16); /* ---- Estado ---- */ --hr-success: #1E7A4B; --hr-warning: #A8681B; --hr-danger: #B3261E; /* ---- Espaciado ---- */ --hr-space-1: 4px; --hr-space-2: 8px; --hr-space-3: 12px; --hr-space-4: 16px; --hr-space-5: 24px; --hr-space-6: 32px; --hr-space-7: 48px; --hr-space-8: 64px; --hr-space-9: 96px; --hr-space-10: 128px; /* padding vertical de héroe en desktop */ /* ---- Radios ---- */ --hr-radius-sm: 6px; --hr-radius-md: 10px; --hr-radius-lg: 16px; --hr-radius-xl: 20px; /* radio dominante de tarjeta */ --hr-radius-2xl: 40px; /* contenedores grandes de imagen */ --hr-radius-pill: 999px; /* ---- Layout ---- */ --hr-container: 1320px; /* ancho máximo de contenido */ --hr-gutter: var(--hr-space-5); --hr-bp-md: 810px; /* tablet */ --hr-bp-lg: 1200px; /* desktop */ --hr-bp-xl: 1440px; /* amplio */ /* ---- Tipografía ---- */ --hr-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --hr-font-display: var(--hr-font-sans); --hr-text-xs: 12px; --hr-text-sm: 14px; --hr-text-base: 16px; --hr-text-lg: 18px; --hr-text-xl: 22px; --hr-text-2xl: 28px; --hr-text-3xl: 36px; --hr-text-4xl: 48px; --hr-text-5xl: 60px; /* Escala display — solo marketing. Titulares en caja alta. * Se separa de la escala de UI arriba porque su ritmo lo dicta el diseño * de la plantilla, no el paso modular de los componentes. */ --hr-display-1: 80px; /* H1 desktop */ --hr-display-2: 40px; /* H2 desktop */ --hr-display-3: 28px; /* H4, cifras de estadística */ --hr-leading-display: 1.1; --hr-leading-tight: 1.15; --hr-leading-snug: 1.2; --hr-leading-normal: 1.55; --hr-leading-loose: 1.6; --hr-tracking-tight: -.02em; --hr-tracking-tighter: -.04em; --hr-tracking-caps: .08em; /* eyebrows en caja alta */ /* ---- Sombras ---- */ --hr-shadow-sm: 0 1px 2px rgba(20,32,43,.06); --hr-shadow-md: 0 4px 14px rgba(20,32,43,.08); --hr-shadow-lg: 0 12px 32px rgba(20,32,43,.10); } /* ---- Escala display responsiva ---- * Los pasos salen de la plantilla analizada en 05-website/SPECS.md. * Mobile primero: los valores de :root son los de móvil, y suben. */ :root { --hr-display-1: 40px; --hr-display-2: 28px; --hr-display-3: 23px; } @media (min-width: 810px) { :root { --hr-display-1: 56px; --hr-display-2: 40px; --hr-display-3: 29px; } } @media (min-width: 1200px) { :root { --hr-display-1: 80px; } } /* ---- Modo oscuro ---- * Dos bloques separados a propósito. Una @media NO puede vivir dentro de una * lista de selectores: `:root[data-theme="dark"], @media (...)` es CSS * inválido y el navegador descarta la regla completa, dejando el modo oscuro * sin efecto. Este archivo lo tuvo hasta 2026-07-29. */ :root[data-theme="dark"] { --hr-bg: #0D1620; --hr-surface: #141F2B; --hr-surface-alt:#182634; --hr-text: #EAF0F4; --hr-text-muted: #94A5B0; --hr-border: #24323F; /* en oscuro el navy no contrasta: se sube al azul medio */ --hr-primary: #4A9BE0; --hr-primary-hover:#6FB2EC; /* en oscuro el cian sí contrasta: 6.0:1 sobre --hr-bg */ --hr-accent: var(--hr-cyan); /* el navy profundo desaparece sobre fondo oscuro */ --hr-heading: var(--hr-text); --hr-heading-accent: #6FB2EC; /* el danger de modo claro da 2.55:1 sobre superficie oscura — hay que subirlo */ --hr-danger: #EC7A72; /* la banda oscura tiene que separarse del fondo, que ya es oscuro */ --hr-dark-band: #0A1526; } /* ---- Modo oscuro automático, desactivado (2026-07-31) ---- * Al quitar el conmutador, este bloque quedaría como única vía de entrada al * modo oscuro — y las hojas nuevas (landing, turnover, commercial) usan hex * claros fijos que no se adaptan. El resultado sería medio sitio oscuro y medio * claro para quien tenga el sistema en oscuro. Se conserva el bloque comentado * por si algún día se rehace el modo oscuro con las tres hojas incluidas. */ /* DESACTIVADO @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hr-bg: #0D1620; --hr-surface: #141F2B; --hr-surface-alt:#182634; --hr-text: #EAF0F4; --hr-text-muted: #94A5B0; --hr-border: #24323F; --hr-primary: #4A9BE0; --hr-primary-hover:#6FB2EC; --hr-accent: var(--hr-cyan); --hr-heading: var(--hr-text); --hr-heading-accent: #6FB2EC; --hr-danger: #EC7A72; --hr-dark-band: #0A1526; } } /* NOTAS DE ACCESIBILIDAD * Ratios medidos, no estimados. Auditoría del 2026-07-29 sobre los 24 pares * texto/fondo del sistema, en ambos modos, compositando alfa antes de medir. * * --hr-cyan (#00A0D0) da 3.03:1 sobre BLANCO pero 2.87:1 sobre --hr-paper, que * es el fondo real de la página. Falla el 3:1 de componente de interfaz por muy * poco, y la nota anterior de este archivo lo daba por aprobado porque medía * contra blanco. Por eso --hr-accent apunta ahora a --hr-cyan-ui (#0093C0, * 3.35:1 sobre paper). Ninguno de los dos sirve para texto: siguen lejos del 4.5:1. * * --hr-navy sobre fondo oscuro no contrasta. Por eso el modo oscuro sube a * #4A9BE0, que da 6.4:1 sobre --hr-bg. *\/ */