:root {
  --bg: #0b0b0c;
  --bg-2: #151517;
  --linha: #26262a;
  --texto: #f2f2f2;
  --texto-2: #a8a8ad;
  --cobre: #c9824a;
  --cobre-claro: #e8b07e;
  --cromo: #d9d9dc;
  --ml: #ffe600;
  --ml-texto: #1d1d1b;
  --red: #e0262e;
  --blue: #1e8bff;
  --raio: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: var(--cobre-claro); }

.topo { padding: 14px 16px 6px; display: flex; justify-content: center; border-bottom: 1px solid var(--linha); }
.logo { height: 64px; width: auto; }

main { max-width: 1040px; margin: 0 auto; padding: 16px; }

/* home */
.hero { text-align: center; padding: 20px 0 24px; }
.hero h1 { font-size: clamp(26px, 6vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.5px; }
.hero h1 span { color: var(--cobre-claro); }
.hero p { color: var(--texto-2); margin-top: 10px; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--texto);
  background: var(--bg-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--cobre); transform: translateY(-2px); }
.card img { background: #fff; border-radius: 10px; aspect-ratio: 1; object-fit: contain; width: 100%; height: auto; }
.card-cat { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-2); margin-top: 4px; }
.card.tema-red .card-cat { color: #ff6b70; }
.card.tema-blue .card-cat { color: #6cb4ff; }
.card strong { font-size: 15px; line-height: 1.3; }
.card-cta { color: var(--cobre-claro); font-size: 14px; font-weight: 600; margin-top: auto; }

/* produto */
.produto { display: grid; gap: 18px; padding-bottom: 110px; }
@media (min-width: 860px) {
  .produto { grid-template-columns: 1.05fr 1fr; align-items: start; padding-bottom: 40px; }
  .destaques, .detalhes, .mais { grid-column: 1 / -1; }
  .barra-compra { display: none; }
}
.galeria { background: #fff; border-radius: var(--raio); overflow: hidden; position: relative; }
.trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.trilho::-webkit-scrollbar { display: none; }
.trilho img { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1; object-fit: contain; width: 100%; height: auto; padding: 12px; }
.pontos { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.pontos span { width: 7px; height: 7px; border-radius: 50%; background: #0003; }
.pontos span.on { background: #000a; }

.categoria { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
.tema-red .categoria { color: #ff6b70; }
.tema-blue .categoria { color: #6cb4ff; }
.info h1 { font-size: clamp(22px, 5vw, 30px); line-height: 1.2; margin-top: 4px; }
.chamada { font-size: 20px; font-weight: 800; font-style: italic; margin-top: 8px; text-transform: uppercase; letter-spacing: -.3px; }
.tema-red .chamada { color: #ff4c53; }
.tema-blue .chamada { color: #4fa6ff; }
.nota { color: #ffc94d; margin-top: 6px; font-weight: 700; }
.nota span { color: var(--texto-2); font-weight: 400; font-size: 14px; }
.resumo { color: var(--texto-2); margin: 10px 0 16px; }

.btn-ml {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--ml); color: var(--ml-texto); text-decoration: none;
  font-weight: 800; font-size: 18px; padding: 16px 18px; border-radius: 12px;
  box-shadow: 0 6px 20px #ffe60033; transition: transform .1s, filter .15s;
}
.btn-ml:hover { filter: brightness(1.05); }
.btn-ml:active { transform: scale(.98); }
.btn-ml svg { width: 22px; height: 22px; }
.aviso-preco { font-size: 13px; color: var(--texto-2); text-align: center; margin-top: 8px; }

.garantias { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.garantias li {
  background: var(--bg-2); border: 1px solid var(--linha); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; color: var(--texto-2);
}
.garantias b { color: var(--texto); }
.home .garantias { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 22px; }

.destaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.destaques div {
  background: linear-gradient(160deg, #1d1d20, #121214); border: 1px solid var(--linha);
  border-radius: 12px; padding: 14px 12px; text-align: center;
}
.destaques strong { display: block; font-size: 18px; color: var(--cromo); }
.destaques span { font-size: 13px; color: var(--texto-2); }

.detalhes h2, .mais h2 { font-size: 20px; margin-bottom: 10px; }
.detalhes ul { list-style: none; display: grid; gap: 8px; }
.detalhes li { padding-left: 26px; position: relative; color: #ddd; }
.detalhes li::before { content: "✓"; position: absolute; left: 4px; color: var(--cobre-claro); font-weight: 800; }

.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #0b0b0ce6; backdrop-filter: blur(8px); border-top: 1px solid var(--linha); z-index: 10;
  transform: translateY(110%); transition: transform .2s;
}
.barra-compra.visivel { transform: none; }
.barra-compra .btn-ml { padding: 14px; font-size: 17px; }

.texto { max-width: 720px; }
.texto h1 { margin-bottom: 14px; }
.texto p { color: #ccc; margin-bottom: 12px; }

.rodape { text-align: center; color: var(--texto-2); font-size: 13px; padding: 24px 16px 120px; border-top: 1px solid var(--linha); }
.rodape p + p { margin-top: 6px; }
@media (min-width: 860px) { .rodape { padding-bottom: 32px; } }

.cookies {
  position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 20; max-width: 520px; margin: 0 auto;
  background: #1c1c1f; border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px;
  display: flex; gap: 12px; align-items: center; font-size: 13px; color: #ccc; box-shadow: 0 10px 30px #0008;
}
.cookies[hidden] { display: none; }
.cookies button { background: var(--cobre); color: #111; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }