/* * Design tokens — Acturion Group. * Fuente única de verdad para color, tipografía, espaciado y layout. * Todo widget/estilo consume estas variables; ningún archivo CSS declara valores sueltos. * * PROCEDENCIA (para validar): * [figma] valor expuesto como variable en el archivo de Figma. * [svg] extraído literalmente de los SVG exportados (degradados y sus stops). * [volcado] deducido de las medidas repetidas en docs/pages/*.txt (frecuencias reales). * [deducido] extremo mobile de una escala sin dato en el volcado; validar contra PNG. * [convención] no sale del diseño; criterio propio, cambiar sin miedo. * * Escala fluida: clamp(min, intercepto + pendiente*vw, max), lineal entre 375px y 1440px, * de modo que a 375 vale exactamente el mínimo y a 1440 exactamente el máximo. */ :root { /* ================= Color ================= */ /* Marca [figma] */ --acturion-dark-blue: #0B0E54; --acturion-deep-blue: #090E5C; --acturion-soft-beige: #F0ECE7; --acturion-light-seashell: #F9F5F0; /* Intermedios de los degradados [svg] — los usan las barras gráficas y las cards */ --acturion-blue: #0037A5; --acturion-light-blue: #699BD6; --acturion-sky: #8AB4ED; --acturion-sand: #E0CAAE; --acturion-tan: #D0A371; /* Neutro [deducido]: texto del hero sobre video */ --acturion-white: #FFFFFF; /* [figma] «Red» de la lámina de color del UI Kit (grupo «Additional»): el color de error de los formularios (estado Mistake de los inputs). */ --acturion-red: #E21114; /* [figma] Acento del logotipo: el cuadrito marrón encajado en la «A». No está tokenizado como variable en Figma, pero el export de la instancia de cabecera (1365:8411) lo trae literal — y con el MISMO valor en las dos variantes de color, la oscura y la clara, así que no se invierte con el resto de la palabra. */ --acturion-logo-accent: #644D35; /* Degradados [svg] — Gradient1 y Gradient2 de Figma; los stops son literales del SVG. Ambos arrancan sólidos hasta el 31.7% y se leen de arriba hacia abajo en el diseño. */ --acturion-gradient-1: linear-gradient( to bottom, var(--acturion-deep-blue) 31.7%, var(--acturion-blue) 67.8%, var(--acturion-light-blue) 100% ); --acturion-gradient-2: linear-gradient( to bottom, var(--acturion-sky) 31.7%, var(--acturion-sand) 68.3%, var(--acturion-tan) 100% ); /* Franja completa de la tira lateral. NO es un degradado de seis stops: son los DOS degradados apilados, cada uno completo dentro de su bloque, cortados al 29.5%. Verificado muestreando home-desktop.png (Group 107 = 236/800 = 29.5%) y home-mobile.png (65/230 = 28.3%); se usa 29.5%. Va como lista de capas de `background`, así que se aplica con `background: var(--acturion-gradient-strip)`. */ --acturion-gradient-strip: var(--acturion-gradient-1) left top / 100% 29.5% no-repeat, /* +1px de solape: en alturas fraccionarias el redondeo de las dos capas deja una rendija del color de fondo entre ambas (ver .acturion-cta__bar). */ var(--acturion-gradient-2) left bottom / 100% calc(70.5% + 1px) no-repeat; /* Degradados de las tarjetas de Leadership [svg] — stops literales de los vectores del branch «Confirmed» (1365:8360/8361 y variantes por composición). NO son gradient-1/-2: difieren en hex y en cortes. Los tres tamaños de bloque usan la misma rampa normalizada sobre su propio alto, así que un par de tokens basta. */ --acturion-card-gradient-blue: linear-gradient(180deg, #091060 41%, #0035A2 80.6%, #6395D3 98.8%); --acturion-card-gradient-sand: linear-gradient(0deg, #C7AB83 7.7%, #D6C5A8 49.1%, #9BB4E6 86.9%); /* Semánticos */ /* [render] El fondo BASE de todas las páginas es soft beige: muestreado en los siete renders desktop de assets-figma/screens (240,236,231 en todos) y en los frames mobile del branch. Light seashell queda para las superficies que flotan encima (tarjetas de principios, cards de «Why Acturion?», campos de formulario). Ojo: CLAUDE.md §4 describe los papeles al revés; los renders mandan. */ --acturion-color-text: var(--acturion-dark-blue); --acturion-color-bg: var(--acturion-soft-beige); --acturion-color-surface: var(--acturion-light-seashell); --acturion-color-inverse: var(--acturion-white); --acturion-color-accent: var(--acturion-blue); --acturion-color-focus: var(--acturion-blue); /* sobre fondos oscuros, los widgets lo cambian a --acturion-sky */ /* ================= Tipografía ================= */ /* Familia [figma]. Neue Montreal la sirve fonts.css cuando existan los .woff2. */ /* [medido] El respaldo NO da la misma métrica que Neue Montreal, y eso se ve. Referencia: la frase de la tarjeta «Trusted Partnership» a 18px mide 863px en el render de Figma; en cualquier sans disponible aquí (Helvetica, Arial, system-ui, sans-serif) mide 925-927, un 7.2% MÁS ANCHA. Consecuencia directa: los párrafos ganan una línea y las secciones crecen — la tarjeta de «Why Acturion?» mide 503 en vez de los 480 del diseño, y ese desfase se acumula hacia abajo. Se probaron Helvetica Neue, Avenir Next, Inter, Roboto y las UI del sistema: no hay ninguna instalada con métrica más cercana, así que reordenar el stack no arregla nada. Es el techo de fidelidad tipográfica cuando el respaldo está en uso; con los .woff2 en assets/fonts/ manda la primera familia y el resto del stack deja de usarse. */ --acturion-font-sans: "Neue Montreal", "Neue Haas Grotesk", "Helvetica Now", Inter, system-ui, -apple-system, sans-serif; /* Pesos [figma MCP 2026-09-15]: Regular en cuerpos y titulares de seccion; Medium en heros, subtitulos, nombres y botones; Light en los numerales grandes. Los tres woff2 (Light/Regular/Medium) viven en assets/fonts/ (fonts.css). */ --acturion-weight-light: 300; --acturion-weight-regular: 400; --acturion-weight-medium: 500; /* Interlineado [figma MCP 2026-09-15]: TODOS los titulares y numerales del branch van a 0.9; el 1.2 es solo del cuerpo. El 1.2 anterior salia del volcado, pero las cajas no distinguen 64/1.2 de 85/0.9 (76.8 vs 76.5): leyendo los nodos por MCP, cada titular resulto ser la lectura 0.9 con la fuente mayor. */ --acturion-lh-body: 1.2; --acturion-lh-heading: 0.9; --acturion-lh-display: 0.9; /* Cuerpo fijo [figma] */ --acturion-body-18: 18px; --acturion-body-14: 14px; --acturion-description: 12px; /* Cuerpo mobile [volcado]: caja de 19px (=16×1.2) aparece 51 veces; no estaba en Figma como token. */ --acturion-body-16: 16px; /* Cuerpo fluido 16 -> 18 (default del body) */ --acturion-body: clamp(1rem, 0.956rem + calc(0.188 * var(--acturion-vw)), 1.125rem); /* [figma MCP] «BodyText_21» del UI Kit: cuerpo del articulo de News (1365:9788/9794), cargos de Leadership y numeros de las clausulas legales. Mobile [deducido] 16, como el resto del cuerpo. */ --acturion-body-21: clamp(1rem, 0.89rem + calc(0.469 * var(--acturion-vw)), 1.3125rem); /* 16 -> 21 */ /* [figma MCP] estilo «Button» del kit (Medium 21/1.2): FIJO, no fluye — el label del «Button primary» mobile (2157:4974) dice 21 explícito, no el 16 del cuerpo. */ --acturion-button-label: 1.3125rem; /* 21 */ /* Titulares [figma MCP 2026-09-15]: los titulares de pagina y de seccion son Regular 85/0.9 (mobile 38) — la MISMA caja que daba la lectura vieja 64/1.2 del volcado, que por eso paso desapercibida. Verificado nodo a nodo en las 12 paginas (About Us 1582:8375, Who We Are 1608:9598, Our Services 1582:8399, Contact Us 1365:12091, Open Positions 1608:9995, portada de News 1365:12143, single 1365:9774, Page not Found 1365:11148, etc.). */ --acturion-h1: clamp(2.375rem, 1.341rem + calc(4.413 * var(--acturion-vw)), 5.3125rem); /* 38 -> 85 */ /* [figma MCP] estilo «H2» del UI Kit (95/0.9, mobile «Mobile_H2» 46): lo usan los titulares XL — «News» del Home (1582:8609) y los «... Leadership» de seccion oculta (1365:12367) a 95. El 72 anterior era la lectura 1.2 de la misma caja. */ --acturion-h1-xl: clamp(2.875rem, 1.797rem + calc(4.601 * var(--acturion-vw)), 5.9375rem); /* 46 -> 95 */ /* [figma] SOLO los H1 de los heros con foto/vídeo (branch Confirmed, leído por MCP de los nodos de texto: 85px desktop, 38px mobile —Home mobile trae 41, se asume la escala común—, SIEMPRE en Medium y con interlineado 0.9, no el 1.2 global). Los titulares de sección interiores siguen en --acturion-h2 Regular. */ --acturion-hero-h1: clamp(2.375rem, 1.341rem + calc(4.413 * var(--acturion-vw)), 5.3125rem); /* 38 -> 85 */ /* [figma] titular de la sección CTA (1608:10000): 85px, único en el sitio. Mobile [convención] con la misma proporción que h1-xl (no hay frame mobile: la sección viene oculta también ahí). */ --acturion-cta-title: clamp(3.25rem, 2.524rem + calc(3.099 * var(--acturion-vw)), 5.3125rem); /* 52 -> 85 */ --acturion-h2: clamp(2.375rem, 1.341rem + calc(4.413 * var(--acturion-vw)), 5.3125rem); /* 38 -> 85 [figma MCP] Regular 0.9, igual que h1 */ /* [figma MCP] estilo «H3» del UI Kit: Medium 36/0.9 (mobile «Mobile/H3» 24). Lo usan las tarjetas 1:1 del kit (Position card, nombre del lider 1365:12810). El peso Medium lo pone cada consumidor. */ --acturion-h3: clamp(1.5rem, 1.236rem + calc(1.127 * var(--acturion-vw)), 2.25rem); /* 24 -> 36 */ /* [figma] branch «Confirmed»: subtítulos de columna (Careers 1608:9957/9976 y equivalentes): Medium 32px, line-height 0.9. Mobile 24 (caja de 22 = 24×0.9). Va con --acturion-weight-medium y lh 0.9, no con el 1.2 global. */ --acturion-subtitle: clamp(1.5rem, 1.324rem + calc(0.751 * var(--acturion-vw)), 2rem); /* 24 -> 32 */ --acturion-h4: clamp(1.125rem, 0.905rem + calc(0.939 * var(--acturion-vw)), 1.75rem); /* 18 -> 28 [volcado: títulos de News; caja de 32 es ambigua, validar] */ --acturion-h5: clamp(1.125rem, 1.081rem + calc(0.188 * var(--acturion-vw)), 1.25rem); /* 18 -> 20 [deducido: etiqueta de botón, caja 25] */ --acturion-h6: var(--acturion-body-18); /* Numerales grandes [figma MCP 2026-09-15]: «Numbers_big» del kit = Light 288/0.9 (01/02 de servicios en desktop, 1582:8402) y «Numbers_small» = Light 145/0.9 (grillas numeradas desktop 1365:12585 y servicios mobile 1582:8121). Las cajas 259/130 tambien cuadraban con 216/108 a 1.2 — el MCP zanjo la ambiguedad. El peso Light lo pone cada consumidor (ver la nota de --acturion-weight-light). */ --acturion-display: clamp(9.0625rem, 5.916rem + calc(13.427 * var(--acturion-vw)), 18rem); /* 145 -> 288 */ --acturion-display-sm: clamp(6.25rem, 5.26rem + calc(4.225 * var(--acturion-vw)), 9.0625rem); /* 100 -> 145 [mobile deducido: «Mobile_Numbers» 100] */ /* ================= Espaciado ================= */ /* Escala [volcado]: 24 es el gap de grilla (396+24=420), 16 el gap icono→texto (x=40), 100 el padding de sección en desktop (en mobile la FRONTERA entre secciones mide 100 en total, así que el padding baja a 50 — ver la media query de abajo), 48/80 los saltos título→contenido. */ --acturion-space-1: 4px; --acturion-space-2: 8px; --acturion-space-3: 12px; --acturion-space-4: 16px; --acturion-space-5: 24px; --acturion-space-6: 32px; --acturion-space-7: 40px; --acturion-space-8: 48px; --acturion-space-9: 64px; --acturion-space-10: 80px; --acturion-space-section: 100px; --acturion-gap: var(--acturion-space-5); --acturion-space-card: 18px; /* [volcado] padding interno de cards en mobile (291+18×2=327); desktop sin dato */ /* ================= Marco del sitio ================= */ /* El sitio se dibuja dentro de un MARCO de --acturion-site-max y, por encima de ese ancho, queda una banda a los lados con --acturion-frame-bg (como el lienzo de Figma alrededor del artboard). Ver la regla del marco en base.css. --acturion-vw es la unidad en la que se expresa TODA la escala fluida: vale 1vw mientras la ventana es más estrecha que el marco y se congela en el ancho del marco a partir de ahí. Sin esto, con la ventana a 1920 y el marco a 1280 los titulares seguirían creciendo hasta su tope de 1440 dentro de un marco de 1280: el sitio enmarcado se vería DISTINTO al mismo sitio a 1280 de ventana. Con esto, son idénticos. */ /* Por defecto las bandas toman el MISMO fondo que la página, así que el marco no se ve y el sitio se lee a todo el ancho de la pantalla. Apariencia > Personalizar > Site frame lo pisa (crema/negro/blanco), ver functions.php. */ --acturion-frame-bg: var(--acturion-color-bg); --acturion-vw: min(1vw, calc(var(--acturion-site-max) / 100)); /* Tope del hero cuando se enciende «Full-width heroes» (Apariencia > Personalizar > Site frame): hasta dónde puede salirse del marco. Lo fija el MATERIAL, no el diseño — home-hero.mp4 mide 1920 de ancho y por encima de eso se escalaría y se vería blando. Las fotos de los otros heros llegan a 2200 (career, asset management) y 2800 (about), así que 2560 es el techo con el material de hoy: la foto más corta se estira un 16%, que a distancia de monitor no se ve. Pasar de aquí (3440 de un ultrapanorámico) las dejaría al 56% y sí se notaría; el vídeo sí daría, porque el máster es de 4096. */ --acturion-hero-max: 2560px; /* ================= Layout ================= */ /* [volcado] 1236 de contenido a 1440 (margen 102); 327 a 375 (margen 24). */ /* 1440 = el ancho del artboard de Figma. Con el marco puesto, cualquier pantalla más ancha muestra el sitio a ESCALA 1:1 con el diseño, que es lo que permite compararlos píxel a píxel. Bajarlo a 1280 no rompe nada —toda la escala fluida está anclada a --acturion-vw— pero deja el sitio al 89% del diseño. */ --acturion-site-max: 1440px; --acturion-content-max: 1236px; /* 24 (375) -> 102 (1440). Necesita intercepto: un vw puro no pasa por los dos puntos (24/375 = 6.4% pero 102/1440 = 7.08%). La versión anterior, 7.083vw, daba 26.6px a 375 en vez de 24 — medido en el hero de Home. */ --acturion-gutter: clamp(1.5rem, -0.2166rem + calc(7.3239 * var(--acturion-vw)), 6.375rem); /* El mismo gutter, pero creciendo por encima de 1440 para que el contenido se tope donde se topa .acturion-container. Es el gutter que usan las cajas que van A SANGRE y no cuelgan de ese contenedor: el hero y los contenedores raíz de Elementor. OJO: el 100% se resuelve contra el ancho del padre allá donde se USE, así que solo vale en cajas que ya ocupan el ancho de la ventana. */ --acturion-gutter-capped: max( var(--acturion-gutter), calc((100% - var(--acturion-site-max)) / 2 + var(--acturion-gutter)) ); --acturion-col: 396px; /* columna de la grilla de 3 en desktop */ --acturion-strip: clamp(3rem, 2.406rem + calc(2.535 * var(--acturion-vw)), 4.6875rem); /* 48 -> 75: ancho de la franja gráfica vertical */ /* ================= Misceláneo ================= */ --acturion-radius: 0; /* [volcado/PNG] el diseño no usa esquinas redondeadas */ --acturion-focus-ring: 2px; /* [convención] */ --acturion-duration: 200ms; /* [convención] */ --acturion-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* [convención] */ /* [figma] UI Kit, página "Animation": las barras de degradado (CTA, Servicios, Principios) no aparecen ya fragmentadas — arrancan como un degradado liso y se "arman" en las franjas escalonadas, en cascada de izquierda a derecha, al entrar en pantalla. La duración real no está documentada (Figma no exporta tiempos desde una foto); 700ms es una lectura razonable del número de fotogramas mostrados. Ver acturion-reveal.js. */ --acturion-duration-reveal: 700ms; --acturion-stagger-reveal: 45ms; } /* Habilita transición suave de estas custom properties: sin `@property`, el navegador las trata como texto opaco y el cambio de valor sería instantáneo, no interpolado. */ @property --bar-split { syntax: ""; inherits: false; initial-value: 29.5%; } @property --split { syntax: ""; inherits: false; initial-value: 29.5%; } /* Mismo motivo: el barrido diagonal de los iconos de «Why Acturion?» (sections.css) anima este único valor y lo reutiliza en varios vértices del polygon(), así que los tres se mueven juntos en vez de a saltos. */ @property --wipe { syntax: ""; inherits: false; initial-value: 0%; } /* ================= Overrides responsive de la escala ================= */ /* [figma] En los frames mobile del branch la frontera entre secciones mide 100 EN TOTAL (Section1 637 -> Section2 737 en Asset, 714 -> 814 en Contacts, etc.), no 100 por lado como en desktop: cada sección aporta la mitad. El arranque de la primera sección (28) y el hueco antes del pie (100) se ajustan donde toca: base.css, error404.css y layout.css. */ @media (max-width: 767px) { :root { --acturion-space-section: 50px; } }