:root {
  --preto: #000;
  --noite: #0b0b0c;
  --grafite: #1d1d1f;
  --nevoa: #f5f5f7;
  --branco: #fff;
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --texto-claro: #f5f5f7;
  --texto-claro-2: #a1a1a6;
  --linha: #d2d2d7;
  --laranja: #fb7b16;
  --laranja-forte: #ff8a26;
  --topo: 56px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --raio: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.47;
  color: var(--texto);
  background: var(--preto);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--laranja);
  accent-color: var(--laranja);
  overflow-x: clip;
}
::selection { background: var(--laranja); color: #111; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--laranja); color: #111; padding: 10px 14px; border-radius: 10px;
  font-weight: 600; text-decoration: none; transition: top 0.2s var(--ease-out);
}
.pular:focus { top: 12px; }

.largura { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 12px; border: 0;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-prim {
  background: linear-gradient(180deg, #ffa046 0%, #fb7b16 52%, #ec5f06 100%); color: #140800;
  box-shadow: 0 10px 26px -10px rgba(251, 123, 22, .75), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.btn-prim:hover { background: linear-gradient(180deg, #ffb062 0%, #ff8a26 52%, #f26a0c 100%); box-shadow: 0 14px 30px -10px rgba(251, 123, 22, .9), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linha); }
.btn-sec:hover { box-shadow: inset 0 0 0 1.5px var(--texto); }
.btn-sec-escuro { background: transparent; color: var(--texto-claro); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.btn-sec-escuro:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn-largo { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--topo);
  background: rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 123, 22, .7) 30%, rgba(255, 255, 255, .5) 50%, rgba(251, 123, 22, .7) 70%, transparent);
}
.topo-in { height: 100%; width: min(1200px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.topo-marca img { height: 34px; width: auto; }
.topo-nav { display: flex; gap: 28px; margin-left: auto; }
.topo-nav a { color: #d2d2d7; font-size: 14px; text-decoration: none; transition: color 0.2s var(--ease-out); }
.topo-nav a:hover { color: #fff; }
.topo-sistema {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px;
  color: #f5f5f7; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .15s var(--ease-out);
}
.topo-sistema svg { color: var(--laranja); }
.topo-sistema:hover { background: rgba(251, 123, 22, .14); box-shadow: inset 0 0 0 1px rgba(251, 123, 22, .6); }
.topo-sistema:active { transform: scale(.96); }
.topo-sacola {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: #f5f5f7;
  transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.topo-sacola:hover { background: rgba(255,255,255,.1); }
.topo-sacola:active { transform: scale(0.94); }
.contador {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--laranja); color: #111;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.contador.pulo { animation: pulo 0.35s var(--ease-out); }
@keyframes pulo { 40% { transform: scale(1.35); } }

/* ---------- hero ---------- */
/* cores registradas: o brilho e a sombra do close mudam de cor com transição, em vez de trocar de repente */
@property --cor { syntax: '<color>'; inherits: true; initial-value: #7a1c34; }
@property --cor-hero { syntax: '<color>'; inherits: true; initial-value: #fb7b16; }
.hero { position: relative; height: 420vh; background: linear-gradient(180deg, #000 0%, #07040a 55%, #0b0605 100%); color: var(--texto-claro); }
.hero-fundo { position: absolute; inset: 0; pointer-events: none; }
.brilho {
  position: absolute; width: 110vh; height: 110vh; left: calc(72% - 55vh); top: calc(60% - 55vh); border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(251, 123, 22, .42), rgba(251, 123, 22, .16) 40%, transparent 72%),
    radial-gradient(closest-side at 62% 70%, color-mix(in srgb, var(--cor, #7a1c34) 70%, transparent), transparent 70%);
  transition: opacity .6s var(--ease-out), --cor .8s var(--ease-out); will-change: transform;
}
.maca {
  position: absolute; height: 76vh; width: auto; top: 15vh; left: calc(72.5% - 25vh);
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, .16)); will-change: opacity;
  animation: maca-entra 1.4s var(--ease-out) backwards;
}
@keyframes maca-entra { from { opacity: 0; transform: translateY(18px) scale(.94); clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  font-size: 14px !important; margin: 0 0 22px !important; color: var(--texto-claro) !important;
  background: linear-gradient(rgba(20, 12, 8, .9), rgba(20, 12, 8, .9)) padding-box, linear-gradient(90deg, #fb7b16, rgba(255, 255, 255, .5), #7a1f33) border-box;
  border: 1px solid transparent;
}
.chip span { padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #ffa046, #ec5f06); color: #140800; font-weight: 600; font-size: 12px; }
.grad {
  background: linear-gradient(92deg, #ffc27a 0%, #fb7b16 38%, #ff5a1f 70%, #c2410c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vitrine .grad, .garantias .grad, .categorias .grad { background-image: linear-gradient(92deg, #ff9a3c 0%, #f06a0a 50%, #b4380a 100%); }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-fotos { position: absolute; inset: 0; pointer-events: none; perspective: 1400px; }
.hf-par {
  position: absolute; left: 50%; top: 50%; height: min(68vh, 92vw); width: auto; max-width: none; aspect-ratio: 842 / 1000;
  transform: translate(-50%, -50%); will-change: transform, opacity; transform-style: preserve-3d;
  filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .65));
  backface-visibility: hidden;
}
.hf-par:not(.pronta) { opacity: 0 !important; }
.hf-camada {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1;
  opacity: 0; transform: scale(.965); transform-origin: 50% 60%;
  transition: opacity .55s var(--ease-out) .12s, transform .9s var(--ease-out);
}
.hf-camada.ativa { z-index: 2; opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .9s var(--ease-out); }
.hf-zoom-in { position: absolute; inset: 0; transform-origin: 30% 30%; will-change: transform; }
.hf-zoom .hf-camada { object-fit: cover; transform: scale(1.03); }
.hf-zoom .hf-camada.ativa { transform: none; }
.hf-zoom {
  position: absolute; left: 50%; top: 50%; width: min(54vw, 920px); aspect-ratio: 1400 / 788; overflow: hidden;
  border-radius: 28px; transform: translate(-50%, -50%); will-change: transform, opacity; opacity: 0;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 80px -10px color-mix(in srgb, var(--cor-hero, #fb7b16) 40%, transparent);
  transition: --cor-hero .8s var(--ease-out);
}
.cap { position: absolute; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.cap.ativa { pointer-events: auto; }
.cap h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.cap h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.cap p { color: var(--texto-claro-2); font-size: clamp(1.02rem, 1.4vw, 1.3rem); margin-top: 18px; }
.cap .acoes { margin-top: 28px; }
.cap-1 { left: max(16px, 7vw); top: 52%; translate: 0 -50%; width: min(600px, 46vw); opacity: 1; }
.cap-1 h1 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); }
.cap-1 p { max-width: 34ch; }
.cap-2 { left: max(16px, 7vw); top: 50%; translate: 0 -50%; width: min(400px, 30vw); }
.cap-3 { right: max(16px, 8vw); top: 50%; translate: 0 -50%; width: min(420px, 36vw); }
.cap-4 { bottom: 7vh; left: 50%; translate: -50% 0; width: min(760px, 100% - 32px); text-align: center; }
.cap-4 .acoes { justify-content: center; }
.preco-hero { font-variant-numeric: tabular-nums; }
.preco-hero strong { color: var(--texto-claro); font-weight: 600; }

.cores-hero { display: flex; gap: 14px; margin-top: 26px; }
.cor-bola {
  position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform 0.15s var(--ease-out);
}
.cor-bola::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--laranja); opacity: 0; transform: scale(0.9);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.cor-bola[aria-checked="true"]::after { opacity: 1; transform: scale(1); }
.cor-bola:active { transform: scale(0.92); }
.cor-nome { font-weight: 500; color: var(--texto-claro) !important; margin-top: 14px !important; }

.rolar {
  position: absolute; bottom: 22px; right: max(16px, 4vw);
  font-size: 13px; color: var(--texto-claro-2); transition: opacity 0.4s var(--ease-out);
}

/* ---------- vitrine ---------- */
.vitrine {
  padding: 112px 0 120px; scroll-margin-top: var(--topo);
  background:
    radial-gradient(900px 520px at 6% 0%, rgba(251, 123, 22, .13), transparent 62%),
    radial-gradient(800px 600px at 100% 30%, rgba(122, 31, 51, .09), transparent 60%),
    radial-gradient(900px 600px at 40% 100%, rgba(120, 160, 220, .10), transparent 60%),
    linear-gradient(180deg, #f6f6f8, #eef0f4);
}
.vitrine-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 32px; margin-bottom: 40px; }
.vitrine-cab h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 14ch; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.abas {
  position: relative; display: flex; padding: 4px; border-radius: 14px; background: #e6e6eb;
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 9px 16px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--texto-2); white-space: nowrap;
  transition: color 0.2s var(--ease-out);
}
.aba[aria-selected="true"] { color: var(--texto); }
.abas-marca {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: #fff;
  transition: transform 0.35s var(--ease-out), width 0.35s var(--ease-out);
}
.busca {
  position: relative; display: flex; align-items: center; color: var(--texto-2);
}
.busca svg { position: absolute; left: 14px; pointer-events: none; }
.busca input {
  width: 280px; height: 46px; padding: 0 14px 0 40px; border-radius: 12px;
  border: 1px solid var(--linha); background: #fff; color: var(--texto); font-size: 16px;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.busca input:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(251,123,22,.2); }

.grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 44%), 1fr));
}
.card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #fff 60%, #fbfbfc);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(0,0,0,.04); border-radius: var(--raio); padding: 18px 18px 20px;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  opacity: 0; translate: 0 12px;
  transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.card.visivel { opacity: 1; translate: 0 0; }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), rgba(251,123,22,.10), transparent 60%);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.card-foto {
  display: block; aspect-ratio: 1; border-radius: 14px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cor, #ddd) 30%, #fff) 0%, color-mix(in srgb, var(--cor, #ddd) 10%, #f4f4f6) 55%, #eeeff2 100%);
  transition: background .5s var(--ease-out);
  transform-style: preserve-3d; margin-bottom: 16px;
}
.card-foto img {
  width: 100%; height: 100%; object-fit: contain; opacity: 0;
  transform: translateZ(0) scale(0.97);
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.card-foto img.pronta { opacity: 1; transform: translateZ(0) scale(1); }
.card-abrir {
  all: unset; display: block; cursor: pointer;
}
.card-abrir::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); z-index: 1; }
.card-abrir:focus-visible::after { outline: 2px solid var(--laranja); outline-offset: 3px; }
.novo { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #d9600a; }
.novo.seminovo { color: #2357c5; }
.destaque .novo { font-size: 17px; color: var(--laranja); margin-bottom: 10px; letter-spacing: 0; }
.card h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; }
.card-linha { margin-top: 6px; font-size: 14px; color: var(--texto-2); line-height: 1.4; }
.card-preco { margin-top: auto; padding-top: 14px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.card-preco small { font-size: 13px; font-weight: 400; color: var(--texto-2); margin-right: 4px; letter-spacing: 0; }
.card-parc { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.card-cores { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.card-cores .cor-bola { width: 18px; height: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.card-cores .cor-bola::after { inset: -4px; box-shadow: 0 0 0 1.5px var(--texto); }

@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 30px 60px -30px rgba(0,0,0,.28); }
  .card:hover::before { opacity: 1; }
  .card:hover .card-foto img.pronta { transform: translateZ(40px) scale(1.04); }
  .card.inclinando { transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out), transform 0.12s linear, box-shadow 0.3s var(--ease-out); }
}

.vazio { margin-top: 32px; color: var(--texto-2); }
.vazio a { color: var(--texto); font-weight: 600; }

/* ---------- destaque ---------- */
.destaque {
  color: var(--texto-claro); padding: 120px 0; overflow: hidden;
  background:
    radial-gradient(700px 520px at 28% 50%, color-mix(in srgb, var(--cor, #fb7b16) 45%, transparent), transparent 70%),
    radial-gradient(600px 400px at 90% 10%, rgba(251, 123, 22, .16), transparent 70%),
    linear-gradient(160deg, #0b0b0d 0%, #120a08 60%, #050505 100%);
}
.destaque-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.destaque-foto { perspective: 1000px; }
.destaque-foto img {
  width: 100%; aspect-ratio: 1; object-fit: contain; opacity: 0;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(0.96);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
.destaque-foto img.pronta { opacity: 1; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1); }
.destaque-texto h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.destaque-texto > p { color: var(--texto-claro-2); font-size: 1.2rem; margin-top: 16px; max-width: 30ch; }
.cores-mini { display: flex; gap: 12px; margin-top: 28px; }
.cores-mini .cor-bola { width: 28px; height: 28px; }
.destaque-preco { margin-top: 24px; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--texto-claro-2); }
.destaque-preco strong { color: var(--texto-claro); font-size: 1.6rem; font-weight: 600; display: block; letter-spacing: -0.02em; }
.destaque .acoes { margin-top: 28px; }

/* ---------- garantias ---------- */
.garantias { padding: 120px 0; background: radial-gradient(700px 400px at 0% 100%, rgba(251, 123, 22, .08), transparent 60%), #fff; }
.garantias h2 { position: sticky; top: calc(var(--topo) + 40px); align-self: start; }
.garantias-in { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; }
.garantias h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); max-width: 12ch; }
.lista-garantias { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.lista-garantias li {
  counter-increment: g; display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px;
  padding: 24px 0; border-top: 1px solid #e8e8ed;
}
.lista-garantias li:last-child { border-bottom: 1px solid #e8e8ed; }
.lista-garantias li::before {
  content: counter(g, decimal-leading-zero); grid-row: span 2;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; color: #fff; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #ffa046, #ec5f06 60%, #7a1f33);
  box-shadow: 0 10px 20px -10px rgba(236, 95, 6, .8);
}
.lista-garantias strong { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.lista-garantias span { color: var(--texto-2); }

/* ---------- visita ---------- */
.visita { background: #fff; padding: 24px 0 104px; }
.visita-in {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px;
  padding: clamp(32px, 6vw, 72px); border-radius: 32px; color: #fff;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(255, 210, 150, .45), transparent 60%),
    linear-gradient(135deg, #ff9a3c 0%, #f26a0c 45%, #b8350a 80%, #6e1a2c 100%);
}
.visita-maca { position: absolute; right: -40px; bottom: -120px; height: 420px; width: auto; opacity: .22; z-index: -1; }
.visita h2 { color: #fff; }
.visita-info { color: rgba(255, 255, 255, .85) !important; }
.visita .btn-prim { background: #140800; color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.visita .btn-prim:hover { background: #2a1408; }
.visita .btn-sec { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.visita h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 16ch; }
.visita-info { margin-top: 12px; }
.visita-info:empty { display: none; }

/* ---------- rodapé ---------- */
.rodape { position: relative; background: radial-gradient(600px 300px at 0% 0%, rgba(251, 123, 22, .12), transparent 60%), #000; color: var(--texto-claro-2); padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); font-size: 14px; }
.rodape-in { display: grid; gap: 12px; }
.rodape img { width: 140px; margin-bottom: 8px; }
.rodape::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #fb7b16, transparent); }
.rodape-ano { font-variant-numeric: tabular-nums; }
.rodape-sistema { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-claro-2); text-decoration: none; }
.rodape-sistema:hover { color: var(--laranja); }
.rodape-sistema svg { width: 15px; height: 15px; }

/* ---------- janela do produto ---------- */
dialog { border: 0; padding: 0; color: var(--texto); }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg-produto {
  width: min(1040px, 100vw - 32px); max-width: none; max-height: min(720px, 100svh - 32px);
  border-radius: 24px; background: #fff; overflow: hidden;
}
.dlg-produto[open] { animation: entrar 0.25s var(--ease-out); }
.dlg-produto[open]::backdrop { animation: fundo 0.25s var(--ease-out); }
.dlg-produto.saindo { animation: sair 0.15s var(--ease-out) forwards; }
@keyframes entrar { from { opacity: 0; transform: scale(0.96); } }
@keyframes sair { to { opacity: 0; transform: scale(0.98); } }
@keyframes fundo { from { opacity: 0; } }
.produto-in { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; height: min(720px, 100svh - 32px); }
.produto-visor { position: relative; background: var(--nevoa); min-height: 0; cursor: grab; touch-action: none; }
.produto-visor:active { cursor: grabbing; }
.produto-visor canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.produto-foto {
  position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  opacity: 0; transition: opacity 0.35s var(--ease-out), transform 0.6s var(--ease-out);
}
.produto-foto.pronta { opacity: 1; }
.produto-visor.com-foto { cursor: default; touch-action: auto; }
.dica { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--texto-2); pointer-events: none; }
.produto-info { padding: 48px 40px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.produto-info h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); padding-right: 40px; }
.produto-linha { color: var(--texto-2); margin-top: -12px; }
.opcoes { border: 0; margin: 0; padding: 0; min-width: 0; }
.opcoes legend { padding: 0; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.opcoes legend span { font-weight: 400; color: var(--texto-2); margin-left: 6px; }
.opcoes-cor { display: flex; flex-wrap: wrap; gap: 14px; padding-left: 4px; }
.opcoes-cor .cor-bola { width: 32px; height: 32px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.opcoes-cor .cor-bola::after { box-shadow: 0 0 0 2px var(--texto); }
.opcoes-versao { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.versao {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border-radius: 12px; border: 1.5px solid var(--linha); background: #fff; text-align: left;
  transition: border-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.versao:active { transform: scale(0.98); }
.versao[aria-checked="true"] { border-color: var(--texto); }
.versao b { font-weight: 600; font-size: 15px; }
.versao span { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.produto-preco { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.produto-preco strong { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; }
.produto-preco span { color: var(--texto-2); font-size: 15px; }
.produto-preco .pix { color: #1a7f37; font-weight: 500; }
.produto-acoes { display: grid; gap: 10px; margin-top: auto; }
.fechar {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.06); color: var(--texto);
  transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.fechar:hover { background: rgba(0,0,0,.1); }
.fechar:active { transform: scale(0.92); }

/* ---------- sacola ---------- */
.dlg-sacola {
  margin: 0 0 0 auto; width: min(420px, 100vw); max-width: none; height: 100svh; max-height: none;
  border-radius: 24px 0 0 24px; background: #fff;
}
.dlg-sacola[open] { animation: gaveta 0.4s var(--ease-drawer); }
.dlg-sacola[open]::backdrop { animation: fundo 0.3s var(--ease-out); }
.dlg-sacola.saindo { animation: gaveta-sai 0.2s var(--ease-out) forwards; }
@keyframes gaveta { from { transform: translateX(100%); } }
@keyframes gaveta-sai { to { transform: translateX(100%); } }
.sacola-in { position: relative; display: flex; flex-direction: column; height: 100%; }
.sacola-cab { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 12px; }
.sacola-cab h2 { font-size: 26px; }
.sacola-cab .fechar { position: static; }
.sacola-itens { list-style: none; margin: 0; padding: 0 24px; overflow-y: auto; flex: 1; }
.item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid #ececf0; }
.item img { width: 72px; height: 72px; border-radius: 12px; background: var(--nevoa); object-fit: contain; }
.item h3 { font-size: 15px; letter-spacing: -0.01em; line-height: 1.25; }
.item p { font-size: 13px; color: var(--texto-2); }
.item-preco { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.qtd { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; border: 1px solid var(--linha); border-radius: 10px; }
.qtd button { width: 32px; height: 30px; border: 0; background: none; border-radius: 9px; font-size: 17px; }
.qtd button:hover { background: var(--nevoa); }
.qtd output { min-width: 20px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.remover { display: block; margin-top: 8px; margin-left: auto; border: 0; background: none; padding: 0; font-size: 13px; color: var(--texto-2); text-decoration: underline; text-underline-offset: 2px; }
.sacola-vazia { padding: 24px; color: var(--texto-2); }
.sacola-pe { padding: 20px 24px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid #ececf0; display: grid; gap: 10px; }
.sacola-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; }
.sacola-total strong { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sacola-pix { color: #1a7f37; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.sacola-pix:empty { display: none; }
.nota { font-size: 13px; color: var(--texto-2); text-align: center; }

/* ---------- aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px); padding: 10px 10px 10px 18px; border-radius: 14px;
  background: var(--grafite); color: #fff; font-size: 15px;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso button { border: 0; border-radius: 10px; padding: 8px 12px; background: var(--laranja); color: #111; font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ---------- celular e tablet ---------- */
@media (max-width: 900px) {
  .topo-nav { display: none; }
  .topo-sistema { margin-left: auto; width: 42px; height: 42px; padding: 0; justify-content: center; box-shadow: none; }
  .topo-sistema span { display: none; }
  .destaque-in, .garantias-in { grid-template-columns: 1fr; }
  .garantias h2 { position: static; }
  .destaque { padding: 88px 0; }
  .garantias { padding: 88px 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { height: 360vh; }
  .cap-1 { top: calc(var(--topo) + 4vh); }
  .cap-2, .cap-3 {
    left: 16px; right: 16px; top: auto; bottom: calc(28px + env(safe-area-inset-bottom));
    translate: none; width: auto; text-align: center;
  }
  .cap-3 .cores-hero { justify-content: center; }
  .cap-4 { bottom: calc(28px + env(safe-area-inset-bottom)); }
  .cap p { margin-top: 12px; }
  .vitrine { padding: 80px 0 88px; }
  .vitrine-cab { margin-bottom: 28px; }
  .filtros, .busca, .busca input { width: 100%; }
  .grade { gap: 12px; }
  .card { padding: 10px 10px 14px; border-radius: 16px; }
  .card-foto { border-radius: 10px; margin-bottom: 12px; }
  .card h3 { font-size: 15px; }
  .card-linha { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-preco { font-size: 15.5px; }
  .card-preco small { display: block; font-size: 12px; }
  .card-parc { font-size: 12px; }
  .card-cores { gap: 7px; }
  .card-cores .cor-bola { width: 16px; height: 16px; }
  .visita { padding: 80px 0; }
  .visita .acoes, .visita .btn { width: 100%; }

  .dlg-produto {
    width: 100vw; max-height: 94svh; margin: auto 0 0; border-radius: 24px 24px 0 0;
  }
  .dlg-produto[open] { animation: subir 0.35s var(--ease-drawer); }
  .dlg-produto.saindo { animation: descer 0.2s var(--ease-out) forwards; }
  @keyframes subir { from { transform: translateY(100%); } }
  @keyframes descer { to { transform: translateY(100%); } }
  .produto-in { grid-template-columns: 1fr; grid-template-rows: 40svh auto; height: auto; max-height: 94svh; overflow-y: auto; }
  .produto-info { padding: 24px 16px 0; overflow: visible; }
  .produto-acoes { position: sticky; bottom: 0; z-index: 2; background: #fff; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 #ececf0; }
  .dlg-sacola { width: 100vw; border-radius: 0; }
}

/* ---------- loja física e Instagram ---------- */
.loja { padding: 112px 0 88px; background: radial-gradient(700px 420px at 100% 0%, rgba(214, 36, 159, .07), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(251, 123, 22, .09), transparent 60%), #fff; }
.loja h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 36px; max-width: 18ch; }
.loja-grade { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.loja-fisica {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; color: var(--texto-claro); min-height: 560px;
  background:
    radial-gradient(520px 380px at 85% 85%, rgba(251, 123, 22, .45), transparent 60%),
    radial-gradient(420px 320px at 10% 0%, rgba(122, 31, 51, .55), transparent 60%),
    linear-gradient(160deg, #141012, #050505 70%);
}
.loja-maca { position: absolute; z-index: -1; right: -60px; bottom: -70px; height: 480px; width: auto; opacity: .35; filter: drop-shadow(0 0 30px rgba(255, 255, 255, .15)); }
/* foto da fachada como fundo; o degradê escurece embaixo para o texto e cobre o canto direito */
.loja-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 78% 22%; transition: transform 1.2s var(--ease-out); }
.loja-fisica::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 6, 7, .1) 0%, rgba(6, 6, 7, .35) 38%, rgba(6, 6, 7, .9) 68%, #070708 100%),
    linear-gradient(270deg, rgba(6, 6, 7, .55), transparent 40%),
    radial-gradient(420px 260px at 0% 100%, rgba(251, 123, 22, .35), transparent 70%);
}
.loja-local {
  position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #fff; background: rgba(10, 10, 12, .62); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.loja-local::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 4px rgba(251, 123, 22, .25); }
@media (hover: hover) and (pointer: fine) { .loja-fisica:hover .loja-foto { transform: scale(1.03); } }
.loja-fisica h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.loja-fisica p { color: var(--texto-claro-2); max-width: 36ch; }
.loja-info { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
.loja-info li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-claro); }
.loja-info svg { flex: none; color: var(--laranja); margin-top: 2px; }
.insta {
  position: relative; overflow: hidden; border-radius: 32px; padding: 28px; display: flex; flex-direction: column; gap: 18px;
  color: #fff; text-decoration: none; isolation: isolate;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease-out);
}
.insta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .25)); }
.insta-topo { display: flex; align-items: center; gap: 14px; }
.insta-avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px; display: grid; place-items: center;
  background: linear-gradient(45deg, #fdf497, #fd5949, #d6249f, #285aeb);
}
.insta-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #000; padding: 6px; }
.insta-nome { display: grid; }
.insta-nome strong { font-size: 20px; letter-spacing: -0.02em; }
.insta-nome small { font-size: 13px; opacity: .85; }
.insta-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.insta-grade span { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .9); display: grid; place-items: center; }
.insta-grade img { width: 86%; height: 86%; object-fit: contain; transition: transform .5s var(--ease-out); }
.insta-texto { font-size: 16px; line-height: 1.4; max-width: 34ch; }
.insta-btn {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 14px;
  background: #fff; color: #111; font-weight: 600; transition: transform .15s var(--ease-out);
}
.insta:active .insta-btn { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .insta:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(214, 36, 159, .6); }
  .insta:hover .insta-grade img { transform: scale(1.08) rotate(-3deg); }
}
@media (max-width: 900px) {
  .loja-grade { grid-template-columns: 1fr; }
  .loja-fisica { min-height: 520px; }
}
@media (max-width: 760px) {
  .loja { padding: 72px 0 56px; }
  .loja-fisica, .insta { border-radius: 24px; }
  .loja-foto { object-position: 62% 12%; height: 62%; }
  .loja-fisica::after { background: linear-gradient(180deg, rgba(6, 6, 7, .05) 0%, rgba(6, 6, 7, .2) 30%, rgba(6, 6, 7, .9) 52%, #070708 62%), radial-gradient(420px 260px at 0% 100%, rgba(251, 123, 22, .35), transparent 70%); }
  .loja-local { top: 14px; left: 14px; }
  .loja-fisica .acoes, .loja-fisica .btn { width: 100%; }
}

/* ---------- faixa de diferenciais ---------- */
.faixa {
  position: relative; overflow: hidden; padding: 0; display: flex; align-items: stretch;
  background: linear-gradient(90deg, #ec5f06, #fb7b16 30%, #ffa046 50%, #fb7b16 70%, #b8350a);
  color: #140800; font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.faixa-trilho { display: flex; width: max-content; animation: correr 38s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
.faixa-rotulo {
  position: relative; z-index: 2; flex: none; display: grid; place-items: center; padding: 0 22px 0 max(16px, 4vw);
  background: linear-gradient(90deg, #140800 70%, rgba(20, 8, 0, 0)); color: #ffb062; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding-right: 40px;
}
.faixa-janela { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marca-link {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 16px 30px; white-space: nowrap;
  color: #140800; text-decoration: none; font-size: 26px; font-weight: 700; letter-spacing: -0.03em;
  transition: color .2s var(--ease-out), transform .2s var(--ease-out);
}
.marca-link small { font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: .7; }
.marca-link::after { content: ""; align-self: center; width: 6px; height: 6px; margin-left: 20px; border-radius: 50%; background: #140800; opacity: .45; }
.marca-link:hover { color: #fff; }
.marca-link:active { transform: scale(.96); }
.faixa:focus-within .faixa-trilho { animation-play-state: paused; }
.filtro-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -16px 0 24px; color: var(--texto-2); }
.filtro-marca strong { color: var(--texto); }
.filtro-marca button {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 7px 12px;
  background: linear-gradient(180deg, #ffa046, #ec5f06); color: #140800; font-weight: 600; font-size: 14px;
  transition: transform .15s var(--ease-out);
}
.filtro-marca button:active { transform: scale(.96); }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- categorias ---------- */
.categorias {
  padding: 104px 0 24px;
  background: radial-gradient(800px 400px at 90% 0%, rgba(251, 123, 22, .10), transparent 60%), #f6f6f8;
}
.categorias, .vitrine, .garantias, .loja { position: relative; isolation: isolate; overflow: hidden; }
.categorias::before, .vitrine::before, .garantias::before, .loja::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(560px, 70vw); aspect-ratio: 314 / 364;
  background: url("../img/maca.svg") center / contain no-repeat;
  opacity: .1; filter: grayscale(1) brightness(.5);
}
.categorias::before { right: -120px; top: -60px; transform: rotate(12deg); }
.vitrine::before { left: -160px; top: 30%; transform: rotate(-10deg); }
.garantias::before { right: -140px; bottom: -120px; transform: rotate(8deg); opacity: .06; }
.loja::before { left: -120px; bottom: -160px; transform: rotate(-14deg); }
.vitrine::after {
  content: "World Tec"; position: absolute; z-index: -1; right: -2vw; bottom: 2vw; pointer-events: none;
  font-size: clamp(5rem, 16vw, 15rem); font-weight: 800; letter-spacing: -0.06em; line-height: .8; white-space: nowrap;
  /* preenchido e translúcido: contorno em fonte variável mostra as sobreposições internas das letras */
  color: transparent; background: linear-gradient(180deg, rgba(251, 123, 22, .13), rgba(251, 123, 22, .02));
  -webkit-background-clip: text; background-clip: text;
}
.categorias h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 36px; }
.bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: repeat(2, minmax(250px, 30vh)); gap: 16px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 28px;
  display: flex; text-decoration: none; color: #fff;
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease-out);
}
.tile:active { transform: scale(.985); }
.tile-texto { position: relative; z-index: 2; display: grid; gap: 6px; align-content: start; max-width: 22ch; }
.tile-texto strong { font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.05; }
.tile-texto span { font-size: 15px; opacity: .82; }
.tile img {
  position: absolute; z-index: 1; right: -4%; bottom: -8%; height: 82%; width: auto; max-width: 70%; object-fit: contain;
  opacity: 0; transform: translateY(16px) rotate(-4deg); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
}
.tile img.pronta { opacity: 1; transform: translateY(0) rotate(-4deg); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .4s var(--ease-out);
  background: radial-gradient(400px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, .22), transparent 60%);
}
/* marca d'água dos blocos */
.tile-marca {
  position: absolute; z-index: 0; left: -2%; bottom: -6%; pointer-events: none; user-select: none;
  font-size: clamp(5rem, 11vw, 10rem); font-weight: 800; letter-spacing: -0.06em; line-height: .8; white-space: nowrap;
  color: transparent; background: linear-gradient(180deg, var(--traco, #fff) 0%, transparent 95%);
  -webkit-background-clip: text; background-clip: text; opacity: .14;
  transition: transform .8s var(--ease-out), opacity .4s var(--ease-out);
}
.tile-fundo {
  position: absolute !important; z-index: 0 !important; left: 34% !important; top: -18% !important; right: auto !important; bottom: auto !important;
  height: 120% !important; width: auto !important; max-width: none !important;
  opacity: .2 !important; filter: grayscale(.2) blur(.5px) !important; mix-blend-mode: luminosity; transform: rotate(14deg) !important; pointer-events: none;
}
.tile-iphone .tile-fundo { left: -30% !important; top: 30% !important; height: 90% !important; transform: rotate(-12deg) !important; }
.tile-iphone .tile-marca { font-size: clamp(6rem, 14vw, 13rem); bottom: auto; top: 34%; left: -4%; writing-mode: vertical-rl; transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-marca { opacity: .22; transform: translateX(10px); }
  .tile-iphone:hover .tile-marca { transform: rotate(180deg) translateY(10px); }
}
.tile-xiaomi, .tile-acessorios { --traco: #1a0d05; }
.tile-acessorios .tile-marca { opacity: .1; }
.tile-iphone { grid-row: span 2; background: radial-gradient(600px 500px at 75% 80%, rgba(251, 123, 22, .45), transparent 60%), linear-gradient(160deg, #3a0f1c 0%, #5b1f2c 40%, #120608 100%); }
.tile-iphone img { height: 78%; max-width: 78%; right: -2%; bottom: -4%; }
.tile-eletronicos { grid-column: span 2; }
.tile-xiaomi { background: radial-gradient(400px 300px at 90% 100%, rgba(255, 220, 170, .55), transparent 60%), linear-gradient(140deg, #ff9a3c, #f26a0c 55%, #b8350a); color: #140800; }
.tile-acessorios { background: radial-gradient(400px 300px at 80% 90%, rgba(255, 255, 255, .9), transparent 60%), linear-gradient(150deg, #e9ebef, #c9cdd5 60%, #9aa1ad); color: #111; }
.tile-eletronicos { background: radial-gradient(420px 320px at 85% 90%, rgba(120, 170, 255, .45), transparent 60%), linear-gradient(150deg, #0f1a33, #1e3a6b 60%, #0a0f1d); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
  .tile:hover::after { opacity: 1; }
  .tile:hover img.pronta { transform: translateY(-6px) rotate(-1deg) scale(1.04); }
}

@media (max-width: 760px) {
  .cap-1 { left: 16px; right: 16px; top: calc(var(--topo) + 3vh); translate: none; width: auto; text-align: center; }
  .cap-1 p { margin-inline: auto; }
  .cap-1 .acoes { justify-content: center; }
  .chip { margin-bottom: 14px !important; }
  .maca { height: 54vh; top: 40vh; left: calc(50% - 23vh); }
  .hf-par { height: min(46vh, 96vw); filter: none; }
  .maca { filter: none; }
  .hf-zoom { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
  .topo { background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tile-fundo { filter: none !important; mix-blend-mode: normal; }
  .hf-zoom { width: 92vw; border-radius: 20px; }
  .brilho { width: 80vh; height: 80vh; left: calc(50% - 40vh); top: calc(68% - 40vh); }
  .marca-link { font-size: 21px; padding: 13px 22px; }
  .faixa-rotulo { padding-right: 28px; font-size: 11px; }
  .categorias { padding: 72px 0 12px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 300px repeat(2, 190px); gap: 12px; }
  .tile { padding: 18px; border-radius: 22px; }
  .tile-iphone { grid-row: auto; grid-column: span 2; }
  .tile-texto span { font-size: 13px; }
  .tile img { height: 62%; max-width: 64%; }
  .tile-iphone img { height: 84%; max-width: 60%; }
  .visita { padding: 12px 0 72px; }
  .visita-maca { height: 300px; bottom: -90px; }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-trilho { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.15s !important; transition-duration: 0.15s !important; transition-delay: 0s !important; }
}