/* JG3D — tokens do design system (JG3D/Identidade Visual/design-system/project/tokens.json) */
/* Fontes servidas daqui (latin cobre o português); nada de CSS externa travando a renderização. */
@font-face { font-family: "Michroma"; src: url("../fontes/Michroma-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fontes/SpaceGrotesk-latin-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --laranja: #ff7a1a; --laranja-claro: #ffa25c; --laranja-texto: #a84808;
  --grafite: #23232a; --grafite-fundo: #1b1b20; --off-white: #f1efe8; --sobre-laranja: #23232a;
  --fundo: #ffffff; --superficie: #f1efe8; --superficie-2: #e4e1d8;
  --tinta: #23232a; --tinta-suave: #5f5e5a; --linha: #d3d1c7;
  --display: "Michroma", "Arial Black", sans-serif;
  --texto: "Space Grotesk", system-ui, sans-serif;
  --tinta-clara: #d3d1c7; --tinta-apagada: #888780; --rotulo-claro: #b4b2a9; --linha-escura: #3a3a44;
  --alvo: 44px; /* área mínima de toque */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e6: 24px; --e8: 32px; --e12: 48px;
  --raio-p: 4px; --raio-m: 8px; --raio-g: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --laranja-texto: #ffa25c; --fundo: #1b1b20; --superficie: #23232a; --superficie-2: #2d2d36;
    --tinta: #f1efe8; --tinta-suave: #b4b2a9; --linha: #3a3a44; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font: 400 16px/26px var(--texto); background: var(--fundo); color: var(--tinta); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1, h2 { font-family: var(--display); text-transform: uppercase; }
h1 { font-size: clamp(26px, 4.4vw, 44px); line-height: 1.2; letter-spacing: .04em; overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: clamp(18px, 2.6vw, 24px); line-height: 1.3; letter-spacing: .08em; }
h3 { font: 500 18px/26px var(--texto); }
p { margin: 0; }

.miolo { max-width: 1120px; margin-inline: auto; padding-inline: max(16px, 4vw); }
.estreito { max-width: 760px; }
.secao { padding-block: var(--e12); }
.tom { background: var(--superficie); }
.lead { max-width: 60ch; color: var(--tinta-suave); margin-bottom: var(--e6); }
.rotulo { font: 400 11px/16px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.rotulo.claro { color: var(--rotulo-claro); }
.destaque { font-size: 18px; line-height: 28px; }
.divisor { display: flex; gap: 6px; margin: var(--e3) 0 var(--e4); }
.divisor span { width: 24px; height: var(--e1); background: var(--laranja); border-radius: 1px; }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); font: 400 11px/16px var(--display); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; text-align: center;
  padding: var(--e3) var(--e6); border-radius: var(--raio-p); border: 1.5px solid transparent; cursor: pointer; transition: filter .15s; }
.botao:hover { filter: brightness(1.08); }
.botao:focus-visible, .filtro:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--laranja-claro); outline-offset: 2px; }
.primario { background: var(--laranja); color: var(--sobre-laranja); }
.contorno-claro { color: var(--off-white); border-color: var(--off-white); }
.grafite { background: var(--grafite); color: var(--off-white); }
.cheio { display: flex; }

/* topo */
.topo { position: sticky; top: 0; z-index: 5; background: var(--grafite); color: var(--off-white); border-bottom: 1px solid var(--linha-escura); }
.topo-linha { display: flex; align-items: center; gap: var(--e6); min-height: 68px; }
.marca { flex: none; }
.marca img { height: 48px; width: auto; }
.menu { display: flex; gap: var(--e6); margin-left: auto; font-size: 14px; }
.menu a { text-decoration: none; color: var(--tinta-clara); display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); min-width: var(--alvo); }
.menu a:hover { color: var(--off-white); }

/* abertura */
.abertura { background: var(--grafite); color: var(--off-white); padding-block: var(--e12); }
.abertura-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e12); align-items: center; }
.abertura h1 { margin: var(--e3) 0 var(--e4); }
.abertura .destaque { color: #d3d1c7; max-width: 46ch; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e4); margin-top: var(--e8); }
.abertura-foto { border-radius: var(--raio-g); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* vitrine */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e6); }
.filtro { min-height: var(--alvo); font: 500 14px/20px var(--texto); padding: var(--e2) var(--e4); border-radius: var(--raio-p); border: 1px solid var(--linha); background: transparent; color: var(--tinta); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e6); }
.cartao { display: flex; flex-direction: column; background: var(--superficie); border-radius: var(--raio-m); overflow: hidden; }
.cartao img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--superficie-2); }
.cartao-corpo { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); flex: 1; }
.descricao { font-size: 14px; line-height: 22px; color: var(--tinta-suave); flex: 1; }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.etiqueta { font: 500 12px/18px var(--texto); letter-spacing: .08em; text-transform: uppercase; padding: var(--e1) var(--e2); border-radius: var(--raio-p); background: var(--superficie-2); border: 1px solid transparent; }
.etiqueta.contorno { background: transparent; color: var(--tinta-suave); border-color: var(--tinta-suave); }
.preco { font-size: 14px; color: var(--tinta-suave); margin-top: var(--e1); }
.preco b { font-size: 20px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.nota { margin-top: var(--e6); font-size: 13px; color: var(--tinta-suave); }

/* como funciona */
.passos { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e8); }
.passos p, .materiais p { font-size: 15px; line-height: 24px; color: var(--tinta-suave); margin-top: var(--e2); }
.passo-n { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--e3); border-radius: var(--raio-p); background: var(--laranja); color: var(--sobre-laranja); font: 400 14px/1 var(--display); }

/* sob medida */
.faixa { background: var(--laranja); color: var(--sobre-laranja); }
.faixa-grade { display: flex; flex-wrap: wrap; gap: var(--e6); align-items: center; justify-content: space-between; }
.faixa p { max-width: 52ch; margin-top: var(--e3); }

/* materiais */
.materiais { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e6); margin-top: var(--e6); }
.materiais article { padding: var(--e6); border: 1px solid var(--linha); border-radius: var(--raio-m); }
.materiais h3 { font: 400 16px/24px var(--display); letter-spacing: .08em; }

/* dúvidas */
details { border-bottom: 1px solid var(--linha); }
summary { cursor: pointer; padding: var(--e4) 0; font-weight: 500; font-size: 17px; }
details p { padding-bottom: var(--e4); color: var(--tinta-suave); max-width: 62ch; }

/* rodapé */
.rodape { background: var(--grafite-fundo); color: var(--tinta-clara); padding-block: var(--e12) var(--e6); font-size: 15px; }
.rodape-grade { display: flex; flex-wrap: wrap; gap: var(--e8); justify-content: space-between; }
.rodape-grade img { height: 44px; width: auto; margin-bottom: var(--e2); margin-left: -6px; }
.contatos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--e3) var(--e6); align-items: baseline; }
.contatos li { display: contents; } /* rótulos numa coluna do tamanho do maior */
.contatos a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.rodape-fim { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between; margin-top: var(--e8); padding-top: var(--e4); border-top: 1px solid var(--linha-escura); font-size: 13px; color: var(--tinta-apagada); }
.rodape-fim a { display: inline-flex; align-items: center; min-height: var(--alvo); }

.menu a, .botao { white-space: nowrap; }
/* Celular: o menu vira uma segunda linha rolável no topo, em vez de sumir. */
@media (max-width: 900px) {
  html { scroll-padding-top: 124px; }
  .topo-linha { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: var(--e2); }
  .menu a { flex: none; }
  .topo-linha .botao { margin-left: auto; }
  .menu { order: 3; width: 100%; margin: 0 calc(-1 * max(16px, 4vw)); padding-inline: max(16px, 4vw); gap: var(--e4); font-size: 13px;
    overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--linha-escura); }
  .menu::-webkit-scrollbar { display: none; }
}
/* Telas estreitas: só o selo (o guia da marca manda usar o selo onde o nome não cabe). */
@media (max-width: 420px) {
  .marca img { height: 44px; }
  .so-largo { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .botao { transition: none; } }

.cartao[hidden] { display: none; }
.cartao img.sem-foto { object-fit: contain; padding: 25%; background: var(--grafite-fundo); }
/* Página do modelo: curta, o fundo escuro evita faixa branca abaixo do rodapé. */
.pagina-modelo { background: var(--grafite-fundo); }
.pagina-modelo h1 { font-size: clamp(20px, 6.4vw, 44px); }

/* Acessibilidade: atalho para o conteúdo e texto só para leitor de tela. */
.pular { position: absolute; left: var(--e4); top: -100px; z-index: 10; background: var(--laranja); color: var(--sobre-laranja);
  padding: var(--e3) var(--e4); border-radius: var(--raio-p); text-decoration: none; font-weight: 500; }
.pular:focus { top: var(--e3); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }