/* tokens.css: fontes e TODAS as variáveis (cores, tipos, espaços, raios, sombras, tempos).
   Cubotimize, layout novo (direção "Cubo"). Mobile first; pontos de quebra: 640, 960, 1200 px.
   Regras em kb/02-metodo-novo-layout.md: cores, fontes, espaços e tempos só via var(--…) de tokens.css. */

@font-face {
  font-family: 'Nunito';
  src: url('/assets/vendor/fonts/nunito-5.3.0/nunito-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* cores */
  --creme: #FAF8F4;
  --creme-2: #F2EEE5;
  --branco: #FFFFFF;
  --tinta: #12131A;
  --tinta-2: #45475A;
  --tinta-linha: rgba(18, 19, 26, 0.14);
  --tinta-sombra: rgba(18, 19, 26, 0.12);
  --azul: #2A54D3;
  --azul-claro: #2F60F0;
  --marinho: #162D70;
  --vermelho: #D32A2A;
  --vermelho-claro: #F43131;
  --vermelho-escuro: #701616;
  --verde-escuro: #16702D;
  --verde: #2AD354;
  --verde-claro: #31F460;
  --ciano: #7EFFFB;
  --claro-1: rgba(255, 255, 255, 0.9);
  --claro-2: rgba(255, 255, 255, 0.78);
  --claro-linha: rgba(255, 255, 255, 0.2);
  --claro-fundo: rgba(255, 255, 255, 0.08);
  --claro-fundo-2: rgba(255, 255, 255, 0.16);
  --cabecalho-fundo: rgba(250, 248, 244, 0.92);
  --modal-fundo: rgba(18, 19, 26, 0.55);
  --rodape-logo: 220px;    /* largura igual para os logos Cubotimize e CuboPlus do rodapé */

  /* padrões (grade isométrica) */
  --grade-iso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='20'%3E%3Cpath d='M0 0L34.64 20M0 20L34.64 0' stroke='%2312131A' stroke-opacity='.09' fill='none'/%3E%3C/svg%3E");
  --grade-iso-clara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='20'%3E%3Cpath d='M0 0L34.64 20M0 20L34.64 0' stroke='%23FFFFFF' stroke-opacity='.12' fill='none'/%3E%3C/svg%3E");

  /* fontes */
  --fonte: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h1: clamp(2.75rem, 6.6vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h3: 1.375rem;
  --fs-grande: 1.1875rem;
  --fs-base: 1.0625rem;
  --fs-pequena: 0.9375rem;
  --fs-mini: 0.8125rem;
  --fs-nivel: clamp(4rem, 3rem + 3vw, 5.5rem);
  --fs-ano: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-valor: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-num: 2.75rem;
  --fs-micro: 0.6875rem;
  --fs-micro-2: 0.75rem;
  --fs-h4: 1.25rem;
  --fs-destaque: 1.5rem;
  --fs-bloco: 1.75rem;
  --fs-icone-texto: 1.125rem;
  --fs-card: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  --fs-fecho: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-aspas: 4.5rem;

  /* espaços */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --gutter: 16px;
  --largura: 1200px;
  --altura-cabecalho: 64px;

  /* traços, raios e sombras */
  --traco: 2px;
  --traco-fino: 1px;
  --traco-g: 6px;
  --foco: 3px;
  --r-p: 12px;
  --r-m: 16px;
  --r-g: 24px;
  --r-pilula: 999px;
  --sombra-p: 4px 4px 0 var(--tinta);
  --sombra-m: 6px 6px 0 var(--tinta);
  --sombra-g: 10px 10px 0 var(--tinta);
  --sombra-azul: 4px 4px 0 var(--azul);
  --sombra-quadro: 10px 10px 0 var(--azul);

  /* movimento */
  --d-rapida: 160ms;
  --d-media: 280ms;
  --d-lenta: 600ms;
  --d-flutua: 7s;
  --d-grade: 8s;           /* deslize da grade isométrica (60s → 18s → 8s, em teste) */
  --d-galeria: 6s;         /* tempo de cada imagem da galeria do BI */
  --d-galeria-troca: 900ms;
  --d-depoimentos: 11s;    /* tempo que a faixa de depoimentos leva para andar um cartão */
  --d-revela: 700ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* cubo do banner */
  --tinta-sombra-forte: rgba(18, 19, 26, 0.22);
  --paralaxe-x: 8px;
  --paralaxe-y: 5px;
  --projecao-x: -22px;
  --projecao-y: -8px;
  --afasta-1: -22px;
  --afasta-2: -10px;
  --grade-passo-x: 69.28px;  /* dois módulos da grade isométrica: o deslize fica sem emenda */
  --grade-passo-y: 40px;
  --qlik-zoom: 1.16;
  --traco-trace: 8px;      /* tracejado das linhas do método e da trajetória */
  --traco-ciclo: 14px;
  --d-tracejado: 900ms;
  --d-pulso: 6s;           /* brilho que percorre a linha da trajetória */
  --deriva-x: 24px;        /* cubos do fundo do contato */
  --deriva-y: -36px;

  /* produtos CuboPlus (gradientes das marcas de cada produto) */
  --p-link: linear-gradient(90deg, #2A54D3, #2AD354);
  --p-trilha: linear-gradient(90deg, #2AD354, #FF9600);
  --p-lupa: linear-gradient(90deg, #00B007, #8516F9);
  --p-sorteio: linear-gradient(90deg, #1CB0F6, #58CC02, #FF9600);
  --p-link-cor: #2A54D3;
  --p-trilha-cor: #B35F00;
  --p-lupa-cor: #6A0FC9;
  --p-sorteio-cor: #0A7FB5;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}
@media (min-width: 960px) {
  :root { --gutter: 32px; --altura-cabecalho: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-rapida: 0ms; --d-media: 0ms; --d-lenta: 0ms; }
}