/* =========================================================
   TWRGET — Metal-Gothic Streetwear
   Aesthetic: opium-core / band-merch / washed heavyweight
   Palette: strict monochrome (ink + bone + steel silver)
   ========================================================= */

/* fonte da marca */
@font-face{
  font-family:'Lovelo';
  src:url('../fonts/lovelo-black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  /* TEMA CLARO — fundo branco */
  --ink:      #ffffff;   /* fundo do site */
  --ink-2:    #f7f5f1;   /* superfícies (cards, sacola) */
  --ink-3:    #edeae4;
  --wire:     #e2ded5;   /* bordas claras */
  --bone:     #131110;   /* texto escuro */
  --bone-dim: #57544e;   /* texto secundário */
  --steel:    #8a8c92;
  --steel-lt: #6f6d74;   /* labels — escuro o suficiente pra ler no branco */
  --silver:   linear-gradient(180deg,#57575e 0%,#17171a 45%,#3a3a41 68%,#0d0d10 100%); /* metálico escuro */
  --hero-fg:  #f2efe9;   /* texto claro sobre as fotos do hero */
  --hero-dim: #d7d3cb;

  --maxw: 1280px;
  --pad:  clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.16,1,.3,1);

  --f-display: "Lovelo", "Arial Narrow", sans-serif;   /* fonte oficial da marca */
  --f-goth:    "Pirata One", "Times New Roman", serif;
  --f-body:    "Space Grotesk", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.loading{ overflow:hidden; }
html.gsap .reveal{ transition:none; }          /* GSAP controla — sem briga com o CSS */
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; color:inherit; background:none; border:none; }
::selection{ background:var(--bone); color:var(--ink); }

/* ---------- Metallic text treatment (the anchor) ---------- */
.metal{
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}
.metal::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  mix-blend-mode:screen; opacity:.9;
  background-size:220% 100%;
  animation:shimmer 6.5s var(--ease) infinite;
  pointer-events:none;
}
@keyframes shimmer{ 0%,60%{background-position:180% 0} 100%{background-position:-80% 0} }

/* ---------- Film grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; 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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--f-goth);
  font-size:clamp(15px,2vw,20px);
  letter-spacing:.04em;
  color:var(--steel);
}
.eyebrow--light{ color:var(--steel); }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .metal::after{animation:none;display:none}
  html{scroll-behavior:auto}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; font-size:12px;
  padding:15px 30px; border:1px solid var(--bone);
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:active{ transform:scale(.97); }
.btn--ghost{ color:var(--bone); background:transparent; }
.btn--ghost:hover{ background:var(--bone); color:var(--ink); }
.btn--ghost.btn--dark{ border-color:var(--ink); color:var(--ink); }
.btn--ghost.btn--dark:hover{ background:var(--ink); color:var(--bone); }
.btn--solid{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn--solid:hover{ background:transparent; color:var(--bone); }

/* =========================================================
   ANNOUNCE MARQUEE
   ========================================================= */
.announce{
  background:var(--ink); border-bottom:1px solid var(--wire);
  overflow:hidden; padding:9px 0; position:relative; z-index:60;
}
.announce__track{
  display:flex; gap:0; white-space:nowrap; width:max-content;
  animation:marquee 34s linear infinite;
}
.announce__track span{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone-dim); padding:0 22px;
}
.announce .dot{ color:var(--steel); padding:0 4px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px var(--pad);
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--wire);
}
.nav__logo{
  font-family:var(--f-display);
  font-size:clamp(20px,2.4vw,26px);
  letter-spacing:.08em;
  color:var(--bone);
  line-height:1;
}
.nav__links{ display:flex; gap:34px; }
.nav__links a{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-dim); position:relative; padding:4px 0;
  transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--bone); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:14px; }
.nav__cart{ position:relative; display:flex; color:var(--bone); padding:6px; }
.nav__cart:hover{ color:var(--steel-lt); }
.nav__count{
  position:absolute; top:-4px; right:-6px;
  min-width:17px; height:17px; padding:0 4px;
  background:var(--bone); color:var(--ink);
  font-size:10px; font-weight:700; line-height:17px; text-align:center;
  border-radius:9px; transform:scale(0); transition:transform .3s var(--ease);
}
.nav__count.show{ transform:scale(1); }

