:root{
  --preto:#0B0B0B;
  --cinza:#2E2E2E;
  --dourado:#C9A96B;
  --off:#F5F5F5;
  /* serifada nos títulos, sans no corpo — mesma estrutura da referência,
     e casa com o "Only For Men" serifado que já vem gravado no vídeo */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:Montserrat,system-ui,sans-serif;
  /* palco preso por 150vh: 3 paradas em 0, 75vh e 150vh.
     Curto de propósito — quem dita o ritmo é a animação do snap, não a roda. */
  --film-h:200vh;
  --nav-h:96px;
}

*,*::before,*::after{box-sizing:border-box}
/* sem scroll-behavior:smooth aqui — ele atropela a animação de snap do JS,
   que precisa controlar o próprio easing. Os links de âncora animam via JS. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--preto);
  color:var(--off);
  font:300 17px/1.65 var(--sans);
  /* clip, nunca hidden: hidden cria contexto de rolagem e mata o position:sticky */
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.14}
sup{font-size:.5em;vertical-align:super}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--dourado);color:var(--preto);padding:10px 16px}

/* ---------- nav: barra flutuante em pílula ---------- */
.nav{
  /* centralizado por margem automática, nunca por transform: transform cria
     bloco de contenção e prenderia o painel fixed do menu dentro da pílula */
  position:fixed;top:18px;left:0;right:0;margin-inline:auto;
  width:min(1260px,calc(100% - 28px));height:62px;z-index:60;
  display:flex;align-items:center;gap:24px;
  padding:0 8px 0 28px;border-radius:999px;
  /* o vidro (fundo, desfoque, sombra) mora no ::after e a luz da borda no
     ::before: assim a luz não é filha de um elemento com backdrop-filter. No
     Chrome, filha mascarada de backdrop-filter perdia a máscara quando o
     compositor redesenhava (ao passar o mouse na barra de favoritos, por
     exemplo) e a luz virava um retângulo cheio. */
  isolation:isolate;
}
/* Vidro: desfoque forte + saturação (é a saturação que faz parecer lente e
   não véu cinza) e um brilho caindo de cima. O tingimento continua escuro de
   propósito — a pílula passa por cima da seção clara, e com vidro branco o
   texto some. */
.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;
  /* No topo da página (antes de rolar) o vídeo do hero está parado atrás da
     pílula. Desfocar um <video> parado com backdrop-filter faz o Chrome
     desenhar retângulos de cache velho no vidro quando a janela é
     recomposta (mouse na barra de favoritos, por exemplo). Ali o fundo já é
     escuro por causa do véu, então o vidro usa só o tingimento, um pouco mais
     denso pra compensar; o desfoque entra assim que a página rola. */
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 54%,rgba(255,255,255,.07)),
    rgba(30,30,36,.6);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.26);
  transition:background .4s,box-shadow .4s;
}
/* Luz correndo na borda do vidro. Um border de 1px tem a mesma força nos quatro
   lados; aqui o anel é um gradiente recortado por máscara, então acende nos
   cantos que pegariam luz e quase some no meio — é isso que dá o afinamento. */
.nav::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(112deg,
    rgba(255,255,255,.72) 0%,
    rgba(201,169,107,.5)  14%,
    rgba(255,255,255,.07) 34%,
    rgba(255,255,255,.05) 62%,
    rgba(201,169,107,.42) 86%,
    rgba(255,255,255,.66) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  /* camada própria: a máscara é rasterizada junto com ela e não depende do
     redesenho do resto da página */
  transform:translateZ(0);
}
.nav.is-solid::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.02) 54%,rgba(255,255,255,.08)),
    rgba(24,24,29,.62);
  backdrop-filter:blur(26px) saturate(200%);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3);
}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;position:relative;z-index:59}
.nav__name{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.nav__links{display:flex;gap:28px;margin-left:auto}
.nav__links a{
  text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,245,245,.84);padding:6px 0;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--dourado);transition:width .3s;
}
.nav__links a:hover{color:var(--off)}
.nav__links a:hover::after{width:100%}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;cursor:pointer;
  font-family:inherit;background:none;appearance:none;-webkit-appearance:none;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:15px 22px 15px 28px;border:1px solid transparent;border-radius:10px;
  transition:.3s;
}
/* seta no canto, como na referência */
.btn--gold::after{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(11,11,11,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7v8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:15px;
  transition:transform .3s,background-color .3s;
}
/* degradê diagonal + friso claro no topo (luz pegando a borda) e sombra
   escura por baixo (a borda que não pega luz) — é o par que dá volume de
   botão bicudo, não plano. O halo externo é o "brilho na borda" propriamente
   dito: um glow dourado baixinho, que sobe no hover. */
.btn--gold{
  background:linear-gradient(155deg,#e4cd9a 0%,var(--dourado) 46%,#b8925a 100%);
  color:var(--preto);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(11,11,11,.16),
    0 10px 26px -6px rgba(201,169,107,.45);
}
.btn--gold:hover{
  background:linear-gradient(155deg,#f0dfb4 0%,#d9bc82 46%,#c4a06a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(11,11,11,.14),
    0 14px 34px -6px rgba(201,169,107,.6);
}
.btn--gold:hover::after{transform:translate(2px,-2px)}
/* vazado: sem fundo sólido pra fazer degradê, então o volume vem de um
   friso interno claro (luz pegando a borda de dentro) e a sombra externa
   troca de cinza neutro pra um glow dourado baixinho — a mesma ideia da
   borda de luz do menu, só que num botão pequeno. */
.btn--ghost{
  border-color:rgba(201,169,107,.45);color:var(--dourado);
  padding:11px 22px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(245,245,245,.1),0 4px 16px -6px rgba(201,169,107,.25);
}
.btn--ghost:hover{
  background:linear-gradient(155deg,#e4cd9a 0%,var(--dourado) 100%);
  color:var(--preto);border-color:var(--dourado);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px -6px rgba(201,169,107,.5);
}
.btn--lg{padding:18px 26px 18px 36px}

/* ---------- trecho cinematográfico ---------- */
.film{position:relative;height:var(--film-h)}
.film__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--preto);
  z-index:1;
}
.film__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* em tela vertical o js encolhe o vídeo no fim (ver scroll-video.js): a borda
   de cima e de baixo some no preto do palco em vez de aparecer como corte seco */
.film__video{transform-origin:50% 50%}
.film__video.is-fit{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.film__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.7) 38%,rgba(11,11,11,.15) 68%,rgba(11,11,11,.5) 100%),
    linear-gradient(180deg,rgba(11,11,11,.75) 0%,transparent 26%,transparent 62%,rgba(11,11,11,.85) 100%);
}

