/* ════════════════════════════════════════════════════════════
   MONLEBU COOKIES — salon noir
   Direção de arte: LRGZ · lrgz.com.br
   ════════════════════════════════════════════════════════════ */

/* ── 0. Tipografia (auto-hospedada) ────────────────────────── */
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Bodoni Moda"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Pinyon Script"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); }

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root{
  /* Cor */
  --noir:        #0B0908;
  --noir-2:      #12100E;
  --noir-3:      #1A1614;
  --bordeaux:    #6E2A29;
  --bordeaux-dp: #3A1214;
  --laiton:      #C0964C;
  --laiton-lt:   #E7CE9B;
  --laiton-dk:   #7E5A22;
  --creme:       #F1E9DC;
  --creme-dim:   #A29584;
  --creme-faint: #8A7E70;

  /* Tipografia */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --script:  "Pinyon Script", "Snell Roundhand", cursive;

  /* Ritmo */
  --gut:  clamp(1.25rem, 4vw, 3.5rem);
  --pad:  clamp(1.25rem, 5vw, 6rem);
  --sec:  clamp(5rem, 13vw, 12rem);
  --maxw: 1400px;

  /* Medidas vivas — o JS mantém estas duas atualizadas */
  --nav-h:    58px;
  --ribbon-h: 38px;

  /* Movimento */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --slow: .9s;
}

/* Respeita o entalhe do iPhone em paisagem */
@supports (padding: max(0px)){
  .nav,.sala,.hero,.closing,.foot__top,.foot__bar,.seal-rule{
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }
  .drawer{
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }
}

/* ── 2. Reset ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 1rem);
}
body{
  margin:0;
  background:var(--noir);
  color:var(--creme);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .25vw,1.075rem);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,p,dl,dd,figure,blockquote{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--bordeaux); color:var(--creme); }

:focus-visible{
  outline:2px solid var(--laiton-lt);
  outline-offset:3px;
  border-radius:2px;
}
main:focus{ outline:none; }

/* Toda âncora do site para longe da barra fixa */
[id]{ scroll-margin-top:calc(var(--nav-h) + 1rem); }

.skip{
  position:fixed; top:0; left:50%; transform:translate(-50%,-140%);
  z-index:999; padding:.75rem 1.25rem; background:var(--laiton); color:#1A1200;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; transition:transform .3s var(--ease);
}
.skip:focus{ transform:translate(-50%,0); }

/* ── 3. Textura: grão de filme ─────────────────────────────── */
.grain{
  position:fixed; inset:-20%; z-index:900; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(5) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-2%,1.5%)}
  40%{transform:translate(1.5%,-2%)} 60%{transform:translate(-1.5%,-1.5%)}
  80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)}
}

