/* Meloo Imports — proposta de site
   Preto de vitrine + off-white + dourado da coroa da logo. As fotos dos produtos são a cor da página. */
:root {
  --black: #0A0A0A;
  --ink: #121212;
  --gray-900: #171717;
  --gray-800: #222222;
  --gray-600: #9C9C9C;   /* texto secundário no escuro */
  --gray-500: #5F5F5F;   /* texto secundário no claro */
  --gray-200: #E2DED6;
  --paper: #F4F1EA;
  --white: #FFFFFF;
  --gold: #D9A63C;
  --gold-hi: #F0C766;
  --wa: #25D366;

  --f-display: 'Anton', 'Impact', sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;

  --fs-mega: clamp(5rem, 24vw, 22rem);
  --fs-hero: clamp(3.6rem, min(12.5vw, 15vh), 10.5rem);
  --fs-h1: clamp(2.6rem, 7vw, 6rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-lg: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-sm: .875rem;
  --fs-xs: .75rem;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --gutter: 16px;
  --sec: 96px;
  --ease: cubic-bezier(.76, .02, .13, 1.01);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --sec: 128px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --sec: 176px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font: 400 1rem/1.55 var(--f-body); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.section--light :focus-visible { outline-color: var(--black); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--black); padding: 8px 16px; border-radius: 999px; }
.skip:focus { left: 8px; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sec) 0; position: relative; }
.section--light { background: var(--paper); color: var(--black); }

/* Coroa (detalhe gráfico tirado da logo) */
.crown {
  display: inline-block; width: 1em; height: .72em; background: var(--gold); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 36'%3E%3Cpath d='M0 10l12 8L25 0l13 18 12-8-5 26H5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 36'%3E%3Cpath d='M0 10l12 8L25 0l13 18 12-8-5 26H5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Tipografia */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.title { font: 400 var(--fs-h1)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 40px; }
.title--xl { font-size: clamp(3rem, 9vw, 8rem); }
.label {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; margin-bottom: 28px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600);
  position: relative;
}
.section--light .label { color: var(--gray-500); }
.label::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .35; transform-origin: left; transform: scaleX(var(--p, 1)); }
.label span:first-child { color: var(--gold); }
.section--light .label span:first-child { color: var(--black); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px;
  border-radius: 999px; font-weight: 600; font-size: .95rem; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: .85rem; }
.btn--block { width: 100%; }
.btn--gold { background: var(--gold); color: var(--black); }
.btn--gold:hover { background: var(--gold-hi); }
.btn--ghost { border-color: currentColor; }
.btn--ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: var(--gray-800); }
.btn .arr { display: inline-block; transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid currentColor; overflow: hidden; position: relative; padding-left: 0; }
.link__arr { display: inline-block; transition: transform .35s var(--ease); }
.link__arr:first-child { position: absolute; left: 0; transform: translateX(-140%); }
.link__arr:last-child { margin-left: 4px; }
.link:hover .link__arr:first-child { transform: translateX(0); }
.link:hover .link__arr:last-child { transform: translateX(160%); }
.link:hover { padding-left: 22px; }
.link { transition: padding .35s var(--ease); }

.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tag--gold { background: var(--gold); color: var(--black); }
.tag--dark { background: var(--black); color: var(--white); }
.tag--line { border: 1px solid currentColor; }

/* Barra de avisos */
.announce { background: var(--gold); color: var(--black); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.announce__track { display: inline-flex; align-items: center; gap: 28px; padding: 9px 0; animation: marquee 28s linear infinite; }
.announce__track::after { content: ''; }
.announce .crown { background: var(--black); }
.announce:hover .announce__track { animation-play-state: paused; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter); background: rgba(10, 10, 10, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06); transition: transform .4s var(--ease);
}
.header.is-hidden { transform: translateY(-100%); }
.header__logo { display: flex; align-items: center; gap: 10px; font: 400 1.35rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.header__logo img { width: 44px; height: 44px; }
.header__logo em { font-style: normal; color: var(--gold); margin-left: 4px; }
.header__nav { display: none; gap: 32px; font-size: var(--fs-sm); font-weight: 500; }
.header__nav a { position: relative; opacity: .8; transition: opacity .2s; }
.header__nav a:hover { opacity: 1; }
.header__nav sup { font-size: .6rem; color: var(--gold); margin-right: 4px; }
.header__actions { display: flex; align-items: center; gap: 8px; }
.header__actions .btn--ghost { display: none; }
.header__burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; }
.header__burger span { display: block; width: 22px; height: 2px; background: var(--white); transition: transform .3s var(--ease); }
.header__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 1024px) {
  .header__nav { display: flex; }
  .header__actions .btn--ghost { display: inline-flex; }
  .header__burger { display: none; }
}
.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--black); padding: 120px var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 8px; }
.menu nav a { font: 400 clamp(2.4rem, 11vw, 4rem)/1.1 var(--f-display); text-transform: uppercase; }
.menu nav sup { font: 600 .75rem var(--f-body); color: var(--gold); margin-right: 10px; vertical-align: top; }
.menu:not([hidden]) nav a { animation: menuIn .5s var(--ease-out) both; }
.menu nav a:nth-child(2) { animation-delay: .06s; }
.menu nav a:nth-child(3) { animation-delay: .12s; }
.menu nav a:nth-child(4) { animation-delay: .18s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(24px); } }

