:root{
  --preto:#0e0e0e; --preto2:#171717; --amarelo:#ffd400; --verde:#25d366;
  --branco:#fff; --cinza:#a3a3a3; --linha:#2a2a2a;
  --palco:#e2e4e8; --chip:#eceef1; --mudo:#6b6e74;
  --entalhe:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--preto);color:var(--branco);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;font:500 14px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;clip-path:var(--entalhe);transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-amarelo{background:var(--amarelo);color:var(--preto)}
.btn-contorno{background:rgba(255,255,255,.12);color:var(--branco);backdrop-filter:blur(6px)}
.btn-zap{background:var(--verde);color:#062b14}
.btn-preto{background:var(--preto);color:var(--branco)}
.pequeno{height:38px;padding:0 16px;font-size:12px}
.largo{width:100%}

/* topo */
#topo{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;padding:12px 28px;background:rgba(14,14,14,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.marca{font:400 22px Anton,sans-serif;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.marca b{color:var(--amarelo);font-weight:400}
#topo nav{display:flex;gap:4px;margin-left:auto}
#topo nav a{padding:8px 12px;font:500 13px "IBM Plex Mono",monospace;text-transform:uppercase;text-decoration:none;color:var(--cinza)}
#topo nav a:hover{color:var(--amarelo)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:120px 28px 64px;overflow:hidden}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:zoom 14s ease-out both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.2)),linear-gradient(0deg,var(--preto) 0%,transparent 35%)}
@keyframes zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-conteudo{position:relative;z-index:1;max-width:720px}
.selo{display:inline-flex;gap:8px;padding:6px 12px;background:rgba(255,255,255,.1);font:500 13px "IBM Plex Mono",monospace;margin-bottom:20px}
.estrelas{color:var(--amarelo);letter-spacing:2px}
.hero h1{font:400 clamp(56px,10vw,128px)/.92 Anton,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.hero h1 span{color:var(--amarelo)}
.hero-sub{max-width:520px;margin:20px 0 28px;font-size:18px;color:#d4d4d4}
.hero-acoes{display:flex;flex-wrap:wrap;gap:10px}
.status-aberto{margin-top:20px;font:500 13px "IBM Plex Mono",monospace;color:var(--cinza)}
.status-aberto i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--verde);box-shadow:0 0 0 0 var(--verde);animation:ping 2s infinite}
.status-aberto.fechado i{background:#ef4444;animation:none}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}}

/* faixa */
.faixa{overflow:hidden;background:var(--amarelo);color:var(--preto);padding:14px 0}
.faixa div{display:flex;width:max-content;animation:rolar 30s linear infinite}
.faixa span{font:400 22px Anton,sans-serif;padding:0 28px;white-space:nowrap}
.faixa span::after{content:"✦";margin-left:56px}
@keyframes rolar{to{transform:translateX(-50%)}}

/* seções */
.secao{padding:96px 28px;max-width:1400px;margin:0 auto}
.secao-cab{margin-bottom:40px}
.rotulo{font:500 13px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--amarelo);margin-bottom:10px}
h2{font:400 clamp(36px,5vw,64px)/1 Anton,sans-serif;text-transform:uppercase}

/* ===== 360° ===== */
.giro-secao{max-width:none;background:var(--palco);color:#111}
.giro-secao .rotulo{color:#111}
.giro{display:grid;grid-template-columns:340px minmax(0,1fr) 120px;gap:24px;align-items:center;max-width:1400px;margin:0 auto}
.cartao{background:#fff;padding:32px 28px 26px;clip-path:polygon(0 0,130px 0,140px 8px,100% 8px,100% calc(100% - 8px),calc(100% - 120px) calc(100% - 8px),calc(100% - 130px) 100%,10px 100%,10px 120px,0 112px)}
.g-cat{font:500 11px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.cartao h3{font:500 15px/1.4 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em;margin:6px 0 10px}
.g-linha{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.g-preco{font:400 32px Anton,sans-serif}
.tag{font:500 11px "IBM Plex Mono",monospace;text-transform:uppercase;background:var(--chip);padding:3px 6px}
.g-desc{font:400 16px/1.45 Georgia,serif;margin-bottom:22px}
.nota{margin-top:12px;font:400 11px/1.5 "IBM Plex Mono",monospace;text-transform:uppercase;color:var(--mudo)}

.vitrine{width:100%;aspect-ratio:4/3;display:grid;place-items:center}
.vitrine img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.miniaturas{display:flex;flex-direction:column;gap:12px}
.mini{position:relative;width:100%;aspect-ratio:1;background:#fff;filter:grayscale(1);opacity:.65;transition:.3s}
.mini img{width:100%;height:100%;object-fit:contain}
.mini span{position:absolute;left:0;right:0;bottom:0;padding:3px;background:rgba(255,255,255,.9);font:500 10px "IBM Plex Mono",monospace;text-transform:uppercase}
.mini.ativa{filter:none;opacity:1;outline:2px solid #111;outline-offset:3px}
.mini:hover{opacity:1}

/* catálogo */
.filtros{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:16px}
.busca input{width:320px;max-width:100%;height:44px;padding:0 14px;background:var(--preto2);border:1px solid var(--linha);color:var(--branco);font:inherit}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:34px;padding:0 14px;background:var(--preto2);border:1px solid var(--linha);font:500 12px "IBM Plex Mono",monospace;text-transform:uppercase;color:var(--cinza)}
.chip[aria-pressed=true]{background:var(--amarelo);color:var(--preto);border-color:var(--amarelo)}
.contagem{font:400 12px "IBM Plex Mono",monospace;color:var(--cinza);margin-bottom:20px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.produto{display:flex;flex-direction:column;background:var(--preto2);border:1px solid var(--linha);transition:border-color .2s,transform .2s}
.produto:hover{border-color:var(--amarelo);transform:translateY(-3px)}
.produto .foto{aspect-ratio:1;background:#222;overflow:hidden}
.produto .foto img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.produto:hover .foto img{transform:scale(1.05)}
.sem-foto{height:100%;display:grid;place-items:center;font:400 64px Anton,sans-serif;color:#333;background:repeating-linear-gradient(45deg,#1c1c1c 0 12px,#202020 12px 24px)}
.produto .corpo{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.produto .cat{font:500 11px "IBM Plex Mono",monospace;text-transform:uppercase;color:var(--cinza)}
.produto h3{font-size:15px;font-weight:500;line-height:1.3}
.produto .preco{font:400 24px Anton,sans-serif;color:var(--amarelo);margin-top:auto;padding-top:6px}
.produto .est{font:400 11px "IBM Plex Mono",monospace;color:var(--cinza)}
.produto .btn{height:40px;margin-top:10px;font-size:12px}

/* serviços */
.servicos{border-top:1px solid var(--linha)}
.cards-servico{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:32px}
.cards-servico article{padding:28px;background:var(--preto2);border:1px solid var(--linha)}
.cards-servico b{font:400 40px Anton,sans-serif;color:var(--amarelo)}
.cards-servico h3{font-size:18px;margin:8px 0}
.cards-servico p{color:var(--cinza)}

/* avaliações */
.avaliacoes{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.nota-grande strong{display:block;font:400 120px/1 Anton,sans-serif;color:var(--amarelo)}
.nota-grande .estrelas{font-size:28px}
.nota-grande p{margin:8px 0 12px;color:var(--cinza)}
.link{color:var(--amarelo);font:500 13px "IBM Plex Mono",monospace;text-transform:uppercase}
.depoimentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
blockquote{padding:24px;background:var(--preto2);border-left:3px solid var(--amarelo)}
blockquote p{font:400 17px/1.5 Georgia,serif}
cite{display:block;margin-top:12px;font:500 12px "IBM Plex Mono",monospace;font-style:normal;text-transform:uppercase;color:var(--cinza)}

/* contato */
.contato{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:stretch}
.contato dl{margin:28px 0}
.contato dt{font:500 12px "IBM Plex Mono",monospace;text-transform:uppercase;color:var(--amarelo);margin-top:16px}
.contato dd a{text-decoration:none}
.contato dd a:hover{color:var(--amarelo)}
.mapa{width:100%;min-height:440px;border:0;filter:grayscale(.3) contrast(1.05)}

footer{padding:40px 28px 100px;border-top:1px solid var(--linha);text-align:center;font-size:13px;color:var(--cinza)}
.zap-flutuante{position:fixed;right:20px;bottom:20px;z-index:30;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--verde);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* responsivo */
@media (max-width:1000px){
  #topo nav{display:none}
  .giro{grid-template-columns:1fr}
  .vitrine{order:-1}
  .miniaturas{flex-direction:row;order:-1}
  .mini{width:90px}
  .avaliacoes,.contato{grid-template-columns:1fr}
}
@media (max-width:600px){
  #topo{padding:10px 16px}
  .marca{font-size:18px}
  .hero,.secao{padding-left:16px;padding-right:16px}
  .busca input{width:100%}
  .busca{width:100%}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}