/* ── 4. Preloader ──────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:950;
  display:grid; place-items:center;
  background:var(--noir);
  transition:opacity .7s var(--ease), visibility .7s;
  /* Rede de segurança: sai sozinho mesmo se o JS falhar */
  animation:loaderFailsafe .7s var(--ease) 4s forwards;
}
@keyframes loaderFailsafe{ to{ opacity:0; visibility:hidden; } }
.loader__seal{
  width:clamp(56px,7vw,78px); height:auto;
  opacity:0; transform:scale(.82) rotate(-14deg);
  animation:sealIn 1.05s var(--ease-out) .1s forwards;
  filter:drop-shadow(0 12px 34px rgba(192,150,76,.28));
}
@keyframes sealIn{
  0%  { opacity:0; transform:scale(.82) rotate(-14deg); }
  55% { opacity:1; transform:scale(1.04) rotate(2deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
.is-loaded .loader{ animation:none; opacity:0; visibility:hidden; }
.is-loaded .loader__seal{ transform:scale(.6) translateY(-8px); transition:transform .7s var(--ease); }

/* ── 5. Barra do cupom ─────────────────────────────────────── */
.ribbon{
  position:relative; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  min-height:38px; padding:.4rem 3rem;
  background:linear-gradient(90deg,var(--bordeaux-dp),var(--bordeaux) 45%,var(--bordeaux-dp));
  border-bottom:1px solid rgba(192,150,76,.24);
}
.ribbon__text{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--creme); text-align:center; line-height:1.5;
}
.ribbon__code{ color:var(--laiton-lt); font-weight:500; white-space:nowrap; }
.ribbon__sep{ opacity:.45; margin:0 .35rem; }
.ribbon__close{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:34px; height:34px;
  color:var(--creme); opacity:.6; transition:opacity .25s;
}
.ribbon.is-gone{ display:none; }

/* ── 6. Navegação ──────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; gap:var(--gut);
  padding:1rem var(--pad);
  transition:transform .45s var(--ease), background-color .45s var(--ease),
             backdrop-filter .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(11,9,8,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:rgba(192,150,76,.16);
}
.nav.is-hidden{ transform:translateY(-118%); }

.nav__brand{ display:flex; align-items:center; gap:clamp(.7rem,1.4vw,1.1rem); margin-right:auto; }
.nav__brand img{
  width:clamp(46px,5.2vw,68px); height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(192,150,76,.28));
  transition:transform .5s var(--ease-out);
}
.nav__brandtext{
  display:grid; line-height:1;
  font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.6rem); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
}
.nav__brandtext em{
  font-family:var(--script); font-style:normal; text-transform:none;
  font-size:1.15em; letter-spacing:0; color:var(--laiton-lt);
  margin-top:-.05em; margin-left:.1em;
}
@media (hover:hover){
  .nav__brand:hover img{ transform:scale(1.06) rotate(-4deg); }
}
.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{
  position:relative; display:flex; align-items:baseline; gap:.5rem;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--creme-dim); transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-.4rem; height:1px; width:100%;
  background:var(--laiton); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a.is-current{ color:var(--creme); }
.nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; opacity:.55; }
.nav__num{
  font-family:var(--display); font-size:.62rem; font-style:italic;
  color:var(--laiton); letter-spacing:.04em;
}

/* ── 7. Botões ─────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.6rem; overflow:hidden; min-height:44px;
  font-size:.74rem; letter-spacing:.19em; text-transform:uppercase; font-weight:400;
  border:1px solid var(--laiton-dk); border-radius:1px;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .35s var(--ease-out);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,var(--laiton-lt),var(--laiton) 45%,var(--laiton-dk));
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn:focus-visible::before{ transform:translateY(0); }
.btn:focus-visible{ color:#1B1305; border-color:var(--laiton-lt); }

.btn--gold{ color:var(--laiton-lt); background:rgba(192,150,76,.07); }
.btn--ghost{ color:var(--creme-dim); border-color:rgba(241,233,220,.34); }
.btn--ghost::before{ background:linear-gradient(120deg,var(--creme),#D9CDBA); }
.btn--ghost:focus-visible{ color:var(--noir); border-color:var(--creme); }
.btn--lg{ padding:1.05rem 2.3rem; font-size:.78rem; }
.nav__cta{ padding:.72rem 1.35rem; min-height:0; }

@media (hover:hover){
  .btn:hover::before{ transform:translateY(0); }
  .btn:hover{ color:#1B1305; border-color:var(--laiton-lt); }
  .btn--ghost:hover{ color:var(--noir); border-color:var(--creme); }
  .ribbon__close:hover{ opacity:1; }
  .nav__links a:hover{ color:var(--creme); }
  .nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; opacity:1; }
}

/* Botão magnético — compõe com a animação de entrada via variáveis */
.js-magnet{ transform:translate(var(--mx,0px), var(--my,0px)); }

/* ── 8. Menu mobile ────────────────────────────────────────── */
.burger{
  display:none; width:44px; height:44px; position:relative; flex:none;
}
.burger span{
  position:absolute; left:11px; width:22px; height:1px; background:var(--creme);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:75;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(1.5rem,5vh,3rem);
  padding:calc(var(--nav-h) + 2.5rem) var(--pad) max(2rem, env(safe-area-inset-bottom));
  background:var(--noir-2);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0; transition:opacity .4s var(--ease);
}
/* Sem isto o menu vira uma camada invisível cobrindo o site inteiro */
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; }
.drawer__nav{ display:flex; flex-direction:column; gap:.2rem; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--display); font-size:clamp(1.75rem,8.5vw,2.75rem); font-weight:400;
  line-height:1.25; padding:.5rem 0; border-bottom:1px solid rgba(241,233,220,.08);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(.05s * var(--i,0));
}
.drawer.is-open .drawer__nav a{ opacity:1; transform:none; }
.drawer__nav em{
  font-size:.8rem; font-style:italic; color:var(--laiton);
  min-width:2.2ch; flex:none;
}
.drawer__foot{ display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; }
.drawer__ig{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--creme-dim); }