/* trilho 01 02 03 */
.rail{
  position:absolute;left:clamp(16px,4vw,48px);top:50%;transform:translateY(-50%);
  margin:0;padding:0;list-style:none;display:grid;gap:22px;z-index:3;
}
.rail li{
  font-size:10px;letter-spacing:.2em;color:rgba(245,245,245,.35);
  display:flex;align-items:center;gap:10px;transition:color .4s;
}
.rail li::before{content:"";width:18px;height:1px;background:currentColor;transition:width .4s}
.rail li.is-on{color:var(--dourado)}
.rail li.is-on::before{width:36px}

/* apenas sinaliza que há conteúdo abaixo — sem fundo, sem clique */
.scoop{
  position:absolute;bottom:34px;left:0;right:0;z-index:4;
  display:flex;justify-content:center;
  pointer-events:none;transition:opacity .45s;
}
.scoop__btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(201,169,107,.42);color:var(--dourado);
}
.scoop svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  animation:descer 2.4s ease-in-out infinite;
}
@keyframes descer{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}

/* dobras — camadas sobrepostas dentro do palco, opacidade vinda do JS */
.fold{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  padding:var(--nav-h) clamp(16px,4vw,48px) 0;
  opacity:0;pointer-events:none;
  transition:opacity .45s ease;
  will-change:opacity;
}
.fold.is-on{pointer-events:auto}
.fold > *{
  transform:translateY(18px);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.fold.is-on > *{transform:none}
.fold > *:nth-child(2){transition-delay:.05s}
.fold > *:nth-child(3){transition-delay:.1s}
.fold > *:nth-child(4){transition-delay:.15s}

.fold--left{
  align-items:flex-start;justify-content:center;
  padding-left:clamp(16px,11vw,150px);
}
.fold--left > *{max-width:600px}
.fold--bottom{
  align-items:center;justify-content:flex-end;text-align:center;
  padding-bottom:clamp(24px,7vh,104px);
}

/* tarja com contorno arredondado, como na referência */
.eyebrow{
  display:inline-block;margin:0 0 22px;
  padding:9px 19px;border:1px solid rgba(201,169,107,.42);border-radius:999px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado);font-weight:500;line-height:1;
}
.eyebrow.center{display:block;width:fit-content;margin-inline:auto}
.display{font-family:var(--serif);font-size:clamp(42px,6.6vw,82px);font-weight:400;letter-spacing:-.01em;margin:0 0 22px}
.display--sm{font-size:clamp(32px,4.8vw,58px)}
.display em{font-style:italic;font-weight:400;color:var(--dourado)}
.lede{margin:0 0 34px;font-size:clamp(15px,1.5vw,19px);color:rgba(245,245,245,.8);max-width:46ch}
.fold__inner--center .lede{margin-inline:auto}

.stats{
  list-style:none;margin:0 0 38px;padding:0;
  display:flex;gap:clamp(28px,6vw,78px);justify-content:center;flex-wrap:wrap;
}
.stats b{display:block;font-family:var(--serif);font-size:clamp(38px,5vw,60px);font-weight:400;letter-spacing:-.01em}
.stats i{font-style:normal;color:var(--dourado);font-size:.5em;vertical-align:super}
.stats span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,245,245,.55)}
/* encolhe (scale) conforme a altura da tela deixa espaço abaixo do nome da marca */
.fold__bloco{scale:var(--ajuste,1);transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center}
.premium__titulo{margin:0 auto 14px;max-width:26ch}
.premium__sub{margin:0 0 38px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,245,245,.55)}

/* ================= página comum ================= */
.page{position:relative;z-index:5;background:var(--preto)}
.sec{position:relative;padding:clamp(72px,9vw,128px) clamp(20px,5vw,64px)}
.sec--esc{background:var(--preto)}
.sec--claro{background:var(--off);color:var(--preto)}
.center{text-align:center}
.wrap{max-width:1180px;margin:0 auto}