/* HERO */
.hero {
  position: relative; min-height: calc(100svh - 110px); display: grid; align-items: center; overflow: hidden;
  padding: 48px var(--gutter) 96px; isolation: isolate;
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 75% 45%, rgba(217, 166, 60, .16), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(255, 255, 255, .05), transparent 70%);
}
.hero__glow::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask: radial-gradient(70% 60% at 60% 50%, #000, transparent); mask: radial-gradient(70% 60% at 60% 50%, #000, transparent);
}
.hero__text { position: relative; z-index: 2; max-width: 720px; transform: translateY(calc(var(--hp, 0) * -80px)); opacity: calc(1 - var(--hp, 0) * 1.2); }
.hero__title { font: 400 var(--fs-hero)/.88 var(--f-display); text-transform: uppercase; margin: 0 0 28px; letter-spacing: -.01em; }
.hero__title .line { display: block; overflow: hidden; padding: .12em 0 .04em; margin-top: -.12em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { font-style: normal; color: var(--gold); }
.hero__lead { font-size: var(--fs-lg); color: #CFCFCF; max-width: 34ch; margin: 0 0 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.hero__proof { list-style: none; margin: 0; padding: 24px 0 0; display: flex; gap: 32px; border-top: 1px solid var(--gray-800); flex-wrap: wrap; }
.hero__proof b { display: block; font: 400 1.9rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.hero__proof span { font-size: var(--fs-xs); color: var(--gray-600); text-transform: uppercase; letter-spacing: .1em; }

/* entrada do hero ao carregar */
.hero__in { transform: translateY(110%); opacity: 0; transition: transform 1s var(--ease) var(--d, 0s), opacity .8s var(--ease) var(--d, 0s); }
.hero__title .hero__in { transform: translateY(105%); opacity: 1; }
p.hero__in, div.hero__in, ul.hero__in { transform: translateY(16px); }
.is-loaded .hero__in { transform: none; opacity: 1; }

/* Parallax em camadas do hero (inspirado no "parallax-scrolling" da Osmo, em JS puro):
   cada camada segue o mouse (--mx/--my, de -1 a 1) e desce com a rolagem (--hp) na sua própria velocidade. */
.hero__layer {
  --d: 0; --sy: 0;
  transform: translate3d(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px + var(--hp, 0) * var(--sy) * 1%), 0);
  will-change: transform;
}
.hero__layer--bg { position: absolute; inset: -8%; z-index: -2; --d: -26; --sy: 30; }
.hero__layer--bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: blur(7px) brightness(.32) saturate(.7); transform: scale(1.12); opacity: 0; transition: opacity 1.6s var(--ease-out), transform 2.2s var(--ease-out); }
.is-loaded .hero__layer--bg img { opacity: 1; transform: scale(1.04); }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--black)); }
.hero__scene { position: relative; z-index: 1; height: min(118vw, 560px); margin-top: 8px; pointer-events: none; }
.hero__scene .hero__layer { position: absolute; inset: 0; }
.hero__layer--word { --d: 14; --sy: 55; display: grid; place-items: center; overflow: visible; }
.hero__layer--word span { font: 400 clamp(7rem, 34vw, 22rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px rgba(217, 166, 60, .22); letter-spacing: -.02em; white-space: nowrap; opacity: 0; transform: translateY(18%); transition: opacity 1.2s var(--ease-out) .3s, transform 1.4s var(--ease) .3s; }
.is-loaded .hero__layer--word span { opacity: 1; transform: none; }
.hero__layer--back { --d: 30; --sy: 38; }
.hero__layer--front { --d: 58; --sy: 10; }
.hero__card { position: absolute; display: block; pointer-events: auto; opacity: 0; translate: 0 60px; transition: opacity 1s var(--ease-out), translate 1.3s var(--ease); }
.is-loaded .hero__card { opacity: 1; translate: 0 0; }
.hero__card-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--gray-900); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.hero__card-media img { width: 100%; height: 100%; object-fit: cover; }
.hero__card-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(10, 10, 10, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .7rem; font-weight: 600; }
.hero__card-cap b { color: var(--gold); white-space: nowrap; }
.hero__card--a { left: 2%; top: 6%; width: 36%; rotate: -7deg; transition-delay: .55s; }
.hero__card--b { right: 1%; bottom: 8%; width: 34%; rotate: 6deg; transition-delay: .7s; }
.hero__card--a .hero__card-media, .hero__card--b .hero__card-media { filter: brightness(.78); }
@media (max-width: 1023px) { .hero__card--a .hero__card-cap, .hero__card--b .hero__card-cap { display: none; } }
/* peça principal: inclina em 3D na direção do mouse, com reflexo */
.hero__card--main { left: 50%; top: 50%; width: 50%; margin: -31% 0 0 -25%; transition-delay: .45s; perspective: 900px; }
.hero__card--main .hero__card-media { transform: rotateX(calc(var(--my, 0) * -9deg)) rotateY(calc(var(--mx, 0) * 12deg)); transform-style: preserve-3d; }
.hero__card--main .hero__card-cap { font-size: .8rem; padding: 10px 14px; }
.hero__glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(60% 50% at calc(50% + var(--mx, 0) * 40%) calc(30% + var(--my, 0) * 40%), rgba(255, 255, 255, .45), transparent 65%); }
@media (min-width: 1024px) {
  /* Cortina do hero (DavyGFX): ele fica preso e escurece enquanto a página sobe por cima */
  .hero { min-height: calc(100vh - 110px); position: sticky; top: 0; z-index: 0; }
  .hero ~ * { position: relative; z-index: 1; background-color: var(--black); }
  .hero ~ .section--light { background-color: var(--paper); }
  .hero::after { content: ''; position: absolute; inset: 0; background: var(--black); opacity: calc(var(--hp, 0) * .9); pointer-events: none; z-index: 3; }
  .hero__scene { position: absolute; margin: 0; right: 0; top: 0; bottom: 0; width: 54%; height: auto; }
  .hero__layer--word span { font-size: min(19vw, 24rem); }
  .hero__card--main { width: min(42%, 310px); margin: calc(min(42%, 310px) * -.68) 0 0 calc(min(42%, 310px) * -.5); }
  .hero__card--a { left: 4%; top: 10%; width: min(28%, 220px); }
  .hero__card--b { right: 5%; bottom: 18%; width: min(26%, 200px); }
}
.hero__scroll { position: absolute; left: 50%; bottom: 24px; width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; transform: translateX(-50%); z-index: 3; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--gold); animation: scrollDot 1.6s var(--ease) infinite; }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--gray-800); padding: 18px 0; white-space: nowrap; }
.marquee__track { display: inline-flex; align-items: center; gap: 40px; animation: marquee 36s linear infinite; font: 400 clamp(2rem, 5vw, 3.6rem)/1 var(--f-display); text-transform: uppercase; }
.marquee__track span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); }
.marquee .crown { font-size: .5em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Card de produto */
.card { position: relative; display: block; }
.card__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--gray-900); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.card__badge { position: absolute; top: 12px; left: 12px; z-index: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.card__buy {
  position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--white); color: var(--black); font-size: .85rem; font-weight: 700;
  transform: translateY(8px); opacity: 0; transition: transform .35s var(--ease), opacity .35s;
}
.card:hover .card__buy, .card:focus-visible .card__buy { transform: none; opacity: 1; }
@media (hover: none) { .card__buy { transform: none; opacity: 1; height: 38px; padding: 0 14px; font-size: .8rem; } }
.card__info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 2px 0; }
.card__name { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.card__cat { display: block; font-size: var(--fs-xs); color: var(--gray-600); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.section--light .card__cat { color: var(--gray-500); }
.card__price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card__price s { display: block; font-size: var(--fs-xs); color: var(--gray-600); }
.section--light .card__price s { color: var(--gray-500); }
.card__price b { font-size: 1.1rem; }
.card__inst { display: block; font-size: .7rem; color: var(--gray-600); }

/* Mais vendidos: faixa horizontal presa */
.rail { position: relative; }
.rail__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 72px 0 32px; }
.rail__head { position: relative; }
.rail__head .title { margin-bottom: 28px; }
.rail__progress { height: 2px; background: var(--gray-800); margin-bottom: 32px; border-radius: 2px; overflow: hidden; }
.rail__progress span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--rp, 0)); }
.rail__track { display: flex; gap: 20px; padding: 0 var(--gutter); will-change: transform; transform: translate3d(calc(var(--rx, 0) * -1px), 0, 0); }
.rail__track .card { flex: none; width: min(72vw, 330px); }
/* coverflow: o card do centro fica de frente, os laterais giram e recuam (--cf de -1 a 1, vindo do main.js) */
.rail__track { perspective: 1200px; }
.rail__track .card { transform-style: preserve-3d; }
.rail__track .card .card__media { transform: rotateY(calc(var(--cf, 0) * -38deg)) translateZ(calc(var(--cfa, 0) * -120px)) scale(calc(1 - var(--cfa, 0) * .08)); filter: brightness(calc(1 - var(--cfa, 0) * .45)); }
.rail__end { flex: none; width: min(72vw, 330px); aspect-ratio: 4 / 5; border-radius: var(--r-md); border: 1px dashed var(--gray-800); display: grid; place-content: center; text-align: center; gap: 16px; padding: 24px; }
.rail__end p { font: 400 2rem/1 var(--f-display); text-transform: uppercase; margin: 0; }
@media (max-height: 760px) and (min-width: 1024px) { .rail__track .card { width: 270px; } }
@media (max-width: 767px) {
  .rail__sticky { padding-top: 64px; }
  .rail__head .title { font-size: 2.5rem; margin-bottom: 18px; }
  .rail__progress { margin-bottom: 20px; }
  .rail__track .card { width: 64vw; }
}