/* ── 9. Hero ───────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate;
  min-height:calc(100vh - var(--ribbon-h));
  min-height:calc(100svh - var(--ribbon-h));
  display:grid; align-items:center;
  padding:max(clamp(4rem,12vh,9rem), calc(var(--nav-h) + 2rem)) var(--pad) clamp(5rem,14vh,9rem);
  margin-top:calc(-1 * var(--nav-h));
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__video,.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:62% 52%; }
.hero__video{
  opacity:0; transition:opacity 1.4s var(--ease) .2s;
  background:var(--noir) center/cover no-repeat;
}
.is-loaded .hero__video{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,9,8,.96) 0%, rgba(11,9,8,.88) 34%, rgba(11,9,8,.5) 62%, rgba(11,9,8,.28) 100%),
    linear-gradient(180deg, rgba(11,9,8,.86) 0%, rgba(11,9,8,.12) 32%, rgba(11,9,8,.55) 76%, var(--noir) 100%),
    radial-gradient(120% 100% at 78% 46%, transparent 0%, rgba(58,18,20,.28) 68%, rgba(11,9,8,.6) 100%);
}

.hero__inner{ position:relative; max-width:min(48rem,100%); }
.hero__eyebrow{
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase; color:var(--laiton);
  margin-bottom:1.75rem;
}
.hero__seal{
  width:clamp(64px,7vw,88px); height:auto; margin-bottom:1.5rem;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(192,150,76,.22));
}
.hero__title{ margin:0 0 1.4rem; line-height:.9; }
.hero__word{ display:block; overflow:hidden; }
.hero__word > span{
  display:block;
  font-family:var(--display); font-optical-sizing:auto;
  font-size:clamp(2.9rem,12.5vw,9.5rem); font-weight:400;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--creme);
}
.hero__script{
  display:block; margin-top:-.18em; margin-left:.06em;
  font-family:var(--script); font-style:normal;
  font-size:clamp(2rem,7.5vw,5.4rem); line-height:1;
  color:var(--laiton-lt);
}
.hero__line{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.65rem); color:var(--creme);
  margin-bottom:.85rem;
}
.hero__sub{
  max-width:34rem; color:var(--creme-dim); font-size:.98rem; line-height:1.75;
  margin-bottom:2.4rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

.hero__cue{
  position:absolute; left:var(--pad); bottom:clamp(1.5rem,5vh,3rem);
  display:flex; align-items:center; gap:.85rem;
  font-size:.63rem; letter-spacing:.34em; text-transform:uppercase; color:var(--creme-faint);
  transition:color .3s;
}
.hero__cue i{
  display:block; width:58px; height:1px; background:rgba(192,150,76,.35); position:relative; overflow:hidden;
}
.hero__cue i::after{
  content:""; position:absolute; inset:0; background:var(--laiton);
  transform:translateX(-100%); animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(100%)} 100%{transform:translateX(100%)} }
@media (hover:hover){ .hero__cue:hover{ color:var(--laiton); } }
@supports (padding: max(0px)){ .hero__cue{ left:max(var(--pad), env(safe-area-inset-left)); } }

/* Entrada orquestrada do hero */
[data-seq]{ opacity:0; transform:translateY(22px); }
.is-loaded [data-seq]{
  animation:seqIn .95s var(--ease-out) forwards;
  animation-delay:calc(.14s * var(--i,1));
}
.is-loaded .hero__word > span{
  animation:wordIn 1.15s var(--ease-out) forwards; animation-delay:.42s;
  transform:translateY(105%);
}
@keyframes seqIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes wordIn{ to{ transform:translateY(0); } }

