/* Tokens e reset. Tudo que é global mora aqui e só aqui.

   Sistema tipográfico: Archivo variável, usando o eixo de LARGURA.
   Título em largura expandida (125%) e peso 900; texto em largura normal.

   A escolha da largura é o que dá a leitura industrial. Grotesca condensada
   lê como jornal e esporte; expandida em peso 900 lê como equipamento
   pesado — planta no chão, ocupa espaço, não corre. Era o erro anterior:
   o site usava condensada, a proporção oposta da que se queria.

   Tamanho não é o que dá presença: peso e largura dão. Por isso o título
   não é gigante — é curto, largo e pesado. */

:root {
  /* Marca */
  --laranja: #F0741E;
  --laranja-forte: #D25C0C;
  --laranja-fraco: #FFF1E4;

  /* Escuros: preto puro para os cortes, grafite para as chapas */
  --preto: #000000;
  --grafite: #1A1718;
  --grafite-claro: #2B2728;
  --grafite-medio: #413D3F;

  /* Claros com viés quente */
  --papel: #FBFAF8;
  --nuvem: #EFEBE6;
  --linha: #DFD9D2;
  --linha-forte: #C9C1B7;
  --texto: #1A1718;
  --texto-medio: #635C58;
  --texto-fraco: #918884;

  /* Sobre fundo escuro */
  --claro-forte: #FFFFFF;
  --claro-medio: rgba(255, 255, 255, .66);
  --claro-fraco: rgba(255, 255, 255, .34);
  --claro-linha: rgba(255, 255, 255, .12);

  --fonte: "Archivo", system-ui, sans-serif;

  --largura: 1360px;
  --margem: clamp(18px, 4vw, 44px);
  --topo-altura: 60px;

  /* A barra de departamentos tambem e fixa, entao quem se prende abaixo
     do cabecalho precisa contar as duas alturas. Usar so --topo-altura
     fazia a barra de filtros e a lateral deslizarem por baixo dela. */
  --topo-nav: 42px;
  --topo-total: calc(var(--topo-altura) + var(--topo-nav));
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* O chao da pagina e o tom mais escuro; card, laje e cabecalho ficam
     com o claro. Antes os dois eram --papel e o produto tinha
     exatamente a cor do fundo: a listagem lia como superficie continua
     riscada por fios, e nao como objetos que se pode pegar. Um degrau de
     tom resolve o que nenhuma sombra precisaria resolver. */
  background: var(--nuvem);
  color: var(--texto);
  font-family: var(--fonte);
  font-variation-settings: "wdth" 100;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Título: expandido, peso 900, caixa alta, entrelinha rente */
h1, h2, h3, .expandido {
  font-family: var(--fonte);
  font-variation-settings: "wdth" 125;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.4vw, 4.2rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.6rem); }
h3 { font-size: 1.05rem; letter-spacing: -.005em; }
p { margin: 0; }

.faixa { max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }

/* Rótulo técnico: nomeia a seção sem competir com o título */
.rotulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--laranja);
}
.rotulo::before { content: ""; width: 22px; height: 2px; background: currentColor; }

.secao { padding-block: clamp(48px, 6.5vw, 96px); }
.secao-topo { display: grid; gap: 14px; margin-bottom: 36px; max-width: 56ch; }
.secao-topo p { color: var(--texto-medio); font-size: .98rem; }

/* Filete laranja que separa as faixas */
.regua { height: 4px; background: var(--laranja); }

/* Botões: pequenos e densos. O tamanho grande era o que mais entregava
   layout de template — no site de referência o botão tem 32px de altura
   e texto de 12px, e é a imagem que manda. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 22px;
  font-variation-settings: "wdth" 112;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.botao-cheio { background: var(--laranja); color: var(--preto); }
.botao-cheio:hover { background: #fff; }
.botao-vazio { border-color: var(--texto); color: var(--texto); }
.botao-vazio:hover { background: var(--texto); color: #fff; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Texto que some da tela mas continua existindo para leitor de tela.

   Usado nos botões do topo, que agora são só ícone: sem isso o rótulo
   sumiria também para quem navega por audio, e o botão viraria um
   "botão" sem nome. */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}