/* Cupom */
.coupon { padding: 0 0 var(--sec); }
.coupon__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 32px; border-block: 1px solid var(--gray-800);
}
.coupon .eyebrow { margin-bottom: 6px; }
.coupon__title { margin: 0; font: 400 clamp(1.8rem, 4vw, 3rem)/1 var(--f-display); text-transform: uppercase; }
.coupon__code {
  display: inline-flex; flex-direction: column; align-items: center; padding: 14px 36px; border: 2px dashed var(--gold); border-radius: var(--r-md);
  color: var(--gold); transition: background-color .2s, color .2s;
}
.coupon__code span { font: 400 clamp(2rem, 5vw, 3rem)/1 var(--f-display); letter-spacing: .06em; }
.coupon__code small { font-size: var(--fs-xs); color: var(--gray-600); text-transform: uppercase; letter-spacing: .12em; margin-top: 6px; }
.coupon__code:hover { background: var(--gold); color: var(--black); }
.coupon__code:hover small { color: var(--black); }

/* Categorias */
.cats { padding-top: 0; }
.cats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .cats__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.cat { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--gray-900); isolation: isolate; }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .75)); z-index: 0; }
.cat__name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; font: 400 clamp(1.4rem, 3vw, 2.2rem)/1 var(--f-display); text-transform: uppercase; }
.cat__name i { font: 600 1rem var(--f-body); font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--black); transform: rotate(-45deg); transition: transform .35s var(--ease); }
.cat:hover img { transform: scale(1.08); }
.cat:hover .cat__name i { transform: rotate(0); }

