/* ==========================================================================
   BURLONI B-TECH — TOKENS GLOBAIS
   Fonte única de verdade do design system. Nenhum valor de cor, espaço,
   sombra ou duração deve ser escrito "solto" nos outros arquivos.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     1. COR
     Base escura em 85% da página. Um acento de marca (cobalto),
     um acento de urgência (âmbar) usado SÓ para prazo/estoque —
     é a restrição que mantém o poder de sinal do âmbar.
     --------------------------------------------------------------- */

  --c-graphite:      #0B0D0E;   /* fundo — nunca #000, que achata o 3D */
  --c-surface:       #16191B;   /* card / superfície elevada */
  --c-surface-2:     #1D2225;   /* hover de superfície */
  --c-line:          #2A2F33;   /* divisória 1px, grid técnico */
  --c-line-strong:   #3A4146;   /* borda de estado ativo */

  --c-text:          #F2F4F5;   /* off-white: branco puro vibra no escuro */
  --c-text-dim:      #8A9196;   /* apoio, specs, legendas */
  --c-text-faint:    #5C6469;   /* metadados, rodapé */

  --c-cobalt:        #1F6FEB;   /* CTA, estado ativo, dado técnico */
  --c-cobalt-hi:     #2A7BF7;   /* hover do CTA */
  --c-cobalt-lo:     #123E85;   /* pressed / borda sutil */
  --c-cobalt-text:   #7FB0FF;   /* azul legível sobre escuro (~8:1) */

  --c-amber:         #FF8A3D;   /* EXCLUSIVO: prazo, contador, estoque */
  --c-green:         #24C38A;   /* confirmação: frete, troca, estoque ok */

  /* Alfas derivados — evita rgba() solto pelo código */
  --a-cobalt-08:     rgba(31, 111, 235, 0.08);
  --a-cobalt-16:     rgba(31, 111, 235, 0.16);
  --a-cobalt-40:     rgba(31, 111, 235, 0.40);
  --a-amber-12:      rgba(255, 138, 61, 0.12);
  --a-white-06:      rgba(242, 244, 245, 0.06);
  --a-white-10:      rgba(242, 244, 245, 0.10);
  --a-black-60:      rgba(11, 13, 14, 0.60);
  --a-black-90:      rgba(11, 13, 14, 0.92);

  /* ---------------------------------------------------------------
     2. TIPOGRAFIA
     3 famílias, 3 funções distintas. O mono é o que faz a interface
     ler como instrumento de engenharia — menor custo, maior retorno.
     --------------------------------------------------------------- */

  --f-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Escala fluida: razão 1.25 no mobile, 1.333 no desktop */
  --t-hero:    clamp(2.5rem, 8.5vw, 5.75rem);
  --t-h2:      clamp(1.75rem, 5vw, 3.25rem);
  --t-h3:      clamp(1.25rem, 2.4vw, 1.625rem);
  --t-num:     clamp(2.75rem, 9vw, 4.25rem);
  --t-lede:    clamp(1.0625rem, 1.6vw, 1.25rem);
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.6875rem;

  --lh-snug:   1.15;
  --lh-body:   1.6;

  --ls-display: -0.02em;
  --ls-label:    0.08em;

  /* ---------------------------------------------------------------
     3. ESPAÇAMENTO
     Base 4px. Escala única — respiro premium vem de usar POUCOS
     valores com consistência, não de valores arbitrários.
     --------------------------------------------------------------- */

  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* Respiro vertical de seção: cresce com a viewport.
     Generoso de propósito — sem divisórias entre seções, é o espaço em
     branco que separa os blocos. Respiro apertado + zero linha viraria
     uma parede de texto. */
  --sp-section: clamp(5.5rem, 14vh, 11rem);
  /* Margem lateral: nunca deixa o texto colar na borda no mobile */
  --sp-gutter:  clamp(1.25rem, 5vw, 4rem);

  /* ---------------------------------------------------------------
     4. GRID
     --------------------------------------------------------------- */

  --grid-max:   78rem;   /* 1248px — largura de conteúdo */
  --grid-text:  36rem;   /* 576px  — máx. de linha de leitura (~68ch) */
  --grid-gap:   clamp(1rem, 2vw, 1.5rem);

  /* ---------------------------------------------------------------
     5. FORMA E ELEVAÇÃO
     Raio pequeno e consistente: tech premium não é arredondado.
     Sombra sempre com spread negativo — sombra "difusa e barata"
     é uma das marcas de site amador.
     --------------------------------------------------------------- */

  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 12px 32px -16px rgba(0,0,0,.75);
  --sh-3: 0 28px 64px -28px rgba(0,0,0,.85);
  --sh-cobalt: 0 12px 34px -14px rgba(31,111,235,.62);

  /* ---------------------------------------------------------------
     6. MOVIMENTO
     Timing calibrado: 120ms = feedback tátil, 240ms = troca de estado,
     700ms = entrada de conteúdo. Nada acima de 900ms.
     --------------------------------------------------------------- */

  --d-tap:    120ms;   /* :active, feedback imediato */
  --d-state:  240ms;   /* hover, troca de cor/imagem */
  --d-enter:  700ms;   /* revelação de conteúdo no scroll */

  --e-out:    cubic-bezier(.22, .61, .36, 1);    /* saída suave (padrão) */
  --e-in-out: cubic-bezier(.65, .05, .36, 1);
  --e-snap:   cubic-bezier(.16, 1, .3, 1);        /* estados de UI */

  --z-canvas: 0;
  --z-content: 1;
  --z-sticky: 30;
  --z-nav: 40;
  --z-bar: 50;

  --h-topbar: 38px;
  --h-nav: 56px;   /* altura do pill flutuante (botao 40px + 8px de folga) */
}

