/* ═════════════════════════════════════════════════════════════════
   RIVIO — Design tokens
   Extracted 1:1 from Figma · RIVIO / [DESKTOP] Rivio Home v10
   node 623:74150 · design frame 1440 × 816
   ═════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────── */
/* Bai Jamjuree Light — só a v2 usa, no número das camadas da § 3
   (Figma pede Light 20 ali, e sintetizar peso está desligado no body). */
@font-face {
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/BaiJamjuree-Light-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/BaiJamjuree-Light-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Funnel Display';
  src: url('../assets/fonts/FunnelDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Funnel Sans';
  src: url('../assets/fonts/FunnelSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-Medium-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-Medium-latinext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-SemiBold-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bai Jamjuree';
  src: url('../assets/fonts/BaiJamjuree-SemiBold-latinext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  /* ── Color · Figma variables ─────────────────────────────────── */
  --light-01: #f7f9ff;               /* Light Colors/Light-01 */
  --dark-01: #181b1f;                /* Dark Colors/Dark-01   */
  --dark-02: #31353d;                /* Dark Colors/Dark-02   */
  --dark-03: #49505c;                /* Dark Colors/Dark-03   */
  --dark-05: #7a8599;                /* Dark Colors/Dark-05   */
  --blue: #6694ff;                   /* Brand/Blue/Base       */
  --purple: #e992ff;                 /* Brand/Purple/Base     */
  --yellow: #ffbe78;                 /* Brand/Yellow/Base     */
  --light-16: rgba(255, 255, 255, 0.16); /* Shades/Ligh Shade/Light-16 */

  /* A superfície pálida das molduras de ícone. Ela vem assada dentro dos
     SVGs de KPI dos dois cases, e está aqui para que a moldura em CSS e a
     de dentro do arquivo não possam divergir sem alguém perceber.
     Nasceu no `artigo.css` e subiu quando a página de produto passou a
     usá-la também — um valor de duas páginas não mora na folha de uma. */
  --superficie: #f0f5ff;
  --superficie-alta: #e2ebff;

  /* Brand/Gradient — yellow → purple → blue */
  --grad-brand: linear-gradient(
    -5.978deg,
    #ffbe78 21.166%,
    #e992ff 37.503%,
    #6694ff 89.652%
  );

  --light-80: rgba(255, 255, 255, 0.8);   /* Shades/Ligh Shade/Light-80 */
  --light-64: rgba(255, 255, 255, 0.64);  /* Shades/Ligh Shade/Light-64 */
  --light-48: rgba(255, 255, 255, 0.48);  /* Shades/Ligh Shade/Light-48 */
  --light-32: rgba(255, 255, 255, 0.32);  /* Shades/Ligh Shade/Light-32 */
  --dark-88: rgba(0, 0, 0, 0.88);         /* Shades/Dark Shade/Dark-88  */

  /* Intelligence stage ground — soft light gradient */
  --intel-bg: radial-gradient(
      118% 92% at 62% 44%,
      #ffffff 0%,
      #fbfcfe 38%,
      #f4f6fc 72%,
      #eff3fb 100%
    );

  /* ── Type ────────────────────────────────────────────────────── */
  --font-display: 'Funnel Display', 'Funnel Sans', system-ui, -apple-system, sans-serif;
  --font-label: 'Bai Jamjuree', system-ui, -apple-system, sans-serif;

  /* ── Título de seção (h2) ─────────────────────────────────────────
     UM tamanho para a página inteira. Auditado antes de unificar: eram
     SEIS valores a 375 — 28 na Visão, 26 em Cases/Advisory/CTA, 24 na
     § 4 e nos cards. O piso de 26 é o que a maioria já usava.

     O `2.5vw` no meio faz o título crescer com a tela até os 36 do
     Figma. Não é `clamp` por gosto: em px fixo ele fica pequeno no
     desktop largo, e em `vw` puro fica ilegível no celular. */
  /* O piso é 22 e não 26: a 26 o título mais longo do site quebrava em
     QUATRO linhas a 375, e nenhum título deve passar de três. Medido em
     todos os h2 da página. Acima de ~880 o `2.5vw` assume e o valor
     cresce até os 36 do Figma, então o desktop não muda. */
  --h2: clamp(22px, 2.5vw, 36px);

  /* ── Parágrafo ────────────────────────────────────────────────────
     No celular o corpo de texto fica entre 12 e 14, a pedido do
     cliente. O teto de 14 vale para o texto corrido; o piso de 12 é
     para o que é ESCALADO por composição (o lede da § 4 vinha de
     `--u` e chegava a **9,33px** a 375 — era o que fazia a proporção
     do bloco parecer errada). */
  --p-mobile: 14px;
  --p-mobile-min: 12px;

  /* ── Tag / eyebrow ────────────────────────────────────────────────
     UM padrão para a página inteira. Antes eram seis implementações da
     mesma ideia — três corpos (10/12/14), dois pesos, cinco trackings,
     três quadrados (5,658/6/8) e três gaps. Medido no browser antes de
     unificar.

     Valor escolhido pelo cliente: 12 / SemiBold, quadrado 8, gap 8.
     Isto sobe as cinco etiquetas de seção acima do que o Figma desenha
     (ele pede 10 / Medium / quadrado 6) — desvio registrado na § 8.

     O tracking é 0,04em, que é a proporção que o Figma usa nos dois
     corpos que ele desenha (0,4 em 10 e 0,48 em 12). O hero usava 0,72
     (0,06em) e era o único.

     A COR NÃO ENTRA AQUI, de propósito: cada tag tem a sua e elas
     significam coisa — azul de ON, âmbar de BUILDING, claro sobre foto.
     Não crie um token de cor de tag.

     O `line-height` também não entra: cada contexto tem o seu (o
     cap-trim de 0,7 nas seções, 1,5 no hero) e mexer nele desloca o
     espaçamento para o que vem embaixo. */
  /* ── Raios ────────────────────────────────────────────────────
     Três degraus, e só três. Antes as caixas de conteúdo usavam 4, 8 e
     12px sem critério: o mesmo tipo de coisa — uma foto, um vídeo, um
     card — com três cantos diferentes na mesma página.

     `--r-caixa` é 8 e não 4 porque 4px num bloco de 750px é
     opticamente zero (foi por isso que a arte do § 4.6 já tinha
     escapado para 8), e não é 12 porque isso amolece demais os cards
     pequenos. 8 é o único valor que serve dos 208px aos 751px. */
  --r-marca: 2px;    /* marcador quadrado: badge da CTA, seta de trilho */
  --r-chip: 4px;     /* rótulo pequeno com respiro interno */
  --r-caixa: 8px;    /* QUALQUER caixa de conteúdo ou mídia */
  --r-redondo: 1000px;/* pílula e círculo */

  --tag-corpo: 12px;
  --tag-peso: 600;
  --tag-track: 0.04em;
  --tag-quad: 8px;
  --tag-gap: 8px;

  /* ── CTA de seta ──────────────────────────────────────────────────
     O outro componente que existia em três versões: "Entenda como
     funciona" (14/600, gap 24, elipse assada dentro do SVG), "Leia o
     manifesto completo" (14/500, gap 34, SEM elipse) e "Quero ser
     candidato" (14/400, gap 34, elipse de verdade). Três pesos, dois
     gaps e três tratamentos de elipse.

     Padrão pedido pelo cliente: elipse atrás da seta no estado normal;
     no hover a seta anda na diagonal PARA ONDE APONTA, a elipse cresce
     de leve e o texto reage.

     A cor não entra aqui — sobre seção clara a elipse é sólida, sobre
     foto ela é vidro. Mesma regra das tags. */
  /* O "Brand/Gradient/Text" do Figma: Dark-02 que clareia para um
     cinza-azulado ao longo da linha — o texto GRANDE sobre claro (o
     título de Produtos, os números de Resultados em Cases). No Figma é
     uma radial torta vinda de fora da caixa; aqui é a mesma cor, amostrada
     no render a cada 80px e escrita em `em`: resolve no corpo de quem a
     usa, então acompanha o tamanho do texto. Usar com
     `background-clip: text` e `color: transparent`. */
  --texto-degrade: linear-gradient(90deg, #31353d 0, #34383f 1.63em, #40444e 2.45em, #494e58 3.27em, #585e6a 4.9em, #5f6471 5.71em, #656b77 6.53em, #686e7b 7.35em, #6a707e 8.16em);

  /* O CTA FOTOGRÁFICO das páginas — todas menos a home (2026-09-27,
     "padronizar as seções de CTA das outras páginas, aumentando um
     pouquinho o padding superior e inferior"). A altura ENVOLVE o
     conteúdo: selo, vão, bloco de chamada, com 192 em cima e embaixo,
     no celular também (eram 80 numa faixa fixa de 740; no celular, 92% da
     tela ou 560; depois 96, e o cliente pediu o dobro no mesmo dia). O
     vão selo → bloco é o `gap` do bloco: 60, e 44 no celular. As quatro
     cópias (`.foto-cta`, `.carr-fecho`, `.pcta`, `.case-cta`) leem daqui.
     A HOME fica fora: o palco dela É a tela, pela transição que vem da
     Visão (`grow.js`). */
  --cta-foto-pad: 192px;
  --cta-foto-gap: 60px;
  --cta-foto-gap-m: 44px;

  --cta-corpo: 14px;
  --cta-peso: 500;
  --cta-gap: 24px;
  --cta-elipse: 32px;
  --cta-dur: 0.42s;
  /* O quanto a seta VOA na diagonal. 16 põe o centro dela a 22,6 do
     centro da elipse — mais que os 15,5 do raio — então ela sai inteira
     e o `overflow: clip` a corta. Menos que isso e sobra um toco. */
  --cta-voa: 16px;
  /* a de trás entra depois que a da frente começa a sair */
  --cta-atraso: 0.1s;
  --cta-cresce: 1.09;
  /* A cabeça de leitura do texto. As DUAS medidas importam, e a relação
     entre elas é o efeito inteiro: a duração de cada letra tem de ser
     curta perto do passo, senão todas as letras ficam em transição ao
     mesmo tempo e o que se vê é a palavra desbotando junto — foi
     exatamente o que aconteceu com 420ms de duração e 18ms de passo, e o
     cliente pegou de olho. Com 150/26 há ~6 letras em voo por instante:
     isso o olho lê como cabeça. */
  --cta-letra: 26ms;
  --cta-letra-dur: 0.15s;

  /* A malha de pontinhos que surge de trás da elipse no hover
     (Figma `816:2135`). Passo e raio são os mesmos da malha do card 1 da
     § 4.6, que já tinha sido reconstruída contra o render — é a mesma
     textura da marca, não uma nova.

     A deriva anda EXATAMENTE um passo por ciclo: assim o fim do ciclo é
     idêntico ao começo e o laço não tem emenda. */
  --cta-malha-passo: 8px;
  --cta-malha-raio: 0.62px;
  --cta-malha-borda: 0.78px;
  --cta-malha-deriva: 0.4s;

  /* O halo da elipse. CURTO e circular, colado nela: a primeira versão
     era uma elipse de 240 × 78 e o cliente recusou — vazando para a
     direita ela lia como mancha, não como luz. Em 76 sobra ~22px de
     halo em volta de um círculo de 31, que é o que se lê como brilho.

     A cor da marca não fica aqui: ela mora na COR DOS PONTOS, ver
     abaixo. Este halo só levanta o entorno imediato. */
  --cta-luz: 76px;
  --cta-luz-forca: 0.42;
  /* Sobre foto o halo é o MESMO gradiente da marca — só mais
     transparente. O fundo escuro faz o mesmo valor ler muito mais forte,
     então ali ele é mais largo e bem mais fraco: mesma energia,
     espalhada. Já tentei trocar a cor por branco e não era isso. */
  --cta-luz-foto: 120px;
  --cta-luz-forca-foto: 0.14;

  /* A malha ganha as cores da marca perto da elipse e volta ao cinza
     em direção ao texto. Não é uma chapa colorida por cima dos pontos —
     é a cor DELES que muda ao longo do eixo. O jeito de fazer isso é
     inverter os papéis: o fundo vira o campo de cor e a MÁSCARA vira o
     padrão de pontos, então cada ponto pega a cor do lugar onde está. */
  --cta-ponto-quente: rgba(233, 146, 255, 0.5);
  --cta-ponto-frio: rgba(102, 148, 255, 0.55);

  /* ── Layout · design px @1440 ────────────────────────────────── */
  --design-w: 1440;
  --design-h: 816;
  --gutter: clamp(20px, 2.222vw, 32px);   /* 32px @1440 */

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.26, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0.02, 0.2, 1);

  /* Apresentação da Rivio (§ 2) — o texto que se revela lendo.
     O Figma pinta o parágrafo com um gradiente vertical de Dark-05 até
     Dark-05 com 14% de alfa. Aqui esse gradiente vira ESTADO: apagado é
     o fim dele, aceso é Dark-02. É o desvio que a microinteração pede —
     sem ele não há o que revelar.

     O acento é o terceiro estado, medido no GIF de referência: a letra
     não troca de cor, ela PULSA — apagado, acende claro no acento e só
     então assenta na cor final. Na referência esse acento é o verde da
     marca dela; aqui é Brand/Blue. */
  --tell-apagado: rgba(122, 133, 153, 0.2);
  --tell-acento: var(--blue);
  --tell-aceso: var(--dark-02);

  /* Os quatro atos da § 2, em svh de SCROLL (a fita soma isto + os
     100svh do palco preso). Quem lê estes números é o `tell.js`, que
     os transforma em fração do curso — mudar aqui muda os dois. */
  --tell-leitura: 180;
  /* 95 e não 60: o título cresce durante ESTA fatia, e a 60 o
     crescimento saía rápido demais. */
  --tell-troca: 95;
  /* 8 e não 70: esta é a ESPERA entre o título pronto e a § 3 começar a
     subir. Medida, a espera total era 780px contra 516px de
     crescimento — lia como travamento. */
  --tell-curto: 8;
  /* 72 e não 100: parte da espera mora AQUI. Durante o `cobre` a seção
     sobe da borda de baixo até alcançar a base do título, e isso é meia
     tela de rolagem antes de qualquer contato. Encurtar a sobreposição
     encurta a espera sem tocar no crescimento. */
  --tell-cobre: 72;

  /* No celular a mesma fita fica longa demais: 510svh a 812 de altura
     são 4141px de rolagem para UMA frase. Os atos encolhem; a
     sobreposição com a § 3 NÃO, porque ela vale uma tela exata e é o que
     costura as duas seções. Total: 510 → 376svh. */
  @media (max-width: 860px) {
    --tell-leitura: 55;
    /* 55: a 32 o crescimento durava 168px contra 504 de espera — a
       mesma desproporção que o cliente apontou no desktop. */
    --tell-troca: 55;
    --tell-curto: 4;
    /* a sobreposição também encolhe: uma tela INTEIRA de rolagem só para
       a § 3 cobrir a § 2 é caro no celular, e meia tela já lê como
       cobertura */
    /* 55 e não menos: MEDIDO, a 42 a seção nunca alcança a base do
       título — a folga estaciona em 44px e o empurrão não acontece.
       No celular a sobreposição é curta demais para dar margem. */
    --tell-cobre: 55;
  }

  /* A fita da § 4 (headline + constelação + bloco de texto), em svh de
     scroll, e o quanto ela sobe para dentro da fita da § 3 — a tela de
     scroll morto que sobra lá depois de o palco apagar. */
  /* ── Passo de scroll das seções presas ───────────────────────
     Em PIXELS, não em `svh`. A pista em `svh` é proporcional à altura
     da janela, mas a roda do mouse entrega pixels fixos: a mesma seção
     custava 686px por camada numa janela de 800 e 926px numa de 1080 —
     35% a mais de rolagem só por ter tela maior. Medido entre duas
     máquinas, foi a queixa do cliente.

     Com o passo em px, o número de voltas da roda por camada é o mesmo
     em qualquer monitor. A tela cheia continua em `svh` porque ali ela
     representa a janela de verdade. */
  --lay-passo: 440px;

  /* Abertura da camada. Era `0.86s` com `--ease-out-expo`, que é
     `cubic-bezier(0.16, 1, 0.3, 1)`: essa curva entrega quase toda a
     distância nos primeiros 16% do tempo e depois rasteja — arranque
     brusco por construção, que foi a queixa. Uma saída macia e mais
     longa troca o estalo por deslize. */
  --lay-dur: 1.15s;
  --lay-ease: var(--ease-out-soft);

  --fi-fita: 460;
  /* Quanto a § 4.6 sobe por cima da § 4, em svh de scroll. Mesmo
     mecanismo da § 3 sobre a § 2 (`--tell-cobre`): a fita da constelação
     tem a saída no fim, e os cards chegam por cima dela enquanto ela
     ainda está orbitando. */
  --fi-cobre: 100;
  --tell-solo-sobe: 100;
}