.nav__burger{ display:none; flex-direction:column; gap:5px; padding:6px; }
.nav__burger span{ width:24px; height:2px; background:var(--bone); transition:.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO SLIDESHOW
   ========================================================= */
.hero{ position:relative; height:clamp(560px,92vh,940px); overflow:hidden; background:var(--ink); }
.hero__viewport{ position:absolute; inset:0; }

.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease);
  display:flex; align-items:flex-end;
}
.slide.is-active{ opacity:1; visibility:visible; z-index:2; }

.slide__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:scale(1.08); transition:transform 7s linear;
  filter:grayscale(.35) contrast(1.05) brightness(.62);
}
.slide.is-active .slide__bg{ transform:scale(1); }
.slide__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.15) 40%,rgba(10,10,11,.9) 100%);
}
.slide__bg--type{
  background:
    radial-gradient(120% 80% at 50% 0%,#26262b 0%,#0a0a0b 60%),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.015) 38px 39px);
  filter:none;
}
.slide__bg--type::after{ background:radial-gradient(80% 60% at 50% 40%,transparent,rgba(10,10,11,.6)); }
.slide__bg--video{
  background:radial-gradient(120% 90% at 50% 30%,#24242a,#0a0a0b 70%);
  filter:none;
}
.slide__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) brightness(.6); z-index:1;
  opacity:1;                                           /* poster aparece já; vídeo entra por cima */
}
.slide__video + .slide__inner{ z-index:3; }
/* scrim sobre o vídeo (texto à direita legível) */
.slide[data-type="video"]::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent 32%,rgba(10,10,11,.5) 68%,rgba(10,10,11,.82) 100%),
             linear-gradient(0deg,rgba(10,10,11,.55) 0%,transparent 40%);
}
@media (max-width:640px){
  .slide[data-type="video"]::after{ background:linear-gradient(0deg,rgba(10,10,11,.8) 8%,rgba(10,10,11,.15) 55%,rgba(10,10,11,.4) 100%); }
}

/* BANNERS REAIS 16:9 — arte pronta: deixa clara, escurece só o rodapé pro texto */
.slide__bg--full{
  filter:brightness(.98) contrast(1.02);
  background-size:cover; background-position:center;
}
.slide__bg--full::after{
  background:linear-gradient(180deg,rgba(10,10,11,.35) 0%,transparent 22%,transparent 52%,rgba(10,10,11,.82) 100%);
}
/* banner com texto embutido (principal): a headline gigante competiria — some.
   Nas fotos limpas (sofá) a headline aparece normal. */
.slide--baked .slide__title{ display:none; }
.slide[data-type="image"] .slide__eyebrow{ font-size:clamp(17px,2vw,23px); margin-bottom:8px; }
.slide[data-type="image"] .slide__sub{ font-size:clamp(15px,1.7vw,19px); color:var(--bone); font-weight:500; margin-bottom:22px; }
.slide[data-type="image"] .slide__inner{ padding-bottom:clamp(48px,7vh,90px); }

/* MOBILE: full-bleed cover; fotos verticais (art-direction) encaixam sem cortar o modelo */
@media (max-width:640px){
  .hero{ height:clamp(520px,86vh,780px); }
  .slide__bg--full{
    background-size:cover !important;
    background-position:center !important;
  }
  /* troca as fotos horizontais pelas versões VERTICAIS no celular */
  .slide__bg--m-principal{ background-image:url('../assets/banner-principal-mob.jpg') !important; }
  .slide__bg--m-trio{      background-image:url('../assets/hero-sofa-trio-mob.jpg') !important; }
  .slide__bg--m-man{       background-image:url('../assets/hero-sofa-man-mob.jpg') !important; }
  .slide__bg--m-blonde{    background-image:url('../assets/hero-sofa-blonde-mob.jpg') !important; }
  .slide__bg--m-woman{     background-image:url('../assets/hero-sofa-woman-mob.jpg') !important; }
  .slide__bg--m-open{      background-image:url('../assets/hero-open-mob.jpg') !important; }
  .slide__video{ object-fit:cover; }
}