.h2{
  font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);
  font-weight:400;letter-spacing:-.005em;line-height:1.2;margin:0 0 24px;
}
.h2 em{font-style:italic;color:var(--dourado)}
.sec--claro .h2 em{color:#9a7c42}
.sec--claro .eyebrow{border-color:rgba(11,11,11,.18);color:#8a6d38}

.p-destaque{font-size:clamp(16px,1.6vw,19px);color:rgba(245,245,245,.92);margin:0 0 18px}
.sec p{margin:0 0 16px;color:rgba(245,245,245,.62);font-size:15.5px;line-height:1.75}
.sec--claro p{color:rgba(11,11,11,.66)}
.rotulo{
  font-size:10.5px!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado)!important;margin:0 0 20px!important;
  padding-bottom:18px;border-bottom:1px solid rgba(201,169,107,.24);
}
.credencial{
  font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(201,169,107,.85)!important;margin:0 0 22px!important;
}
.citacao{
  margin:0 0 28px;padding-left:20px;border-left:2px solid var(--dourado);
  font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.6;
  color:rgba(245,245,245,.82);
}
.sec--claro .citacao{color:rgba(11,11,11,.72)}

/* ---------- curvas de transição entre seções ---------- */
.curva-topo{border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;margin-top:-1px}

/* ---------- textura de tecido no fundo claro ----------
   O ladrilho já sai quase branco do gerador (valores 236–255): é o multiply
   contra o off-white que vira sombra de trama, em vez de ruído cinza por cima.
   Blend no próprio background, não em overlay — assim nada empilha sobre o
   conteúdo e não preciso mexer no z-index de nenhum filho. */
.textura{
  background-color:var(--off);
  background-image:url(../assets/textura-tecido.png);
  background-repeat:repeat;
  background-size:208px 208px;
  background-blend-mode:multiply;
}

/* ---------- mergulho: divisória com a concha no meio ----------
   A faixa inteira é da cor da seção de baixo; o SVG devolve o lóbulo claro no
   centro. Largura fixa de propósito: a concha é um detalhe, não um elemento
   que deva esticar junto com a tela. */
.mergulho{
  position:absolute;left:0;right:0;bottom:0;height:46px;
  z-index:2;pointer-events:none;
  /* sem fundo próprio: o lóbulo precisa ser vazado pra textura da seção
     passar por ele. Pintado de --off chapado ele virava um degrau visível
     contra o claro texturizado logo acima. */
}
/* o escuro fora da concha; no meio quem desenha é o svg */
.mergulho::before,.mergulho::after{content:"";position:absolute;top:0;bottom:0;background:var(--preto)}
.mergulho::before{left:0;right:calc(50% + 120px)}
.mergulho::after {right:0;left:calc(50% + 120px)}
.mergulho__forma{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:240px;height:46px;display:block;
}
.mergulho__forma path{fill:var(--preto)}
.mergulho__seta{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  width:28px;height:42px;border-radius:999px;
  border:1px solid rgba(11,11,11,.3);
  display:grid;place-items:center;color:rgba(11,11,11,.6);
}
.mergulho__seta svg{
  width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- recorte: o escuro de cima varrendo o canto da seção clara ---------- */
.tem-recorte{padding-top:clamp(112px,12vw,176px)}
/* 2px a mais pra cima: no Safari do iPhone a emenda com a seção escura de cima
   caía em meio pixel e deixava uma linha clara no topo do recorte */
.recorte{
  position:absolute;left:0;right:0;top:-2px;height:calc(clamp(58px,6vw,92px) + 2px);
  pointer-events:none;z-index:2;
}
/* preserveAspectRatio="none": a varredura acompanha a largura da tela, então o
   escuro começa sempre no mesmo ponto proporcional em vez de escorregar */
.recorte__forma{position:absolute;inset:0;width:100%;height:100%;display:block}
.recorte__forma path{fill:var(--preto)}
.recorte__btn{
  position:absolute;top:50%;right:clamp(22px,7vw,112px);transform:translateY(-50%);
  width:clamp(44px,3.8vw,54px);aspect-ratio:1;border-radius:50%;
  background:var(--off);color:var(--preto);display:grid;place-items:center;
}
.recorte__btn svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* dourado claro: o tom de corpo dourado some no off-white */
.sec--claro .credencial{color:#8a6d38!important}

/* ---------- bloco de duas colunas ---------- */
.dupla{
  display:grid;gap:clamp(32px,5vw,78px);align-items:center;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  max-width:1180px;margin-inline:auto;
}
.dupla--inv .dupla__foto,.dupla--inv .grade-fotos{order:0}
.dupla__foto{position:relative}
.dupla__foto img{
  width:100%;height:clamp(360px,44vw,520px);object-fit:cover;
  border-radius:14px;
}
.monograma{
  position:absolute;right:-26px;bottom:52px;
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,11,11,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(201,169,107,.4);color:var(--dourado);
  font-family:var(--serif);font-size:19px;letter-spacing:.08em;
}
.monograma--centro{
  right:auto;bottom:auto;top:50%;left:50%;transform:translate(-50%,-50%);
  width:104px;height:104px;
}

/* passos numerados */
.passos{list-style:none;margin:6px 0 30px;padding:0;display:grid;gap:14px}
.passos li{display:flex;align-items:center;gap:16px;font-size:15px;color:rgba(245,245,245,.8)}
.passos span{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(201,169,107,.5);color:var(--dourado);font-size:12px;
}

/* ---------- card de destaque (ocasião principal) ---------- */
.destaque{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;max-width:1080px;margin:44px auto 0;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(11,11,11,.09);
}
.destaque__corpo{padding:clamp(28px,3.4vw,46px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.destaque__corpo h3{font-size:clamp(24px,2.4vw,30px);margin-bottom:10px}
.destaque__foto img{width:100%;height:100%;min-height:340px;object-fit:cover}
/* foto em pé: sem isso ela estica o cartão do noivo */
@media (min-width:1001px){.destaque__foto img.foto-noivo{max-height:540px}}

/* ---------- linhas alternadas (também vestimos) ---------- */
.linha{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;max-width:1080px;margin:0 auto 26px;
  background:rgba(255,255,255,.035);border:1px solid rgba(201,169,107,.16);
  border-radius:16px;overflow:hidden;
}
.linha--inv .linha__foto{order:2}
.linha__foto img{width:100%;height:100%;min-height:330px;object-fit:cover}
.linha__corpo{padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.linha__corpo h3{font-size:clamp(23px,2.2vw,29px);margin-bottom:10px}
.fecho{
  max-width:760px;margin:36px auto 0!important;text-align:center;
  font-size:15px!important;color:rgba(245,245,245,.55)!important;
}

/* ---------- chips ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px;padding:0}
.chips li{
  font-size:12.5px;padding:8px 15px;border-radius:999px;
  background:rgba(201,169,107,.1);border:1px solid rgba(201,169,107,.26);
  color:rgba(245,245,245,.82);
}
.sec--claro .chips li,.destaque .chips li{
  background:rgba(11,11,11,.045);border-color:rgba(11,11,11,.1);color:rgba(11,11,11,.7);
}

/* botão escuro (usado sobre fundo claro) — mesmo par de frisos do dourado,
   só que mais discreto: luz de cima quase imperceptível, sombra de baixo
   mais funda (metal escovado escuro), e o halo externo é neutro, não
   dourado — um glow dourado aqui brigaria com o fundo claro ao redor. */
.btn--escuro{
  background:linear-gradient(155deg,#2c2f36 0%,#14161a 55%,#0a0b0d 100%);
  color:var(--off);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 10px 24px -8px rgba(11,11,11,.4);
}
.btn--escuro:hover{
  background:linear-gradient(155deg,#383c45 0%,#23272e 55%,#15171b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 14px 30px -8px rgba(11,11,11,.5);
}
.btn--escuro::after{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7v8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:15px;
  transition:transform .3s;
}
.btn--escuro:hover::after{transform:translate(2px,-2px)}

/* ---------- grade de fotos (sobre) ---------- */
.grade-fotos{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.grade-fotos img{width:100%;height:clamp(150px,17vw,215px);object-fit:cover;object-position:var(--pos,center 30%);border-radius:12px}

/* ---------- vitrine de clientes ----------
   Trilho horizontal com o trio do meio em foco e as laterais apagando, como
   na referência. Quem desloca o trilho é o js — a conta depende da largura
   real do cartão, que muda por breakpoint. */
.vitrine{
  --vw:290px; --vh:470px; --vg:18px;
  background:var(--preto);overflow:hidden;
}
.vitrine__palco{
  position:relative;margin-top:clamp(34px,4.5vw,56px);
  /* o trilho sangra pros dois lados: é esse transbordo apagando que dá a
     sensação de fila contínua em vez de uma régua de quatro fotos */
  margin-inline:calc(50% - 50vw);
}
.vitrine__trilho{
  list-style:none;margin:0;padding:0;display:flex;gap:var(--vg);
  /* sem transition: quem move é o js, quadro a quadro. Com transition o
     navegador reinterpolava a cada quadro e a fila nunca alcançava o alvo —
     ficava numa rampa mole em vez de andar em velocidade constante. */
  will-change:transform;
}
.vitrine__item{
  flex:none;width:var(--vw);height:var(--vh);position:relative;
  border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.04);
}
.vitrine__item img{
  width:100%;height:100%;object-fit:cover;
  /* o cartão é retrato e corta nos dois eixos: cada foto diz onde está o homem */
  object-position:var(--pos,center 32%);
}
.vitrine__item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--dourado),rgba(201,169,107,.2));
}
/* Vidro das laterais. A máscara em gradiente é o truque: backdrop-filter
   respeita a máscara, então o desfoque entra de leve na borda do trio e vai
   fechando até a beira da tela — em vez de três degraus de nitidez. */
.vitrine__vidro{
  position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.vitrine__vidro--esq{
  left:0;right:calc(50% + (var(--vw) * 1.5 + var(--vg)));
  background:linear-gradient(to right,rgba(11,11,11,.9),rgba(11,11,11,0));
  -webkit-mask-image:linear-gradient(to right,#000 42%,transparent);
          mask-image:linear-gradient(to right,#000 42%,transparent);
}
.vitrine__vidro--dir{
  right:0;left:calc(50% + (var(--vw) * 1.5 + var(--vg)));
  background:linear-gradient(to left,rgba(11,11,11,.9),rgba(11,11,11,0));
  -webkit-mask-image:linear-gradient(to left,#000 42%,transparent);
          mask-image:linear-gradient(to left,#000 42%,transparent);
}
.vitrine__seta{
  position:absolute;top:50%;margin-top:-20px;z-index:4;
  width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;
  /* acima do vidro, senão o desfoque come a seta */
  background:var(--dourado);color:var(--preto);
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:background .25s,box-shadow .25s;
}
.vitrine__seta:hover{background:#dcc08a;box-shadow:0 8px 26px rgba(0,0,0,.6)}
.vitrine__seta svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
/* encostadas nas bordas do trio em foco, não nas bordas da tela */
.vitrine__seta--ant {left:calc(50% - (var(--vw) * 1.5 + var(--vg)) - 20px)}
.vitrine__seta--prox{left:calc(50% + (var(--vw) * 1.5 + var(--vg)) - 20px)}

/* ---------- esteira diagonal ----------
   Cinco fitas girando em sentidos alternados, o conjunto todo girado -25°.
   O texto da seção fica por cima, com um véu radial atrás — sem ele o cartão
   que passa por trás rouba a leitura do título.
   Usada pela seção de avaliações. */
.esteira-sec{
  --dw:380px; --dh:300px; --dg:28px;   /* cartão e respiro entre eles */
  padding:0;background:var(--preto);
  height:min(100svh,880px);min-height:620px;
  display:grid;place-items:center;overflow:hidden;
}
.esteira-diagonal{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.palco{
  position:absolute;display:flex;flex-direction:column;gap:var(--dg);
  /* girado, a largura útil cai com o cosseno e as fitas de cima e de baixo
     ainda escorregam pro lado — por isso o palco é bem maior que a tela.
     O teto existe porque a fita só cobre duas larguras de conjunto. */
  width:clamp(1200px,240vw,5200px);
  transform:rotate(-25deg);
}
.fita{display:flex;width:100%;overflow:hidden}
.fita__correr{
  display:flex;flex:none;
  /* --anda = uma cópia do conjunto. Quem define é o js, que conta quantas
     cópias a tela exige; o valor aqui é só o caso de três. */
  --anda:-33.3333%;
  animation:fita-esq var(--vel) linear infinite;
  will-change:transform;
}
.fita__correr--volta{animation-name:fita-dir}
.fita:hover .fita__correr{animation-play-state:paused}
.fita__set{display:flex;flex:none}
/* o respiro é margem do cartão, nunca gap entre conjuntos: gap entraria na
   largura do trilho e o -33,3333% deixaria de cair exatamente num conjunto */
@keyframes fita-esq{from{transform:translate3d(0,0,0)}          to{transform:translate3d(var(--anda),0,0)}}
@keyframes fita-dir{from{transform:translate3d(var(--anda),0,0)} to{transform:translate3d(0,0,0)}}

/* cartão de foto — o da referência: capa, cantos redondos, sombra e véu */
.retrato{
  width:var(--dw);height:var(--dh);flex:none;margin-right:var(--dg);
  position:relative;overflow:hidden;border-radius:14px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.6);
}
/* --pos por foto: o corte 4:3 da referência come uma foto vertical, e com
   um valor único ora sobra testa, ora some o terno */
.retrato img{width:100%;height:100%;object-fit:cover;object-position:center var(--pos,32%)}
.retrato::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}

.depo{
  width:var(--dw);height:var(--dh);flex:none;margin-right:var(--dg);
  display:flex;flex-direction:column;padding:26px 28px;border-radius:16px;
  /* a sombra é o que separa o cartão do preto: só o fundo translúcido
     desaparecia no fundo da seção */
  background:rgba(255,255,255,.062);border:1px solid rgba(201,169,107,.2);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.depo__est{color:var(--dourado);font-size:12px;letter-spacing:.2em;margin-bottom:15px}
.prova .depo__txt{
  margin:0 0 auto;font-size:14.5px;line-height:1.62;
  color:rgba(245,245,245,.8);overflow:hidden;
}
.depo__quem{display:block;margin-top:18px;padding-top:15px;border-top:1px solid rgba(201,169,107,.14)}
.depo__quem b{display:block;font-size:13px;letter-spacing:.05em;color:var(--off);font-weight:500}
.depo__quem i{
  display:block;font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,245,245,.38);margin-top:5px;
}

.esteira-fade{position:absolute;left:0;right:0;height:58%;z-index:2;pointer-events:none}
.esteira-fade--topo{top:0;background:linear-gradient(180deg,var(--preto) 0%,rgba(11,11,11,.55) 52%,rgba(11,11,11,0) 100%)}
.esteira-fade--base{bottom:0;background:linear-gradient(0deg,var(--preto) 0%,rgba(11,11,11,.55) 52%,rgba(11,11,11,0) 100%)}

.esteira-frente{
  position:relative;z-index:3;text-align:center;
  padding:clamp(72px,11vw,124px) clamp(26px,7vw,92px);
  background:radial-gradient(ellipse 78% 100% at 50% 50%,
    rgba(11,11,11,.94) 0%,rgba(11,11,11,.86) 34%,rgba(11,11,11,.62) 56%,
    rgba(11,11,11,.32) 72%,rgba(11,11,11,.1) 86%,rgba(11,11,11,0) 100%);
}
.prova__nota{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:22px 0 0!important;
}
.prova__nota b{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--off)}
.prova__est{color:var(--dourado);font-size:15px;letter-spacing:.16em}
.prova__nota span:last-child{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,245,245,.5);
}

/* ---------- esteira de cartões ---------- */
.esteira{overflow:hidden}
.marca-dagua{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-style:italic;font-size:clamp(220px,34vw,460px);
  color:rgba(201,169,107,.045);pointer-events:none;user-select:none;line-height:1;
}
.esteira .h2,.esteira .cartoes-nav,.esteira .center{position:relative;z-index:1}
.cartoes-nav{position:relative}
/* os cinco cards ficam sempre inteiros: quebram em linhas centralizadas e nunca
   rolam de lado (no celular, um card por vez, ocupando a largura toda) */
.cartoes{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px;margin:44px 0 40px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cartoes::-webkit-scrollbar{display:none}
/* setas de navegação: só existem no mobile — no desktop os cinco cards já
   cabem/rolam com mouse, a seta ali seria redundante */
.cartoes__seta{display:none}
.cartao{
  background:#fff;border-radius:14px;padding:26px 24px;scroll-snap-align:start;
  flex:1 1 220px;max-width:300px;min-width:0;
}
.cartao__ic{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#14161a;color:var(--dourado);margin-bottom:18px;
}
.cartao__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cartao h3{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--preto);margin-bottom:9px;line-height:1.35}
.cartao p{font-size:14px!important;color:rgba(11,11,11,.6)!important;margin:0!important}

/* ---------- vitrine de ternos e smokings ---------- */
.produtos__intro{
  max-width:640px;margin:14px auto 0!important;text-align:center;
  font-size:15px!important;color:rgba(245,245,245,.6)!important;
}
.categoria-produto{max-width:1180px;margin:0 auto;padding-top:44px}
.categoria-produto__topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:4px;
}
.categoria-produto__topo h3{
  font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);font-weight:400;
}
.categoria-produto__topo a{
  display:flex;align-items:center;gap:6px;flex:none;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dourado);text-decoration:none;white-space:nowrap;
}
.categoria-produto__topo a svg{
  width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s;
}
.categoria-produto__topo a:hover svg{transform:translateX(3px)}
/* grade, não trilho: nenhuma foto fica cortada na borda. Doze peças dividem
   certo em 6, 4 ou 3 colunas, então a última linha nunca sobra pela metade */
.esteira-prod{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:30px 16px;margin:28px 0 8px;
}
@media (max-width:1000px){.esteira-prod{grid-template-columns:repeat(4,minmax(0,1fr))}}
.peca{min-width:0}
.peca__foto{
  aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:#14161a;border:1px solid rgba(201,169,107,.18);
}
.peca__foto img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,center 25%);display:block;
}
.produtos>.center{margin-top:72px}
.peca h4{
  font-family:var(--serif);font-size:16px;font-weight:400;color:var(--off);
  margin:14px 2px 3px;line-height:1.3;
}
.peca__tipo{
  display:block;margin:0 2px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dourado);
}
/* celular: grade de 3 colunas — nove peças à vista de uma vez em vez de
   duas num trilho de rolagem */
@media (max-width:640px){
  .esteira-prod{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}
  .peca__foto{border-radius:10px}
  .peca h4{font-size:12.5px;margin:9px 1px 0}
  .peca__tipo{display:none}
}

/* ---------- selos flutuantes ---------- */
.passo__foto .selos{
  position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
}
.selos li{
  background:rgba(20,22,26,.86);backdrop-filter:blur(8px);
  border:1px solid rgba(201,169,107,.24);border-radius:11px;
  padding:13px 20px;
}
.selos b{display:block;font-family:var(--serif);font-size:22px;font-weight:400;color:var(--off)}
.selos span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,245,245,.5)}