/* Destaque Tech Fleece */
.feature { display: grid; background: var(--ink); overflow: hidden; }
.feature__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; clip-path: inset(calc((1 - var(--p, 1)) * 12%) calc((1 - var(--p, 1)) * 12%) round calc((1 - var(--p, 1)) * 40px)); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - var(--p, 1) * .25)); }
.feature__text { padding: 64px var(--gutter) 96px; display: flex; flex-direction: column; justify-content: center; }
.feature__lead { font-size: var(--fs-lg); color: #CFCFCF; max-width: 38ch; margin: 0 0 28px; }
.feature__price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.feature__price s { color: var(--gray-600); font-size: 1.1rem; }
.feature__price strong { font: 400 clamp(3rem, 7vw, 5rem)/1 var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.feature__ctas { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .feature__media { aspect-ratio: auto; }
  .feature__text { padding: 96px var(--gutter); }
}

/* Detalhes: imagem presa e capítulos que passam ao lado.
   Cada foto entra por uma cortina de baixo para cima com zoom lento (--sp: progresso do capítulo). */
.story { position: relative; display: grid; background: var(--black); }
.story__media { position: sticky; top: 64px; height: 56svh; margin: 0 var(--gutter); border-radius: var(--r-lg); overflow: hidden; background: var(--gray-900); z-index: 0; }
.story__img { position: absolute; inset: 0; margin: 0; clip-path: inset(calc((1 - var(--sp, 0)) * 100%) 0 0 0); }
.story__img:first-child { clip-path: none; }
.story__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.2 - var(--sp, 1) * .2)); }
.story__count { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 10, 10, .7); font-size: var(--fs-xs); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.story__count b { color: var(--gold); }
.story__chapters { position: relative; z-index: 1; }
.story__ch { min-height: 90svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) 15svh; }
.story__ch > * { position: relative; }
.story__ch::before { content: ''; position: absolute; }
.story__title { font: 400 clamp(2.6rem, 6vw, 5.5rem)/.95 var(--f-display); text-transform: uppercase; margin: 0 0 20px; }
.story__ch p { max-width: 40ch; color: #D4D4D4; font-size: var(--fs-lg); margin: 0 0 16px; }
.story__price s { color: var(--gray-600); font-size: 1rem; margin-right: 8px; }
.story__price strong { font: 400 2.4rem/1 var(--f-display); color: var(--gold); }
@media (max-width: 1023px) {
  .story__ch { background: linear-gradient(180deg, transparent, var(--black) 35%); padding-top: 40px; min-height: 100svh; }
  .story__chapters { margin-top: -20svh; }
}
@media (min-width: 1024px) {
  .story { grid-template-columns: 1fr 1fr; }
  .story__media { top: 0; height: 100vh; margin: 0; border-radius: 0; }
  .story__count { left: 32px; bottom: 32px; }
  .story__ch { min-height: 100vh; justify-content: center; padding: 0 var(--gutter) 0 80px; }
}

/* Cortina: duas metades de fotos se abrem com a rolagem e o texto acende letra a letra */
.curtain { position: relative; height: 200svh; background: var(--black); }
.curtain__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.curtain__center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 28px; padding: 0 var(--gutter); text-align: center; }
.curtain__logo { width: clamp(90px, 12vw, 160px); opacity: calc(var(--cp, 0) * 1.4 - .2); transform: scale(calc(.7 + var(--cp, 0) * .3)) rotate(calc((1 - var(--cp, 0)) * -20deg)); }
.curtain__text { margin: 0; max-width: 16ch; font: 400 clamp(2.4rem, 7vw, 6.4rem)/1 var(--f-display); text-transform: uppercase; }
.curtain__text .ch { color: rgba(255, 255, 255, .12); transition: color .25s; }
.curtain__text .ch.is-on { color: var(--white); }
.curtain__text .ch.is-gold { color: rgba(217, 166, 60, .2); }
.curtain__text .ch.is-gold.is-on { color: var(--gold); }
.curtain__half { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; grid-template-rows: 1fr 1fr; gap: 6px; will-change: transform; }
.curtain__half--l { left: 0; padding-right: 3px; transform: translate3d(calc(var(--cp, 0) * -102%), 0, 0); }
.curtain__half--r { right: 0; padding-left: 3px; transform: translate3d(calc(var(--cp, 0) * 102%), 0, 0); }
@media (min-width: 768px) { .curtain__half { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }
/* cada foto é uma peça do look, com nome e preço */
.curtain__piece { position: relative; display: block; overflow: hidden; }
.curtain__piece img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--cp, 0) * .15)); }
.curtain__chip { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(10, 10, 10, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .78rem; font-weight: 600; opacity: calc(1 - var(--cp, 0) * 3); }
.curtain__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curtain__chip b { color: var(--gold); white-space: nowrap; }
@media (max-width: 767px) { .curtain__chip { left: 8px; right: 8px; bottom: 8px; padding: 7px 10px; font-size: .68rem; } }
/* depois da frase: o total do look e os botões */
.curtain__offer { display: grid; justify-items: center; gap: 18px; opacity: var(--co, 0); transform: translateY(calc((1 - var(--co, 0)) * 24px)); pointer-events: none; }
.curtain.is-offer .curtain__offer { pointer-events: auto; }
.curtain__sum { margin: 0; font-size: var(--fs-lg); color: #CFCFCF; }
.curtain__sum s { color: var(--gray-600); margin: 0 6px; }
.curtain__sum strong { font: 400 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--f-display); color: var(--gold); vertical-align: -.1em; }
.curtain__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Monte o seu look */
.builder__head { display: grid; gap: 8px; }
.builder__lead { color: #CFCFCF; max-width: 44ch; margin: 0 0 40px; font-size: var(--fs-lg); }
@media (min-width: 1024px) { .builder__head { grid-template-columns: 1.3fr 1fr; align-items: end; } .builder__lead { margin-bottom: 52px; } }
.builder__grid { display: grid; gap: 40px; align-items: start; }
.builder__grid > * { min-width: 0; }   /* as fileiras de opções rolam de lado em vez de alargar a página */
@media (min-width: 1024px) { .builder__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } .builder__board { position: sticky; top: 96px; } }
/* o quadro imita o chão de carpete dos flatlays da loja */
.builder__board {
  position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 70% at 50% 40%, #3B3B3B, #1C1C1C 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.builder__board::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.builder__brand { position: absolute; right: 18px; bottom: 16px; z-index: 0; display: flex; align-items: center; gap: 8px; font: 400 .9rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .35); }
.builder__brand img { width: 26px; height: 26px; opacity: .6; }
.builder__slot {
  --r: 0deg; --d: 16;
  position: absolute; display: block; aspect-ratio: 4 / 5;
  transform: translate3d(calc(var(--bx, 0) * var(--d) * 1px), calc(var(--by, 0) * var(--d) * 1px), 0) rotate(var(--r));
  transition: opacity .4s, filter .4s;
}
.builder__slot-media { position: absolute; inset: 0; border-radius: var(--r-md); overflow: hidden; background: #2A2A2A; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .85); transition: transform .5s var(--ease); }
.builder__slot:hover .builder__slot-media { transform: translateY(-6px) scale(1.03); }
.builder__slot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.builder__slot-media img.is-in { animation: slotIn .7s var(--ease-out) both; }
.builder__slot-media img.is-out { animation: slotOut .5s var(--ease) both; }
@keyframes slotIn { from { opacity: 0; transform: translateY(18%) scale(1.08); filter: blur(14px); } }
@keyframes slotOut { to { opacity: 0; transform: translateY(-12%) scale(.96); filter: blur(10px); } }
.builder__chip { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: rgba(10, 10, 10, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .68rem; font-weight: 600; }
.builder__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder__chip b { color: var(--gold); white-space: nowrap; }
.builder__slot.is-empty { opacity: 0; pointer-events: none; filter: blur(8px); }
.builder__slot--camiseta { left: 6%; top: 7%; width: 42%; --r: -4deg; z-index: 2; }
.builder__slot--bone { right: 9%; top: 6%; width: 26%; --r: 8deg; z-index: 1; }
.builder__slot--bermuda { right: 7%; top: 39%; width: 38%; --r: 3deg; z-index: 3; }
.builder__slot--pe { left: 11%; bottom: 7%; width: 36%; --r: -6deg; z-index: 4; }
.builder__slot--bone .builder__chip, .builder__slot--pe .builder__chip { font-size: .62rem; }
.builder__slot--camiseta .builder__chip { top: 8px; bottom: auto; }   /* embaixo ela fica atrás do tênis */
@media (max-width: 767px) { .builder__chip { font-size: .58rem; padding: 5px 8px; left: 5px; right: 5px; bottom: 5px; } .builder__slot--bone .builder__chip, .builder__slot--pe .builder__chip { font-size: .55rem; } }

.builder__row { padding: 18px 0; border-top: 1px solid var(--gray-800); }
.builder__row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-weight: 600; }
.builder__row-head i { font-style: normal; color: var(--gold); font-size: var(--fs-xs); letter-spacing: .1em; margin-right: 6px; }
.builder__row-head b { font-weight: 500; font-size: var(--fs-sm); color: var(--gray-600); text-align: right; }
.builder__opts { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.builder__opts::-webkit-scrollbar { display: none; }
.builder__opt { flex: none; width: 68px; display: grid; gap: 6px; justify-items: center; font-size: .72rem; font-weight: 600; color: #CFCFCF; }
.builder__opt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s, transform .3s var(--ease); }
.builder__opt:hover img { transform: translateY(-3px); }
.builder__opt[aria-checked="true"] img, .builder__opt--none[aria-checked="true"] em { outline-color: var(--gold); }
.builder__opt[aria-checked="true"] span { color: var(--gold); }
.builder__opt--none em { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; border: 1px dashed var(--gray-600); font-style: normal; color: var(--gray-600); outline: 2px solid transparent; outline-offset: 2px; }
.builder__total { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0 8px; border-top: 1px solid var(--gray-800); }
.builder__total-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); }
.builder__total-price { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.builder__total-price s { color: var(--gray-600); margin-right: 8px; }
.builder__total-price strong { font: 400 clamp(2.4rem, 5vw, 3.4rem)/1 var(--f-display); color: var(--gold); }
.builder__ship { margin: 6px 0 24px; font-size: var(--fs-sm); color: #CFCFCF; }
.builder__ship b { color: var(--white); }
.builder__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.builder__or { font-size: var(--fs-sm); color: var(--gray-600); }
/* faixa de inspiração com os looks do Instagram */
.builder__insp { margin-top: calc(var(--sec) * .6); }
.builder__insp-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.builder__insp-head .eyebrow { margin: 0; }
.builder__strip { overflow: hidden; }
.builder__strip-track { display: flex; gap: 14px; width: max-content; animation: marquee 50s linear infinite; }
.builder__strip:hover .builder__strip-track { animation-play-state: paused; }
.builder__strip img { width: clamp(150px, 16vw, 230px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }

/* Arara: peças penduradas que giram de frente (arara.js) */
.arara { overflow: hidden; isolation: isolate; }
.arara::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 70% at 18% 0%, rgba(10, 10, 10, .06), transparent 62%), linear-gradient(to bottom, transparent 55%, rgba(10, 10, 10, .05)); }
.arara__head { display: grid; gap: 8px; }
.arara__lead { color: var(--gray-500); max-width: 46ch; margin: 0 0 24px; font-size: var(--fs-lg); }
@media (min-width: 1024px) { .arara__head { grid-template-columns: 1.3fr 1fr; align-items: end; } .arara__lead { margin-bottom: 52px; } }
.arara__stage { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; touch-action: pan-y; user-select: none; overflow-x: clip; color: var(--black); }
.arara__rail { position: absolute; left: 0; right: 0; top: calc(var(--rail-y) - var(--rail-r)); height: calc(var(--rail-r) * 2); pointer-events: none; }
.arara__rail i { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(to bottom, #C4C4C4 0%, #fff 18%, #A9A9A9 38%, var(--gray-500) 62%, #2E2E2E 100%); box-shadow: 0 1px 0 rgba(10, 10, 10, .18); }
.arara__rail i::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--rail-r) * 2 + 1px); height: 12px; border-radius: 999px; background: rgba(10, 10, 10, .1); filter: blur(5px); }
.arara__rail b { position: absolute; top: 50%; width: 16px; height: 28px; transform: translateY(-50%); border-radius: 3px; left: 6px; background: linear-gradient(to right, #B5B5B5, var(--gray-500) 55%, #2A2A2A); box-shadow: 0 3px 6px rgba(10, 10, 10, .18); }
.arara__rail b + b { left: auto; right: 6px; }
.arara__piece { position: absolute; left: 0; top: var(--piece-top); width: var(--w); height: var(--h); padding: 0; border-radius: 12px; cursor: pointer; color: rgba(10, 10, 10, .85); }
.arara__piece:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.arara__swing { position: absolute; inset: 0; transform-origin: 50% 1.29%; }
.arara__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arara__shadowwrap { position: absolute; inset: 0; pointer-events: none; filter: blur(var(--blur)); }
.arara__shadow { position: absolute; inset: 0; display: block; background: #000; opacity: .16; }
.arara__side, .arara__turn { position: absolute; inset: 0; }
.arara__turn { transform-style: preserve-3d; border-radius: 8px; opacity: 0; }
.arara__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.arara__face--back { transform: rotateY(180deg); }
.arara__drape { position: absolute; inset: 0; transform-origin: top; transform: skewX(var(--drape, 0deg)); }
.arara__face--back .arara__drape { transform: skewX(calc(var(--drape, 0deg) * -1)); }
.arara__shade { position: absolute; inset: 0; background: #000; opacity: var(--shade, .2); pointer-events: none; }
.arara__print { pointer-events: none; }
.arara__tag { position: absolute; left: 50%; top: var(--tag-top); transform-origin: top; transform: rotate(-12deg); pointer-events: none; }
.arara__tag i { display: block; width: 1px; height: 14px; margin-left: 3px; background: rgba(10, 10, 10, .35); }
.arara__tag span { position: relative; display: block; transform: translateX(-50%) translateX(3px); white-space: nowrap; padding: 8px 6px 4px; border-radius: 3px; border: 1px solid rgba(10, 10, 10, .1); background: var(--gold); color: var(--black); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(10, 10, 10, .18); }
.arara__tag span::before { content: ''; position: absolute; left: 50%; top: 3px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgba(10, 10, 10, .35); }
.arara__dots { display: none; justify-content: center; gap: 6px; margin-top: 4px; }
[data-mode="carousel"] .arara__dots { display: flex; }
.arara__dots button { width: 6px; height: 6px; border-radius: 999px; background: rgba(10, 10, 10, .25); transition: width .3s, background-color .3s; }
.arara__dots button[aria-current="true"] { width: 24px; background: var(--black); }
.arara__foot { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 20px; text-align: center; }
.arara__caption { min-height: 4.5rem; }
.arara__name { margin: 0; font: 400 clamp(1.4rem, 3vw, 2rem)/1.1 var(--f-display); text-transform: uppercase; }
.arara__desc { margin: 6px auto 0; max-width: 46ch; color: var(--gray-500); font-size: var(--fs-sm); }
.arara__caption.is-swap > * { animation: araraIn .35s var(--ease-out); }
@keyframes araraIn { from { opacity: 0; transform: translateY(6px); } }

/* Peça aberta em tela cheia */
.arara-detail { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px; color: var(--black); }
.arara-detail__backdrop { position: absolute; inset: 0; background: rgba(244, 241, 234, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transition: opacity .3s; }
.arara-detail__close { position: absolute; right: 20px; top: 20px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); opacity: 0; transition: opacity .3s, color .2s; }
.arara-detail__close:hover { color: var(--black); }
.is-shown .arara-detail__backdrop, .is-shown .arara-detail__close { opacity: 1; }
.arara-detail__grid { position: relative; display: grid; gap: 32px; width: 100%; max-width: 1024px; align-items: center; padding-top: 40px; }
.arara-detail__figure { position: relative; margin: 0 auto; aspect-ratio: 200 / 310; height: min(56vh, 540px); transform-origin: top; color: rgba(10, 10, 10, .85); }
.arara-detail__wire { position: absolute; left: 50%; top: calc(-40vh + 1.29%); width: 3px; height: 40vh; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(to right, #C4C4C4, var(--gray-500), #2E2E2E); }
.arara-detail__spinwrap { position: absolute; inset: 0; perspective: 1400px; cursor: grab; touch-action: pan-y; }
.arara-detail__spinwrap:active { cursor: grabbing; }
.arara-detail__spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.arara-detail__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.arara-detail__face--back { transform: rotateY(180deg); }
.arara-detail__info { display: flex; flex-direction: column; gap: 12px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .5s .15s, transform .5s .15s var(--ease-out); }
.is-shown .arara-detail__info { opacity: 1; transform: none; }
.arara-detail__count { margin: 0; font-size: var(--fs-xs); letter-spacing: .2em; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.arara-detail__info h3 { margin: 0; font: 400 clamp(2rem, 4vw, 3rem)/1 var(--f-display); text-transform: uppercase; }
.arara-detail__desc { margin: 0; color: var(--gray-500); }
.arara-detail__price { margin: 0; }
.arara-detail__price s { color: var(--gray-500); margin-right: 6px; }
.arara-detail__price strong { font: 400 2.2rem/1 var(--f-display); }
.arara-detail__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.arara-detail__chips li { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--gray-200); font-size: var(--fs-xs); color: var(--gray-500); }
.arara-detail__sides { display: inline-flex; gap: 24px; justify-content: center; }
.arara-detail__sides button { position: relative; padding-bottom: 6px; font-size: var(--fs-sm); color: var(--gray-500); }
.arara-detail__sides button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.arara-detail__sides button[aria-pressed="true"] { color: var(--black); }
.arara-detail__sides button[aria-pressed="true"]::after { transform: scaleX(1); }
.arara-detail__photo { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 4px 0; }
.arara-detail__photo img { width: 72px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-sm); }
.arara-detail__photo figcaption { font-size: var(--fs-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: .1em; }
.arara-detail__ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.arara-detail .btn--ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); }
@media (min-width: 768px) {
  .arara-detail__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 48px; }
  .arara-detail__info { text-align: left; }
  .arara-detail__chips, .arara-detail__sides, .arara-detail__photo, .arara-detail__ctas { justify-content: flex-start; }
}

/* Grid de produtos */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 48px 20px; } }
.section--light .card__media { background: var(--gray-200); }
.launch__more { display: flex; justify-content: center; margin-top: 64px; }
@media (max-width: 767px) { .card__name { font-size: .85rem; } .card__info { flex-direction: column; gap: 6px; } .card__price { text-align: left; } .card__price s { display: inline; margin-right: 6px; } }

/* A loja */
.store__grid { display: grid; gap: 56px; }
.store__text p { color: #CFCFCF; font-size: var(--fs-lg); max-width: 42ch; }
.store__facts { list-style: none; padding: 0; margin: 40px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--gray-800); padding-top: 24px; }
.store__facts b { display: block; font: 400 clamp(2rem, 4vw, 3rem)/1 var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.store__facts span { font-size: var(--fs-xs); color: var(--gray-600); text-transform: uppercase; letter-spacing: .1em; }
.store__address { font-size: var(--fs-sm) !important; color: var(--gold) !important; }
.store__photos { position: relative; min-height: 520px; }
.store__photo { position: absolute; margin: 0; border-radius: var(--r-lg); overflow: hidden; transform: translateY(calc((1 - var(--p, 1)) * 60px)); }
.store__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--p, 1) * .18)); }
.store__photo--a { left: 0; top: 0; width: 66%; aspect-ratio: 4 / 5; }
.store__photo--b { right: 0; bottom: 0; width: 50%; aspect-ratio: 4 / 5; border: 6px solid var(--black); }
@media (min-width: 1024px) { .store__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; } .store__photos { min-height: 680px; } }

