/* =========================================================
   JOÃO MODA — preto & branco
   ========================================================= */
:root {
  --preto: #5b3409;
  --grafite: #43260a;
  --branco: #e9dfcb;
  --gelo: #ddd0b7;
  --cinza: #85664a;
  --cinza-claro: #c2ad90;
  --linha: #d2c3a6;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --ouro: #a7793f;
  --wordmark: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --off: #e8e5d6;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --larg: 1440px;
  --gutter: clamp(16px, 3vw, 40px);
  --atraso: 2.1s;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--preto); background: var(--branco); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.gaveta-aberta, body.menu-aberto { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--preto); color: var(--branco); }
.container { max-width: var(--larg); margin: 0 auto; padding: 0 var(--gutter); }
.serif { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; }
.rotulo { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.link { text-decoration: underline; text-underline-offset: 3px; font-size: 13px; color: var(--cinza); transition: color .3s; }
.link:hover { color: var(--preto); }

/* ---------- Transição de página (cortina) ---------- */
body::after { content: ""; position: fixed; inset: 0; background: var(--preto); z-index: 1000; pointer-events: none; transform: scaleY(0); transform-origin: top; animation: cortinaSai .8s var(--ease-io) both; }
body.saindo::after { animation: cortinaEntra .4s var(--ease-io) both; transform-origin: bottom; }
@keyframes cortinaSai { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes cortinaEntra { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Loader (primeira visita) ---------- */
.loader { position: fixed; inset: 0; z-index: 1001; background: var(--preto); color: var(--branco); display: grid; place-items: center; animation: loaderSobe 1s var(--ease-io) 1.15s forwards; pointer-events: none; }
.loader-marca { display: flex; align-items: baseline; overflow: hidden; font-size: clamp(40px, 8vw, 110px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.loader-marca span { display: inline-block; transform: translateY(110%); animation: letraSobe .9s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms); }
.loader-marca .serif { margin: 0 .1em; }
.loader-barra { position: absolute; bottom: 48px; left: 50%; width: 160px; height: 1px; background: rgba(255,255,255,.15); transform: translateX(-50%); overflow: hidden; }
.loader-barra i { position: absolute; inset: 0; background: var(--branco); transform: scaleX(0); transform-origin: left; animation: barra 1s var(--ease-io) .1s forwards; }
@keyframes letraSobe { to { transform: none; } }
@keyframes barra { to { transform: scaleX(1); } }
@keyframes loaderSobe { to { transform: translateY(-100%); } }

/* ---------- Revelar ao rolar ---------- */
.revelar { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.revelar.visivel { opacity: 1; transform: none; }
.revelar-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-io); transition-delay: var(--d, 0ms); }
.revelar-img img { transform: scale(1.25); transition: transform 2s var(--ease); transition-delay: var(--d, 0ms); }
.revelar-img.visivel { clip-path: inset(0 0 0 0); }
.revelar-img.visivel img { transform: scale(1); }
.linhas > span { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.linhas > span > span { display: block; transform: translateY(110%); transition: transform 1.3s var(--ease); transition-delay: var(--d, 0ms); }
.linhas.visivel > span > span { transform: none; }
.linhas > span:nth-child(2) > span { transition-delay: calc(var(--d, 0ms) + 90ms); }
.linhas > span:nth-child(3) > span { transition-delay: calc(var(--d, 0ms) + 180ms); }

/* ---------- Cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s; }
.cursor.ativo { opacity: 1; }
.cursor span { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 0; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #000; transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), font-size .3s, background .3s; }
.cursor.link span { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: transparent; border: 1px solid #fff; }
.cursor.grande span { width: 88px; height: 88px; margin: -44px 0 0 -44px; font-size: 11px; background: #fff; border: 0; }
@media (hover: hover) and (pointer: fine) { body.pronto, body.pronto a, body.pronto button, body.pronto label { cursor: none; } }

/* ---------- Letreiro ---------- */
.letreiro { background: var(--preto); color: var(--branco); overflow: hidden; white-space: nowrap; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; height: 37px; display: flex; align-items: center; position: relative; z-index: 51; }
.letreiro-trilho { display: inline-flex; animation: letreiro 32s linear infinite; }
.letreiro-trilho span { padding: 0 28px; }
.letreiro-trilho span::after { content: "✦"; margin-left: 56px; opacity: .5; }
@keyframes letreiro { to { transform: translateX(-50%); } }
.letreiro.grande { height: auto; background: var(--branco); color: var(--preto); border-bottom: 1px solid var(--linha); font-size: clamp(40px, 7vw, 104px); font-weight: 600; letter-spacing: -.045em; text-transform: none; padding: 22px 0; z-index: 1; }
.letreiro.grande .letreiro-trilho { animation-duration: 45s; }
.letreiro.grande span { padding: 0 .3em; }
.letreiro.grande span::after { margin-left: .6em; font-size: .35em; vertical-align: middle; opacity: 1; }
.letreiro.grande span:nth-child(even) { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--branco); color: var(--preto); border-bottom: 1px solid var(--linha); transition: transform .6s var(--ease), background .4s, color .4s, border-color .4s, top .4s; }
.tem-hero .topo { position: fixed; left: 0; right: 0; top: 37px; background: transparent; color: var(--branco); border-color: rgba(255,255,255,.18); }
.tem-hero .topo.solido { top: 0; background: var(--branco); color: var(--preto); border-color: var(--linha); }
.topo.escondido { transform: translateY(-100%); }
.topo-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.logo { font-size: 23px; font-weight: 600; letter-spacing: -.045em; justify-self: center; display: flex; align-items: baseline; gap: .14em; white-space: nowrap; }
.logo .serif { font-size: 1.12em; }
.nav { display: flex; gap: 30px; }
.nav a, .acoes a, .acoes button { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; position: relative; padding: 6px 0; display: inline-flex; align-items: center; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.acoes { justify-self: end; display: flex; align-items: center; gap: 26px; }
.contador { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--preto); color: var(--branco); font-size: 10px; letter-spacing: 0; transition: background .4s, color .4s; }
.tem-hero .topo:not(.solido) .contador { background: var(--branco); color: var(--preto); }
.contador.vazio { display: none; }
.contador.pulso { animation: pulso .6s var(--ease); }
@keyframes pulso { 30% { transform: scale(1.5); } }
.menu-toggle { display: none; width: 28px; height: 20px; position: relative; }
.menu-toggle i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-toggle i:first-child { top: 5px; } .menu-toggle i:last-child { top: 14px; }
.menu-aberto .menu-toggle i:first-child { top: 9px; transform: rotate(45deg); }
.menu-aberto .menu-toggle i:last-child { top: 9px; transform: rotate(-45deg); }

/* ---------- Botões ---------- */
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 34px; border: 1px solid currentColor; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; overflow: hidden; isolation: isolate; transition: color .6s var(--ease), transform .4s var(--ease), border-color .6s; }
.botao::before { content: ""; position: absolute; inset: 0; background: var(--preto); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.botao:hover { color: var(--branco); }
.botao:hover::before { transform: scaleY(1); }
.botao-cheio { background: var(--preto); color: var(--branco); border-color: var(--preto); width: 100%; }
.botao-cheio::before { background: var(--grafite); }
.botao-cheio span::after { content: "→"; display: inline-block; margin-left: 10px; transition: transform .6s var(--ease); }
.botao-cheio:hover span::after { transform: translateX(6px); }
.botao-cheio:disabled { opacity: .35; pointer-events: none; }
.botao-branco { color: var(--branco); border-color: var(--branco); }
.botao-branco::before { background: var(--branco); }
.botao-branco:hover { color: var(--preto); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; color: var(--branco); overflow: hidden; background: var(--preto); }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: sepia(.2) saturate(.85) brightness(.88); transform: scale(1.18); animation: kenburns 3.2s var(--ease) var(--atraso) forwards; }
@keyframes kenburns { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,19,12,.5) 0%, rgba(30,19,12,0) 28%, rgba(30,19,12,.15) 55%, rgba(30,19,12,.78) 100%); }
.hero-conteudo { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(32px, 7vh, 80px); }
.hero-conteudo .container { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; }
.hero h1 { font-size: clamp(60px, 12.5vw, 210px); font-weight: 600; line-height: .86; letter-spacing: -.06em; }
.hero h1 .serif { font-size: 1.04em; letter-spacing: -.025em; }
.hero .linhas > span > span { transition-delay: var(--atraso); }
.hero .linhas > span:nth-child(2) > span { transition-delay: calc(var(--atraso) + 110ms); }
.hero-lado { max-width: 340px; display: grid; gap: 24px; justify-items: start; opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--atraso) + 400ms); }
.pronto .hero-lado { opacity: 1; transform: none; }
.hero-lado p { font-size: 15px; color: rgba(255,255,255,.82); }
.hero-topo { position: absolute; z-index: 2; top: calc(37px + 72px + 28px); left: 0; right: 0; opacity: 0; transition: opacity 1.2s; transition-delay: calc(var(--atraso) + 600ms); }
.hero-topo .container { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.pronto .hero-topo { opacity: .85; }
.rolar { display: inline-flex; align-items: center; gap: 12px; }
.rolar i { width: 1px; height: 40px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.rolar i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #fff; animation: rolar 2s var(--ease-io) infinite; }
@keyframes rolar { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- Seções ---------- */
.secao { padding: clamp(72px, 10vw, 140px) 0; }
.secao-topo { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; }
.titulo { font-size: clamp(42px, 6vw, 88px); font-weight: 600; letter-spacing: -.055em; line-height: .92; }
.titulo .serif { letter-spacing: -.015em; }
.indice { display: block; color: var(--cinza); margin-bottom: 18px; }

/* categorias */
.categorias { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; }
.cat { position: relative; overflow: hidden; aspect-ratio: 3/4; color: var(--branco); background: var(--preto); display: block; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) saturate(.9); transition: transform 1.6s var(--ease); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(30,19,12,.7)); }
.cat:hover img { transform: scale(1.07); }
.cat-txt { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; justify-content: space-between; align-items: end; }
.cat-txt h3 { font-size: clamp(30px, 3.4vw, 52px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.cat-txt small { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.seta { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: background .5s var(--ease), color .5s, transform .6s var(--ease); }
.cat:hover .seta { background: #fff; color: #000; transform: rotate(-45deg); }

/* ---------- Cards ---------- */
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 12px; transition: opacity .25s, transform .25s; }
.grade.trocando { opacity: 0; transform: translateY(12px); }
.card-media { position: relative; overflow: hidden; background: var(--gelo); aspect-ratio: 3/4; }
.card-img { display: block; position: absolute; inset: 0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) saturate(.9); transition: transform 1.4s var(--ease), filter .9s var(--ease); }
.card:hover .card-img img { transform: scale(1.06); filter: none; }
.selos { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; pointer-events: none; }
.selo { background: var(--branco); color: var(--preto); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; }
.selo-off { background: var(--preto); color: var(--branco); }
.rapido { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(240,232,216,.97); padding: 12px 14px; display: grid; gap: 8px; transform: translateY(calc(100% + 14px)); transition: transform .7s var(--ease); }
.rapido > span { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); }
.rapido div { display: flex; flex-wrap: wrap; gap: 4px; }
.rapido button { min-width: 36px; height: 32px; padding: 0 8px; border: 1px solid var(--linha); font-size: 12px; transition: background .25s, color .25s, border-color .25s; }
.rapido button:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); }
@media (hover: hover) { .card:hover .rapido { transform: none; } }
@media (hover: none) { .rapido { display: none; } }
.card-info { padding-top: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.card h3 { font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; line-height: 1.35; }
.card h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.card:hover h3 a { background-size: 100% 1px; }
.precos { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; font-size: 13px; }
.precos s { color: var(--cinza-claro); }
.precos em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em; background: var(--preto); color: var(--branco); padding: 3px 7px; align-self: center; }
.precos.grande { font-size: 22px; gap: 14px; }