/* ---------- rodapé ---------- */
.rodape{background:#08090b;padding:clamp(52px,6vw,78px) clamp(20px,5vw,64px) 0}
.rodape__grade{
  display:grid;gap:clamp(28px,4vw,56px);max-width:1180px;margin:0 auto 46px;
  grid-template-columns:1.5fr 1fr 1fr 1.25fr;
}
.rodape__logo{
  font-family:var(--serif);font-size:24px;color:var(--off)!important;margin:0 0 6px!important;
}
.rodape__cat{
  font-size:10.5px!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado)!important;margin:0 0 16px!important;
}
.rodape p{font-size:14px!important;color:rgba(245,245,245,.45)!important}
.rodape h4{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--off);font-weight:500;margin:0 0 16px;
}
.rodape nav{display:grid;gap:11px;align-content:start}
.rodape nav a,.rodape__contato a{
  font-size:14px;color:rgba(245,245,245,.5);text-decoration:none;transition:color .25s;
}
.rodape nav a:hover,.rodape__contato a:hover{color:var(--dourado)}
.rodape__contato{display:grid;gap:13px;align-content:start}
.rodape__contato a,.rodape__end{display:flex;gap:11px;align-items:flex-start}
.rodape__contato svg{
  width:16px;height:16px;flex:none;margin-top:3px;
  fill:none;stroke:var(--dourado);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.rodape__end{font-size:14px!important;line-height:1.55}
.rodape__base{
  max-width:1180px;margin:0 auto;padding:22px 0 28px;
  border-top:1px solid rgba(245,245,245,.07);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:rgba(245,245,245,.32);
}
.rodape__base a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.rodape__base a:hover{color:var(--dourado)}

/* whatsapp flutuante — mesmo par de frisos dos outros botões */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(155deg,#e4cd9a 0%,var(--dourado) 46%,#b8925a 100%);
  display:grid;place-items:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(11,11,11,.16),
    0 10px 28px -4px rgba(201,169,107,.5),
    0 8px 26px rgba(0,0,0,.4);
  transition:transform .25s,box-shadow .25s;
}
.wa:hover{
  transform:scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(11,11,11,.14),
    0 14px 34px -4px rgba(201,169,107,.65),
    0 10px 28px rgba(0,0,0,.45);
}
.wa svg{width:30px;height:30px;fill:var(--preto)}


/* ---------- responsivo ---------- */
/* ---------- menu mobile ---------- */
.burger{
  display:none;width:44px;height:44px;flex:none;margin-left:4px;padding:0;
  background:none;border:0;cursor:pointer;
  /* grid fixo de 3 faixas: com margin as caixas estouravam e as listras
     saíam desalinhadas */
  place-content:center;gap:6px;
  /* acima do painel (z 58), senão o X fica escondido e não dá pra fechar */
  position:relative;z-index:59;
}
.burger span{
  display:block;width:24px;height:1.5px;background:var(--off);border-radius:2px;
  transition:transform .32s ease,opacity .2s ease;
}
body.menu-on .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-on .burger span:nth-child(2){opacity:0}
body.menu-on .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:grid}
  .nav__cta{display:none}
  /* sem backdrop-filter aqui: ele torna a nav bloco de contenção e prenderia
     o painel position:fixed dentro da pílula em vez de cobrir a tela. Sem o
     desfoque o fundo translúcido vira borrão, então aqui ele fica sólido —
     a luz da borda continua, que é o que dá a leitura de vidro. */
  .nav::after,.nav.is-solid::after{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(26,26,29,.9);
  }
  .nav__links{
    position:fixed;inset:0;z-index:58;margin-left:0;
    flex-direction:column;align-items:center;justify-content:center;gap:0;
    background:rgba(11,11,11,.97);backdrop-filter:blur(16px);
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
  }
  /* o painel é opaco e cobre a tela toda, então não trava o scroll do body:
     overflow:hidden em body faz alguns navegadores móveis pularem pro topo */
  body.menu-on .nav__links{opacity:1;visibility:visible}
  .nav__links a{
    font-family:var(--serif);font-size:27px;letter-spacing:.01em;
    text-transform:none;color:var(--off);padding:17px 0;
    opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s;
  }
  body.menu-on .nav__links a{opacity:1;transform:none}
  .nav__links a:nth-child(2){transition-delay:.05s}
  .nav__links a:nth-child(3){transition-delay:.1s}
  .nav__links a:nth-child(4){transition-delay:.15s}
  .nav__links a:nth-child(5){transition-delay:.2s}
  .nav__links a:nth-child(6){transition-delay:.25s}
  .nav__links a::after{left:50%;transform:translateX(-50%)}

  .dupla,.destaque,.linha{grid-template-columns:1fr}
  .destaque__corpo,.linha__corpo{display:block}
  .linha--inv .linha__foto{order:0}
  .dupla--inv .grade-fotos{order:-1}
  .destaque__foto img,.linha__foto img{min-height:280px;max-height:340px}
  .monograma{right:18px;bottom:18px;width:76px;height:76px;font-size:16px}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .esteira-sec{--dw:300px;--dh:272px;--dg:22px}
  .vitrine{--vw:240px;--vh:390px;--vg:14px}
  /* três selos dividem a largura da foto: com rolagem lateral o terceiro
     ficava colado na borda direita e cortado */
  .passo__foto .selos{position:static;transform:none;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
  .selos li{padding:13px 12px}
  .selos span{display:block;line-height:1.6;letter-spacing:.1em}
  /* empilhado, a foto da fachada não precisa mais cobrir uma altura fixa —
     mostra ela inteira em vez de recortar em cima/embaixo */
  .passo__foto img{height:auto}
  .rail{display:none}
}
/* Abaixo de 900px o trio nítido fica mais largo que a tela: não sobra
   lateral nenhuma e o desfoque some. A janela vira um cartão só, e as setas
   acompanham essa janela em vez de irem pras bordas da tela. */
