/* ==========================================================================
   Design Tokens — Grupo Latitud
   Extraídos do Figma. Fonte única de verdade para cores, tipografia e layout.
   ========================================================================== */

:root {
    /* Cores */
    --color-primary: #EF8619;
    --color-dark: #13171A;
    --color-white: #FFFFFF;
    --color-text-light: #D5D7DA;
    --color-text-hero: #F5F5F5;
    --color-text-dark: #3D3F43;
    --color-bg-light: #FAFAFA;

    /* Tipografia */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Raleway', sans-serif;
    --font-text: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;

    /* Layout */
    --container-width: 1360px;
    --container-padding: clamp(19.2px, 5.8vw, 112px);

    /* Hero overlay (gradientes do Figma) */
    --hero-overlay:
        linear-gradient(22.58deg, rgba(19, 23, 26, 0) 53.13%, rgba(19, 23, 26, 0.3) 80.81%, rgba(234, 221, 30, 0.6) 119.31%),
        linear-gradient(284.45deg, rgba(22, 90, 170, 0) 34.22%, rgba(19, 23, 26, 0.6) 85.04%),
        linear-gradient(247.26deg, rgba(19, 23, 26, 0) 17.62%, rgba(19, 23, 26, 0.4) 51.76%, rgba(0, 45, 98, 0.8) 106.93%);

    /* Componentes */
    --nav-pill-bg: rgba(0, 0, 0, 0.08);
    --nav-pill-border: 1px solid rgba(255, 255, 255, 0.08);
    --nav-pill-blur: blur(5px);
    --nav-dropdown-bg: rgba(19, 23, 26, 0.55);
    --nav-dropdown-border: 1px solid rgba(255, 255, 255, 0.12);
    --nav-dropdown-blur: blur(20px) saturate(160%);
    --scroll-btn-bg: rgba(255, 255, 255, 0.2);
    --scroll-btn-border: 1px solid rgba(255, 255, 255, 0.2);
    --scroll-btn-blur: blur(3px);

    /* Transições */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* ---- Fluid Body Typography ---- */
    --fs-body: clamp(12px, 0.9vw, 16px);
    --fs-body-sm: clamp(10.4px, 0.78vw, 14px);
    --fs-body-small: clamp(8.32px, 0.78vw, 14px);
    --fs-card-title: clamp(12.8px, 1vw, 18px);
    --fs-step-number: clamp(14.4px, 1.04vw, 20px);

    /* ---- Fluid CTA Button ---- */
    --cta-font-small: clamp(10.24px, 0.8vw, 14.4px);
    --cta-font: clamp(12.8px, 1vw, 18px);
    --cta-pad-y: clamp(12.8px, 1.04vw, 20px);
    --cta-pad-x: clamp(19.2px, 1.67vw, 32px);
    --cta-height: clamp(41.6px, 3.33vw, 64px);
    --cta-icon: clamp(16px, 1.25vw, 24px);

    /* ---- Fluid Component Sizes ---- */
    --btn-size: clamp(28.8px, 2.3vw, 44px);
    --btn-size-smartphone: clamp(37.44px, 2.99vw, 57.2px);
    --scroll-btn: clamp(25.6px, 2.08vw, 40px);
    --scroll-btn-smartphone: clamp(33.28px, 2.704vw, 52px);
    --line-width: clamp(38.4px, 3.7vw, 71px);
    --gap-card: clamp(12.8px, 1.25vw, 24px);
    --gap-content: clamp(9.6px, 0.83vw, 16px);
    --nav-logo-w: clamp(112.9px, 9.27vw, 177.4px);
    --nav-logo-h: clamp(42.74px, 3.53vw, 67.54px);

    /* ---- Fluid Spacing ----
       Desktop reduzido para seções mais compactas (meta ~70% da tela).
       O mínimo (valor do mobile) é mantido, então o mobile não muda. */
    --section-pad-xl: clamp(44.8px, 2.92vw, 56px);
    --section-pad-lg: clamp(38.4px, 2.625vw, 50.4px);
    --section-pad-md: clamp(32px, 2.31vw, 44.8px);
    --gap-xl: clamp(38.4px, 3.78vw, 72.8px);
    --gap-lg: clamp(32px, 2.94vw, 56px);
    --gap-md: clamp(19.2px, 1.75vw, 33.6px);
    --gap-sm: clamp(16px, 1.19vw, 22.4px);

    /* ---- Fluid Typography ---- */
    --fs-hero-title: clamp(24px, 2.2vw, 40px);
    --fs-section-xl: clamp(22.4px, 2.3vw, 44px);
    --fs-section-lg: clamp(19.2px, 1.8vw, 32px);
    --fs-cta-title: clamp(17.6px, 1.5vw, 28px);
    --fs-label: clamp(12.8px, 1vw, 18px);
    --fs-step: clamp(14.4px, 1.25vw, 22px);
    --fs-display: clamp(22.4px, 2.5vw, 48px);
    --fs-heading-2xl: clamp(20.8px, 2.19vw, 42px);
    --fs-heading-xl: clamp(19.2px, 1.98vw, 38px);
    --fs-heading-lg: clamp(17.6px, 1.77vw, 34px);
    --fs-heading-md: clamp(14.4px, 1.35vw, 26px);
    --fs-heading-sm: clamp(12.8px, 1.25vw, 24px);
    --fs-body-lg: clamp(12px, 1.04vw, 20px);
    --fs-body-md: clamp(12px, 0.94vw, 18px);
    --fs-caption: clamp(9.6px, 0.68vw, 13px);
    --fs-caption-sm: clamp(8px, 0.57vw, 11px);
    --fs-article-h2: clamp(17.6px, 1.46vw, 28px);
    --fs-article-h3: clamp(14.4px, 1.15vw, 22px);

    /* ---- Fluid Hero ---- */
    --hero-height: clamp(320px, 31.5vw, 597px);
    --hero-height-sm: clamp(352px, 28.13vw, 540px);
    --hero-pad-top: clamp(96px, 9.38vw, 180px);
    --hero-pad-bottom: clamp(44.8px, 5vw, 96px);
    --hero-clip-h: clamp(48px, 6.25vw, 120px);
    --hero-clip-v: clamp(40px, 5.05vw, 97px);

    /* ---- Cores adicionais ---- */
    --color-bg-navy: #0f2a47;

    /* ---- Fluid Dimensions ----
       Portfolio segue reduzido ~30% no desktop. Cards de serviços voltaram à
       largura original (para exibir ~5 cards e reduzir a quebra de texto).
       Certificações +20% sobre o tamanho reduzido. Mínimos (mobile) mantidos. */
    --card-services-w: clamp(160px, 16.5vw, 280px);
    --card-portfolio-w: clamp(201.6px, 11.025vw, 211.4px);
    --card-portfolio-h: clamp(266.4px, 14.49vw, 278.6px);
    --cert-icon: clamp(80px, 7.82vw, 150.7px);
    --cert-logo: clamp(64px, 6.28vw, 119.78px);

    /* Quanto o card de diferenciais transborda pra dentro da seção seguinte.
       Fonte única: usado negado no margin-bottom do card e direto no padding-top
       da seção seguinte (.srv-nrs / .srv-outros). Mudar aqui atualiza os dois. */
    --diferenciais-card-overflow: 113px;
}