/* ===== Sherife Theme (v13) =====
   Personalize aqui: cores, sombras, radii e gutters
   Ex.: mude --color-primary para trocar o azul do tema.
*/
:root{ --brand-speed: 42; /* px/s desktop */
  --color-bg: #090b18;
  --color-primary: #4355ff;
  --color-primary-2: #4355ff;
  --text: #eef2f6;
  --muted80: rgba(255,255,255,.80);
  --muted65: rgba(255,255,255,.65);
  --muted40: rgba(255,255,255,.40);
  --gutter: 16px;
  --radius: 20px;
  --elev: 0 18px 40px rgba(0,0,0,.42);
}
@media (max-width:480px){ :root{ --brand-speed: 42; /* px/s desktop */ --gutter: 12px; } }

html, body{ background: var(--color-bg); color: var(--text); }

/* Containers */
.wrap{ max-width:1120px; margin:0 auto; padding:0 var(--gutter); }
main{ padding-bottom: 48px; }
.footer{ margin-top: 56px; }
.footer__grid{ padding: 28px var(--gutter); }
.footer__copy{ padding: 16px var(--gutter) 28px; color: var(--muted40); font-size:12px; text-align:center; }

/* Buttons */
.btn--blue{ background: var(--color-primary); }
.btn--blue:hover{ filter:brightness(1.1); }

/* Header CTA */
.nav__links{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; }
.nav__cta{ white-space:nowrap; min-width:auto; display:inline-flex; align-items:center; }
.nav__cta .icon{ width:18px; height:18px; margin-right:8px; }
@media (max-width:680px){
  .nav__cta .label{ display:none; }
  .nav__cta{ padding:10px 12px; }
}

/* Hero */
.hero__title{ font-size: clamp(32px, 5.2vw, 72px); line-height:1.05; letter-spacing:-0.02em; }
@media (min-width: 992px){ .hero__title .one-line{ white-space:nowrap; } }

/* Banner */
.banner{ padding: 16px 0 32px; }
.banner__img{ display:block; width:100%; border:0; border-radius:24px; }

/* Cards guard-rail */
.card{ overflow:hidden; border-radius: var(--radius); }


:root{ --brand-speed: 42; /* px/s desktop */--bg:#090b18;--bg2:#070a13;--blue:#4355ff;--white:#ffffff;--muted60:rgba(255,255,255,.6);--muted80:rgba(255,255,255,.8);--mx:50%;--my:50%}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;color:var(--white);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(67,85,255,.15), transparent 60%),
    radial-gradient(900px 450px at 110% 0%, rgba(67,85,255,.10), transparent 60%),
    linear-gradient(120deg,var(--bg2),var(--bg),var(--bg2));
  background-size:100% 100%,100% 100%,400% 400%;
  background-attachment: fixed, fixed, fixed;
  animation:bgMove 24s ease-in-out infinite;}
@keyframes bgMove{
  0%   { background-position: -10% 0%, 110% 0%,   0% 50%; }
  50%  { background-position:  40% 20%,  70% 10%, 100% 50%; }
  100% { background-position: -10% 0%, 110% 0%,   0% 50%; }
}
/* mouse tracker glow */
body::after{ content:""; position:fixed; inset:-30vh; pointer-events:none; z-index:0; mix-blend-mode:screen; filter: blur(42px) saturate(120%); background: radial-gradient(700px 520px at calc(var(--fx-x) + 8%) calc(var(--fx-y) + 10%), rgba(67,85,255,.22), rgba(67,85,255,0) 65%); }