/* ---------- Manifesto ---------- */
.manifesto { display: grid; grid-template-columns: 1fr 1fr; min-height: 92vh; background: var(--preto); color: var(--branco); }
.manifesto-img { position: relative; overflow: hidden; }
.manifesto-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.15); will-change: transform; transform: scale(1.15); }
.manifesto-txt { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(40px, 6vw, 96px); gap: 48px; }
.manifesto-txt h2 { font-size: clamp(44px, 6vw, 96px); font-weight: 600; letter-spacing: -.055em; line-height: .92; }
.manifesto-txt p { color: rgba(255,255,255,.7); max-width: 420px; font-size: 16px; margin-top: 28px; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 28px; }
.numeros strong { display: block; font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -.04em; }
.numeros span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---------- Lookbook ---------- */
.lookbook { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--gutter) 8px; scrollbar-width: none; cursor: grab; user-select: none; }
.lookbook::-webkit-scrollbar { display: none; }
.lookbook.arrastando { cursor: grabbing; scroll-snap-type: none; }
.look { flex: 0 0 clamp(240px, 26vw, 400px); scroll-snap-align: start; }
.look img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: sepia(.15) saturate(.9); pointer-events: none; transition: transform 1.2s var(--ease); }
.look:hover img { transform: scale(.98); }
.look figcaption { margin-top: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cinza); }