/* MOBILE: full-bleed, foto vertical encaixa (rosto no topo) */
.slide__bg--right, .slide__bg--left{ background-position:center 12%; }

/* DESKTOP: foto como painel vertical lateral — mostra o modelo inteiro */
@media (min-width:900px){
  .slide__bg--right, .slide__bg--left{ background-size:auto 112%; }
  .slide__bg--right{ background-position:right center; }
  .slide__bg--left{  background-position:left center; }
  /* scrim horizontal: lado do texto escuro, lado da foto revelado */
  .slide__bg--right::after{
    background:linear-gradient(90deg,var(--ink) 6%,rgba(10,10,11,.55) 34%,rgba(10,10,11,.12) 62%,rgba(10,10,11,.5) 100%);
  }
  .slide__bg--left::after{
    background:linear-gradient(270deg,var(--ink) 6%,rgba(10,10,11,.55) 34%,rgba(10,10,11,.12) 62%,rgba(10,10,11,.5) 100%);
  }
}

.slide__inner{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) clamp(70px,10vh,130px);
  text-align:center;
}
.slide__inner--left{ text-align:left; }
.slide__inner--right{ text-align:right; }

.slide__eyebrow{
  font-family:var(--f-goth); color:var(--steel-lt);
  font-size:clamp(16px,2.2vw,22px); letter-spacing:.05em;
  margin-bottom:10px;
  opacity:0; transform:translateY(20px);
}
.slide__title{
  font-family:var(--f-display);
  font-size:clamp(44px,9.5vw,120px);
  line-height:.88; letter-spacing:.01em; text-transform:uppercase;
  color:var(--bone);
  margin-bottom:16px;
  opacity:0; transform:translateY(30px);
}
.slide[data-type="type"] .slide__title{ font-size:clamp(58px,13vw,180px); }
.slide__sub{
  color:var(--bone-dim); font-size:clamp(14px,1.6vw,18px);
  max-width:520px; margin:0 auto 26px;
  opacity:0; transform:translateY(20px);
}
.slide__inner--left .slide__sub{ margin-left:0; }
.slide__inner--right .slide__sub{ margin-right:0; }
.slide__inner .btn{ opacity:0; transform:translateY(20px); }

/* staggered entrance on active slide */
.slide.is-active .slide__eyebrow{ animation:rise .7s var(--ease) .15s forwards; }
.slide.is-active .slide__title{   animation:rise .8s var(--ease) .28s forwards; }
.slide.is-active .slide__sub{     animation:rise .7s var(--ease) .45s forwards; }
.slide.is-active .slide__inner .btn{ animation:rise .7s var(--ease) .6s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* arrows */
.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; font-size:30px; line-height:1;
  color:var(--bone); border:1px solid var(--wire);
  background:rgba(10,10,11,.3); backdrop-filter:blur(4px);
  transition:background .3s, border-color .3s;
}
.hero__arrow:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.hero__arrow--prev{ left:clamp(12px,2vw,28px); }
.hero__arrow--next{ right:clamp(12px,2vw,28px); }

/* dots */
.hero__dots{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:5;
}
.hero__dots button{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--bone); background:transparent; padding:0;
  transition:transform .3s, background .3s;
}
.hero__dots button.on{ background:var(--bone); transform:scale(1.25); }

/* progress bar */
.hero__progress{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--wire); z-index:5; }
.hero__progress span{ display:block; height:100%; width:0; background:var(--bone); }

.hero__scroll{
  position:absolute; left:var(--pad); bottom:22px; z-index:5;
  display:flex; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.3em; color:var(--bone-dim);
}
.hero__scroll svg{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(4px); } }
@media (max-width:640px){ .hero__scroll, .hero__arrow{ display:none; } }

/* =========================================================
   STRIP MARQUEE
   ========================================================= */
.strip{ background:var(--bone); color:var(--ink); overflow:hidden; padding:14px 0; border-block:1px solid var(--ink); }
.strip__track{ display:flex; width:max-content; align-items:center; animation:marquee 24s linear infinite; }
.strip__track span{
  font-family:var(--f-goth); font-size:clamp(22px,3vw,34px);
  letter-spacing:.04em; padding:0 26px; white-space:nowrap;
}
.strip__x{ font-family:var(--f-body)!important; font-size:16px!important; color:var(--steel); }

