/* ==========================================================================
   Design tokens — Master Center Américas
   Values sampled directly from info/MCA-WEB.pdf (1920 x 6800 Figma export).
   Every custom property declared here is the single source of truth; no raw
   hex values should appear anywhere else in the stylesheets.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --c-navy: #16273e;          /* page-wide dark base: nav, hero, footer      */
  --c-navy-deep: #101d30;     /* pressed / hover state of navy surfaces      */
  --c-navy-soft: #1b3a56;     /* featured "Canales digitales" service card   */
  --c-navy-edge: #1b405f;     /* right end of the "why us" panel gradient    */

  /* One brand blue, read straight out of the PDF's own colour records: the
     hero and CTA buttons, the header pill, the sector pill, the step circles
     and the "Paso 1" / "Leer artículo" / eyebrow text are all #2C8BBF. The
     earlier #2E80B4 / #499AC7 pair came from raster samples that had landed on
     antialiased edges. */
  --c-blue: #2c8bbf;          /* the brand blue, fills and text alike        */
  --c-blue-bright: #2c8bbf;   /* filled buttons — same value in the design   */
  --c-blue-hover: #277aa8;    /* filled button hover, 12% darker             */
  /* #2C8BBF is 3.78:1 on white, short of the 4.5:1 AA needs for 14px text.
     Only the small uppercase eyebrow uses this darker step. */
  --c-blue-ink: #287dac;      /* 4.55:1 on white                             */
  --c-blue-deep: #2978a8;     /* methodology step icons                      */
  --c-blue-cta: #2a85b7;      /* left end of the final CTA gradient          */

  --c-sky: #a8c8e1;           /* icon badges, eyebrows, highlighted card     */
  --c-sky-soft: #cfe1f0;      /* dividers and hairlines on dark surfaces     */
  /* The brand blue over the veiled photo of the "why" band measures 1.85:1 and
     is unreadable there. This is the same hue (201°) and the same saturation
     (63%), lifted to 73% lightness. Measured against the pixels actually behind
     the headings on the rendered page, that is the darkest — and so the
     strongest — step that still clears 4.5:1. Going further toward the real
     brand blue drops to 2.2:1 and stops being readable; reaching it would need
     the veil at ~95%, which erases the photograph the band is built around. */
  --c-sky-text: #8fc7e5;      /* headings on photographic backgrounds        */

  /* --- Neutrals --------------------------------------------------------- */
  --c-white: #ffffff;
  --c-paper: #f6f9fd;         /* tinted section background                   */
  --c-ink: #16273e;           /* headings on light surfaces                  */
  --c-ink-muted: #44566e;     /* body copy on light surfaces                 */
  --c-line: #e3ecf5;          /* card borders on light surfaces              */
  /* The PDF strokes the client panels 1px navy, but on a fractional pixel
     boundary, so it lands as a 2px band of #677281 + #ADB3BB. Their ink
     coverage (0.652 + 0.352 = 1.004 px of navy) spread evenly over 2px gives
     this tone: a soft grey-blue, not a hard navy hairline. */
  --c-line-panel: #8a939e;    /* client panel outline                        */

  /* --- Text on dark surfaces -------------------------------------------- */
  --c-on-dark: #ffffff;
  --c-on-dark-muted: rgba(255, 255, 255, 0.78);

  /* --- Gradients -------------------------------------------------------- */
  --grad-cta: linear-gradient(90deg, var(--c-blue-cta) 0%, var(--c-navy) 100%);
  /* Sampled across the disc at 6x: the spread is HORIZONTAL (delta 75 left to
     right, zero top to bottom), so the earlier 135deg diagonal was wrong. */
  --grad-step: linear-gradient(90deg, #256993 0%, #2c87ba 100%);
  /* The highlighted service card is a diagonal navy-to-blue wash, not a flat fill. */
  --grad-service: linear-gradient(135deg, #16273e 0%, #1f5174 100%);
  --grad-hero-glow: radial-gradient(
    120% 90% at 78% 18%,
    rgba(46, 128, 180, 0.35) 0%,
    rgba(22, 39, 62, 0) 62%
  );

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Measured from the PDF on its 1920px canvas: h1 77, h2 55, h3 27, body 24.
     Sized in vw so the page reproduces those exact figures at 1920 and scales
     down with the viewport rather than staying oversized on a laptop. */
  --fs-display: clamp(2rem, 3.45vw, 4.15rem);     /* 66px at 1920, 50 at 1440 */
  --fs-h2: clamp(1.75rem, 2.86vw, 3.44rem);       /* 55px at 1920, 41 at 1440 */
  --fs-h3: clamp(1.15rem, 1.41vw, 1.7rem);        /* 27px at 1920, 20 at 1440 */
  --fs-lead: clamp(1rem, 1.25vw, 1.5rem);         /* 24px at 1920, 18 at 1440 */
  --fs-body: clamp(1rem, 1.25vw, 1.5rem);         /* 24px at 1920, 18 at 1440 */
  --fs-small: 0.9375rem;                                    /*        15 px */
  --fs-eyebrow: 0.875rem;                                   /*        14 px */

  /* The PDF steps its h1 lines 92.4px apart at 77px type = 1.2, the same as
     every other heading. A tighter value made the hero read heavier. */
  --lh-tight: 1.2;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --ls-eyebrow: 0.08em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Vertical rhythm between full-width sections. */
  --section-y: clamp(4rem, 2.2rem + 7.5vw, 7.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1680px;
  --container-pad: clamp(1.25rem, 0.55rem + 3.1vw, 2.75rem);
  --header-h: 88px;

  /* --- Radii ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Elevation --------------------------------------------------------- */
  /* Shadows are blue-tinted: on this palette a neutral grey shadow reads dirty. */
  --sh-card: 0 18px 40px -18px rgba(22, 39, 62, 0.18),
             0 2px 10px -4px rgba(22, 39, 62, 0.08);
  --sh-card-hover: 0 28px 56px -20px rgba(22, 39, 62, 0.28),
                   0 4px 14px -6px rgba(22, 39, 62, 0.12);
  --sh-float: 0 30px 60px -24px rgba(22, 39, 62, 0.35);
  --sh-glow: 0 6px 26px rgba(46, 128, 180, 0.22);
  /* Measured under a service card: no shadow to the sides, a blue fade
     below reaching #E0EAF7 at its darkest. */
  --sh-glow-down: 0 14px 26px -8px rgba(46, 128, 180, 0.45);
  --sh-header: 0 10px 30px -18px rgba(0, 0, 0, 0.55);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 620ms;

  /* --- Stacking ---------------------------------------------------------- */
  --z-decor: 1;
  --z-content: 2;
  --z-header: 100;
  --z-drawer: 110;
}