/* West Company — Premium Streetwear
   Paleta preto & branco (inspirada na linguagem visual da Nike): alto contraste,
   tipografia grande, muito movimento. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #000000;
  --bg-elevated: #0c0c0c;
  --surface: #121212;
  --surface-2: #1a1a1a;
  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.28);
  --text: #ffffff;
  --text-muted: #b3b3b3;
  --text-faint: #6f6f6f;
  --accent: #ffffff;
  --accent-dim: #d9d9d9;
  --danger: #ff3b30;
  --ok: #2ecc71;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow: 0 24px 60px rgba(0,0,0,.6);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.5);
  --maxw: 1280px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, Segoe UI, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:#fff;color:#000;}

h1,h2,h3,h4{
  font-family: 'Bebas Neue', 'Manrope', sans-serif;
  letter-spacing: .03em;
  font-weight: 400;
  line-height: 1.02;
  color: var(--text);
  text-transform: uppercase;
}
.eyebrow{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.32em;
  font-size: 13px;
  color: var(--text);
  text-transform: uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:26px; height:2px; background:var(--text); display:inline-block;}
.container{max-width: var(--maxw); margin:0 auto; padding:0 24px;}
.section{padding: 96px 0;}
.section--tight{padding: 56px 0;}
.section--alt{background: var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:none;}
.reveal-stagger > *{transition-delay: calc(var(--i, 0) * 80ms);}

/* ---------- Noise overlay ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1000; opacity:.035; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Logo ---------- */
.logo-badge{display:flex; align-items:center;}
.logo-img{height:46px; width:auto; display:block;}
.footer-brand .logo-img{height:40px;}

/* ---------- Header ---------- */
.announce{
  background: #000; color:#fff; text-align:center; font-size: 12.5px; letter-spacing:.14em;
  padding: 10px 16px; border-bottom: 1px solid var(--border); text-transform:uppercase;
  position:relative; overflow:hidden;
}
header.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: transform .4s var(--ease), background .3s;
}
header.site-header.hide{transform: translateY(-100%);}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height: 86px;
}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{
  position:relative; font-size: 13px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-muted);
  padding: 6px 2px; transition: color .25s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:#fff;
  transition: right .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{color: var(--text);}
.nav-links a:hover::after, .nav-links a.active::after{right:0;}
.nav-actions{display:flex; align-items:center; gap:14px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px; border-radius: 999px; font-size: 13px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; border:1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn-primary{background: #fff; color:#000;}
.btn-primary:hover{transform: translateY(-3px); box-shadow: 0 16px 34px rgba(255,255,255,.18);}
.btn-outline{border-color: var(--border-strong); color: var(--text);}
.btn-outline:hover{border-color: #fff; background:#fff; color:#000;}
.btn-wpp{background:#1f7d4f; color:#eafff3;}
.btn-wpp:hover{transform: translateY(-3px); box-shadow: 0 16px 34px rgba(31,125,79,.35);}
.btn-sm{padding: 10px 18px; font-size:12px;}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;}
.burger span{width:24px; height:2px; background:var(--text); transition: all .3s var(--ease);}
.mobile-menu{
  display:none; position:fixed; inset:86px 0 0 0; background: #000; z-index: 99;
  padding: 32px 24px; flex-direction:column; gap:22px; overflow:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:24px; font-family:'Bebas Neue'; letter-spacing:.08em; color:var(--text);}

/* ---------- Hero (animado) ---------- */
.hero{
  position:relative; min-height: 92vh; display:flex; align-items:center; overflow:hidden; background:#000;
}
.hero-bg{position:absolute; inset:0; overflow:hidden;}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; filter: grayscale(1) brightness(.5) contrast(1.15);
  transform: scale(1.12); animation: heroZoom 16s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1.12);} to{transform:scale(1);}}

