/* ==========================================================================
   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).
     Entre 1435px y 1750px el layout escala proporcionalmente: mismas
     proporciones que el Figma, sin reflow. Se topea en 1px para no crecer
     de más en pantallas anchas, y en 0.82 para que el texto chico siga
     siendo legible antes de que reflowee a tablet.                         */
  --s: clamp(0.82px, 0.0571428vw, 1px);

  /* ---- 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);
}