/* ==========================================================================
   tokens.css — {{BRAND}} landing · design tokens (fonte: DESIGN_SPEC §1 — extração + medições 1440/390)
   Só :root e @font-face aqui. Fontes Sora + Manrope são carregadas pelo template.
   ========================================================================== */
@font-face { font-family: "Sora Fallback"; src: local("Arial"); ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; size-adjust: 100.67%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); ascent-override: 102%; descent-override: 28%; line-gap-override: 0%; size-adjust: 96.39%; }

:root {
  color-scheme: light;

  /* ---- Breakpoints (documentação; nas @media use os literais) ----
     sm 390px · md 769px · lg 1025px (só nav) · xl 1440px (layout desktop) · xxl 1698px */

  /* ---- Cores primitivas ---- */
  --c-body: #F5F2FC;            /* html (creme, praticamente invisível) */
  --c-hairline: #E6E0F2;        /* fundo do body/main = linhas de 1px; bordas; hachura; tracejado */
  --c-surface: #FFFFFF;
  --c-surface-soft: #F8F6FD;    /* hover de nav/cards/FAQ, faixa do marquee, pill llms, app bg dos mocks */
  --c-surface-pill-start: #F8F8F8;
  --c-mock-phone-bg: #EEEEEE;
  --c-mock-border: #F0F2F7;
  --c-icon-disc: #FFE8DD;       /* variante clara (não usada no render final) */
  --c-icon-disc-dark: #1C1238;  /* disco dos bullets do hero (screenshot) */

  --c-ink-900: #1C1238;         /* títulos, fundo do #taxas, traço da ilustração */
  --c-ink-800: #251849;         /* texto padrão, botões, nav, nomes */
  --c-ink-800-hover: #140C2A;
  --c-ink-600: #4F4766;         /* parágrafos, header, links do rodapé */
  --c-ink-dash: #121217;        /* texto dos dashboards e das pills flutuantes */
  --c-dash-label: #8A8AA3;
  --c-dash-label-2: #6A7085;
  --c-dash-icon: #83899F;
  --c-dash-icon-2: #485066;

  --c-lime: #FF7A45;            /* acento primário */
  --c-green: #7C3AED;           /* verde vivo do screenshot: fim da rampa do shimmer/títulos grandes */
  --c-green-soft: #E4D8FF;      /* início da rampa horizontal dos textos verdes (medido na ref, x≈155) */
  --c-link-green: #5B21B6;      /* 4,55:1 sobre branco — links e texto ≤18px (a11y: --c-green dá 2,25:1) */
  --c-green-500: #22C55E;
  --c-green-600: #7C3AED;       /* glifo dos ícones 3D */
  --c-hero-stop-1: #FF9A62;
  --c-hero-stop-2: #7C3AED;     /* faixa sólida do rodapé do hero */
  --c-lime-filter: #FFB08A; --c-green-200: #FFD9C7; --c-green-400: #FF9B6E;

  --c-chip-green: #22C55E; --c-chip-red: #EF4444; --c-chip-blue: #3B82F6;
  --c-chip-purple: #A855F7; --c-chip-teal: #14B8A6; --c-chip-pink: #EC4899; --c-chip-mint: #A7E8C4;
  --c-badge-pos-bg: rgba(255,122,69,.26); --c-badge-neg-bg: rgba(234,108,108,.25); --c-badge-neg-fg: #500000;
  --c-badge-pink-bg: rgba(239,149,149,.26);
  --c-dash-purple: #B26EE6; --c-dash-orange: #FF9D5C; --c-dash-blue: #5CC0FF; --c-dash-blue-2: #33B1FF;
  --c-dash-chart-line: #FF7A45; --c-dash-chart-fill-top: #FFC2A6; --c-dash-chart-fill-bottom: #FFF5F0;
  --c-plate-3d: #F9F9F9; --c-plate-3d-mid: #EFE8FF;

  --c-gray-100: #F4F4F5; --c-gray-300: #D4D4D8; --c-gray-400: #A1A1AA;
  --c-gray-500: #71717A; --c-gray-700: #3F3F46; --c-gray-800: #27272A;

  /* seção escura / vidro */
  --c-dark-bg: #1C1238;
  --c-glass-bg: hsla(0,0%,100%,.10);  --c-glass-border: hsla(0,0%,100%,.24);
  --c-glass-inner-bg: hsla(0,0%,100%,.05); --c-glass-inner-border: hsla(0,0%,100%,.13);
  --c-glass-divider: hsla(0,0%,100%,.08);
  --c-on-dark: #FFFFFF; --c-on-dark-80: hsla(0,0%,100%,.8); --c-on-dark-70: hsla(0,0%,100%,.7);
  --c-on-dark-50: hsla(0,0%,100%,.5); --c-on-dark-30: hsla(0,0%,100%,.3); --c-on-dark-29: hsla(0,0%,100%,.29);
  --c-on-dark-hover: hsla(0,0%,100%,.10); --c-on-dark-hover-soft: hsla(0,0%,100%,.05);
  --c-map-dot: #4A3A78;

  /* ---- Semânticas ---- */
  --color-bg: var(--c-body); --color-grid: var(--c-hairline); --color-border: var(--c-hairline);
  --color-card: var(--c-surface); --color-card-hover: var(--c-surface-soft);
  --color-heading: var(--c-ink-900); --color-text: var(--c-ink-800); --color-text-muted: var(--c-ink-600);
  --color-accent: var(--c-lime); --color-accent-strong: var(--c-green); --color-link: var(--c-green);
  --color-btn-primary-bg: var(--c-lime); --color-btn-primary-fg: var(--c-ink-800);
  --color-btn-primary-hover-bg: var(--c-ink-800); --color-btn-primary-hover-fg: var(--c-lime);
  --color-btn-dark-bg: var(--c-ink-800); --color-btn-dark-hover-bg: var(--c-ink-800-hover);

  /* ---- Gradientes ---- */
  --grad-hero: radial-gradient(246.6% 88.54% at 37.12% 5.43%, hsla(0,0%,100%,0) 56.43%, #FF9A62 80.92%, #7C3AED 100%), #FFF;
  --grad-hero-xl: radial-gradient(200% 300% at -30% -60%, hsla(0,0%,100%,0) 56.43%, #FF9A62 70.92%, #7C3AED 100%), #FFF;
  --grad-pill: linear-gradient(84deg, #F8F8F8 8.48%, #FFF 90.82%);
  --grad-glow-ai: radial-gradient(280px 220px at 73% 36%, rgba(255,122,69,.55), rgba(255,122,69,0) 70%);
  --grad-glow-ai-cold: radial-gradient(360px 200px at 25% 48%, rgba(226,231,241,.7), transparent 70%);
  --grad-marquee-fade: linear-gradient(to top, #F8F6FD 0%, rgba(246,248,250,.8) 50%, transparent 100%);
  --grad-shimmer: linear-gradient(105deg, transparent 0, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%, transparent 100%);
  --grad-chart-fill: linear-gradient(to bottom, #FF7A45, rgba(255,122,69,0));
  --grad-3d: linear-gradient(225deg, #FF7A45 0%, #EFE8FF 38.8%, #FFF 75.5%);

  /* ---- Padrões ---- */
  --pattern-stripes: repeating-linear-gradient(45deg, rgba(226,231,241,.8) 0 1px, transparent 1px 14px);
  --pattern-dashed-v: repeating-linear-gradient(180deg, #E6E0F2 0 8px, transparent 8px 16px);
  --pattern-dashed-h: repeating-linear-gradient(90deg, #E6E0F2 0 8px, transparent 8px 16px);
  --pattern-dash: var(--pattern-dashed-v);   /* alias */
  /* Pontilhado decorativo — CALIBRADO pixel a pixel contra ref/shots/desktop-1440-full.png.
     Medida da referência (min por linha do canal mais escuro, somando 255−v = "tinta"):
       · passo:  9,595px H / 9,577px V → 9.6px 9.6px
       · tinta:  92,3 por ponto em 09 (x100–260 / y5060–5100) e 89–105 em 04 (x1150–1290)
       · escuro: o pixel mais escuro varia de ponto a ponto — 224 a 237, NÃO um valor chapado
     O disco cheio de 1px→2,2px que estava aqui rendia 203 de tinta por ponto (2,2× a ref) com
     mínima chapada em 230: ponto gordo de 4–5px e campo lido como GRADE regular.
     Duas camadas idênticas em passos 9,6 e 19,2 (a 2ª alinhada por --pattern-dots-pos) somam
     alfa em 1 de cada 4 pontos → o campo ganha o "ruído" irregular do SVG original em vez de
     uma grade uniforme. Aferição no único consumidor do token (.qc__dots, campo de 04, já com
     a máscara da seção — x900–1350 / y1265–1385): tinta 0,90× a da ref (era 2,5×), pixel mais
     escuro 222 vs 224 da ref, 706 px abaixo de 240 vs 736 da ref. */
  --pattern-dots: radial-gradient(circle at 50% 50%, rgba(28,18,56,.112) .5px, transparent 1.7px),
                  radial-gradient(circle at 50% 50%, rgba(28,18,56,.062) .5px, transparent 1.7px);
  --pattern-dots-size: 9.6px 9.6px, 19.2px 19.2px;
  /* a 2ª camada tem o centro do ladrilho em 9,6px; −4,8px encaixa-o sobre um ponto da 1ª */
  --pattern-dots-pos: 0 0, -4.8px -4.8px;
  --pattern-dots-mask: radial-gradient(60% 60% at 60% 30%, #000 0%, rgba(0,0,0,.6) 45%, transparent 75%);
  --pattern-dots-mock: radial-gradient(circle, rgba(28,18,56,.12) 1px, transparent 1.5px);
  --pattern-dots-mock-size: 9px 9px;

  /* ---- Tipografia ---- */
  --font-display: "Sora", "Sora Fallback", Arial, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* degraus originais reproduzidos com clamp() (390→769 salvo nota) */
  --fs-h1: 44px;                                        /* fixo em todas as larguras */
  --fs-h2: 32px;                                        /* degrau exato: 48px a partir de 390 (@media abaixo) */
  --fs-h3-section: clamp(32px, 15.5px + 4.22vw, 48px);  /* 32 → 48 em 769 */
  --fs-h3-support: clamp(32px, 27.9px + 1.06vw, 36px);  /* 32 → 36 em 769 */
  --fs-h3-end: 28px;                                    /* DEGRAU, não rampa: 28 até 1439, 48 em 1440 (@media abaixo).
                                                           O clamp anterior rendia 35,6px em 1025 — a ref mantém 28. */
  --fs-h3-card: 20px; --fs-lead: 18px; --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px;
  --fs-footer-link: 20px; --fs-float-pill: 20px;
  --fs-16-18: clamp(16px, 13.9px + .53vw, 18px);        /* p do #taxas, intro dos depoimentos, título calc */
  --fs-14-16: clamp(14px, 11.9px + .53vw, 16px);        /* tabs da calculadora */
  --fs-12-14: clamp(12px, 9.9px + .53vw, 14px);         /* nota da calculadora */
  --fs-calc-value: clamp(30px, 11.5px + 4.75vw, 48px);
  --fs-calc-input: clamp(24px, 11.7px + 3.17vw, 36px);
  --fs-calc-prefix: clamp(24px, 17.8px + 1.58vw, 30px);
  --fs-calc-result-prefix: clamp(20px, 15.9px + 1.06vw, 24px);

  --lh-h1: 1.05; --lh-h2: 1.2; --lh-h3-suite: 1.4; --lh-h3-card: 1.02; --lh-h3-card-fixed: 14px;
  --lh-faq: 1.4; --lh-tight-ui: 11px; --lh-pill-sm: 10px; --lh-body: 1.8; --lh-hero-sub: 28px;
  --lh-dark-p: 1.6; --lh-name: 20.565px; --lh-footer-link: 24px; --lh-relaxed: 1.625; --lh-normal: 1.5;

  /* --ls-h2 acompanha --fs-h2 (proporção -0,04em da referência). Abaixo de 390 o corpo cai
     para 32px e o -1,92px fixo virava -0,06em: em 360 os espaços entre palavras dos H2
     (04 "Quanto sai?", 05 "Integrações", 08 #taxas) colapsavam. */
  --ls-h1: -0.05em; --ls-h2: -1.28px; --ls-h2-tight: -0.05em;
  --ls-h3-section: clamp(-1.92px, -0.62px - 0.169vw, -1.28px);   /* -1.28 → -1.92 em 769 */
  /* --ls-h3-end idem: -2,16px foi medido sobre os 48px de ≥1440 (-0,045em). Até 1439 o
     .fim__title tem 28px e o valor fixo virava -0,077em — as palavras do título de 12-fim
     colavam em 360/390/430/768/834/1024/1280. */
  --ls-h3-section-sm: -1.28px; --ls-h3-end: -1.26px; --ls-card: -0.4px; --ls-link: -0.32px;
  --ls-body-lead: 0.9px; --ls-body-md: 0.8px; --ls-body-sm: 0.7px; --ls-footer: -0.4px; --ls-float-pill: .081px;

  /* ---- Espaçamento ---- */
  --sp-hairline: 1px;
  --sp-1: 4px; --sp-2: 8px; --sp-2-5: 10px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-19: 76px;
  --sp-24: 94px; --sp-25: 100px; --sp-26: 104px; --sp-30: 120px; --sp-48: 194px;

  /* responsivos (sobrescritos nas @media abaixo) */
  --rail-fixed: 0px;      /* .container--fixed: oculto <769 */
  --rail-fluid: 24px;     /* .container (padrão) */
  --inset: 0px;           /* células internas 63/103 (só ≥1440) */
  --inset-lg: 0px;
  --cell-px: 24px;        /* padding horizontal das células grandes: 24 → 32 → 64 → 104 */
  --sec-py: 64px;         /* padding vertical "grande": 64 → 100 (md) → 120 (xl) */
  --header-h: 90px; --header-pad: 24px;
  --taxas-px: 24px; --taxas-py: 32px;
  --text-max: 292px;      /* .max-content-width do rodapé: 292 → 680 → 1136 → 1312 */
  --hero-art-h: clamp(298px, 70.48vw + 23.13px, 594px);
  --mock-desktop-w: clamp(476px, 112.86vw + 35.86px, 950px);
  --mock-phone-w: clamp(109px, 25.95vw + 7.79px, 218px);
  --mock-phone-h: clamp(243px, 57.86vw + 17.36px, 486px);
  --mock-border: 5px;     /* 10px ≥769 */
  --phone-radius: 16px;   /* 31px ≥769 */

  --strip-h: 64px;
  --content-max-xxl: 1520px; --taxas-max: 1312px; --calc-max: 720px;
  --testimonial-max: 560px; --testimonial-w: 80vw;
  --card-testimonial-pad: 24px 32px 40px 24px; --faq-item-pad: 24px;
  --glass-pad: 16px;      /* 24 md, 32 xl */
  --glass-inner-pad: 20px;/* 24 md */
  --btn-pad: 12px 16px; --btn-pad-wide: 12px 24px; --btn-h: 48px; --btn-h-compact: 40px;
  --pill-pad: 8px 12px; --badge-pad: 12px 20px 12px 16px; --tab-pad: 12px; --tabs-pad: 4px;

  /* ---- Raios ---- */
  --r-cell: 8px; --r-md: 12px; --r-lg: 16px; --r-phone: 31px; --r-search: 28px; --r-pill: 9999px;

  /* ---- Bordas ---- */
  --border-1: 1px solid var(--c-hairline); --border-dashed: 1px dashed var(--c-hairline);
  --border-pill-float: 2px solid #FFF; --border-glass: 1px solid var(--c-glass-border);
  --border-glass-inner: 1px solid var(--c-glass-inner-border); --border-on-dark: 1px solid var(--c-on-dark-30);

  /* ---- Sombras ---- */
  --sh-hover: 0 0 12px 0 rgba(0,0,0,.2);
  --sh-pill: 0 8px 24px rgba(149,157,165,.2), 0 0 0 2px rgba(0,0,0,.06);
  --sh-mock-desktop: 0 7px 29px 0 rgba(100,100,111,.2);
  --sh-mock-phone: -17px 16px 52px 0 rgba(0,0,0,.13);
  --sh-chat: 0 8px 24px rgba(0,0,0,.16); --sh-chat-hover: 0 8px 32px rgba(0,0,0,.4);
  --sh-search-card: 0 12px 40px rgba(28,18,56,.08), inset 0 1px 0 rgba(255,255,255,.8);
  --sh-docs-card: 0 18px 40px rgba(28,18,56,.08);
  --sh-card-soft: 0 24px 60px rgba(36,76,78,.12);

  /* ---- Ícones ---- */
  --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-logo: 28px;
  --icon-disc: 40px; --avatar: 48px; --chat-bubble: 64px; --icon-stroke: 2; --accent-bar-w: 4px; --accent-bar-h: 48px;

  /* ---- Motion ---- */
  --dur-fast: 150ms; --dur-200: 200ms; --dur-base: 300ms; --dur-slow: 500ms;
  --dur-reveal: 500ms; --dur-reveal-hero: 400ms; --stagger: 80ms;
  --dur-shimmer: 1.8s; --dur-shimmer-reduced: 15s; --dur-marquee: 30s; --dur-marquee-sm: 24s;
  --dur-draw-main: 4s; --dur-draw-arrow: 4s; --dur-draw-underline: 900ms;
  --dur-pulse-1: 3.5s; --dur-pulse-2: 4.5s; --dur-pulse-3: 5s; --dur-pulse-4: 3.8s; --dur-pulse-5: 4.2s; --dur-pulse-6: 4.8s;
  --dur-dd-open: 180ms; --dur-dd-close: 120ms; --dur-menu: 220ms;
  --ease-default: cubic-bezier(.4, 0, .2, 1);   /* Tailwind */
  --ease-pulse: cubic-bezier(.4, 0, .6, 1);
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1); /* reveal, dropdown */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);     /* menu mobile, ícones 3D */
  --ease-in-out: ease-in-out; --ease-aos: ease; --ease-linear: linear;
  --hover-scale: 1.02; --active-scale: .97; --glass-blur: 7.75px;
  /* comprimento da rampa verde-claro→verde a partir da borda esquerda do .shimmer.
     Medido no H1 do hero: a ref satura em #7C3AED a 96px da borda (x=249, caixa em x=153);
     com 100px o nosso só saturava em x≈255. 04-quanto-custa precisa de 78px — o override
     mora em css/sections/04-quanto-custa.css (`.qc__title{--shimmer-ramp:78px}`). */
  --shimmer-ramp: 96px;

  /* ---- Z-index ---- */
  --z-mock: 1; --z-content: 10; --z-dd: 40; --z-header: 50; --z-menu: 60; --z-chat: 2147483000;
}

@media (min-width: 390px) {
  :root { --fs-h2: 48px; --ls-h2: -1.92px; }   /* tracking da ref: só vale com o corpo de 48px */
}
@media (min-width: 769px) {
  :root { --rail-fixed: 88px; --rail-fluid: 32px; --cell-px: 32px; --sec-py: 100px;
          --header-h: 104px; --header-pad: 32px; --taxas-py: 64px; --text-max: 680px;
          --mock-border: 10px; --phone-radius: 31px; --glass-pad: 24px; --glass-inner-pad: 24px; }
}
@media (min-width: 1440px) {
  :root { --inset: 63px; --inset-lg: 103px; --cell-px: 64px; --sec-py: 120px;
          --taxas-px: 120px; --taxas-py: 120px; --text-max: 1136px; --glass-pad: 32px;
          --fs-h3-end: 48px; --ls-h3-end: -2.16px; }   /* tracking da ref: só vale com o corpo de 48px */
}
@media (min-width: 1698px) {
  :root { --rail-fixed: 119px; --rail-fluid: 88px; --inset: 103px; --cell-px: 104px;
          --taxas-px: 194px; --text-max: 1312px; }
}