/* =========================================================
   SHOP GRID
   ========================================================= */
.shop{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vw,130px) var(--pad); }
.shop__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,70px);
  border-bottom:1px solid var(--wire); padding-bottom:28px;
}
.shop__title{ font-family:var(--f-display); font-size:clamp(48px,9vw,120px); line-height:.9; text-transform:uppercase; }
.shop__note{ color:var(--bone-dim); font-size:14px; max-width:340px; text-align:right; }

.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,44px); }

.product{ border:1px solid var(--wire); background:var(--ink-2); transition:border-color .4s; }
.product:hover{ border-color:var(--steel); }
.product__media{
  position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.product__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease), opacity .6s var(--ease);
}
.product__flat{ z-index:1; }
.product__model{ z-index:2; opacity:0; object-position:center 30%; }
.product:hover .product__flat{ transform:scale(1.04); }
.product:hover .product__model{ opacity:1; transform:scale(1.03); }
.product__tag{
  position:absolute; top:14px; left:14px; z-index:4;
  font-size:10px; letter-spacing:.22em; padding:5px 10px;
  background:var(--bone); color:var(--ink); font-weight:700;
}
.product__hint{
  position:absolute; top:14px; right:14px; z-index:4;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  padding:5px 9px; color:var(--bone); border:1px solid rgba(233,230,223,.3);
  background:rgba(10,10,11,.35); backdrop-filter:blur(4px);
  transition:opacity .4s; pointer-events:none;
}
.product:hover .product__hint{ opacity:0; }
.product__body{ padding:22px clamp(18px,2vw,26px) 26px; }
.product__name{ font-size:17px; font-weight:600; letter-spacing:.01em; margin-bottom:10px; }
.product__row{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.product__price{ font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.product__inst{ font-size:12px; color:var(--bone-dim); }

.product__sizes{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.product__sizes button{
  min-width:46px; height:44px; padding:0 6px;
  border:1px solid var(--wire); color:var(--bone-dim);
  font-size:13px; font-weight:600; letter-spacing:.05em;
  transition:.25s var(--ease);
}
.product__sizes button:hover{ border-color:var(--bone); color:var(--bone); }
.product__sizes button.sel{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.product__sizes button.sold{ opacity:.32; cursor:not-allowed; text-decoration:line-through; }
.product__sizes button.sold:hover{ border-color:var(--wire); color:var(--bone-dim); }

.product__add{ width:100%; }
.product__add.miss{ animation:shake .4s; }
@keyframes shake{ 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.product__guide{
  display:inline-block; margin-top:14px;
  font-size:12px; letter-spacing:.08em; color:var(--bone-dim);
  border-bottom:1px solid var(--wire); padding-bottom:2px; transition:.3s;
}
.product__guide:hover{ color:var(--bone); border-color:var(--bone); }

/* =========================================================
   LOOKBOOK
   ========================================================= */
.look{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(30px,5vw,80px);
  max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,90px) var(--pad);
}
.look__img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink-2); border:1px solid var(--wire); }
.look__img img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.03); }
.look__stamp{
  position:absolute; bottom:18px; left:18px;
  font-family:var(--f-goth); font-size:22px; letter-spacing:.05em;
}
.look__title{ font-family:var(--f-display); font-size:clamp(40px,7vw,90px); line-height:.92; text-transform:uppercase; margin:14px 0 22px; }
.look__p{ color:var(--bone-dim); max-width:440px; margin-bottom:26px; }
.look__specs{ list-style:none; margin-bottom:30px; border-top:1px solid var(--wire); }
.look__specs li{
  display:flex; justify-content:space-between; gap:20px;
  padding:13px 0; border-bottom:1px solid var(--wire);
  font-size:14px; color:var(--bone-dim);
}
.look__specs strong{ color:var(--bone); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:12px; }
.look .btn--dark{ border-color:var(--bone); color:var(--bone); }
.look .btn--dark:hover{ background:var(--bone); color:var(--ink); }

/* =========================================================
   SIZE TABLE (bone section — contrast break)
   ========================================================= */