/* ── 10. Divisor com selo ──────────────────────────────────── */
.seal-rule{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:0 var(--pad); max-width:var(--maxw); margin:0 auto;
}
.seal-rule img{ width:22px; height:auto; opacity:.85; }
.seal-rule__line{
  flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(192,150,76,.4),transparent);
}

/* ── 11. Salas (layout base) ───────────────────────────────── */
.sala{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:var(--sec) var(--pad);
}
.sala__tag{
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--laiton); margin-bottom:clamp(2rem,5vw,3.5rem);
}
.sala__tag::before{
  content:""; display:inline-block; width:34px; height:1px;
  background:var(--laiton); vertical-align:middle; margin-right:1rem; opacity:.6;
}

.h-display{
  font-family:var(--display); font-optical-sizing:auto;
  font-size:clamp(1.85rem,4.6vw,3.9rem); font-weight:400; line-height:1.08;
  letter-spacing:-.005em; color:var(--creme);
  max-width:16ch;
}
.lead{ max-width:46ch; color:var(--creme-dim); margin-top:1.5rem; }
.prose{ max-width:46ch; margin-top:1.75rem; display:grid; gap:1.15rem; color:var(--creme-dim); }
.prose p{ line-height:1.85; }

.quote{
  margin-top:2.75rem; padding-left:1.5rem;
  border-left:1px solid rgba(192,150,76,.4);
}
.quote p{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.9rem); line-height:1.3; color:var(--creme);
}
.quote cite{
  display:block; margin-top:.85rem; font-style:normal;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--laiton);
}

/* ── 12. Sala I — A casa ───────────────────────────────────── */
.casa__grid{
  display:grid; gap:var(--gut);
  grid-template-columns:repeat(12,1fr);
  align-items:start;
}
.casa__text{ grid-column:1 / span 5; }
.casa__art{ position:relative; }
.casa__art--a{ grid-column:7 / span 5; }
.casa__art--b{ grid-column:9 / span 4; margin-top:-24%; }
.casa__art img{
  width:100%; filter:saturate(.92) contrast(1.04);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.casa__art figcaption{
  margin-top:.9rem; font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--creme-faint);
}

/* ── 13. Marquee ───────────────────────────────────────────── */
.marquee{
  overflow:hidden; padding:clamp(1.5rem,4vw,3rem) 0;
  border-top:1px solid rgba(241,233,220,.06);
  border-bottom:1px solid rgba(241,233,220,.06);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 48s linear infinite; }