/* ---------- Benefícios ---------- */
.beneficios { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linha); }
.beneficio { padding: 36px 24px 36px 0; display: grid; gap: 6px; }
.beneficio + .beneficio { border-left: 1px solid var(--linha); padding-left: 24px; }
.beneficio strong { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.beneficio span { color: var(--cinza); font-size: 14px; }

/* ---------- Newsletter ---------- */
.news { background: var(--preto); color: var(--branco); }
.news-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.news-form { display: flex; border-bottom: 1px solid rgba(255,255,255,.4); transition: border-color .4s; }
.news-form:focus-within { border-color: #fff; }
.news-form input { flex: 1; background: none; border: 0; padding: 18px 0; font-size: 18px; color: #fff; outline: none; min-width: 0; }
.news-form input::placeholder { color: rgba(255,255,255,.45); }
.news-form button { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 0 0 0 20px; white-space: nowrap; }
.news small { display: block; color: rgba(255,255,255,.5); margin-top: 14px; font-size: 12px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--preto); color: rgba(255,255,255,.65); padding: 80px 0 28px; font-size: 14px; border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.rodape-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.rodape h4 { color: var(--branco); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; }
.rodape ul { list-style: none; display: grid; gap: 10px; }
.rodape a { transition: color .3s; }
.rodape a:hover { color: var(--branco); }
.rodape-marca { font-size: clamp(60px, 16.5vw, 270px); font-weight: 600; letter-spacing: -.07em; line-height: .82; color: var(--branco); margin: 72px 0 28px; white-space: nowrap; }
.rodape-marca .serif { letter-spacing: -.035em; }
.rodape-fim { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; }

/* ---------- Catálogo ---------- */
.pagina-topo { padding-top: clamp(48px, 7vw, 96px); padding-bottom: 28px; }
.migalha { display: flex; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin-bottom: 20px; }
.migalha a:hover { color: var(--preto); }
.pagina-topo h1 { font-size: clamp(48px, 9vw, 140px); font-weight: 600; letter-spacing: -.06em; line-height: .9; }
.pagina-topo h1 sup { font-size: 14px; font-weight: 500; letter-spacing: 0; vertical-align: top; margin-left: 10px; color: var(--cinza); }
.barra-filtros { position: sticky; top: 73px; z-index: 20; background: var(--branco); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin-bottom: 32px; transition: top .6s var(--ease); }
.barra-filtros .container { display: flex; align-items: center; gap: 24px; min-height: 60px; }
body:has(.topo.escondido) .barra-filtros { top: 0; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 10px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 17px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: all .35s var(--ease); }
.chip:hover { border-color: var(--preto); }
.chip.ativo { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.controles { display: flex; gap: 10px; align-items: center; flex: none; }
.controles select, .controles input { height: 36px; border: 1px solid var(--linha); background: var(--branco); padding: 0 12px; font-size: 13px; outline: none; transition: border-color .3s; border-radius: 0; }
.controles select:focus, .controles input:focus { border-color: var(--preto); }
.controles input { width: 180px; }
.sem-resultado { grid-column: 1/-1; text-align: center; padding: 80px 0; display: grid; gap: 20px; justify-items: center; color: var(--cinza); }

/* ---------- Produto ---------- */
.pdp { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 80px); padding-top: 24px; align-items: start; }
.pdp-galeria { position: sticky; top: 96px; background: var(--gelo); }
.zoom { overflow: hidden; aspect-ratio: 4/5; }
.zoom img { width: 100%; height: 100%; object-fit: cover; }
.pdp-galeria.visivel .zoom img { transition: transform .8s var(--ease); }
.zoom.ampliado img { transform: scale(1.8) !important; }
.pdp-info { display: grid; gap: 18px; padding-top: 8px; }
.pdp-info h1 { font-size: clamp(36px, 4.5vw, 64px); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.parcela { color: var(--cinza); font-size: 13px; }
.desc { color: #444; font-size: 15px; max-width: 480px; }
.tamanhos { border: 0; }
.tamanhos legend { width: 100%; display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.tamanhos legend .link { font-size: 11px; letter-spacing: .04em; text-transform: none; font-weight: 400; }
.tamanhos > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tamanhos label { position: relative; }
.tamanhos input { position: absolute; opacity: 0; pointer-events: none; }
.tamanhos span { display: grid; place-items: center; min-width: 58px; height: 48px; padding: 0 14px; border: 1px solid var(--linha); font-size: 13px; cursor: pointer; transition: all .3s var(--ease); }
.tamanhos label:hover span { border-color: var(--preto); }
.tamanhos input:checked + span { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.tamanhos input:focus-visible + span { outline: 2px solid var(--preto); outline-offset: 2px; }
.aviso { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; display: none; }
.aviso.mostrar { display: block; animation: tremer .5s; }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.acordeao { border-top: 1px solid var(--linha); margin-top: 12px; }
.acordeao details { border-bottom: 1px solid var(--linha); }
.acordeao summary { list-style: none; padding: 18px 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; display: flex; justify-content: space-between; cursor: pointer; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: "+"; font-weight: 400; font-size: 18px; line-height: 1; transition: transform .5s var(--ease); }
.acordeao details[open] summary::after { transform: rotate(45deg); }
.acordeao p { padding: 0 0 20px; color: var(--cinza); font-size: 14px; }
.acordeao details[open] p { animation: abrir .6s var(--ease); }
@keyframes abrir { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Gaveta ---------- */
.veu { position: fixed; inset: 0; background: rgba(30,19,12,.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.gaveta-aberta .veu { opacity: 1; pointer-events: auto; }
.gaveta { position: fixed; top: 0; right: 0; height: 100%; width: min(460px, 100%); background: var(--branco); z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .8s var(--ease); }
.gaveta-aberta .gaveta { transform: none; }
.gaveta-top { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--linha); }
.gaveta-top h2 { font-size: 26px; font-weight: 600; letter-spacing: -.04em; }
.gaveta-top sup { font-size: 13px; font-weight: 400; color: var(--cinza); letter-spacing: 0; }
.fechar { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gaveta-itens { flex: 1; overflow-y: auto; padding: 0 28px; }
.item { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.gaveta-aberta .item { animation: entrarItem .7s var(--ease) both; }
.gaveta-aberta .item:nth-child(2) { animation-delay: .06s; } .gaveta-aberta .item:nth-child(3) { animation-delay: .12s; } .gaveta-aberta .item:nth-child(4) { animation-delay: .18s; }
@keyframes entrarItem { from { opacity: 0; transform: translateX(30px); } }
.item-img { aspect-ratio: 3/4; background: var(--gelo); overflow: hidden; }
.item-img img { width: 100%; height: 100%; object-fit: cover; }
.item-info { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.item-info strong { font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.item-info > span { color: var(--cinza); }
.item-dir { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 13px; }
.item-dir strong { font-weight: 500; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); width: max-content; margin-top: auto; }
.qtd button { width: 30px; height: 30px; }
.qtd span { min-width: 22px; text-align: center; }
.vazia { padding: 80px 0; display: grid; gap: 24px; justify-items: center; color: var(--cinza); text-align: center; }
.gaveta-rodape { padding: 22px 28px 26px; border-top: 1px solid var(--linha); display: grid; gap: 14px; }
.frete { font-size: 12px; display: grid; gap: 8px; }
.barra { height: 2px; background: var(--linha); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--preto); transform-origin: left; transition: transform .8s var(--ease); }
.linha-total { display: flex; justify-content: space-between; font-size: 15px; }
.linha-total strong { font-weight: 600; }
.nota { font-size: 12px; color: var(--cinza); text-align: center; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 200; background: var(--preto); color: var(--branco); padding: 14px 22px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transform: translate(-50%, 30px); opacity: 0; visibility: hidden; transition: all .6s var(--ease); max-width: calc(100% - 32px); text-align: center; }
.toast.mostrar { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.gaveta-aberta .toast { display: none; }

/* ---------- Contato ---------- */
.contato-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 96px); }
.contato-info { display: grid; gap: 36px; align-content: start; }
.contato-info h3 { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.contato-info p { color: var(--cinza); }
.contato-info .grande { font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.03em; color: var(--preto); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.contato-info .grande:hover { background-size: 100% 1px; }
.form { display: grid; gap: 28px; }
.campo { display: grid; gap: 4px; }
.campo span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); transition: color .3s; }
.campo:focus-within span { color: var(--preto); }
.campo input, .campo select, .campo textarea { border: 0; border-bottom: 1px solid var(--linha); padding: 12px 0; font-size: 17px; background: transparent; outline: none; transition: border-color .4s; border-radius: 0; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--preto); }
.campo textarea { min-height: 120px; resize: vertical; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.oculto { display: none; }

.whats { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; background: var(--preto); color: var(--branco); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: transform .5s var(--ease); }
.whats:hover { transform: scale(1.1) rotate(-8deg); }
.whats svg { width: 24px; height: 24px; fill: currentColor; }

.menu-mobile { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .grade { grid-template-columns: repeat(3, 1fr); }
  .controles input { width: 140px; }
}
@media (max-width: 860px) {
  .topo-inner { grid-template-columns: auto 1fr auto; height: 64px; gap: 16px; }
  .logo { justify-self: start; font-size: 20px; }
  .nav { display: none; }
  .menu-toggle { display: block; }
  .acoes { gap: 18px; }
  .so-desktop { display: none !important; }
  .menu-mobile { display: flex; position: fixed; inset: 0; z-index: 45; background: var(--preto); color: var(--branco); flex-direction: column; justify-content: flex-end; padding: 100px var(--gutter) 40px; gap: 4px; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-io); }
  .menu-aberto .menu-mobile { clip-path: inset(0 0 0 0); }
  .menu-mobile a { font-size: clamp(44px, 12vw, 72px); font-weight: 600; letter-spacing: -.05em; line-height: 1.08; overflow: hidden; }
  .menu-mobile a span { display: block; transform: translateY(110%); transition: transform .9s var(--ease); }
  .menu-aberto .menu-mobile a span { transform: none; transition-delay: .25s; }
  .menu-aberto .menu-mobile a:nth-child(2) span { transition-delay: .3s; } .menu-aberto .menu-mobile a:nth-child(3) span { transition-delay: .35s; } .menu-aberto .menu-mobile a:nth-child(4) span { transition-delay: .4s; } .menu-aberto .menu-mobile a:nth-child(5) span { transition-delay: .45s; }
  .menu-mobile small { margin-top: 32px; color: rgba(255,255,255,.5); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
  .menu-aberto .topo { background: transparent !important; color: var(--branco) !important; border-color: transparent !important; transform: none !important; }
  .menu-aberto .topo .contador { background: var(--branco); color: var(--preto); }
  .barra-filtros { top: 65px; }
  .barra-filtros .container { flex-wrap: wrap; gap: 0; padding-bottom: 10px; }
  .chips { flex: 0 0 calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); }
  .controles { width: 100%; }
  .controles input { flex: 1; width: auto; min-width: 0; }
  .grade { grid-template-columns: repeat(2, 1fr); gap: 32px 8px; }
  .categorias { grid-template-columns: 1fr 1fr; }
  .cat:first-child { grid-column: 1 / -1; aspect-ratio: 4/3; }
  .hero-conteudo .container { grid-template-columns: 1fr; }
  .hero-topo { display: none; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto-img { min-height: 70vh; }
  .beneficios { grid-template-columns: 1fr 1fr; }
  .beneficio:nth-child(3) { border-left: 0; padding-left: 0; }
  .beneficio:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .news-grid { grid-template-columns: 1fr; }
  .rodape-grid { grid-template-columns: 1fr 1fr; }
  .rodape-grid > div:first-child { grid-column: 1/-1; }
  .pdp { grid-template-columns: 1fr; padding-top: 0; }
  .pdp-galeria { position: relative; top: 0; margin: 0 calc(var(--gutter) * -1); }
  .contato-grid { grid-template-columns: 1fr; }
  .duas { grid-template-columns: 1fr; }
  .card h3 { font-size: 11px; }
  .card-info { flex-direction: column; gap: 4px; padding-top: 10px; }
  .precos { font-size: 12px; }
}
@media (max-width: 480px) {
  .categorias { grid-template-columns: 1fr; }
  .cat, .cat:first-child { aspect-ratio: 4/5; }
  .numeros { gap: 12px; }
  .beneficios { grid-template-columns: 1fr; }
  .beneficio { border-left: 0 !important; padding: 22px 0 !important; border-top: 1px solid var(--linha); }
  .beneficio:first-child { border-top: 0; }
  .hero-lado .botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .revelar, .revelar-img, .linhas > span > span, .hero-lado { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .letreiro-trilho { animation: none !important; }
}

/* =========================================================
   RAFFINATO — tipografia clássica (sobrepõe os estilos acima)
   ========================================================= */
.titulo, .hero h1, .manifesto-txt h2, .pagina-topo h1, .pdp-info h1, .cat-txt h3,
.letreiro.grande, .rodape-marca, .menu-mobile a, .gaveta-top h2, .numeros strong, .contato-info .grande, .loader-marca {
  font-family: var(--display); font-weight: 500; letter-spacing: -.015em;
}
.hero h1 { font-weight: 400; line-height: .88; letter-spacing: -.03em; font-size: clamp(64px, 11.5vw, 200px); }
.titulo { line-height: .95; font-size: clamp(44px, 6vw, 92px); }
.pagina-topo h1 { letter-spacing: -.025em; }
.manifesto-txt h2 { line-height: .95; }
.serif { font-family: var(--display); font-style: italic; font-weight: 400; }
.letreiro.grande { font-weight: 400; letter-spacing: 0; }
.letreiro.grande span:nth-child(even) { font-family: var(--display); }
.letreiro.grande span::after { content: "◆"; font-size: .22em; color: var(--ouro); }
.letreiro-trilho span::after { content: "◆"; font-size: 8px; vertical-align: 2px; color: var(--ouro); opacity: 1; }
.rodape-marca { font-weight: 400; letter-spacing: .02em; font-size: clamp(56px, 15vw, 250px); text-transform: uppercase; text-align: center; }
.logo { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: .28em; text-transform: uppercase; margin-right: -.28em; }
.logo small { display: none; }
.loader-marca { font-weight: 400; letter-spacing: .2em; text-transform: uppercase; font-size: clamp(36px, 7vw, 96px); }
.loader-sub { position: absolute; top: calc(50% + clamp(36px, 5vw, 70px)); left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--ouro); opacity: 0; animation: aparecer .8s ease .5s forwards; }
@keyframes aparecer { to { opacity: 1; } }
.loader { background: var(--preto); }
.loader-barra i { background: var(--ouro); }
.rotulo, .nav a, .acoes a, .acoes button, .botao, .selo, .chip, .migalha, .fechar, .campo span, .tamanhos legend, .acordeao summary, .rapido > span { letter-spacing: .2em; }
.card h3 { font-family: var(--display); font-size: 19px; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.card-info { flex-direction: column; gap: 6px; }
.precos { font-size: 13px; letter-spacing: .04em; }
.precos.grande { font-family: var(--display); font-size: 28px; font-weight: 500; }
.item-info strong { font-family: var(--display); font-size: 17px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.indice { color: var(--ouro); }
.selo-off, .precos em { background: var(--ouro); color: #fff; }
.contador { background: var(--preto); }
.chip { border-radius: 0; }
.chip.ativo { background: var(--preto); }
.monograma { width: 72px; height: 72px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 30px; font-style: italic; color: var(--ouro); }
.manifesto-txt .monograma { margin-bottom: 32px; }
.citacao { font-family: var(--display); font-style: italic; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.15; max-width: 980px; margin: 0 auto; text-align: center; }
.citacao cite { display: block; margin-top: 24px; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ouro); }
.ornamento { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--ouro); margin-bottom: 36px; }
.ornamento::before, .ornamento::after { content: ""; width: 64px; height: 1px; background: currentColor; opacity: .6; }
@media (max-width: 860px) {
  .logo { font-size: 19px; letter-spacing: .2em; margin-right: 0; }
  .card h3 { font-size: 16px; }
}
.item-info strong { line-height: 1.2; }
.linhas > span { padding: .06em 0 .16em; margin: -.06em 0 -.16em; }

/* =========================================================
   RAFFINATO — identidade de maison (marrom #5B3409 + off-white #E8E5D6)
   ========================================================= */
.logo { font-family: var(--wordmark); font-weight: 500; font-size: 22px; letter-spacing: .32em; margin-right: -.32em; display: grid; justify-items: center; line-height: 1; gap: 5px; }
.logo small { display: block; font-family: var(--sans); font-size: 8.5px; font-weight: 500; letter-spacing: .5em; margin-right: -.5em; opacity: .75; }
.rodape-marca { font-family: var(--wordmark); font-weight: 400; letter-spacing: .14em; font-size: clamp(44px, 12.5vw, 200px); margin-right: -.14em; color: var(--off); }
.rodape, .news, .manifesto, .letreiro, .loader, .menu-mobile { background: var(--preto); color: var(--off); }
.rodape h4 { color: var(--off); }
.rodape { color: rgba(232,229,214,.7); }
.letreiro.grande { background: var(--branco); color: var(--preto); }
.hero { background: var(--preto); }
.selo { background: var(--off); color: var(--preto); }
.selo-off, .precos em { background: var(--preto); color: var(--off); }
.botao-branco { color: var(--off); border-color: var(--off); }
.botao-branco::before { background: var(--off); }
.loader-marca { font-family: var(--wordmark); letter-spacing: .3em; margin-right: -.3em; font-size: clamp(30px, 6vw, 80px); color: var(--off); }
.loader-selo { position: absolute; top: calc(50% - clamp(90px, 13vw, 160px)); left: 50%; width: clamp(60px, 7vw, 92px); transform: translateX(-50%) scale(.6); opacity: 0; animation: selo 1s var(--ease) .1s forwards; color: var(--off); }
@keyframes selo { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.loader-sub { color: var(--off); opacity: 0; letter-spacing: .5em; }
.loader-barra i { background: var(--off); }

/* monograma (selo próprio da Raffinato) */
.selo-r { display: block; width: 100%; height: auto; }
.selo-r circle { fill: none; stroke: currentColor; }
.selo-r text { fill: currentColor; font-family: var(--wordmark); }
.monograma { border: 0; width: 84px; height: 84px; color: var(--off); font-size: 0; }
.monograma .selo-r { width: 84px; }

/* ---------- As linhas da maison (cartões quadrados) ---------- */
.linhas-maison { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.linha-card { position: relative; aspect-ratio: 1; background: var(--preto); color: var(--off); display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.linha-card::before { content: ""; position: absolute; inset: 0; background: var(--off); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease); z-index: -1; }
.linha-card:hover { color: var(--preto); }
.linha-card:hover::before { transform: scaleY(1); }
.linha-card > div { transition: transform 1s var(--ease), color .5s; display: grid; justify-items: center; gap: 14px; }
.linha-card:hover > div { transform: scale(1.06); }
.linha-card .ver { position: absolute; bottom: 24px; left: 0; right: 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: all .7s var(--ease); }
.linha-card:hover .ver { opacity: 1; transform: none; }
.lm-a b { font-family: var(--wordmark); font-weight: 500; font-size: clamp(30px, 3.8vw, 58px); letter-spacing: .14em; margin-right: -.14em; line-height: 1; }
.lm-a i { font-style: normal; font-size: 11px; letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; }
.lm-b b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(44px, 5.4vw, 84px); line-height: .9; }
.lm-b i { font-style: normal; font-family: var(--wordmark); font-size: 12px; letter-spacing: .45em; margin-right: -.45em; }
.lm-c > div { border: 1.5px solid currentColor; padding: 18px 26px 16px; }
.lm-c b { font-family: var(--wordmark); font-weight: 600; font-size: clamp(26px, 3.2vw, 48px); letter-spacing: .08em; line-height: 1; }
.lm-c i { font-style: normal; font-size: 10px; letter-spacing: .45em; text-transform: uppercase; margin-right: -.45em; }
.lm-d .selo-r { width: clamp(90px, 9vw, 130px); }
.lm-d i { font-style: normal; font-family: var(--wordmark); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .4em; margin-right: -.4em; }
.lm-e b { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4vw, 60px); letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase; line-height: .95; }
.lm-e b span { display: block; font-size: .5em; letter-spacing: .6em; margin-right: -.6em; font-weight: 400; }
.lm-f b { font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 2.6vw, 38px); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; }
.lm-f i { font-family: var(--display); font-size: clamp(18px, 1.8vw, 26px); }
@media (max-width: 860px) { .linhas-maison { grid-template-columns: 1fr 1fr; gap: 8px; } .linha-card .ver { opacity: .7; transform: none; bottom: 14px; } }
@media (max-width: 860px) { .logo { font-size: 17px; letter-spacing: .26em; margin-right: 0; } .logo small { font-size: 7px; } }
@media (max-width: 860px) {
  .linha-card .ver { display: none; }
  .lm-a b { font-size: clamp(17px, 5.4vw, 30px); letter-spacing: .1em; margin-right: -.1em; }
  .lm-a i, .lm-c i { font-size: 9px; letter-spacing: .35em; }
  .lm-b b { font-size: clamp(34px, 10vw, 54px); }
  .lm-c > div { padding: 12px 16px 10px; }
  .lm-c b { font-size: clamp(22px, 6.5vw, 34px); }
  .lm-d .selo-r { width: clamp(64px, 18vw, 96px); }
  .lm-d i { font-size: 13px; }
  .lm-e b { font-size: clamp(18px, 5.6vw, 32px); letter-spacing: .1em; margin-right: -.1em; }
  .lm-e b span { letter-spacing: .4em; margin-right: -.4em; }
  .lm-f b { font-size: clamp(14px, 4.4vw, 24px); letter-spacing: .25em; margin-right: -.25em; }
  .lm-f i { font-size: 17px; }
}

/* ---------- Fundo bege (menos brilho) ---------- */
html { background: var(--branco); }
.tamanhos span, .qtd, .controles select, .controles input, .chip { background: rgba(255,255,255,.18); }
.gaveta { background: #eee5d3; }

/* ---------- Marcas ---------- */
.marcas-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.marca-card { position: relative; aspect-ratio: 1; background: var(--preto); color: var(--off); display: grid; place-items: center; align-content: center; gap: 10px; padding: 14px; text-align: center; overflow: hidden; isolation: isolate; }
.marca-card::before { content: ""; position: absolute; inset: 0; background: var(--off); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease); z-index: -1; }
.marca-card:hover { color: var(--preto); }
.marca-card:hover::before { transform: scaleY(1); }
.marca-nome { font-family: var(--wordmark); font-weight: 500; font-size: clamp(13px, 1.2vw, 18px); letter-spacing: .14em; margin-right: -.14em; text-transform: uppercase; line-height: 1.25; transition: transform .8s var(--ease); }
.marca-card:hover .marca-nome { transform: translateY(-6px); }
.marca-qtd { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all .7s var(--ease); position: absolute; bottom: 16px; }
.marca-card:hover .marca-qtd { opacity: .8; transform: none; }
.marca-todas { background: transparent; color: var(--preto); border: 1px solid var(--preto); }
.marca-todas::before { background: var(--preto); }
.marca-todas:hover { color: var(--off); }
.marca-todas .marca-nome { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: 0; margin: 0; font-size: clamp(20px, 1.8vw, 28px); }
.card-marca { display: block; font-family: var(--wordmark); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cinza); transition: color .3s; }
.card-marca:hover { color: var(--preto); }
.pdp-marca { font-family: var(--wordmark); font-size: 15px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ouro); width: max-content; }
.pdp-marca:hover { color: var(--preto); }
.item-marca { font-family: var(--wordmark); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--cinza); }
@media (max-width: 1080px) { .marcas-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) {
  .marcas-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .marca-card { aspect-ratio: 3/2; }
  .marca-nome { font-size: 14px; }
  .marca-qtd { opacity: .6; transform: none; bottom: 10px; font-size: 9px; }
  .card-marca { font-size: 9.5px; letter-spacing: .14em; }
}
html { scroll-behavior: smooth; } #marcas { scroll-margin-top: 90px; }

/* =========================================================
   MOTION 3D — futurista com alma old money
   ========================================================= */
/* ---------- Seção 3D da maison ---------- */
.maison3d { position: relative; height: 320vh; background: var(--branco); }
.m3d-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, #f4ecdc 0%, #e9dfcb 55%, #ddcfb4 100%); }
#m3dCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.pronto-3d #m3dCanvas { opacity: 1; }
/* grade de "planta técnica" em perspectiva */
.m3d-grade { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%; transform: perspective(600px) rotateX(68deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(91,52,9,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(91,52,9,.14) 1px, transparent 1px);
  background-size: 64px 64px; background-position: 0 calc(var(--p, 0) * 640px);
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); pointer-events: none; }
.m3d-txt { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding-top: 120px; padding-bottom: 40px; pointer-events: none; }
.m3d-txt .rotulo { color: var(--ouro); }
.m3d-frases { position: relative; align-self: center; height: 100%; }
.m3d-frases h2 { position: absolute; left: 0; top: 50%; max-width: 30%; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4vw, 64px); line-height: .98; letter-spacing: -.02em; color: var(--preto);
  opacity: 0; transform: translateY(-30%) perspective(800px) rotateX(-55deg); transform-origin: 50% 100%; filter: blur(6px); transition: all 1.1s var(--ease); }
.m3d-frases h2 em { font-style: italic; font-weight: 400; display: block; }
.m3d-frases h2.ativa { opacity: 1; transform: translateY(-50%); filter: none; }
.m3d-frases h2:nth-child(2) { left: auto; right: 0; text-align: right; }
.m3d-hud { display: flex; justify-content: space-between; align-items: end; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--cinza); font-variant-numeric: tabular-nums; }
.m3d-hud b { font-weight: 500; color: var(--preto); }
.m3d-barra { width: 160px; height: 1px; background: rgba(91,52,9,.2); margin-top: 10px; position: relative; overflow: hidden; }
.m3d-barra i { position: absolute; inset: 0; background: var(--preto); transform: scaleX(var(--p, 0)); transform-origin: left; }
.m3d-mira { position: absolute; left: 50%; top: 50%; width: min(70vmin, 620px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(calc(var(--p, 0) * 90deg)); pointer-events: none; opacity: .55; }
.m3d-mira::before, .m3d-mira::after { content: ""; position: absolute; inset: 0; border: 1px dashed rgba(91,52,9,.25); border-radius: 50%; }
.m3d-mira::after { inset: 12%; border-style: solid; border-color: rgba(167,121,63,.25); }
.m3d-mira i { position: absolute; background: rgba(91,52,9,.35); }
.m3d-mira i:nth-child(1) { left: 50%; top: -3%; width: 1px; height: 6%; } .m3d-mira i:nth-child(2) { left: 50%; bottom: -3%; width: 1px; height: 6%; }
.m3d-mira i:nth-child(3) { top: 50%; left: -3%; height: 1px; width: 6%; } .m3d-mira i:nth-child(4) { top: 50%; right: -3%; height: 1px; width: 6%; }
.sem-3d .m3d-sticky::after { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px; border-radius: 50%; border: 2px solid var(--ouro); background: var(--off); }
@media (max-width: 860px) {
  .maison3d { height: 260vh; }
  .m3d-txt { padding-top: 96px; }
  .m3d-frases h2, .m3d-frases h2:nth-child(2) { max-width: none; left: 0; right: 0; text-align: center; top: auto; bottom: 0; font-size: clamp(30px, 8.5vw, 44px); }
  .m3d-frases h2.ativa { transform: none; }
  .m3d-hud span:nth-child(2) { display: none; }
}

/* ---------- Títulos com entrada 3D ---------- */
.linhas { perspective: 900px; }
.linhas > span > span { transform: translateY(105%) rotateX(-75deg); transform-origin: 50% 100%; }
.linhas.visivel > span > span { transform: none; }

/* ---------- Cards com inclinação 3D e brilho ---------- */
.card { perspective: 1000px; }
.card-media { transform-style: preserve-3d; transition: transform .7s var(--ease), box-shadow .7s var(--ease); will-change: transform; }
.card.inclinando .card-media { transition: transform .12s linear, box-shadow .4s; box-shadow: 0 30px 50px -28px rgba(60,34,6,.45); }
.card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,248,232,.45), transparent 45%); mix-blend-mode: soft-light; }
.card.inclinando .card-media::after { opacity: 1; }
.selos { transform: translateZ(40px); }
.rapido { transform: translateY(calc(100% + 14px)) translateZ(30px); }
@media (hover: hover) { .card:hover .rapido { transform: translateZ(30px); } }

/* ---------- Marcas: cartão que vira em 3D ---------- */
.marca-card { perspective: 900px; background: transparent !important; padding: 0; overflow: visible; }
.marca-card::before { display: none; }
.mc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.marca-card:hover .mc-inner { transform: rotateY(180deg); }
.mc-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; }
.mc-frente { background: var(--preto); color: var(--off); }
.mc-verso { background: var(--off); color: var(--preto); transform: rotateY(180deg); border: 1px solid var(--preto); }
.mc-verso .marca-qtd { position: static; opacity: 1; transform: none; }
.mc-verso small { font-family: var(--display); font-style: italic; font-size: 18px; }
.marca-card:hover .marca-nome { transform: none; }
.marca-todas .mc-frente { background: transparent; color: var(--preto); border: 1px solid var(--preto); }
.marca-todas .mc-verso { background: var(--preto); color: var(--off); }
@media (max-width: 860px) { .marca-card:hover .mc-inner { transform: none; } }

/* ---------- Lookbook em carrossel 3D ---------- */
.lookbook { perspective: 1400px; padding-top: 30px; padding-bottom: 30px; }
.look { transform-style: preserve-3d; transition: transform .25s linear; will-change: transform; }

/* ---------- Capa com profundidade ---------- */
.hero { perspective: 1200px; }
.hero-img { transform: translate3d(calc(var(--hx, 0) * -18px), calc(var(--hy, 0) * -12px), 0) rotateY(calc(var(--hx, 0) * 2deg)) rotateX(calc(var(--hy, 0) * -2deg)) scale(1.04); transition: transform .9s var(--ease); }
.hero-conteudo { transform: translate3d(calc(var(--hx, 0) * 14px), calc(var(--hy, 0) * 8px), 0); transition: transform .9s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .maison3d { height: auto; } .m3d-sticky { position: relative; }
  .m3d-frases h2 { opacity: 0 !important; } .m3d-frases h2:first-child { opacity: 1 !important; filter: none; transform: translateY(-50%); }
  .card-media, .mc-inner, .look, .hero-img, .hero-conteudo { transform: none !important; }
}
@media (max-width: 860px) { .m3d-frases h2, .m3d-frases h2:nth-child(2) { bottom: 56px; } }

/* =========================================================
   IDENTIDADE RAFFINATO — logo manuscrita, monograma e banner
   ========================================================= */
.logo { display: block; position: relative; height: 40px; width: auto; margin: 0; gap: 0; }
.logo img { height: 40px; width: auto; display: block; transition: opacity .4s; }
.logo .logo-o { position: absolute; inset: 0; opacity: 0; }
.tem-hero .topo:not(.solido) .logo .logo-m, .menu-aberto .topo .logo .logo-m { opacity: 0; }
.tem-hero .topo:not(.solido) .logo .logo-o, .menu-aberto .topo .logo .logo-o { opacity: 1; }
.logo:hover img { opacity: .8; }
@media (max-width: 860px) { .logo, .logo img { height: 30px; } }

/* abertura: a assinatura "se escreve" da esquerda para a direita */
.loader-marca { display: block; width: min(68vw, 620px); letter-spacing: 0; margin: 0; }
.loader-marca img { width: 100%; height: auto; clip-path: inset(0 100% 0 0); animation: escrever 1.5s cubic-bezier(.6,.05,.3,1) .15s forwards; }
@keyframes escrever { to { clip-path: inset(0 0 0 0); } }
.loader { animation-delay: 1.75s; }
.loader-sub { top: calc(50% + min(10vw, 92px)); animation-delay: 1.1s; }
.loader-barra i { animation-duration: 1.6s; }

/* rodapé com a assinatura grande */
.rodape-marca { font-size: 0; margin: 72px auto 28px; text-align: center; }
.rodape-marca img { width: min(100%, 980px); height: auto; margin: 0 auto; display: block; }
.rodape-marca.revelar { transform: translateY(40px) scale(.96); }
.rodape-marca.revelar.visivel { transform: none; }

/* monograma do manifesto */
.monograma { width: 96px; height: 96px; border: 1px solid rgba(232,229,214,.5); border-radius: 50%; display: grid; place-items: center; position: relative; }
.monograma::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(232,229,214,.25); border-radius: 50%; }
.monograma img { width: 58%; height: auto; }

/* banner "Seu estilo refinado" */
.banner-refinado { background: #080908; overflow: hidden; }
.banner-quadro { position: relative; overflow: hidden; aspect-ratio: 1600 / 584; max-height: 80vh; margin: 0 auto; }
.banner-quadro img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.banner-quadro::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.45); }