.size{ background:var(--bone); color:var(--ink); padding:clamp(54px,7vw,90px) var(--pad); }
.size__head{ max-width:840px; margin:0 auto clamp(26px,3.5vw,40px); }
.size .eyebrow{ color:#55565b; }
.size__title{ font-family:var(--f-display); font-size:clamp(30px,5vw,64px); line-height:.94; text-transform:uppercase; margin:6px 0 12px; }
.size__note{ color:#4a4b50; max-width:520px; font-size:13px; }
.size__table-wrap{ max-width:840px; margin:0 auto; overflow-x:auto; }
.size__table{ width:100%; border-collapse:collapse; min-width:460px; }
.size__table th{
  font-family:var(--f-goth); font-weight:400;
  font-size:clamp(14px,1.7vw,18px); letter-spacing:.02em;
  text-align:left; padding:11px 16px; border-bottom:2px solid var(--ink);
}
.size__table td{
  padding:13px 16px; border-bottom:1px solid rgba(10,10,11,.14);
  font-size:clamp(13px,1.5vw,16px); font-variant-numeric:tabular-nums;
}
.size__table td:first-child{ font-weight:700; font-size:clamp(15px,1.8vw,19px); }
.size__table tbody tr{ transition:background .25s; }
.size__table tbody tr:hover{ background:rgba(10,10,11,.05); }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ padding:clamp(80px,12vw,160px) var(--pad); text-align:center;
  background:radial-gradient(90% 70% at 50% 0%,#17171b 0%,var(--ink) 65%); }
.about__inner{ max-width:760px; margin:0 auto; }
.about__title{ font-family:var(--f-display); font-size:clamp(70px,16vw,190px); line-height:.85; text-transform:uppercase; margin:10px 0 24px; }
.about__lead{ font-size:clamp(18px,2.4vw,26px); color:var(--bone); margin-bottom:20px; font-weight:500; }
.about__p{ color:var(--bone-dim); max-width:600px; margin:0 auto 44px; }
.about__stats{ display:flex; justify-content:center; gap:clamp(30px,6vw,80px); margin-bottom:44px; flex-wrap:wrap; }
.about__stats div{ display:flex; flex-direction:column; }
.about__stats strong{ font-family:var(--f-display); font-size:clamp(34px,5vw,56px); line-height:1; }
.about__stats span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-top:8px; }
.about .btn--dark{ border-color:var(--bone); color:var(--bone); }
.about .btn--dark:hover{ background:var(--bone); color:var(--ink); }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.news{ border-top:1px solid var(--wire); padding:clamp(60px,9vw,110px) var(--pad); }
.news__inner{ max-width:720px; margin:0 auto; text-align:center; }
.news__title{ font-family:var(--f-display); font-size:clamp(34px,6vw,72px); line-height:.92; text-transform:uppercase; margin-bottom:30px; }
.news__form{ display:flex; gap:10px; max-width:480px; margin:0 auto; flex-wrap:wrap; }
.news__form input{
  flex:1 1 220px; min-width:0; background:var(--ink-2); border:1px solid var(--wire);
  color:var(--bone); padding:15px 18px; font-family:var(--f-body); font-size:14px;
}
.news__form input:focus{ outline:none; border-color:var(--bone); }
.news__fine{ margin-top:16px; font-size:12px; color:var(--bone-dim); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  border-top:1px solid var(--wire); background:var(--ink);
  padding:clamp(50px,7vw,80px) var(--pad) 40px;
  display:grid; grid-template-columns:1.2fr 2fr; gap:40px;
}
.foot__logo{ font-family:var(--f-display); font-size:30px; letter-spacing:.08em; display:block; margin-bottom:14px; }
.foot__brand p{ color:var(--bone-dim); font-size:13px; max-width:280px; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.foot__cols h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-bottom:14px; }
.foot__cols a{ display:block; color:var(--bone-dim); font-size:14px; padding:5px 0; transition:color .3s; }
.foot__cols a:hover{ color:var(--bone); }
.foot__pay{ grid-column:1/-1; border-top:1px solid var(--wire); padding-top:24px; margin-top:14px; font-size:12px; color:var(--steel); letter-spacing:.05em; }

/* =========================================================
   CART DRAWER + OVERLAY + TOAST
   ========================================================= */
.overlay{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .4s; }
.overlay.show{ opacity:1; }

.cart{
  position:fixed; top:0; right:0; z-index:110; height:100%;
  width:min(420px,92vw); background:var(--ink-2);
  border-left:1px solid var(--wire);
  display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .45s var(--ease);
}
.cart.open{ transform:none; }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--wire); }
.cart__head h3{ font-family:var(--f-goth); font-size:26px; font-weight:400; letter-spacing:.03em; }
.cart__head button{ font-size:18px; color:var(--bone-dim); transition:color .3s; }
.cart__head button:hover{ color:var(--bone); }

