/* OUTLET PILAR — direção única: "Cromo sobre asfalto"
   Paleta puxada da logo: preto profundo + prata cromada.
   Detalhe assinatura: varredura de brilho cromado nos botões. */

:root{
  --bg:#070708;
  --ink:#f4f5f6;
  --muted:#a9adb3;
  --silver-hi:#ffffff;
  --silver:#d7dbe0;
  --silver-mid:#9aa0a8;
  --silver-dark:#6e747b;
  --card:#121315;
  --line:rgba(215,219,224,.22);
  --glow:rgba(220,225,232,.22);
  --chrome:linear-gradient(180deg,#ffffff 0%,#cfd4da 28%,#7d838b 50%,#eceff3 52%,#969ca4 74%,#e2e6eb 100%);
  --radius:16px;
  --font-display:"Anton",Impact,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  justify-content:center;
  overflow-x:hidden;
}

/* ---------- FUNDO: visível mas opaco ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#060607}
.bg-img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  opacity:.34; /* opaco: aparece mas não briga com o conteúdo */
  filter:saturate(.82) contrast(1.05);
  transform:scale(1.06);
}
.bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(190,197,206,.16),transparent 60%),
    linear-gradient(180deg,rgba(5,5,6,.62) 0%,rgba(5,5,6,.78) 45%,rgba(5,5,6,.94) 100%);
}
.bg-grain{
  position:absolute;inset:0;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- ESTRUTURA ---------- */
.wrap{
  position:relative;z-index:1;
  width:100%;max-width:560px;
  padding:44px 20px 40px;
  display:flex;flex-direction:column;gap:22px;
}

.hero{text-align:center;display:flex;flex-direction:column;align-items:center}

/* ---------- LOGO: estática, com a borda original, sem animação ---------- */
.logo{
  width:150px;height:150px;display:block;
  border-radius:50%;object-fit:cover;
  border:0;outline:0;box-shadow:none;filter:none;
}

@media (prefers-reduced-motion:reduce){
  .btn-sheen{animation:none !important}
}

/* ---------- TIPO ---------- */
.name{
  font-family:var(--font-display);
  font-size:clamp(34px,8.5vw,46px);
  letter-spacing:.04em;line-height:1;margin-top:20px;
  background:var(--chrome);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.8)) drop-shadow(0 8px 22px rgba(0,0,0,.5));
}
.name span{
  display:block;font-size:.34em;letter-spacing:.52em;margin-top:8px;
  -webkit-text-fill-color:var(--silver);color:var(--silver);
}
.bio{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:12px;max-width:36ch}

/* ---------- BOTÕES ---------- */
.links{display:flex;flex-direction:column;gap:14px}
.btn{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:var(--radius);
  text-decoration:none;overflow:hidden;isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.btn:active{transform:scale(.985)}
.btn-icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;font-size:21px;
}
.btn-text{display:flex;flex-direction:column;gap:2px;text-align:left;flex:1;min-width:0}
.btn-text strong{font-size:16px;font-weight:800;letter-spacing:.01em}
.btn-text small{font-size:12.5px;font-weight:500;opacity:.72}
.btn-arrow{font-size:14px;opacity:.6}

/* varredura de brilho cromado (assinatura) */
.btn-sheen{
  position:absolute;top:0;bottom:0;width:45%;left:-60%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);
  animation:sheen 4.2s ease-in-out infinite;
}
@keyframes sheen{0%,55%{left:-60%}90%,100%{left:130%}}

/* 1 — destaque cromado */
.btn-chrome{
  background:var(--chrome);color:#0b0c0d;
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 26px var(--glow);
  border:none;
}
.btn-chrome .btn-icon{background:rgba(0,0,0,.14)}
.btn-chrome small{color:rgba(0,0,0,.62);opacity:1}

/* 2/3 — aço escuro com fio prata */
.btn-steel{
  background:linear-gradient(180deg,#1d1f23,#0e0f11);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09);
}
.btn-steel:hover{border-color:rgba(230,234,239,.5);box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 22px var(--glow)}
.btn-steel .btn-icon{
  background:linear-gradient(180deg,#2a2d32,#141518);
  border:1px solid var(--line);color:var(--silver);
}

/* ---------- LOJA ---------- */
.store{
  background:rgba(14,15,17,.78);
  border:1px solid var(--line);
  border-radius:20px;padding:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:14px;
}
.store-head{display:flex;gap:12px;align-items:flex-start;text-align:left}
.store-head>i{
  flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--chrome);color:#0b0c0d;font-size:18px;
}
.store-head h2{font-family:var(--font-display);font-weight:400;letter-spacing:.06em;font-size:19px}
.store-head p{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.5}
.map-frame{
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(215,219,224,.18);
  line-height:0;
}
.map-frame iframe{width:100%;height:220px;border:0;filter:grayscale(1) invert(.92) contrast(.94)}
.btn-route{padding:14px 16px}

/* ---------- FOOTER / REVEAL ---------- */
.footer{text-align:center;padding:6px 0 4px}
.footer-line{
  height:1px;margin:0 auto 14px;max-width:220px;
  background:linear-gradient(90deg,transparent,var(--silver-mid),transparent);
  opacity:.7;
}
.footer p{color:var(--muted);font-size:12px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.hero{animation:enter .7s ease both}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}