/* ---------- Produtos com várias fotos e cores ---------- */
.card-img .img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.card:hover .card-img.tem-hover .img-hover { opacity: 1; transform: scale(1.06); }
.card-img img { filter: none !important; }
.card-cores { display: flex; gap: 6px; margin: 2px 0 2px; }
.card-cores i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(60,34,6,.25); }
.rapido-link { display: grid; gap: 4px; text-decoration: none; }
.rapido-link b { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--preto); }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; padding: 10px 0 0; background: var(--branco); }
.miniaturas button { aspect-ratio: 4/5; overflow: hidden; border: 1px solid transparent; opacity: .6; transition: opacity .3s, border-color .3s; background: var(--gelo); }
.miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
.miniaturas button.ativa, .miniaturas button:hover { opacity: 1; border-color: var(--preto); }
#fotoPrincipal { transition: opacity .25s, transform .8s var(--ease); }
#fotoPrincipal.trocando { opacity: 0; }
.zoom { aspect-ratio: 4/5; }
.cores { border: 0; }
.cores legend { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.cores legend b { font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: 14px; }
.cores > div { display: flex; flex-wrap: wrap; gap: 10px; }
.cores label { position: relative; cursor: pointer; }
.cores input { position: absolute; opacity: 0; pointer-events: none; }
.cores span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(60,34,6,.25), 0 0 0 3px var(--branco), 0 0 0 4px transparent; transition: box-shadow .3s; }
.cores input:checked + span { box-shadow: inset 0 0 0 1px rgba(60,34,6,.25), 0 0 0 3px var(--branco), 0 0 0 4px var(--preto); }
.cores input:focus-visible + span { outline: 2px solid var(--preto); outline-offset: 4px; }
.lista-detalhes { list-style: none; padding: 0 0 20px; display: grid; gap: 6px; color: var(--cinza); font-size: 14px; }
.lista-detalhes li::before { content: "—  "; color: var(--ouro); }
@media (max-width: 860px) { .miniaturas { padding: 8px var(--gutter) 0; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); } }