/* Como comprar */
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps__list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 24px; padding: 32px 0; border-top: 1px solid var(--gray-200); }
.steps__list li:last-child { border-bottom: 1px solid var(--gray-200); }
.steps__n { grid-row: span 2; font: 400 clamp(3rem, 6vw, 5rem)/.9 var(--f-display); color: var(--gold); }
.steps__list h3 { margin: 0; font-size: var(--fs-h3); }
.steps__list p { margin: 0; color: var(--gray-500); max-width: 52ch; }
@media (min-width: 1024px) {
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .steps__list li, .steps__list li:last-child { grid-template-columns: 1fr; border-bottom: 0; }
  .steps__n { grid-row: auto; margin-bottom: 16px; }
}

/* CTA final */
.final { position: relative; overflow: hidden; padding: calc(var(--sec) * 1.1) 0; text-align: center; isolation: isolate; }
.final__bg { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; opacity: .12; }
.final__bg img { width: min(120vw, 900px); transform: scale(calc(.8 + var(--p, 1) * .3)) rotate(calc((1 - var(--p, 1)) * -12deg)); }
.final__title { font: 400 clamp(3.6rem, 13vw, 11rem)/.9 var(--f-display); text-transform: uppercase; margin: 0 0 24px; }
.final p { color: #CFCFCF; font-size: var(--fs-lg); margin: 0 0 36px; }
.final__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.footer { border-top: 1px solid var(--gray-800); padding-top: 72px; overflow: hidden; }
.footer__grid { display: grid; gap: 40px; }
.footer__brand img { width: 96px; height: 96px; margin-bottom: 16px; }
.footer__brand p { color: var(--gray-600); max-width: 32ch; margin: 0; }
.footer__h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.footer__grid a { display: block; padding: 6px 0; color: #D6D6D6; transition: color .2s; }
.footer__grid a:hover { color: var(--gold); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--gray-800); font-size: var(--fs-xs); color: var(--gray-600); }
.footer__mega { margin: 0; padding: 0 var(--gutter); font: 400 var(--fs-mega)/.8 var(--f-display); text-align: center; overflow: hidden; color: var(--gray-900); letter-spacing: -.01em; }
.footer__mega span { display: inline-block; transform: translateY(calc((1 - var(--p, 1)) * 60%)); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

/* WhatsApp flutuante */
.wa-float {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--wa); color: var(--white); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
  transition: transform .25s var(--ease);
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.08); }
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { to { transform: scale(1.6); opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: 999px; background: var(--white); color: var(--black); font-weight: 600; font-size: var(--fs-sm); transition: transform .35s var(--ease), opacity .35s; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* Entradas ligadas ao scroll (reversíveis): o JS grava --p (0 → 1) em cada elemento */
[data-reveal] { opacity: var(--p, 1); transform: translate3d(0, calc((1 - var(--p, 1)) * 32px), 0); }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .06em; margin: -.14em 0 -.06em; }
[data-split] .w > span {
  display: inline-block;
  --wp: clamp(0, calc(var(--p, 1) * (var(--n) + 1) - var(--i)), 1);
  transform: translate3d(0, calc((1 - var(--wp)) * 115%), 0);
}
/* Peças sobem de baixo para cima e aparecem em degradê, com desfoque que some (como na Avesso, da Vitrinaria) */
.js-card {
  --m: calc(var(--p, 1) * 160% - 60%);
  -webkit-mask-image: linear-gradient(to top, #000 var(--m), transparent calc(var(--m) + 60%));
          mask-image: linear-gradient(to top, #000 var(--m), transparent calc(var(--m) + 60%));
  filter: blur(calc((1 - var(--p, 1)) * 14px));
  transform: translate3d(0, calc((1 - var(--p, 1)) * 80px), 0) scale(calc(1.06 - var(--p, 1) * .06));
}

/* Cursor redondo com rótulo (estilo Cartier, como na Quilate) */
.cursor { position: fixed; z-index: 70; top: 0; left: 0; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.cursor__ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; transition: transform .6s cubic-bezier(0, 0, 0, 1); }
.cursor__dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .4s; }
.cursor__label { position: absolute; left: 30px; top: -8px; white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease); }
.cursor.has-label .cursor__ring { transform: scale(1.8); }
.cursor.has-label .cursor__dot { transform: scale(1); }
.cursor.has-label .cursor__label { opacity: 1; transform: none; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ================= Versão "loja premium": 3D, sacola, visualização rápida, drop e confiança ================= */

/* Entrada 3D (hero3d.js) — sem WebGL continua a cena em camadas */
.hero__3d { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero__3d canvas { width: 100% !important; height: 100% !important; display: block; }
.has-3d .hero__3d { opacity: 1; }
.has-3d .hero__scene { display: none; }
.has-3d .hero__text { pointer-events: none; }
.has-3d .hero__text a, .has-3d .hero__text button { pointer-events: auto; }
.has-3d::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 45%, transparent 70%); }
@media (max-width: 1023px) {
  .has-3d { min-height: 100svh; align-items: end; }
  .has-3d::before { background: linear-gradient(to bottom, transparent 30%, rgba(10,10,10,.8) 52%, var(--black) 75%); }
  .has-3d { padding-bottom: 40px; }
  .has-3d .hero__title { font-size: clamp(3rem, 15vw, 4.4rem); margin-bottom: 16px; }
  .has-3d .hero__lead { margin-bottom: 20px; }
  .has-3d .hero__ctas { margin-bottom: 0; }
  .has-3d .hero__proof { display: none; }
}

/* Sacola no topo */
.bag { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: var(--white); transition: border-color .2s; }
.bag:hover { border-color: var(--gold); }
.bag svg { width: 22px; height: 22px; }
.bag b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--gold); color: var(--black); font-size: .7rem; font-weight: 700; transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.has-cart .bag b { transform: scale(1); }
@media (max-width: 767px) { .header__actions .btn--gold { display: none; } }