.wrap{max-width:1120px;margin:0 auto;padding:0 16px}.center{text-align:center}.h2{font-size:32px;margin:0 0 8px;font-weight:700}.muted{opacity:.9}.muted-60{color:var(--muted60)}.muted-80{color:var(--muted80)}.input{width:280px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;padding:10px 12px}
.nav{position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);background:rgba(0,0,0,.7);border-bottom:1px solid rgba(255,255,255,.1);z-index:50}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px}.nav__brand{display:flex;align-items:center;gap:12px}.nav__logo{height:36px}.nav__fallback{display:none;font-weight:600}.nav__links{display:flex;gap:12px;align-items:center}.nav__link{color:rgba(255,255,255,.7);padding:8px 12px;border-radius:12px;text-decoration:none}.nav__link:hover{background:rgba(255,255,255,.05);color:#fff}.nav__link--active{color:#fff}
.hero{position:relative;padding:64px 0}.grid2{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:992px){.grid2{grid-template-columns:1fr 1fr}}
.kicker{text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.6);font-size:12px}.hero__title{margin:8px 0 0;font-size:40px;font-weight:800}.hero__lead{margin:16px 0 0;color:rgba(255,255,255,.7);max-width:60ch}.hero__actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:16px;padding:12px 16px;font-weight:600;color:#fff;text-decoration:none;cursor:pointer}.btn--blue{background:linear-gradient(135deg,var(--blue),#6f7bff)}.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.9)}
.card{background:rgba(7,10,19,.85);border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.banner{padding:0 0 32px}.banner__img{ display:block; width:100%; border:0; border-radius:24px; }

/* v6 — Brands: rail infinito + espaçamento uniforme */
.brands{margin-top:40px}
.brands__title{color:rgba(255,255,255,.8);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.brands__scroller{position:relative;overflow:hidden;height:64px}
.brands__rail{position:absolute;top:8px;left:0;display:flex;gap:24px;align-items:center;will-change:transform}
.brand{flex:0 0 120px;width:120px}
.brand figure{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.brand img{height:28px;filter:brightness(0) saturate(100%) invert(1);opacity:.9}
.brand figcaption{font-size:12px;color:var(--muted80);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}

.nearest{padding:24px 0}.nearest__card{display:flex;gap:16px;align-items:center;justify-content:space-between}
.ig{padding:40px 0}.ig__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.ig__title{font-weight:600}.ig__link{color:rgba(255,255,255,.7);text-decoration:underline}.ig__grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.ig__grid::-webkit-scrollbar{display:none}@media(min-width:900px){.ig__grid{grid-auto-flow:initial;grid-template-columns:repeat(3,1fr);overflow:visible}}.ig__post{display:block;border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;background:rgba(0,0,0,.4)}.ig__post img{display:block;width:100%;height:280px;object-fit:cover}
.stores__header{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;padding:40px 0 16px}.stores__actions{display:flex;gap:12px;align-items:center}.stores__grid{display:grid;grid-template-columns:1fr;gap:16px;padding:0 0 48px}@media(min-width:860px){.stores__grid{grid-template-columns:repeat(2,1fr)}}
.store-card{padding:20px}.store-card__title{margin:0 0 4px;font-size:20px;font-weight:700}.store-card__addr{margin:0;color:rgba(255,255,255,.7);font-size:14px}.store-card__meta{margin-top:8px;color:rgba(255,255,255,.6);font-size:12px}.store-card__actions{display:flex;gap:8px;align-items:center;margin-top:12px}.icon{width:16px;height:16px}.btn--icon{display:inline-flex;gap:8px;align-items:center}
.footer{border-top:1px solid rgba(255,255,255,.1);margin-top:64px}.footer__grid{display:grid;grid-template-columns:1fr;gap:16px;padding:24px 0}@media(min-width:720px){.footer__grid{grid-template-columns:repeat(3,1fr)}}.socials{display:flex;gap:12px}.socials__link{display:inline-flex;gap:8px;align-items:center;color:rgba(255,255,255,.7);text-decoration:none}.socials__link:hover{color:#fff}.footer__title{font-weight:600}.footer__copy{text-align:center;color:rgba(255,255,255,.4);font-size:12px;padding:0 0 24px}

/* v6 — About padding fix */
.about.card{padding:32px 28px 24px}
.about__logo{display:block;max-width:100%;width:clamp(220px,28vw,520px);height:auto;margin:12px auto 8px}
.about__text{margin-top:8px}


/* v11 — Responsividade e layout estável */
:root{ --brand-speed: 42; /* px/s desktop */ --gutter:16px; }
@media (max-width: 480px){ :root{ --brand-speed: 42; /* px/s desktop */ --gutter:12px; } }

.wrap{ max-width:1120px; margin:0 auto; padding:0 var(--gutter); }
main{ padding-bottom: 48px; }

/* Header: impedir quebra do CTA e compactar links */
.nav__inner{ min-width:0; }
.nav__links{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; }
.nav__link{ white-space:nowrap; }
.nav__cta{ white-space:nowrap; min-width:auto; }
.nav__cta .icon{ width:18px; height:18px; margin-right:8px; }
@media (max-width: 680px){
  .nav__cta .label{ display:none; } /* só ícone */
  .nav__cta{ padding:10px 12px; }
}

/* Hero title: 1 linha no desktop */
.hero__title{ font-size: clamp(32px, 5.2vw, 72px); line-height:1.05; letter-spacing:-0.02em; }
@media (min-width: 992px){
  .hero__title .one-line{ white-space:nowrap; }
}

/* Banner sem linha (já aplicado) — garantir spacing acima/abaixo */
.banner{ padding: 16px 0 32px; }
.banner__img{ display:block; width:100%; border:0; border-radius:24px; }

/* Brands scroller height estável */
.brands{ margin-top: 28px; }
.brands__scroller{ position:relative; overflow:hidden; height:64px; }
.brands__rail{ position:absolute; top:8px; left:0; display:flex; gap:24px; align-items:center; will-change:transform; }
.brand{ flex:0 0 120px; width:120px; }
.brand figure{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0; }
.brand img{ height:28px; filter:brightness(0) saturate(100%) invert(1); opacity:.9; }
.brand figcaption{ font-size:12px; color:var(--muted80); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; }

/* Instagram — grid sólido, sem sobreposição */
.ig{ padding:24px 0; }
.ig__grid{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .ig__grid{ grid-template-columns:repeat(3,1fr); } }
.instagram-media{ display:block !important; max-width:100% !important; width:100% !important; min-width:0 !important; margin:0 !important; border-radius:20px !important; overflow:hidden !important; background:rgba(0,0,0,.4) !important; }

/* Stores grid responsivo (Lojas) */
.stores__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); padding: 0 0 48px; }

/* Sobre: respiro abaixo do header */
.about.card{ margin-top: 24px; padding:32px 28px 24px; }
.about__logo{ display:block; max-width:100%; width:clamp(220px,28vw,520px); height:auto; margin:12px auto 8px; }
.about__text{ margin-top:8px; }

/* Rodapé com respiro nas bordas */
.footer{ margin-top:56px; border-top:1px solid rgba(255,255,255,.1); }
.footer__grid{ padding: 28px var(--gutter); }
.footer__copy{ text-align:center; color:rgba(255,255,255,.4); font-size:12px; padding: 16px var(--gutter) 28px; }

/* Camadas do efeito do mouse */
body::after{ content:""; position:fixed; inset:-30vh; pointer-events:none; z-index:0; mix-blend-mode:screen; filter: blur(42px) saturate(120%); background: radial-gradient(700px 520px at calc(var(--fx-x) + 8%) calc(var(--fx-y) + 10%), rgba(67,85,255,.22), rgba(67,85,255,0) 65%); }
.nav, main, footer{ position:relative; z-index:1; }


/* v12 — Instagram carrossel responsivo */
.ig{ padding:24px 0; }
.ig__hscroll{ display:flex; gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding-bottom:8px; }
.ig__hscroll::-webkit-scrollbar{ height:8px; }
.ig__item{ flex:0 0 340px; scroll-snap-align:start; }
@media (max-width:600px){
  .ig__item{ flex-basis: calc(90vw - 2*var(--gutter)); }
}
/* Normaliza embeds para não deformar */
.instagram-media{ max-width:100% !important; width:100% !important; min-width:0 !important; margin:0 !important; }


/* v13 — Brands: central highlight + fades + stable height */
.brands{ margin-top:28px; }
.brands__scroller{ position:relative; overflow:hidden; height:96px; }
.brands__rail{ position:absolute; top:8px; left:0; display:flex; gap:28px; align-items:center; will-change:transform; }
.brand{ flex:0 0 140px; width:140px; opacity:.45; transform:scale(.96); transition:opacity .3s, transform .3s, filter .3s; }
.brand figure{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0; }
.brand img{ height:32px; filter:brightness(0) saturate(100%) invert(1); opacity:.9; }
.brand figcaption{ font-size:12px; color: var(--muted65); white-space:nowrap; text-align:center; }
.brand.is-active{ opacity:1; transform:scale(1.06); filter:drop-shadow(0 0 14px rgba(67,85,255,.35)); }
.brand.is-active figcaption{ color:#fff; }

.brands__scroller::before, .brands__scroller::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; pointer-events:none; z-index:2;
}
.brands__scroller::before{ left:0;  background: linear-gradient(90deg, var(--color-bg) 0%, rgba(9,11,24,0) 100%); }
.brands__scroller::after { right:0; background: linear-gradient(-90deg, var(--color-bg) 0%, rgba(9,11,24,0) 100%); }


/* v13 — Instagram: horizontal carousel with scroll-snap */
.ig{ padding:24px 0; }
.ig__wrap{ position:relative; }
.ig__hscroll{ display:flex; gap:16px; overflow-x:auto; padding:0 var(--gutter); scroll-snap-type:x mandatory; scroll-padding-inline: var(--gutter); }
.ig__item{ flex:0 0 clamp(280px, 32%, 360px); scroll-snap-align:start; }
@media (max-width:640px){ .ig__item{ flex-basis: 90vw; } }
.instagram-media{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; border-radius:20px!important; overflow:hidden!important; background:rgba(0,0,0,.4)!important; }
.ig__hscroll::-webkit-scrollbar{ height:6px; }
.ig__hscroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:20px; }
.ig__wrap::before, .ig__wrap::after{ content:""; position:absolute; top:0; bottom:0; width:32px; pointer-events:none; z-index:2; }
.ig__wrap::before{ left:0;  background:linear-gradient(90deg, var(--color-bg) 0%, rgba(9,11,24,0) 100%); }
.ig__wrap::after { right:0; background:linear-gradient(-90deg, var(--color-bg) 0%, rgba(9,11,24,0) 100%); }


/* v13 — Mouse FX (orb with inertia) */
:root{ --brand-speed: 42; /* px/s desktop */ --fx-x:50%; --fx-y:50%; }
body::before, body::after{ content:""; position:fixed; inset:-30vh; pointer-events:none; z-index:0; mix-blend-mode:screen; filter: blur(42px) saturate(120%); background: radial-gradient(700px 520px at calc(var(--fx-x) + 8%) calc(var(--fx-y) + 10%), rgba(67,85,255,.22), rgba(67,85,255,0) 65%); }
body::before{ content:""; position:fixed; inset:-30vh; pointer-events:none; z-index:0; mix-blend-mode:screen; filter: blur(28px); background: radial-gradient(420px 340px at var(--fx-x) var(--fx-y), rgba(67,85,255,.70), rgba(67,85,255,0) 62%); }
body::after{ content:""; position:fixed; inset:-30vh; pointer-events:none; z-index:0; mix-blend-mode:screen; filter: blur(42px) saturate(120%); background: radial-gradient(700px 520px at calc(var(--fx-x) + 8%) calc(var(--fx-y) + 10%), rgba(67,85,255,.22), rgba(67,85,255,0) 65%); }
.nav, main, footer{ position:relative; z-index:1; }

/* v14 — Hero panel with same visual frame as banner */
.hero{ margin-top: 18px; }
.hero-panel{ /* disabled in v15 */
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }/*
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 28px 28px 32px;
  box-shadow: var(--elev);
}

/* v14 — transparent edge masks (no dark overlays) */
.brands__scroller{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.ig__hscroll{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
/* override old gradient overlays */
.brands__scroller::before, .brands__scroller::after,
.ig__wrap::before, .ig__wrap::after{ content:none !important; background:none !important; display:none !important; }

/* v15 hero single line */
.hero__title{ white-space:nowrap !important; font-size: clamp(24px, 6vw, 60px) !important; letter-spacing:-0.02em; }

/* v15 brands sizing */
.brands__scroller{ height:110px; }
.brand{ flex:0 0 150px; width:150px; }

@media (max-width: 640px){
  :root{ --brand-speed: 28; /* px/s mobile */ }
}