@media (max-width:900px){
  .vitrine__vidro--esq{right:calc(50% + (var(--vw) * .5 + var(--vg)))}
  .vitrine__vidro--dir{left:calc(50% + (var(--vw) * .5 + var(--vg)))}
  .vitrine__seta--ant {left:calc(50% - (var(--vw) * .5 + var(--vg)) - 20px)}
  .vitrine__seta--prox{left:calc(50% + (var(--vw) * .5 + var(--vg)) - 20px)}
}

@media (max-width:640px){
  body{font-size:16px}
  .rodape__grade{grid-template-columns:1fr}
  .esteira-sec{--dw:248px;--dh:250px;--dg:15px;min-height:560px}
  .vitrine{--vw:196px;--vh:320px;--vg:11px}
  .prova__nota b{font-size:28px}
  /* um card inteiro por vez, sem sobra do próximo: nunca aparece texto cortado */
  .cartoes{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory}
  .cartao{flex:0 0 100%;max-width:none}
  /* seta visível de sobra: sem ela ninguém percebe que dá pra arrastar */
  .cartoes__seta{
    display:grid;place-items:center;position:absolute;top:44%;
    transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
    background:rgba(11,11,11,.6);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22);color:var(--off);
    z-index:2;transition:opacity .25s;padding:0;cursor:pointer;
  }
  .cartoes__seta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .cartoes__seta--ant{left:-6px}
  .cartoes__seta--prox{right:-6px}
  .cartoes__seta.is-off{opacity:0;pointer-events:none}
  .monograma{display:none}
  /* sem o círculo OFM ao lado, o nome é a marca inteira — não pode sumir */
  .nav__name{font-size:13px;letter-spacing:.11em}
  .fold__inner--left{margin-left:0}
  .stats{gap:26px}
  .stats b{font-size:36px}
  .film__veil{background:linear-gradient(180deg,rgba(11,11,11,.8) 0%,rgba(11,11,11,.45) 40%,rgba(11,11,11,.9) 100%)}
}