/* Gaveta da sacola */
.drawer, .qv { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.drawer.is-open, .qv.is-open { pointer-events: auto; }
.drawer__backdrop, .qv__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.is-open > .drawer__backdrop, .is-open > .qv__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--ink); border-left: 1px solid var(--gray-800); transform: translateX(105%); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--gray-800); }
.drawer__head h2 { margin: 0; font: 400 1.6rem/1 var(--f-display); text-transform: uppercase; }
.drawer__head h2 span { color: var(--gold); }
.drawer__x, .qv__x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gray-600); font-size: 1rem; transition: color .2s, background-color .2s; }
.drawer__x:hover, .qv__x:hover { color: var(--white); background: var(--gray-800); }
.drawer__ship { padding: 14px 24px; font-size: var(--fs-sm); color: #CFCFCF; }
.drawer__ship p { margin: 0 0 8px; }
.drawer__ship b { color: var(--gold); }
.drawer__bar { height: 4px; border-radius: 4px; background: var(--gray-800); overflow: hidden; }
.drawer__bar span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease-out); }
.drawer__list { list-style: none; margin: 0; padding: 8px 24px; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer__empty { padding: 40px 0; text-align: center; color: var(--gray-600); }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gray-800); animation: lineIn .45s var(--ease-out); }
@keyframes lineIn { from { opacity: 0; transform: translateX(20px); } }
.line img { width: 72px; height: 90px; object-fit: cover; border-radius: 10px; }
.line__name { margin: 0; font-weight: 600; font-size: .9rem; line-height: 1.3; }
.line__meta { margin: 4px 0 8px; font-size: var(--fs-xs); color: var(--gray-600); }
.line__qty { display: inline-flex; align-items: center; border: 1px solid var(--gray-800); border-radius: 999px; }
.line__qty button { width: 32px; height: 32px; color: var(--white); }
.line__qty output { min-width: 20px; text-align: center; font-size: .85rem; }
.line__price { display: grid; justify-items: end; align-content: space-between; }
.line__price button { font-size: var(--fs-xs); color: var(--gray-600); text-decoration: underline; }
.drawer__upsell { padding: 0 24px 12px; }
.drawer__upsell-t { margin: 8px 0 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.drawer__ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.idea { display: grid; gap: 4px; text-align: left; font-size: .7rem; color: #CFCFCF; }
.idea img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; transition: transform .3s var(--ease); }
.idea:hover img { transform: translateY(-3px); }
.idea span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea b { color: var(--gold); }
.drawer__foot { padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gray-800); display: grid; gap: 10px; }
.drawer__sum { display: flex; justify-content: space-between; align-items: baseline; }
.drawer__sum span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); }
.drawer__sum p { margin: 0; }
.drawer__sum s { color: var(--gray-600); margin-right: 6px; font-size: .9rem; }
.drawer__sum strong { font: 400 2rem/1 var(--f-display); color: var(--gold); }
.drawer__coupon { margin: 0; font-size: var(--fs-xs); color: var(--gray-600); }
.drawer__coupon b { color: var(--white); }
[data-checkout][aria-disabled] { opacity: .4; pointer-events: none; }
.drawer__keep { font-size: var(--fs-sm); color: #CFCFCF; padding: 6px; }

/* Visualização rápida: painel central no PC, folha que sobe no celular */
.qv__panel { position: absolute; left: 50%; top: 50%; width: min(920px, calc(100% - 48px)); max-height: calc(100svh - 48px); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); border: 1px solid var(--gray-800); border-radius: var(--r-lg); transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s; }
.qv.is-open .qv__panel { transform: translate(-50%, -50%); opacity: 1; }
.qv__x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.qv__media { position: relative; background: var(--gray-900); }
.qv__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.qv__media .tag { position: absolute; top: 16px; left: 16px; }
.qv__info { padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 12px; }
.qv__cat { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.qv__info h2 { margin: 0; font: 400 clamp(2rem, 3.4vw, 2.8rem)/1 var(--f-display); text-transform: uppercase; }
.qv__price { margin: 0; }
.qv__price s { color: var(--gray-600); margin-right: 6px; }
.qv__price strong { font: 400 2.2rem/1 var(--f-display); color: var(--gold); }
.qv__label { margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 600; }
.qv__label span { color: var(--gold); font-weight: 500; }
.qv__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.qv__sizes button { min-width: 52px; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--gray-800); font-weight: 600; transition: border-color .2s, background-color .2s, color .2s; }
.qv__sizes button:hover { border-color: var(--gray-600); }
.qv__sizes button[aria-checked="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
.qv__add { margin-top: 8px; }
.qv__store { font-size: var(--fs-sm); color: #CFCFCF; text-align: center; }
.qv__perks { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--gray-800); display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--gray-600); }
.qv__perks li::before { content: '✓  '; color: var(--gold); }
@media (max-width: 767px) {
  .qv__panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92svh; grid-template-columns: 1fr; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%); opacity: 1; }
  .qv.is-open .qv__panel { transform: none; }
  .qv__media img { aspect-ratio: 1; }
  .qv__info { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
}