.marquee__track span{
  font-family:var(--display); font-size:clamp(2.4rem,7vw,5.5rem); font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(192,150,76,.28);
  padding-right:.3em;
}
.marquee__track i{ font-style:normal; -webkit-text-stroke:1px rgba(192,150,76,.16); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── 14. Sala II — A coleção (parede do salão) ─────────────── */
.colecao__head{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.wall{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2.25rem,3.5vw,3.25rem) var(--gut);
  align-items:stretch;
  padding-bottom:clamp(3rem,7vw,5rem);
}
/* Cards da mesma fileira terminam juntos: a linha de preço alinha */
.art{ display:flex; flex-direction:column; }

.art__frame{
  display:block; position:relative; padding:clamp(7px,.85vw,13px);
  background:
    linear-gradient(148deg,
      #EBD3A1 0%, #A87B31 14%, #E4C68F 27%, #7A5620 41%,
      #D9BC80 56%, #8B6527 70%, #E7CE9B 84%, #946C2C 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 34px 60px -26px rgba(0,0,0,.95),
    0 6px 18px -8px rgba(0,0,0,.7);
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.art__mount{
  display:block; position:relative; overflow:hidden;
  background:#F2F2F1;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
.art__mount::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(165deg, rgba(255,246,224,.20) 0%, transparent 46%);
  opacity:.7; transition:opacity .7s var(--ease);
}
/* As fotos oficiais tem fundo branco: nada de escurecer o branco */
.art__mount img{
  width:100%; display:block; aspect-ratio:1000/747; object-fit:cover;
  transform:scale(1.001);
  transition:transform 1.1s var(--ease-out);
}

/* Cartel — a etiqueta de museu */
.cartel{
  display:flex; flex-direction:column; flex:1;
  margin-top:1.05rem; padding-left:.9rem;
  border-left:1px solid rgba(192,150,76,.45);
}
.cartel__name{
  display:block; font-family:var(--display); font-weight:500;
  font-size:1.06rem; letter-spacing:.13em; text-transform:uppercase; color:var(--creme);
  line-height:1.2;
}
.cartel__name i{
  display:block; font-style:normal;
  font-size:.55em; letter-spacing:.34em; color:var(--laiton);
  margin-bottom:.35em; opacity:.85;
}
.cartel__desc{
  display:block; margin-top:.55rem; margin-bottom:.9rem; font-size:.79rem;
  color:var(--creme-dim); line-height:1.6;
}
.cartel__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  margin-top:auto; padding-top:.7rem;
  border-top:1px solid rgba(241,233,220,.1);
}
.cartel__weight{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--creme-faint);
}
.cartel__price{
  font-family:var(--display); font-weight:500; font-size:1.02rem;
  letter-spacing:.06em; color:var(--laiton-lt); white-space:nowrap;
}
.cartel__price--ask{
  font-family:var(--body); font-weight:300; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--creme-faint);
}
.cartel__cta{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--laiton);
  opacity:0; transform:translateY(4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease-out);
}
.cartel__cta i{ font-style:normal; }
.art:focus-visible .cartel__cta{ opacity:1; transform:none; }

@media (hover:hover){
  .art:hover .art__frame{
    transform:translateY(-6px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.3) inset,
      0 0 0 1px rgba(0,0,0,.55),
      0 48px 80px -28px rgba(0,0,0,1),
      0 0 60px -18px rgba(192,150,76,.35);
  }
  .art:hover .art__mount img{ transform:scale(1.045); }
  .art:hover .art__mount::after{ opacity:.35; }
  .art:hover .cartel__cta{ opacity:1; transform:none; }
  .art:hover .cartel__name{ color:#fff; }
}
/* No toque não existe hover: a chamada fica sempre visível, discreta */
@media (hover:none){
  .cartel__cta{ opacity:.75; transform:none; }
}

.wall__note{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  padding-top:clamp(2rem,5vw,3.5rem); border-top:1px solid rgba(241,233,220,.08);
}
.wall__note p{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--creme); margin-right:auto;
}

/* ── 15. Sala III — A trilha ───────────────────────────────── */
.trilha__grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:center;
}
.trilha__disc{ position:relative; display:grid; justify-items:center; gap:1.5rem; }
.trilha__disc::before{
  content:""; position:absolute; top:0; width:82%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(192,150,76,.22), transparent 68%);
  filter:blur(28px); pointer-events:none;
}

/* O disco: a arte da marca gira inteira, como um vinil de verdade */
.disc{
  position:relative; width:min(100%,420px); aspect-ratio:1;
  border-radius:50%;
  box-shadow:0 44px 80px -34px rgba(0,0,0,1);
}
/* Gira sempre — a vitrola da casa não para */
.disc__plate{
  position:absolute; inset:0;
  animation:spin 22s linear infinite;
  will-change:transform;
}
.disc__plate img{ width:100%; height:100%; object-fit:contain; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Brilho de salão parado sobre o disco que gira */
.disc__shine{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,240,205,.16), transparent 46%),
    radial-gradient(circle at 74% 82%, rgba(255,220,160,.09), transparent 42%);
}
.disc__cap{
  font-size:.63rem; letter-spacing:.3em; text-transform:uppercase; color:var(--creme-faint);
  text-align:center;
}
.disc__caplabel{ color:var(--laiton); margin-right:.6rem; }