.cart__items{ flex:1; overflow-y:auto; padding:8px 24px; }
.cart__empty{ text-align:center; color:var(--bone-dim); padding:60px 0; font-size:14px; }
.cart__empty a{ color:var(--bone); border-bottom:1px solid var(--wire); }

.citem{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--wire); }
.citem__img{ width:72px; height:72px; object-fit:cover; background:var(--ink); border:1px solid var(--wire); flex-shrink:0; filter:grayscale(.2); }
.citem__info{ flex:1; min-width:0; }
.citem__name{ font-size:13px; font-weight:600; line-height:1.3; }
.citem__meta{ font-size:12px; color:var(--bone-dim); margin:3px 0 8px; }
.citem__bottom{ display:flex; align-items:center; justify-content:space-between; }
.citem__qty{ display:flex; align-items:center; gap:2px; border:1px solid var(--wire); }
.citem__qty button{ width:28px; height:28px; color:var(--bone-dim); font-size:15px; transition:color .2s; }
.citem__qty button:hover{ color:var(--bone); }
.citem__qty span{ min-width:26px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums; }
.citem__price{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.citem__rm{ font-size:11px; color:var(--steel); letter-spacing:.05em; margin-top:6px; text-align:left; transition:color .2s; }
.citem__rm:hover{ color:var(--bone); }

.cart__foot{ border-top:1px solid var(--wire); padding:22px 24px calc(22px + env(safe-area-inset-bottom)); }
.cart__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.cart__total span{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); }
.cart__total strong{ font-size:24px; font-variant-numeric:tabular-nums; }
.cart__checkout{ width:100%; }
.cart__checkout:disabled{ opacity:.4; cursor:not-allowed; }
.cart__secure{ text-align:center; font-size:11px; color:var(--steel); margin-top:12px; letter-spacing:.05em; }