/* ---------- granulado ----------
   Uma camada só, fixa, por cima de tudo — vídeo, nav, cartões. pointer-
   events:none pra nunca atrapalhar clique. mix-blend-mode:overlay em vez de
   pintar cinza por cima: em overlay o granulado escurece sombra e clareia
   luz, que é como grão de filme se comporta de verdade, e não achata as
   seções claras nem lava as escuras. A textura é ruído puro gerado em Node —
   testei antes com geq do ffmpeg e saía com listras periódicas, então troquei
   pela fonte de aleatoriedade de verdade. */
.granulado{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url(../assets/granulado.png);
  background-repeat:repeat;background-size:256px 256px;
  opacity:.05;mix-blend-mode:overlay;
  animation:granulado-anima .5s steps(1) infinite;
}
@keyframes granulado-anima{
  0%  {background-position:0 0}
  20% {background-position:-71px 43px}
  40% {background-position:39px -83px}
  60% {background-position:-53px -29px}
  80% {background-position:67px 19px}
  100%{background-position:0 0}
}
@media (prefers-reduced-motion:reduce){
  .granulado{animation:none}
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .film{height:auto}
  .film__stage{position:relative;height:70vh;margin-bottom:0}
  .fold{height:auto;min-height:0;padding:70px clamp(16px,4vw,48px)}
  .fold__inner{opacity:1;transform:none}
  /* animation-name, não duration: o .01ms do * acima faria a esteira piscar
     em laço infinito em vez de parar */
  .fita__correr{animation-name:none}
}