.player{ margin-top:2rem; min-height:80px; }
.player iframe{ border-radius:2px; border:1px solid rgba(192,150,76,.2); width:100%; }
.player__note{
  margin-top:1rem; font-size:.76rem; line-height:1.6; color:var(--creme-faint);
  max-width:42ch;
}
.link-gold{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.25rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--laiton);
  border-bottom:1px solid rgba(192,150,76,.35); padding-bottom:.25rem;
  transition:color .3s, border-color .3s;
}
.link-gold i{ font-style:normal; transition:transform .35s var(--ease-out); }
@media (hover:hover){
  .link-gold:hover{ color:var(--laiton-lt); border-color:var(--laiton-lt); }
  .link-gold:hover i{ transform:translate(3px,-3px); }
}

/* ── 15b. Controle flutuante da trilha ─────────────────────── */
.pill{
  position:fixed; z-index:70;
  right:max(1rem, env(safe-area-inset-right));
  bottom:max(1rem, env(safe-area-inset-bottom));
  display:flex; align-items:stretch;
  background:rgba(11,9,8,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(192,150,76,.3); border-radius:99px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,1);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.pill[hidden]{ display:none; }
.pill.is-in{ opacity:1; transform:none; }
.pill__btn{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .5rem .6rem .6rem; min-height:44px;
  color:var(--laiton-lt);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
}
.pill__disc{
  width:20px; height:20px; border-radius:50%; flex:none;
  background:
    radial-gradient(circle at 50% 50%, var(--creme) 0 22%, transparent 23%),
    repeating-radial-gradient(circle at 50% 50%, #2A1D10 0 1px, #4A340F 1px 2px);
  box-shadow:0 0 0 1px rgba(192,150,76,.35);
  animation:spin 3.4s linear infinite; animation-play-state:paused;
}
.pill.is-playing .pill__disc{ animation-play-state:running; }
.pill__icon{ display:grid; place-items:center; width:18px; height:14px; }
.pill__icon svg{ grid-area:1/1; }
.pill__play{ display:none; }
.pill:not(.is-playing) .pill__pause{ display:none; }
.pill:not(.is-playing) .pill__play{ display:block; }
.pill__close{
  display:grid; place-items:center; width:38px; min-height:44px;
  color:var(--creme-faint); border-left:1px solid rgba(192,150,76,.18);
  border-radius:0 99px 99px 0;
}
@media (hover:hover){
  .pill__btn:hover{ color:var(--creme); }
  .pill__close:hover{ color:var(--creme); }
}
@media (max-width:400px){
  .pill__text{ display:none; }
}

/* ── 16. Sala IV — Pedidos ──────────────────────────────────── */
.sala--pedidos{ padding-top:clamp(3rem,7vw,5rem); }
.pedidos__grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  align-items:start;
}
.status{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.75rem;
  padding:.5rem 1rem; border:1px solid rgba(241,233,220,.14); border-radius:99px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creme-dim);
}
.status__dot{
  width:7px; height:7px; border-radius:50%; background:var(--creme-faint); flex:none;
}
.status.is-open{ border-color:rgba(192,150,76,.45); color:var(--laiton-lt); }
.status.is-open .status__dot{
  background:var(--laiton-lt); box-shadow:0 0 0 0 rgba(231,206,155,.55);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(231,206,155,0); } 100%{ box-shadow:0 0 0 0 rgba(231,206,155,0); } }
.status.is-closed .status__dot{ background:var(--bordeaux); }

.facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem var(--gut); margin-top:2.75rem;
}
.fact dt{
  font-size:.63rem; letter-spacing:.3em; text-transform:uppercase; color:var(--laiton);
  padding-bottom:.7rem; margin-bottom:.7rem; border-bottom:1px solid rgba(192,150,76,.22);
}
.fact dd{ margin:0; color:var(--creme-dim); font-size:.94rem; line-height:1.65; }
.fact__code{
  font-family:var(--display); font-weight:500; letter-spacing:.14em; color:var(--creme);
}
.pedidos__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.75rem; }
.pedidos__art img{
  width:100%; filter:saturate(.92) contrast(1.04);
  box-shadow:0 44px 80px -40px rgba(0,0,0,.95);
}
.pedidos__art figcaption{
  margin-top:.9rem; font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--creme-faint);
}