/* Showcase de produtos passando atrás do texto */
.hero-showcase{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:16px;
  transform: rotate(-4deg) scale(1.15); opacity:.9;
}
.hero-row{display:flex; gap:16px; width:max-content; animation: rowScrollL 46s linear infinite;}
.hero-row.dir-right{animation-name: rowScrollR; animation-duration:54s;}
.hero-row.speed-fast{animation-duration:34s;}
.hero-row img{
  width:200px; height:260px; object-fit:cover; border-radius:12px; flex-shrink:0;
  filter: grayscale(1) contrast(1.15) brightness(.75); border:1px solid rgba(255,255,255,.08);
}
@keyframes rowScrollL{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes rowScrollR{from{transform:translateX(-50%);} to{transform:translateX(0);}}

.hero::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.68) 55%, #000 100%);
}
.hero-glow{
  position:absolute; width:70vw; height:70vw; max-width:900px; max-height:900px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  top:-20%; right:-20%; filter: blur(10px); animation: floaty 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floaty{0%,100%{transform:translate(0,0);} 50%{transform:translate(-30px,30px);}}
.hero-content{position:relative; z-index:2; max-width: 720px;}
.hero-content .eyebrow{opacity:0; animation: fadeUp .8s var(--ease) .1s forwards;}
.hero h1{font-size: clamp(52px, 9vw, 104px); margin: 18px 0 24px; overflow:hidden;}
.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .line span{display:block; transform: translateY(110%); animation: revealUp .9s var(--ease) forwards;}
.hero h1 .line:nth-child(1) span{animation-delay:.18s;}
.hero h1 .line:nth-child(2) span{animation-delay:.32s;}
.hero h1 i{font-style:normal; -webkit-text-stroke: 1.5px #fff; color:transparent;}
@keyframes revealUp{to{transform: translateY(0);}}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.hero p{color: var(--text-muted); font-size:17px; max-width:520px; margin-bottom: 36px; opacity:0; animation: fadeUp .8s var(--ease) .55s forwards;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation: fadeUp .8s var(--ease) .7s forwards;}
.hero-scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-faint);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:0; animation: fadeUp .8s var(--ease) .9s forwards;
}
.hero-scroll .dot{width:6px; height:6px; border-radius:50%; background:#fff; animation: dotMove 1.6s ease-in-out infinite;}
@keyframes dotMove{0%{transform:translateY(0); opacity:1;} 100%{transform:translateY(16px); opacity:0;}}

/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background: #fff; overflow:hidden; white-space:nowrap; padding: 18px 0;
}
.marquee-track{display:inline-flex; gap:56px; animation: scroll 22s linear infinite;}
.marquee-track span{font-family:'Bebas Neue'; letter-spacing:.16em; font-size:16px; color:#000;}
.marquee-track span b{-webkit-text-stroke: 1px #000; color:transparent;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Section headers ---------- */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.section-head h2{font-size: clamp(34px,4.6vw,56px);}
.section-head p{color:var(--text-muted); max-width:460px; font-size:15px;}

/* ---------- Category cards ---------- */
.cat-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;}
.cat-card{
  position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 3/4;
  border:1px solid var(--border); background: var(--surface);
}
.cat-card img{width:100%; height:100%; object-fit:cover; filter:grayscale(.15); transition: transform .6s var(--ease), filter .4s;}
.cat-card:hover img{transform: scale(1.09); filter:grayscale(0);}
.cat-card::after{content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.9) 100%);}
.cat-card-label{position:absolute; left:20px; right:20px; bottom:18px; z-index:2;}
.cat-card-label .eyebrow{display:block; margin-bottom:4px;}
.cat-card-label h3{font-size:28px;}

/* ---------- Product grid ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 34px;}
.filter-chip{
  padding:11px 22px; border-radius:999px; border:1px solid var(--border-strong);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
  background:transparent; transition: all .25s var(--ease);
}
.filter-chip:hover{border-color:#fff; color:#fff;}
.filter-chip.active{background:#fff; border-color:#fff; color:#000; font-weight:700;}

.product-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;}
.product-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card:hover{transform: translateY(-8px); border-color: var(--border-strong); box-shadow: var(--shadow-sm);}
.product-media{position:relative; aspect-ratio: 3/4; background:#0a0a0a; overflow:hidden;}
.product-media img{width:100%; height:100%; object-fit:cover; transition: transform .55s var(--ease);}
.product-card:hover .product-media img{transform: scale(1.06);}
.badge{
  position:absolute; top:12px; left:12px; z-index:2; padding:6px 12px; border-radius:999px;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
}
.badge-frete{background:#fff; color:#000;}
.badge-novo{background:#000; color:#fff; border:1px solid #fff;}
.badge-oferta{background: var(--danger); color:#fff;}
.product-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.product-brand{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-faint);}
.product-name{font-size:15px; font-weight:600; color:var(--text); min-height:40px;}
.price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto;}
.price{font-family:'Bebas Neue'; font-size:23px; letter-spacing:.03em; color:var(--text);}
.price-old{font-size:13px; color: var(--text-faint); text-decoration: line-through;}
.product-actions{margin-top:6px;}
.product-actions .btn{width:100%;}
.empty-state{padding:80px 20px; text-align:center; color:var(--text-muted);}

/* ---------- Founders / About ---------- */
.founders-grid{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;}
.founders-copy p{color:var(--text-muted); margin-bottom:18px; font-size:16px;}
.founders-copy p strong{color:var(--text);}
.people{display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-top:32px;}
.person-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; position:relative; transition: border-color .3s, transform .3s var(--ease);
}
.person-card:hover{border-color:var(--border-strong); transform: translateY(-4px);}
.person-role{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px;}
.person-name{font-family:'Bebas Neue'; font-size:25px; margin-bottom:6px;}
.person-tag{display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background: var(--surface-2); color:var(--text-muted); border:1px solid var(--border);}
.person-tag.current{background:#fff; color:#000; border-color:#fff; font-weight:700;}
.founders-visual{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5;
  border: 1px solid var(--border);
}
.founders-visual img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1);}

