/* ========================================================================== mangoodev.com — Design tokens Fuente de la verdad: Figma · MANGOODEV · frame "WEB MANGOO" (node 2:342) Ancho de diseño: 1750px · Contenido: 1594px (gutter 78px) Los tamaños tipográficos se derivaron midiendo la ALTURA DE MAYÚSCULA (cap height) de cada bloque sobre el render del frame, y dividiéndola por la relación cap/em de cada familia (Cal Sans ≈ .715, Manrope ≈ .70). Los interlineados son distancias baseline-a-baseline medidas en el render. ========================================================================== */ :root { /* ---- Unidad proporcional ------------------------------------------------- 1 unidad = 1px al ancho de diseño (1750px) Y 1px a los 1190px de ALTO útil. Gana el eje más restrictivo, como un object-fit:contain. Por qué el segundo eje: el bloque de la primera pantalla —nav + H1 + lead + CTAs + stats + tira de marcas— mide exactamente 1026 unidades, y hasta acá eso dependía sólo del ancho. Resultado: en cualquier pantalla ancha y baja (1920x1080, 2560x1080, cualquier notebook) la tira de clientes quedaba debajo del pliegue, y en 1366x768 tampoco se veían los números. 0.0841vh sale de la cuenta: 1026 unidades tienen que ocupar el 86% del alto (0.862 / 1026 = 0.000840), que es la proporción del render de referencia. A 1190px de alto da 1px exacto, así que de ahí para arriba NO cambia nada respecto de como se venía viendo. El piso vertical (0.74) es tipográfico, no estético: por debajo de eso --fs-card-text (18u) baja de 13.3px y --fs-btn (15u) de 11.1px. Se activa abajo de 880px de alto; ahí toma el relevo --sv. El clamp horizontal queda igual que siempre: su piso 0.82 protege las ventanas angostas y su tope 1px impide que crezca en pantallas anchas. */ --s: min(clamp(0.82px, 0.0571428vw, 1px), max(0.74px, 0.0841vh)); /* Escala de los HUECOS verticales del hero. Idéntica a --s mientras el piso de --s no muerde (o sea: arriba de 880px de alto no cambia un pixel), y por debajo sigue bajando sola. Es lo que permite que en un 1440x760 el bloque entre completo sin tener que achicar más la tipografía: de las 1026 unidades, 517 son aire y sólo 509 son contenido. Sólo la usan los 6 huecos del hero en sections.css. En <=1023 no hace nada: ahí responsive.css ya pisa los seis con px fijos. */ --sv: min(var(--s), 0.0841vh); /* ---- Layout ---- */ --container: calc(1594 * var(--s)); --gutter: clamp(20px, 4.457vw, calc(78 * var(--s))); --nav-h: calc(114 * var(--s)); /* ---- Color ---- --blue es el azul de marca del Figma y se usa tal cual en todo lo que WCAG considera "texto grande" (≥24px, o ≥18.66px bold), donde el mínimo es 3:1 y pasa cómodo. --blue-strong es el mismo azul apenas más oscuro (verde 111→94, un delta imperceptible) y se usa SOLO en texto chico, donde el mínimo es 4.5:1 y #006FFF se queda en 4.45. Ver la tabla de contraste en CLAUDE.md. */ --blue: #006FFF; /* 4.45:1 s/ blanco — OK para texto grande */ --blue-strong: #005EFA; /* 5.27:1 s/ blanco — para texto chico */ --blue-ink: #0170FF; --blue-card: #187DFE; --blue-soft: #93C2FA; --blue-line: #8FBDF5; --ink: #606060; --ink-mute: #6F6F6F; /* era #8B8B8B: 3.31:1, no pasaba AA */ --bg-top: #FAFCFC; --bg: #EDF4F8; --panel: #F9F9F9; --card: #FFFFFF; --chip-bg: rgba(18, 26, 34, .065); /* El tinte azul del chip "Disponible" oscurecía el fondo y bajaba el contraste a 3.52:1. Con fondo casi blanco, --blue-strong da 4.77:1. */ --chip-live-bg: rgba(255, 255, 255, .9); --rule: #606060; --on-blue: #FFFFFF; --on-blue-soft: #FFFFFF; /* era 78%: daba 3.27:1 sobre el azul */ /* ---- Tipografía ---- */ --font-display: "Cal Sans", "Manrope", ui-sans-serif, system-ui, sans-serif; --font-text: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif; /* Cal Sans — cap/em = .70 · x-height/em = .52 · asc .72 · desc .21 (métricas leídas del woff2 real; cada tamaño se verificó por cap Y por x-height, y los interlineados son distancias baseline-a-baseline) */ --fs-h1: calc(63 * var(--s)); /* Figma: 56 (cap 39 · asc 41) */ --lh-h1: calc(64 * var(--s)); /* baselines 250 → 314 */ --fs-h2: calc(65 * var(--s)); /* Figma: 58 (cap 40-41 · xh 30-31) */ --lh-h2: calc(62 * var(--s)); /* baselines 1279 → 1341 */ --fs-h2-standard: calc(53 * var(--s)); /* Figma: 47 (cap 33 · xh 24) */ --lh-h2-standard: calc(52 * var(--s)); /* baselines 2598 → 2650 */ --fs-h2-center: calc(57 * var(--s)); /* Figma: 51 (cap 35) */ --fs-h2-engine: calc(95 * var(--s)); /* Figma: 85 (cap 59 · xh 45 · asc 61) */ --fs-h2-cta: calc(123 * var(--s)); /* Figma: 110 (cap 77 · xh 58) */ --lh-h2-cta: calc(128 * var(--s)); /* baselines 7483 → 7611 */ --fs-stat: calc(62 * var(--s)); /* cifras 44 */ --fs-card-title: calc(24 * var(--s)); /* cap 17 · xh 13 */ --fs-step-title: calc(29 * var(--s)); /* cap 20 · xh 15 */ --fs-step-text: calc(30 * var(--s)); /* cap 21 — es Cal Sans, no Manrope */ --lh-step-text: calc(35 * var(--s)); --fs-footer-title:calc(26 * var(--s)); /* cap 18 */ --fs-numeral: calc(414 * var(--s)); /* Manrope — cap/em = .72 · x-height/em = .54 */ --fs-lead: calc(22 * var(--s)); /* cap 16 · ancho de línea validado */ --lh-lead: calc(30 * var(--s)); --fs-card-text: calc(18 * var(--s)); --lh-card-text: calc(21 * var(--s)); --fs-nav: calc(18 * var(--s)); /* cap 13 */ --fs-chip: calc(16 * var(--s)); /* ancho de la pastilla validado */ --fs-btn: calc(15 * var(--s)); /* cap 11 */ --fs-stat-label: calc(18 * var(--s)); /* cap 13 */ --ls-stat-label: .54em; /* derivado de dos etiquetas */ --fs-footer-link: calc(18 * var(--s)); --lh-footer-link: calc(22 * var(--s)); /* ---- Formas ---- */ --r-card: calc(30 * var(--s)); --r-panel: calc(64 * var(--s)); --r-pill: 999px; --btn-h: calc(51 * var(--s)); --chip-h: calc(32 * var(--s)); --shadow-card: 0 calc(4 * var(--s)) calc(28 * var(--s)) rgba(0, 60, 120, .045); --shadow-lift: 0 calc(18 * var(--s)) calc(46 * var(--s)) rgba(0, 60, 120, .10); /* ---- Movimiento ---- */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 180ms; --t: 320ms; --t-slow: 720ms; /* Hover de las tarjetas de caso. Token propio: --t-slow también gobierna el zoom de los mockups de Servicios, y ahí este tiempo se sentiría pesado. */ --t-case: 950ms; /* Token propio para la entrada de los textos: --t-slow también lo usa el zoom de los mockups, y ahí no queremos que sea tan lento. */ --t-reveal: 1050ms; --reveal-shift: calc(38 * var(--s)); /* cuánto sube el texto al entrar */ /* Intro. Tiempos y curvas heredados del loader del sitio 2025: se mantienen tal cual para que el efecto se sienta igual. Si tocás --intro-t-move o --intro-t-disc, actualizá también D_MOVE / D_DISC en js/main.js. */ --intro-t-move: 520ms; --intro-t-disc: 800ms; --intro-ease-move: cubic-bezier(.4, 0, .2, 1); --intro-ease-disc: cubic-bezier(.77, 0, .18, 1); }