/* ==========================================================================
   Tema Creamy — camada base
   Tokens extraidos do CSS de producao do site de origem (2 MB, 39 arquivos):
   cores por frequencia de uso, escala tipografica, pesos e raios.
   O magenta que aparece no site vem de fotografia e banner, nao do CSS —
   por isso nao existe token de marca rosa aqui.
   ========================================================================== */

:root {
  /* --- cor: primarias --- */
  --c-azul: #054d99;          /* 126 ocorrencias — botoes, titulos, footer */
  --c-azul-escuro: #043d7a;   /* hover do primario */
  --c-azul-claro: #3e7cbf;
  --c-azul-suave: #bcd6f0;   /* contorno de botao secundario */
  --c-azul-link: #489ef9;
  --c-ciano: #00bae7;         /* 86 ocorrencias — hero, destaques */

  /* --- cor: texto --- */
  --c-texto: #343434;         /* 150 ocorrencias — corpo */
  --c-texto-2: #616161;       /* 149 — secundario */
  --c-texto-3: #757575;
  --c-texto-4: #9e9e9e;

  /* --- cor: superficies --- */
  --c-fundo: #ffffff;
  --c-fundo-2: #fafafa;       /* faixas alternadas */
  --c-fundo-3: #f5f5f5;
  --c-borda: #e0e0e0;
  --c-borda-2: #bebebe;
  --c-tint: #ecfcfe;
  --c-tint-2: #effaff;          /* cards de aviso/frete/avaliacoes */

  /* --- cor: estado --- */
  --c-ok: #8bc34a;
  --c-erro: #ff4c4c;

  /* --- tipografia --- */
  --f-titulo: Archivo, "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --f-corpo: Archivo, "Helvetica Neue", system-ui, -apple-system, sans-serif;

  --t-10: 0.625rem;
  --t-12: 0.75rem;            /* 281 ocorrencias — o tamanho mais usado */
  --t-11: 0.6875rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;           /* 254 */
  --t-15: 0.9375rem;
  --t-16: 1rem;               /* 182 */
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;

  --p-regular: 400;
  --p-medio: 500;
  --p-semi: 600;
  --p-bold: 700;              /* 432 ocorrencias */
  --p-black: 900;

  /* --- raio: a assinatura arredondada do site --- */
  --r-4: 4px;
  --r-8: 8px;                 /* cards */
  --r-16: 16px;               /* blocos maiores */
  --r-pill: 100px;            /* botoes */
  --r-circ: 50%;

  /* --- espacamento --- */
  --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;

  /* --- layout --- */
  --largura: 1280px;
  --gutter: 24px;   /* medido na referencia: 1280 - 2x24 = 1232 de conteudo */

  --sombra: 0 1px 3px rgba(0, 0, 0, .06);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .08);
  --transicao: .2s ease;
}

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

body {
  margin: 0;
  font-family: var(--f-corpo);
  font-size: var(--t-14);
  font-weight: var(--p-regular);
  line-height: 1.5;
  color: var(--c-texto);
  background: var(--c-fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  color: var(--c-azul);
  font-weight: var(--p-bold);
  line-height: 1.2;
  margin: 0 0 var(--e-3);
}

h1 { font-size: var(--t-32); }
h2 { font-size: var(--t-24); }
h3 { font-size: var(--t-18); }
h4 { font-size: var(--t-16); }

p { margin: 0 0 var(--e-3); }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-azul); text-decoration: none; transition: opacity var(--transicao); }
a:hover { opacity: .75; }

/* --- layout --- */
.wrap {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--e-7); }
.secao--tint { background: var(--c-fundo-2); }

.secao__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

.secao__sub {
  color: var(--c-texto-2);
  font-size: var(--t-14);
  margin: 0;
}

/* --- botoes: pill, a assinatura do site --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--f-corpo);
  font-size: var(--t-12);
  font-weight: var(--p-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.btn--primario { background: var(--c-azul); color: #fff; }
.btn--primario:hover { background: var(--c-azul-escuro); opacity: 1; }

.btn--contorno {
  background: transparent;
  color: var(--c-azul);
  /* referencia usa contorno azul-claro, nao o azul cheio do primario */
  border-color: var(--c-azul-suave);
}
.btn--contorno:hover { background: var(--c-azul); color: #fff; opacity: 1; }

.btn--bloco { width: 100%; }
.btn--grande { padding: var(--e-4) var(--e-6); font-size: var(--t-14); }

/* --- cards --- */
.card {
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-8);
  overflow: hidden;
}

/* --- grid de prateleira --- */
.grade {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }

/* --- chips de filtro (abas das prateleiras) --- */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: var(--t-12);
  font-weight: var(--p-semi);
  color: var(--c-texto-2);
  cursor: pointer;
}
.chip[aria-selected="true"] { background: var(--c-azul); border-color: var(--c-azul); color: #fff; }

/* --- utilitarios --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* O atalho de teclado precisa VOLTAR a ser visivel quando recebe foco: com
   .visually-hidden puro, quem navega por Tab recebe o foco num elemento que
   nao consegue ver, que e pior do que nao ter atalho nenhum. */
.pular:focus {
  position: fixed;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 100;
  width: auto; height: auto;
  margin: 0; padding: var(--e-3) var(--e-4);
  overflow: visible;
  clip: auto;
  border-radius: var(--r-8);
  background: var(--c-fundo);
  color: var(--c-azul);
  box-shadow: var(--sombra);
}

@media (max-width: 1024px) {
  .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  h1 { font-size: var(--t-24); }
  h2 { font-size: var(--t-20); }
  .secao { padding-block: var(--e-6); }
  .grade--4, .grade--3, .grade--2 { grid-template-columns: 1fr 1fr; }
}