:root{
  --bg:#0e0e0e;
  --graphite:#393939;
  --white:#ffffff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.16);
  --glass:rgba(57,57,57,.55);
  --radius:16px;
  --max:560px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--white);
  min-height:100vh;
  overflow-x:hidden;
}

/* FUNDO — foto da fachada com overlay grafite */
.bg{
  position:fixed;inset:0;z-index:-2;
  background:url('background.jpg') center 20%/cover no-repeat;
}
.bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(20,20,20,.88) 45%, rgba(10,10,10,.96) 100%),
    radial-gradient(600px 300px at 50% 0%, rgba(255,255,255,.08), transparent 70%);
  backdrop-filter:blur(1px);
}
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* MARQUEE TOPO */
.marquee-top{
  background:var(--white);
  color:#111;
  font-family:'Anton',sans-serif;
  font-size:13px;letter-spacing:.12em;
  overflow:hidden;white-space:nowrap;
  padding:9px 0;
  transform:rotate(-1deg) scale(1.02);
  border-top:1px solid #111;border-bottom:1px solid #111;
}
.marquee-track{display:inline-flex;animation:scroll 18s linear infinite}
.marquee-track span{padding-right:8px}
@keyframes scroll{to{transform:translateX(-50%)}}

.wrap{
  width:100%;max-width:var(--max);
  margin:0 auto;padding:26px 20px 40px;
  display:flex;flex-direction:column;gap:20px;
}

/* HERO — logo solta */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}

/* PEDIDO DO CLIENTE: sem bordas, sem círculo, sem margens em volta */
.logo-loose{
  width:min(300px,80vw);
  height:auto;
  display:block;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  outline:none;
  mix-blend-mode:screen; /* funde o preto da logo com o fundo escuro */
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.65));
}
.store-name{
  font-family:'Anton',sans-serif;
  font-size:clamp(26px,6vw,34px);
  letter-spacing:.06em;line-height:1;margin-top:2px;
}
.handle{
  color:var(--white);font-weight:700;font-size:16px;text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.4);padding-bottom:1px;
}
.handle:active,.handle:hover{opacity:.8}
.tagline{color:var(--muted);font-size:15px;font-weight:500}

/* BOTÕES — glass escuro, whatsapp branco destaque */
.links{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.btn{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;border-radius:var(--radius);
  text-decoration:none;color:var(--white);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn i:first-child{font-size:24px;width:30px;text-align:center;flex-shrink:0}
.btn span{flex:1;display:flex;flex-direction:column;gap:1px;text-align:left}
.btn strong{font-size:16px;line-height:1.2}
.btn small{font-size:12.5px;opacity:.7;font-weight:500}
.btn .arrow{font-size:15px;opacity:.7}
.btn:active{transform:scale(.98)}

.btn-glass{
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-glass:hover{background:rgba(70,70,70,.65);box-shadow:0 8px 32px rgba(0,0,0,.5)}

.btn-whats{
  background:var(--white);color:#111;
  border:1px solid var(--white);
  box-shadow:0 10px 34px rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.45);
}
.btn-whats small{opacity:.65}
.btn-whats:hover{box-shadow:0 12px 40px rgba(255,255,255,.28)}

/* DIVISÓRIA */
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:6px 0 0}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line)}
.divider span{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.3em}

/* LOJA */
.store{
  background:rgba(20,20,20,.6);
  border:1px solid var(--line);
  border-radius:20px;padding:20px 18px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;gap:12px;
}
.store h2{font-family:'Anton',sans-serif;font-size:17px;letter-spacing:.08em}
.store h2 i{margin-right:8px}
.address{color:var(--muted);font-size:14.5px;line-height:1.55}
.map{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.map iframe{width:100%;height:220px;border:0;display:block;filter:grayscale(35%) contrast(1.05)}

.footer{text-align:center;color:var(--muted);font-size:12.5px;padding:10px 0 0}

/* ENTRADA */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

@media (max-width:380px){
  .logo-loose{width:min(260px,84vw)}
  .btn{padding:13px 14px}
}