/* ── 17. Chamada final ─────────────────────────────────────── */
.closing{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; place-items:center;
  min-height:min(84vh,760px);
  padding:var(--sec) var(--pad);
  text-align:center;
}
.closing__bg{ position:absolute; inset:-18% 0; z-index:-2; }
.closing__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.closing::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(88% 72% at 50% 48%, rgba(11,9,8,.44), rgba(11,9,8,.9) 72%),
    linear-gradient(180deg,var(--noir),rgba(11,9,8,.3) 26%,rgba(58,18,20,.35) 68%,var(--noir));
}
.closing__inner{ max-width:38rem; }
.closing__eyebrow{
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase; color:var(--laiton);
  margin-bottom:1.5rem;
}
.closing__title{
  font-family:var(--display); font-weight:400; line-height:1.06;
  font-size:clamp(2rem,6vw,4.6rem); margin-bottom:2.5rem;
}
.closing__note{ margin-top:1.75rem; font-size:.82rem; color:var(--creme-dim); letter-spacing:.04em; }
.closing__note b{ color:var(--laiton-lt); font-weight:500; letter-spacing:.14em; }

/* ── 18. Rodapé ────────────────────────────────────────────── */
.foot{
  border-top:1px solid rgba(192,150,76,.16);
  background:var(--noir-2);
}
.foot__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(2.5rem,6vw,5rem);
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3.5rem,8vw,6rem) var(--pad);
}
.foot__brand img{ width:34px; height:auto; margin-bottom:1.25rem; }
.foot__word{
  font-family:var(--display); font-size:1.5rem; letter-spacing:.2em; text-transform:uppercase;
}
.foot__word em{
  display:block; font-family:var(--script); font-style:normal; text-transform:none;
  font-size:1.9rem; letter-spacing:0; color:var(--laiton-lt); margin-top:-.35rem;
}
.foot__tag{
  margin-top:1rem; font-family:var(--display); font-style:italic;
  color:var(--creme-dim); font-size:1rem;
}
.foot__nav{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut); }
.foot__nav h3{
  font-size:.63rem; letter-spacing:.3em; text-transform:uppercase; color:var(--laiton);
  font-weight:400; margin-bottom:1.15rem;
}
.foot__nav a{
  display:flex; align-items:baseline; gap:.4rem;
  font-size:.88rem; color:var(--creme-dim); margin-bottom:.6rem; line-height:1.6;
  transition:color .3s; width:fit-content;
}
.foot__nav a i{ font-style:normal; font-size:.7em; opacity:.6; }
/* A coluna de horário é informação, não link — e não deve parecer um */
.foot__col--info p{
  font-size:.85rem; color:var(--creme-faint); line-height:1.7; margin-bottom:1rem;
  letter-spacing:.02em;
}
@media (hover:hover){ .foot__nav a:hover{ color:var(--laiton-lt); } }

.foot__bar{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto;
  padding:1.5rem var(--pad); border-top:1px solid rgba(241,233,220,.07);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--creme-faint);
}
.foot__bar a{ color:var(--creme-dim); transition:color .3s; }
@media (hover:hover){ .foot__bar a:hover{ color:var(--laiton-lt); } }

/* ── 19. Parallax e revelação ao rolar ─────────────────────── */
[data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:calc(.12s * var(--d,0));
}
[data-reveal].is-in{ opacity:1; transform:none; }
/* Botões magnéticos que também são revelados */
.js-magnet[data-reveal]{ transform:translate(var(--mx,0px), calc(30px + var(--my,0px))); }
.js-magnet[data-reveal].is-in{ transform:translate(var(--mx,0px), var(--my,0px)); }