/* ---------- entrada ao rolar — desfoque de movimento ----------
   js/revelar.js marca cada bloco de texto/foto com data-rev/data-rev-foto
   e liga .is-in quando ele entra na tela; sem o script, o atributo nunca
   existe e o conteúdo fica visível normal — nunca depende de JS pra
   aparecer. O blur é o que dá a leitura de "desfoque de movimento"; só
   opacidade+translate pareceria um fade comum. */
[data-rev],[data-rev-foto]{
  opacity:0;filter:blur(16px);
  transition:opacity .9s cubic-bezier(.16,.72,.24,1),
             transform .9s cubic-bezier(.16,.72,.24,1),
             filter .9s cubic-bezier(.16,.72,.24,1);
  transition-delay:var(--rev-atraso,0ms);
  will-change:opacity,transform,filter;
}
[data-rev]{transform:translateY(36px)}
[data-rev-foto]{transform:translateX(-30px) scale(1.03)}
[data-rev].is-in,[data-rev-foto].is-in{opacity:1;filter:blur(0);transform:translateY(0) translateX(0) scale(1)}

/* ---------- questionário antes do WhatsApp ----------
   Todo CTA de WhatsApp abre isto em vez de ir direto: três campos, curto o
   bastante pra não parecer formulário, o suficiente pra o lead chegar
   qualificado no chat. */
body.qualifica-on{overflow:hidden}
.qualifica{position:fixed;inset:0;z-index:200}
.qualifica[aria-hidden="true"]{display:none}
.qualifica__vidro{
  position:absolute;inset:0;
  background:rgba(11,11,11,.72);backdrop-filter:blur(6px) saturate(140%);
}
.qualifica__caixa{
  position:relative;z-index:1;width:min(420px,calc(100vw - 40px));
  margin:min(9vh,80px) auto 0;max-height:calc(100vh - 18vh);overflow-y:auto;
  padding:clamp(30px,4vw,42px) clamp(26px,4vw,36px) 34px;
  border-radius:18px;border:1px solid rgba(201,169,107,.22);
  background:linear-gradient(180deg,rgba(30,30,34,.98),rgba(15,15,17,.99));
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
}
.qualifica__x{
  position:absolute;top:16px;right:16px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;border:none;
  background:rgba(255,255,255,.06);color:rgba(245,245,245,.7);cursor:pointer;
}
.qualifica__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.qualifica__x:hover{background:rgba(255,255,255,.12);color:var(--off)}
.qualifica h3{font-size:clamp(22px,3vw,27px);color:var(--off);margin-bottom:8px}
.qualifica__sub{font-size:13.5px!important;color:rgba(245,245,245,.55)!important;margin:0 0 26px!important}
.qualifica__campo{display:block;margin-bottom:16px}
.qualifica__campo span{
  display:block;margin-bottom:7px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(245,245,245,.5);
}
.qualifica__campo span i{
  text-transform:none;letter-spacing:0;font-style:normal;color:rgba(245,245,245,.3);
}
.qualifica__campo input,.qualifica__campo select{
  width:100%;padding:13px 14px;border-radius:9px;
  border:1px solid rgba(245,245,245,.16);background:rgba(255,255,255,.045);
  color:var(--off);font:inherit;font-size:14.5px;
}
.qualifica__campo select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  padding-right:36px;
}
.qualifica__campo select option{background:#1c1c1f;color:var(--off)}
.qualifica__campo input::placeholder{color:rgba(245,245,245,.3)}
.qualifica__campo input:focus,.qualifica__campo select:focus{
  outline:none;border-color:rgba(201,169,107,.55);background:rgba(255,255,255,.07);
}
.qualifica #qualificaForm .btn{width:100%;justify-content:center;margin-top:6px}
@media (max-width:480px){
  .qualifica__caixa{margin-top:0;max-height:100vh;height:100%;border-radius:0;width:100%}
}


/* ---------- páginas do menu (js/abas.js) ----------
   O <html> leva data-pagina="inicio|quem-somos|contato". Na home aparecem
   o filme, "Ocasiões" e "Também vestimos"; nas outras, só a página escolhida. */
.abas{background:var(--preto);padding-top:clamp(104px,10vw,132px)}
.nav__links a.is-ativo{color:var(--dourado)}
.nav__links a.is-ativo::after{width:100%}
html:not([data-pagina="inicio"]) .film,
html:not([data-pagina="inicio"]) #ocasioes,
html:not([data-pagina="inicio"]) #tambem{display:none}
html[data-pagina="inicio"] .abas{display:none}
.abas__painel{display:none}
html[data-pagina="quem-somos"] #aba-quem-somos,
html[data-pagina="contato"] #aba-contato{display:block;animation:aba-entra .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes aba-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.abas__painel{animation:none!important}}
/* sem o filme por trás, o vidro do menu já nasce firme */
html:not([data-pagina="inicio"]) .nav::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.02) 54%,rgba(255,255,255,.08)),
    rgba(24,24,29,.62);
  backdrop-filter:blur(26px) saturate(200%);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3);
}
@media (max-width:1000px){
  html:not([data-pagina="inicio"]) .nav::after{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(26,26,29,.9)}
}
/* a primeira seção encosta mais no menu; a última mantém o respiro de baixo */
.abas__painel > .sec:first-child{padding-top:clamp(20px,3vw,40px)}
.abas__painel > .sec:last-child{padding-bottom:clamp(56px,7vw,96px)}
.nota-google{text-align:center}