/* ==========================================================================
   RESET ENXUTO
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Nunca forçar scroll suave em quem pediu para reduzir movimento */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-graphite);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, canvas, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Foco visível e consistente — item de acessibilidade que
   também é sinal de acabamento profissional. */
:focus-visible {
  outline: 2px solid var(--c-cobalt-text);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--a-cobalt-40); color: #fff; }

/* ==========================================================================
   UTILITÁRIOS DE LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.section {
  padding-block: var(--sp-section);
  position: relative;
  /* Âncora nunca para embaixo da navbar fixa */
  scroll-margin-top: calc(var(--h-nav) + var(--sp-6));
}
/* Faixa: respiro reduzido. Para blocos que são um detalhe, não uma seção —
   usar o mesmo padding daria a eles um peso que não têm. */
.section--tight { padding-block: calc(var(--sp-section) * 0.38); }

.section__head { max-width: 46rem; margin-bottom: var(--sp-7); }

.section__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-top: var(--sp-3);
}

.section__lede {
  max-width: var(--grid-text);
  margin-top: var(--sp-4);
  font-size: var(--t-lede);
  color: var(--c-text-dim);
}

/* Label monoespaçada — o "carimbo de engenharia" da interface */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.eyebrow--accent { color: var(--c-cobalt-text); }
.eyebrow--urgent { color: var(--c-amber); }
.eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}


/* ==========================================================================
   ESTADO INICIAL DAS REVELAÇÕES
   Só esconde quando existe JS E o usuário não pediu redução de movimento.
   Sem isso, uma falha de JS deixaria a página em branco.
   ========================================================================== */

html.js:not(.no-motion) [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}
html.js:not(.no-motion) [data-reveal="up"]   { transform: translateY(22px); }
html.js:not(.no-motion) [data-reveal="fade"] { transform: none; }
/* "line" usa deslocamento em px, não em %: a versão em porcentagem exigia
   `overflow: hidden` no container, que cortava acento de maiúscula. */
html.js:not(.no-motion) [data-reveal="line"] { transform: translateY(28px); }