/* Revelação linha a linha dos títulos */
.line{ display:block; overflow:hidden; }
.line > span{
  display:block; transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
  transition-delay:calc(.09s * var(--l,0) + .12s * var(--d,0));
}
[data-reveal].is-in .line > span{ transform:translateY(0); }
[data-split][data-reveal]{ opacity:1; transform:none; }

/* ── 20. Responsivo ────────────────────────────────────────── */
@media (max-width:1180px){
  .wall{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1080px){
  .casa__text{ grid-column:1 / span 6; }
  .casa__art--a{ grid-column:7 / span 6; }
  .casa__art--b{ grid-column:8 / span 5; }
  .nav__links{ gap:1.4rem; }
  .nav__brandtext{ font-size:.95rem; letter-spacing:.18em; }
}

@media (max-width:940px){
  .nav__links{ display:none; }
}

@media (max-width:860px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:block; }
  .nav{ padding:.65rem var(--pad); gap:1rem; }

  .casa__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .casa__text,.casa__art--a,.casa__art--b{ grid-column:1 / -1; }
  .casa__art--a{ max-width:80%; }
  .casa__art--b{ margin-top:0; max-width:62%; margin-left:auto; }

  .wall{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.25rem,5vw,3rem) clamp(1.25rem,3.5vw,2.25rem); }

  .trilha__grid,.pedidos__grid{ grid-template-columns:1fr; }
  .disc{ width:min(72%,320px); }
  .pedidos__art{ max-width:74%; }

  .foot__top{ grid-template-columns:1fr; }
  .foot__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem var(--gut); }
}

@media (max-width:560px){
  .wall{ grid-template-columns:1fr; gap:2.75rem; }
  .facts{ grid-template-columns:1fr; gap:1.75rem; }
  .casa__art--a{ max-width:100%; }
  .casa__art--b{ max-width:72%; margin-top:-2rem; }
  .hero__cue{ display:none; }
  .ribbon{ padding:.4rem 2.75rem; }
  .ribbon__text{ font-size:.58rem; letter-spacing:.12em; }
  .pedidos__art{ max-width:100%; }
  .btn{ padding:.85rem 1.35rem; }
  .btn--lg{ padding:1rem 1.5rem; }
  .hero__actions{ gap:.65rem; }
  .hero__actions .btn{ flex:1 1 12rem; }
  .wall__note{ gap:1.15rem; }
  .wall__note p{ margin-right:0; flex:1 1 100%; }
  .disc{ width:min(84%,300px); }
  .foot__word{ font-size:1.35rem; }
}

@media (max-width:380px){
  .foot__nav{ grid-template-columns:1fr; gap:2rem; }
}

/* Telas baixas (celular deitado): o hero não pode cortar os botões */
@media (max-height:620px) and (orientation:landscape){
  .hero{
    min-height:0;
    padding-top:calc(var(--nav-h) + 2rem);
    padding-bottom:3.5rem;
  }
  .hero__seal{ width:52px; margin-bottom:1rem; }
  .hero__eyebrow{ margin-bottom:1rem; }
  .hero__sub{ margin-bottom:1.5rem; }
  .hero__cue{ display:none; }
}

/* ── 21. Preferências do sistema ───────────────────────────── */
/* O grão é caro no celular: fica estático fora do desktop */
@media (hover:none), (max-width:860px){
  .grain{ animation:none; opacity:.04; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],[data-seq]{ opacity:1 !important; transform:none !important; }
  .line > span{ transform:none !important; }
  .hero__word > span{ transform:none !important; }
  .drawer__nav a{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
  .marquee__track{ animation:none; }
  .disc__plate,.pill__disc{ animation:none !important; }
  .hero__video{ opacity:1; }
  .loader{ animation:none; }
  .pill{ opacity:1; transform:none; }
}

@media print{
  .hero__media,.grain,.loader,.marquee,.ribbon,.nav,.pill,.player{ display:none !important; }
  body{ background:#fff; color:#000; }
  [data-reveal],[data-seq]{ opacity:1 !important; transform:none !important; }
}