/* aba Contato: cards com grade, brilho dourado, ícone que sobe e tags que se abrem */
.contato-aba__grade{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  max-width:740px;margin:clamp(28px,4vw,44px) auto 0;
}
.cc{
  --ouro:#C9A96B;--ouro2:#e4cd9a;--ease:cubic-bezier(.6,.6,0,1);
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border-radius:14px;border:1px solid rgba(201,169,107,.22);
  background:#0e0e0f;box-shadow:0 14px 40px -18px rgba(0,0,0,.7);
  transition:border-color .4s;
}
.cc:hover,.cc:focus-visible{border-color:rgba(201,169,107,.6)}
.cc__visual{position:relative;display:block;height:180px;overflow:hidden}
.cc__visual > span{position:absolute}
.cc__grade{
  inset:0;z-index:4;pointer-events:none;opacity:.7;
  background:linear-gradient(to right,rgba(201,169,107,.13) 1px,transparent 1px),linear-gradient(to bottom,rgba(201,169,107,.13) 1px,transparent 1px);
  background-size:20px 20px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);
}
.cc__brilho{
  inset:0;z-index:5;
  background:radial-gradient(ellipse 50% 54% at 50% 54%,rgba(201,169,107,.25),rgba(201,169,107,.15) 34%,transparent 100%);
}
.cc__subida{
  inset:0;z-index:6;opacity:0;transform:translateY(100%);
  background:linear-gradient(180deg,rgba(201,169,107,0) 35%,rgba(201,169,107,.3) 100%);
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.cc__tag{
  left:0;right:0;top:0;z-index:6;display:flex;flex-direction:column;align-items:flex-start;
  margin:16px auto 0;width:max-content;max-width:calc(100% - 32px);
  padding:7px 10px;border-radius:7px;border:1px solid rgba(245,245,245,.14);
  background:rgba(245,245,245,.06);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.cc__tag-t{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--off)}
.cc__tag-t i{width:8px;height:8px;border-radius:50%;background:var(--ouro);flex:none}
.cc__tag-s{margin-top:3px;font-size:11.5px;color:rgba(245,245,245,.55)}
.cc__pills{inset:0;z-index:7;display:block;opacity:0;transition:opacity .5s var(--ease)}
.cc__pill{
  position:absolute;left:50%;top:50%;margin:0;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:3px 9px;border-radius:999px;font-size:10.5px;color:var(--off);
  border:1px solid rgba(245,245,245,.16);background:rgba(11,11,11,.7);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transform:translate(-50%,-50%);transition:transform .5s var(--ease);
}
.cc__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ouro)}
.cc__pill--2::before{background:var(--ouro2)}
/* ícone: metade aparece na borda de baixo; no hover sobe até o centro e cresce */
.cc__ico{
  left:50%;top:120px;z-index:7;width:120px;height:120px;margin-left:-60px;
  display:grid;place-items:center;color:var(--off);
  transition:transform .5s var(--ease);
}
.cc__anel{position:absolute;inset:0;width:100%;height:100%}
.cc__anel circle{fill:none;transform:rotate(-90deg);transform-origin:50% 50%}
.cc__anel-base{stroke:rgba(245,245,245,.28);stroke-width:10;opacity:.5}
.cc__anel-1,.cc__anel-2{stroke-dasharray:251.327;transition:stroke-dashoffset .5s var(--ease)}
.cc__anel-1{stroke:var(--ouro);stroke-width:14;stroke-dashoffset:219.9}
.cc__anel-2{stroke:var(--ouro2);stroke-width:14;stroke-dashoffset:251.327}
.cc__svg{
  position:relative;width:34px;height:34px;fill:none;stroke:var(--off);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.cc__corpo{padding:16px;border-top:1px solid rgba(245,245,245,.08)}
.cc__corpo h3{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--off);line-height:1.2;margin-bottom:6px}
.cc__corpo p{font-size:13.5px;color:rgba(245,245,245,.55);margin:0;line-height:1.5}
.cc:hover .cc__ico,.cc:focus-visible .cc__ico{transform:translateY(-90px) scale(1.1)}
.cc:hover .cc__tag,.cc:focus-visible .cc__tag{transform:translateY(100%);opacity:0}
.cc:hover .cc__subida,.cc:focus-visible .cc__subida{transform:none;opacity:1}
.cc:hover .cc__pills,.cc:focus-visible .cc__pills{opacity:1}
.cc:hover .cc__pill,.cc:focus-visible .cc__pill{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}
.cc:hover .cc__anel-1,.cc:focus-visible .cc__anel-1{stroke-dashoffset:85.5}
.cc:hover .cc__anel-2,.cc:focus-visible .cc__anel-2{stroke-dashoffset:0}
.contato-aba .center{margin-top:38px}
@media (max-width:900px){.contato-aba__grade{grid-template-columns:1fr;max-width:420px}}
@media (prefers-reduced-motion:reduce){.cc *{transition:none!important}}