.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,120%);
  z-index:200; background:var(--bone); color:var(--ink);
  padding:14px 24px; font-size:13px; font-weight:600; letter-spacing:.03em;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  transition:transform .45s var(--ease); max-width:90vw; text-align:center;
}
.toast.show{ transform:translate(-50%,0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .look{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; align-items:stretch;
    background:var(--ink); border-bottom:1px solid var(--wire);
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  }
  .nav__links.open{ max-height:320px; }
  .nav__links a{ padding:16px var(--pad); border-bottom:1px solid var(--wire); letter-spacing:.15em; }
  .nav__links a::after{ display:none; }
  .grid{ grid-template-columns:1fr; }
  .shop__note{ text-align:left; }
  .slide__inner--left, .slide__inner--right{ text-align:center; }
}
@media (max-width:480px){
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .btn{ padding:14px 22px; }
}

/* =========================================================
   PRELOADER (cena de abertura — Anime.js)
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.preloader.done{ display:none; }
.preloader__inner{ width:min(560px,86vw); text-align:center; }
.preloader__word{
  display:flex; justify-content:center; gap:.02em;
  font-family:var(--f-display);
  font-size:clamp(56px,14vw,150px); line-height:1;
  overflow:hidden;
}
.preloader__word span{
  display:inline-block; transform:translateY(118%);
  background:var(--silver); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.preloader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:20px; opacity:0;
}
.preloader__tag{ font-family:var(--f-goth); font-size:clamp(14px,2vw,20px); color:var(--steel); }
.preloader__count{
  font-family:var(--f-display); font-size:clamp(20px,3vw,30px);
  color:var(--bone); font-variant-numeric:tabular-nums;
}
.preloader__bar{ margin-top:14px; height:2px; background:var(--wire); overflow:hidden; }
.preloader__bar span{
  display:block; height:100%; width:100%; background:var(--silver);
  transform:scaleX(0); transform-origin:left;
}

/* =========================================================
   CURSOR METÁLICO (desktop)
   ========================================================= */
.cursor{
  position:fixed; top:0; left:0; z-index:9500;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--steel-lt);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.25),transparent 60%);
  mix-blend-mode:difference; pointer-events:none;
  opacity:0; transition:opacity .3s, width .3s var(--ease), height .3s var(--ease), background .3s;
}
.cursor.on{ opacity:1; }
.cursor.grow{ width:64px; height:64px; background:rgba(233,230,223,.12); }
.cursor.down{ width:26px; height:26px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* =========================================================
   BARRA DE PROGRESSO DE SCROLL
   ========================================================= */
.scrollbar{
  position:fixed; top:0; left:0; z-index:80;
  height:2px; width:100%; background:var(--silver);
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

/* =========================================================
   SPLIT CHARS + TILT 3D
   ========================================================= */
[data-split]{ overflow:hidden; }
[data-split].split-ready{ display:block; }
.char{ display:inline-block; will-change:transform; }
.grid{ perspective:1200px; }
.product{ transform-style:preserve-3d; will-change:transform; }
.look__img img{ height:116%; will-change:transform; }

/* =========================================================
   MOVIMENTO REDUZIDO — desliga o espetáculo
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .cursor, .scrollbar{ display:none!important; }
  .preloader{ display:none!important; }
  html.loading{ overflow:auto!important; }
  .char{ transform:none!important; }
}

/* =========================================================
   TEMA CLARO — fundo do site branco (ajustes finais)
   Hero = fotos escuras com texto claro; resto claro com texto escuro.
   ========================================================= */
/* nav translúcida clara */
.nav{ background:rgba(255,255,255,.82); }

/* HERO fotos/vídeo: texto e controles CLAROS sobre as imagens */
.hero .slide__eyebrow{ color:var(--hero-dim); }
.hero .slide__title{ color:var(--hero-fg); }
.hero .slide__sub{ color:var(--hero-dim); }
.hero__scroll{ color:var(--hero-dim); }
.hero__arrow{ color:var(--hero-fg); border-color:rgba(255,255,255,.35); background:rgba(10,10,11,.32); }
.hero__arrow:hover{ background:var(--hero-fg); color:#111; border-color:var(--hero-fg); }
.hero__dots button{ border-color:var(--hero-fg); }
.hero__dots button.on{ background:var(--hero-fg); }
.hero__progress{ background:rgba(255,255,255,.25); }
.hero__progress span{ background:var(--hero-fg); }
.hero .slide__inner .btn--ghost{ color:var(--hero-fg); border-color:var(--hero-fg); }
.hero .slide__inner .btn--ghost:hover{ background:var(--hero-fg); color:#111; }

/* slide de abertura (1): agora é FOTO → wordmark metálico CLARO (texto segue as regras claras do .hero) */
.slide[data-type="type"]{
  --silver:linear-gradient(180deg,#fbfbfd 0%,#cfd2d8 40%,#8a8c93 58%,#eef0f4 80%,#b3b5bc 100%);
}

/* sobre: fundo claro */
.about{ background:radial-gradient(90% 70% at 50% 0%,#f3f1ec 0%,var(--ink) 66%); }

/* tabela de medidas: manter clara, restaurar bordas visíveis */
.size{ background:var(--ink-2); color:var(--bone); }
.size .eyebrow{ color:var(--steel-lt); }
.size__note{ color:var(--bone-dim); }
.size__table th{ border-bottom-color:var(--bone); }
.size__table td{ border-bottom-color:var(--wire); }
.size__table td:first-child{ color:var(--bone); }
.size__table tbody tr:hover{ background:rgba(0,0,0,.04); }

/* hint do produto e selo do lookbook ficam sobre imagem → texto claro */
.product__hint{ color:#f2efe9; border-color:rgba(255,255,255,.35); }
.look__stamp{ -webkit-text-fill-color:#f2efe9; color:#f2efe9; }

/* grão sutil no claro */
.grain{ opacity:.035; mix-blend-mode:multiply; }

/* meta / theme-color continua definido no HTML */