/* Barra de compra fixa no celular */
.buybar { position: fixed; left: 12px; right: 84px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(18,18,18,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--gray-800); transform: translateY(150%); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.buybar__bag { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #CFCFCF; }
.buybar__bag svg { width: 20px; height: 20px; color: var(--gold); }
.buybar__bag b { color: var(--white); }
@media (max-width: 767px) {
  .buybar { display: flex; }
  .buybar-on .buybar { transform: none; }
}

/* Drop da semana */
.drop__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.drop__head .title { margin: 0; }
.drop__timer { display: flex; gap: 8px; }
.drop__timer div { min-width: 70px; padding: 12px 8px; text-align: center; border: 1px solid var(--gray-800); border-radius: var(--r-md); background: var(--ink); }
.drop__timer b { display: block; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; }
.drop__timer span { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); }
.drop__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
@media (min-width: 768px) { .drop__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.drop + .coupon { padding-top: 0; }

/* Confiança e dúvidas */
.trust__perks { list-style: none; margin: 0 0 var(--sec); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gray-800); border: 1px solid var(--gray-800); border-radius: var(--r-md); overflow: hidden; }
.trust__perks li { display: grid; gap: 6px; padding: 24px; background: var(--black); }
.trust__perks b { font: 400 1.3rem/1 var(--f-display); text-transform: uppercase; color: var(--gold); }
.trust__perks span { font-size: var(--fs-sm); color: #CFCFCF; }
@media (min-width: 1024px) { .trust__perks { grid-template-columns: repeat(4, 1fr); } }
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--gray-800); }
.faq details:last-child { border-bottom: 1px solid var(--gray-800); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold); font-size: 1.4rem; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: #CFCFCF; max-width: 62ch; }

/* a sacola e o WhatsApp não brigam com a barra no celular */
@media (max-width: 767px) { .buybar-on .wa-float { bottom: calc(12px + env(safe-area-inset-bottom)); } }

.drawer__list { min-height: 150px; }
@media (max-height: 860px) { .idea img { aspect-ratio: 1; } .drawer__foot { gap: 6px; padding-top: 12px; } }