.values-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:56px;}
.value-card{padding:28px 22px; border:1px solid var(--border); border-radius: var(--radius); background:var(--surface); transition: transform .3s var(--ease), border-color .3s;}
.value-card:hover{transform: translateY(-6px); border-color:var(--border-strong);}
.value-card .num{font-family:'Bebas Neue'; color:var(--text-faint); font-size:14px; letter-spacing:.12em;}
.value-card h3{font-size:20px; margin:12px 0 8px;}
.value-card p{color:var(--text-muted); font-size:14px;}

/* ---------- Banner CTA ---------- */
.cta-banner{
  position:relative; border-radius: var(--radius-lg); background: #0c0c0c;
  border: 1px solid var(--border); padding: 64px 56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; inset:-2px; background: conic-gradient(from 0deg, rgba(255,255,255,.12), transparent 30%, transparent 70%, rgba(255,255,255,.12));
  animation: spin 8s linear infinite; opacity:.6;
}
@keyframes spin{to{transform:rotate(360deg);}}
.cta-banner > *{position:relative; z-index:1;}
.cta-banner h2{font-size: clamp(28px,4vw,44px); max-width:560px;}
.cta-banner p{color:var(--text-muted); margin-top:10px;}

/* ---------- Instagram page ---------- */
.insta-hero{text-align:center; max-width:640px; margin: 0 auto 48px;}
.insta-mosaic{display:grid; grid-template-columns: repeat(4,1fr); gap:14px;}
.insta-tile{position:relative; aspect-ratio:1/1; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border);}
.insta-tile img{width:100%; height:100%; object-fit:cover; filter:grayscale(.25); transition: transform .5s var(--ease), filter .4s;}
.insta-tile:hover img{transform:scale(1.1); filter:grayscale(0);}
.insta-tile::after{content:'Ver no Instagram'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.6); color:#fff; opacity:0; transition: opacity .25s var(--ease); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;}
.insta-tile:hover::after{opacity:1;}

/* ---------- Terms ---------- */
.terms-doc{max-width: 820px; margin:0 auto; color: var(--text-muted); font-size:15.5px;}
.terms-doc h2{color:var(--text); font-size:26px; margin: 34px 0 12px;}
.terms-doc h2:first-child{margin-top:0;}
.terms-doc p{margin-bottom:18px;}
.terms-doc .updated{color:var(--text-faint); font-size:13px; margin-bottom:36px;}

/* ---------- Footer ---------- */
footer.site-footer{border-top:1px solid var(--border); background: #000; padding: 64px 0 28px;}
.footer-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
.footer-brand p{color:var(--text-muted); font-size:14px; max-width:280px; margin-top:16px;}
.footer-col h4{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text); margin-bottom:18px;}
.footer-col a, .footer-col p{display:block; color:var(--text-muted); font-size:14px; margin-bottom:12px; transition: color .2s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; color:var(--text-faint); font-size:12.5px; flex-wrap:wrap; gap:10px;}

/* ---------- WhatsApp floating ---------- */
.wpp-float{
  position:fixed; right:22px; bottom:22px; z-index:200; width:60px; height:60px; border-radius:50%;
  background:#1f7d4f; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.15);
  animation: pulse 2.6s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,125,79,.55), 0 12px 30px rgba(0,0,0,.5);} 70%{box-shadow:0 0 0 14px rgba(31,125,79,0), 0 12px 30px rgba(0,0,0,.5);} 100%{box-shadow:0 0 0 0 rgba(31,125,79,0), 0 12px 30px rgba(0,0,0,.5);}}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .cat-grid{grid-template-columns: repeat(2,1fr);}
  .product-grid{grid-template-columns: repeat(2,1fr);}
  .founders-grid{grid-template-columns: 1fr; gap:36px;}
  .footer-grid{grid-template-columns: 1fr 1fr;}
  .values-grid{grid-template-columns: 1fr 1fr;}
  .insta-mosaic{grid-template-columns: repeat(2,1fr);}
  .nav-actions .btn-outline{display:none;}
}
@media (max-width: 560px){
  .product-grid{grid-template-columns: 1fr 1fr;}
  .cat-grid{grid-template-columns: 1fr 1fr;}
  .section{padding:56px 0;}
  .cta-banner{padding:40px 26px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}