/* Vellor Planejados · site.css
   Mundo: o logo (V em meia-esquadria, ouro metálico sobre preto) e os ambientes reais (fendi, madeira escura,
   pedra preta, perfil dourado na borda do aparador). Ônix dominante com ouro; gesso e fendi para respirar. */
:root{
  --onix:#0E0C09;
  --onix-2:#15120D;
  --onix-3:#1E1A13;
  --noite:#090806;
  --bronze:#382C1A;
  --bronze-2:#69532E;
  --ouro-velho:#9D793B;
  --ouro:#CBA456;
  --ouro-claro:#F2D685;
  --ouro-tx:#7A5A22;
  --gesso:#F4F0E9;
  --fendi:#E8E0D4;
  --greige:#D3C8B8;
  --cartao:#FBF8F3;
  --tx:#1D1912;
  --tx-2:#5B5246;
  --tx-d:#F1EADF;
  --tx-d2:#B8AD9B;
  --linha:rgba(29,25,18,.14);
  --linha-f:rgba(29,25,18,.3);
  --linha-d:rgba(241,234,223,.14);
  --linha-df:rgba(241,234,223,.32);
  --grad-ouro:linear-gradient(115deg,#9D793B 0%,#F2D685 36%,#CBA456 56%,#F5DE95 76%,#9D793B 100%);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-hover:180ms;

  --f-display:"Encode Sans Expanded",system-ui,sans-serif;
  --f-text:"Reddit Sans",system-ui,sans-serif;
  --f-mono:"M PLUS 1 Code",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,80px);
  --max:1360px;
  --edge:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  --sec:clamp(84px,9vw,140px);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5L13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:80px;scrollbar-gutter:stable}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--onix);color:var(--tx-d);
  font-family:var(--f-text);font-size:clamp(17px,1.1vw,19px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:300;line-height:1.06;letter-spacing:-.025em;margin:0;text-wrap:balance}
h3{font-weight:500;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--ouro)}
p{margin:0;text-wrap:pretty}
.mono{font-family:var(--f-mono);font-weight:400;font-size:13px;letter-spacing:.01em}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
body.intro-on{overflow:hidden}
.h2{font-size:clamp(32px,3.9vw,62px)}
.lede{font-size:clamp(17.5px,1.3vw,21px);color:var(--tx-d2);max-width:46ch}

.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ouro);color:var(--onix);padding:12px 18px;text-decoration:none;font-weight:600;border-radius:999px;transition:top var(--t-hover) var(--ease)}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.off,.off *{animation-play-state:paused!important}

/* seções claras */
.claro,.ambientes,.vellor,.insta,.duvidas{color:var(--tx)}
.ambientes .lede,.vellor .lede,.insta .lede,.duvidas .lede{color:var(--tx-2)}
.ambientes h2 em,.vellor h2 em,.insta h2 em,.duvidas h2 em{color:var(--ouro-tx)}

/* ============ BOTÕES DIRECIONAIS ============ */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:0 9px 0 28px;
  font-family:var(--f-text);font-weight:600;font-size:16.5px;text-decoration:none;white-space:nowrap;border:0;border-radius:999px;cursor:pointer;overflow:hidden;
  background:var(--grad-ouro);background-size:140% 100%;background-position:0 50%;color:var(--onix);
  box-shadow:0 14px 34px -14px rgba(203,164,86,.75),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),background-position .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.btn:hover{transform:translateY(-3px);background-position:100% 50%;box-shadow:0 20px 40px -14px rgba(203,164,86,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:90ms}
.btn-i{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--onix);overflow:hidden}
.btn-i::before,.btn-i::after{content:"";position:absolute;inset:0;background:var(--ouro-claro);-webkit-mask:var(--arrow) center/16px no-repeat;mask:var(--arrow) center/16px no-repeat;transition:transform 200ms var(--ease)}
.btn-i::after{transform:translateX(-130%)}
.btn:hover .btn-i::before{transform:translateX(130%)}
.btn:hover .btn-i::after{transform:none}
.btn-sm{min-height:46px;padding:0 6px 0 20px;font-size:15px;gap:12px}
.btn-sm .btn-i{width:34px;height:34px}
.btn-full{width:100%}
/* no claro: pílula ônix com círculo de ouro */
.btn-claro{background:var(--onix);color:var(--tx-d);box-shadow:0 14px 30px -14px rgba(14,12,9,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-claro:hover{background:var(--onix-3);box-shadow:0 20px 38px -14px rgba(14,12,9,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-claro .btn-i{background:var(--grad-ouro)}
.btn-claro .btn-i::before,.btn-claro .btn-i::after{background:var(--onix)}

.btn-line{display:inline-flex;align-items:center;gap:14px;min-height:48px;text-decoration:none;font-weight:600;font-size:16px;color:inherit;cursor:pointer}
.btn-line span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size 200ms var(--ease)}
.btn-line i{position:relative;flex:none;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--linha-df);transition:background-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),transform var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.btn-line i::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--arrow) center/15px no-repeat;mask:var(--arrow) center/15px no-repeat}
.btn-line:hover span{background-size:100% 1.5px}
.btn-line:hover i{background:var(--ouro);box-shadow:inset 0 0 0 1px var(--ouro);color:var(--onix);transform:translateX(4px)}
.ambientes .btn-line i,.vellor .btn-line i,.insta .btn-line i{box-shadow:inset 0 0 0 1px var(--linha-f)}
.ambientes .btn-line:hover i{background:var(--onix);box-shadow:inset 0 0 0 1px var(--onix);color:var(--ouro-claro)}

/* ============ INTRO ============ */
#intro{position:fixed;inset:0;z-index:100;overflow:hidden;display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);
  padding:clamp(18px,3vw,36px) var(--gutter);color:var(--tx-d)}
#intro[hidden]{display:none}
.intro-bg{position:absolute;inset:0;background:radial-gradient(42% 46% at 50% 40%,rgba(203,164,86,.16),transparent 70%),var(--onix)}
.intro-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(92px,13vh,128px);cursor:pointer;user-select:none;-webkit-user-select:none}
.intro-mark{position:relative;width:min(280px,54vw,32svh);aspect-ratio:240/210}
.pecas{position:absolute;inset:0}
.peca{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;--fill:0}
.pc-l{fill:rgba(203,164,86,.1);stroke:var(--ouro);stroke-width:1.4;stroke-linejoin:round}
.pc-f{fill:url(#g-ouro);opacity:var(--fill)}
.pc-corte line{stroke:var(--ouro-claro);stroke-width:1.6;stroke-linecap:round}
.pc-corte{filter:drop-shadow(0 0 6px rgba(242,214,133,.7))}
.intro-mark.brilha::after{content:"";position:absolute;inset:-4% -8%;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,244,214,.55) 50%,transparent 65%);mix-blend-mode:overlay;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 210'%3E%3Cpath d='M20 10h26l74 140 74-140h26L120 199zM60 10h24l36 68 36-68h24l-60 113.5z'/%3E%3C/svg%3E") center/86% 92% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 210'%3E%3Cpath d='M20 10h26l74 140 74-140h26L120 199zM60 10h24l36 68 36-68h24l-60 113.5z'/%3E%3C/svg%3E") center/86% 92% no-repeat;
  animation:brilho 1.1s var(--ease-out) forwards}
@keyframes brilho{from{background-position:-160px 0}to{background-position:160px 0}}
.intro-wm{position:absolute;left:-60%;width:220%;top:calc(100% + 20px);margin:0;opacity:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.intro-wm span{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3vw,42px);letter-spacing:.2em;line-height:1;padding-left:.2em;
  background:var(--grad-ouro);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-wm small{display:flex;align-items:center;gap:12px;font-family:var(--f-text);font-weight:500;font-size:12.5px;letter-spacing:.42em;padding-left:.42em;color:var(--ouro)}
.intro-wm small::before,.intro-wm small::after{content:"";width:34px;height:1px;background:var(--ouro-velho)}
.intro-text{min-height:2.5em;display:flex;align-items:flex-start;justify-content:center;font-size:clamp(22px,2.3vw,34px)}
.intro-line{font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;line-height:1.18;font-size:1em;max-width:24ch;text-align:center;text-wrap:balance;color:var(--tx-d)}
.intro-bottom{position:relative;display:flex;justify-content:center;align-items:center}
.intro-hint{display:flex;align-items:center;gap:12px;margin:0;color:var(--tx-d2);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.intro-hint.gone{opacity:0;transform:translateY(6px)}
.hint-ic{position:relative;width:18px;height:28px;border:1.5px solid currentColor;border-radius:10px}
.hint-ic::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:var(--ouro);animation:wheel 1.8s var(--ease) infinite;animation-delay:-.4s}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:0}}
.intro-stage:focus-visible{outline:2px solid var(--ouro);outline-offset:8px}
@media (max-width:760px){
  .intro-stage{gap:96px}
  .intro-mark{width:min(54vw,220px)}
  .intro-text{min-height:3.6em;font-size:22px}
}
/* sem JavaScript, abertura já vista ou motor que não carregou: o site abre direto */
html:not(.js) #intro,.intro-vista #intro,.sem-motor #intro{display:none}
html:not(.js) body.intro-on,.sem-motor body.intro-on{overflow:auto}
html:not(.js) body.intro-on .site-head,.sem-motor body.intro-on .site-head{opacity:1}

/* ============ CABEÇALHO ============ */
.site-head{position:fixed;inset:0 0 auto;z-index:60;transition:opacity .5s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;transition:height .35s var(--ease)}
.site-head.scrolled{background:rgba(14,12,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linha-d)}
.site-head.scrolled .wrap{height:68px}
body.intro-on .site-head{opacity:0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-v{width:40px;height:35px;flex:none}
.brand-wm{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand-wm b{font-family:var(--f-display);font-weight:400;font-size:19px;letter-spacing:.2em;color:var(--tx-d)}
.brand-wm small{font-family:var(--f-text);font-weight:500;font-size:9.5px;letter-spacing:.42em;color:var(--ouro)}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.nav a:not(.btn){text-decoration:none;font-weight:500;font-size:15px;color:var(--tx-d2);position:relative;padding:6px 0;transition:color var(--t-hover) var(--ease)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:var(--ouro);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-hover) var(--ease)}
.nav a:not(.btn):hover{color:var(--tx-d)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.menu-btn i{position:absolute;left:10px;right:10px;height:1.5px;border-radius:2px;background:var(--ouro-claro);transition:transform var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease)}
.menu-btn i:nth-child(1){top:15px}.menu-btn i:nth-child(2){top:21px}.menu-btn i:nth-child(3){top:27px}
body.menu-open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn i:nth-child(2){opacity:0}
body.menu-open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1180px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;gap:24px;background:var(--onix);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
  .nav a:not(.btn){font-family:var(--f-display);font-weight:300;font-size:30px;letter-spacing:-.01em;color:var(--tx-d)}
  .nav .btn{margin-top:10px}
  body.menu-open .nav{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
  body.menu-open{overflow:hidden}
  body.menu-open .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--onix)}
}

/* ============ HERO: a parede vazia vira cozinha planejada ============ */
/* sem a classe hero-rola (movimento reduzido, celular deitado, sem JS): só a faixa final sobre a cena montada */
.hero{position:relative;background:var(--onix)}
.stage{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;
  background:radial-gradient(60% 70% at 72% 52%,#1C170F 0%,var(--onix) 70%);
  --p:1;
  --ae:clamp(0,(var(--p) - .03) / .18,1);
  --ba:clamp(0,(var(--p) - .12) / .18,1);
  --bc:clamp(0,(var(--p) - .24) / .14,1);
  --md:clamp(0,(var(--p) - .34) / .14,1);
  --po:clamp(0,(var(--p) - .42) / .2,1);
  --g:clamp(0,(var(--p) - .6) / .16,1);
  --l:clamp(0,(var(--p) - .74) / .14,1);
  --se:clamp(0,(var(--p) - .84) / .1,1)}
.hero-rola .hero{height:600vh}
.hero-rola .stage{position:sticky;top:0;height:100vh;height:100svh;display:block;--p:0}

.cena{position:absolute;z-index:0;right:max(1vw,calc((100vw - 1560px) / 2));top:50%;width:min(56vw,calc(84svh * 640 / 540),860px);height:auto;aspect-ratio:640/540;overflow:visible;
  transform:translateY(-48%) scale(calc(.95 + .05 * var(--p)))}
.cena *{transform-box:fill-box}
.h-planta path{stroke:rgba(242,214,133,.5);stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:0}
.h-planta{opacity:calc(1 - var(--po) * .9)}
.hero-rola .h-planta path{stroke-dashoffset:1}
.hero-rola .hero.vivo .h-planta path{animation:traco 1.6s var(--ease-out) forwards;animation-delay:calc(.15s + var(--i) * .12s)}
@keyframes traco{to{stroke-dashoffset:0}}
.h-aereo{opacity:var(--ae);transform:translateY(calc((1 - var(--ae)) * -34px))}
.h-torre{opacity:var(--ba);transform:translateY(calc((1 - var(--ba)) * 30px))}
.h-base{opacity:var(--ba);transform:translateY(calc((1 - var(--ba)) * 34px))}
.h-pedra{opacity:var(--bc);transform-origin:50% 100%;transform:scaleY(calc(.7 + .3 * var(--bc)))}
.h-madeira{opacity:var(--md);transform:translateX(calc((1 - var(--md)) * 30px))}
.porta{transform-origin:0 50%;transform:scaleX(calc(.03 + .97 * var(--po)));opacity:calc(.35 + .65 * var(--po))}
.porta.d{transform-origin:100% 50%}
.h-perfil path{stroke:#D9B86C;stroke-width:2.2;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--g))}
.h-perfil path.fino{stroke-width:1.2;stroke:#9D793B}
.h-luz{opacity:var(--l)}
.h-chao{stroke:rgba(242,214,133,.18);stroke-width:1;fill:none}

.selos{position:absolute;z-index:1;right:var(--edge);bottom:clamp(22px,4svh,40px);margin:0;padding:0;list-style:none;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;max-width:min(520px,44vw);
  opacity:var(--se);transform:translateY(calc((1 - var(--se)) * 12px))}
.selo{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--tx-d);
  background:rgba(30,26,19,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(242,214,133,.22)}
.selo svg{width:22px;height:19px;flex:none}
.selo i{width:8px;height:8px;margin:0 6px 0 4px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 4px rgba(203,164,86,.2)}

/* faixas de texto (z-index próprio: o halo ônix fica entre a cena e as letras) */
.band{position:relative;z-index:2;width:min(46vw,640px);margin:0 0 0 var(--edge);padding:120px 0 80px;color:var(--tx-d)}
.band:not(.band-final){display:none}
.band::before{content:"";position:absolute;inset:-12% -24% -12% -40%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 66% 60% at 42% 52%,rgba(14,12,9,.92) 0%,rgba(14,12,9,.6) 52%,rgba(14,12,9,0) 80%)}
.band .t{font-family:var(--f-display);font-weight:300;line-height:1.04;letter-spacing:-.03em;font-size:clamp(36px,4.1vw,68px);max-width:13ch;width:fit-content;text-wrap:balance;
  text-shadow:0 1px 1px rgba(14,12,9,.6),0 4px 18px rgba(14,12,9,.55),0 12px 40px rgba(14,12,9,.45)}
.band .t em{font-style:normal;color:var(--ouro-claro)}
.band-final .t{font-size:clamp(34px,3.7vw,60px);max-width:15ch}
.band .sub{margin-top:22px;max-width:38ch;font-size:clamp(17px,1.3vw,20.5px);color:var(--tx-d2);text-shadow:0 2px 14px rgba(14,12,9,.8)}
.band .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.hero-acoes{display:none}

/* hero que anda com a rolagem */
.hero-rola .band{display:block;position:absolute;left:0;top:50%;margin:0 0 0 var(--edge);padding:0;transform:translateY(-58%);opacity:0;pointer-events:none}
.hero-rola .band.on{pointer-events:auto}
.hero-rola .band .w{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 16px))}
.hero-rola .band[data-fx="lado"] .w{transform:translateX(calc((1 - var(--kc)) * -18px))}
.hero-rola .band[data-fx="abre"] .w{transform:translateX(calc((1 - var(--kc)) * var(--dx,0px)))}
.hero-rola .band .sub{--ks:clamp(0,(var(--k,0) - .35) * 3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 12px))}
.hero-rola .band-final .ctas{display:none}
.hero-rola .hero-acoes{position:absolute;z-index:3;left:var(--edge);bottom:clamp(26px,5svh,48px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease-out) .5s,transform .7s var(--ease-out) .5s}
.hero.vivo .hero-acoes{opacity:1;transform:none}
.w{white-space:nowrap}
.band .t em .w{color:var(--ouro-claro)}

/* celular e tablet em pé: texto no alto, a cozinha embaixo */
@media (orientation:portrait) and (max-width:1024px){
  .stage{flex-direction:column;align-items:stretch;justify-content:flex-start;padding-bottom:min(84vw,46svh);
    background:radial-gradient(90% 50% at 50% 82%,#1C170F 0%,var(--onix) 72%)}
  .cena{left:50%;right:auto;top:auto;bottom:1svh;width:min(100vw,calc(48svh * 640 / 540),640px);transform:translateX(-50%) scale(calc(.95 + .05 * var(--p)));transform-origin:50% 100%}
  .band{width:auto;margin:0 var(--gutter);padding:108px 0 0}
  .band::before{inset:-14% -12% -18% -12%;background:radial-gradient(ellipse 80% 70% at 40% 45%,rgba(14,12,9,.95) 0%,rgba(14,12,9,.7) 55%,rgba(14,12,9,0) 82%)}
  .band .t,.band-final .t{font-size:clamp(30px,8.2vw,52px);max-width:14ch}
  .band .sub{margin-top:14px;font-size:16.5px;max-width:34ch}
  .band .ctas{margin-top:22px}
  .selos{display:none}
  .hero-rola .hero{height:500vh}
  .hero-rola .stage{padding:0}
  .hero-rola .band{left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 96px);transform:none;margin:0 var(--gutter);width:auto}
  .hero-rola .band-final .ctas{display:flex}
  .hero-rola .band-final .ctas{--kb:clamp(0,(var(--k,0) - .7) * 4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 12px))}
  .hero-rola .hero-acoes{display:none}
}
@media (orientation:portrait) and (max-width:1024px) and (max-height:760px){
  .band-final .sub{display:none}
}
@media (max-width:480px){
  .band .ctas .btn{width:100%}
}

/* ============ SEÇÕES ============ */
section{position:relative}
.sec{padding:var(--sec) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
@media (max-width:900px){.sec-head{grid-template-columns:minmax(0,1fr)}}

/* ----- letreiro ----- */
.faixa{background:var(--bronze);overflow:hidden;padding:clamp(20px,2.4vw,30px) 0;box-shadow:inset 0 1px 0 rgba(242,214,133,.18),inset 0 -1px 0 rgba(242,214,133,.18)}
.mq-row{display:flex;align-items:center;gap:clamp(22px,2.6vw,40px);width:max-content;animation:mq 46s linear infinite}
.mq-row span{font-family:var(--f-display);font-weight:300;font-size:clamp(24px,2.8vw,42px);letter-spacing:-.01em;color:var(--ouro-claro);white-space:nowrap}
.mq-row svg{width:clamp(22px,2vw,30px);height:auto;aspect-ratio:240/210;flex:none;opacity:.85}
@keyframes mq{to{transform:translateX(calc(-50% - clamp(11px,1.3vw,20px)))}}

/* ----- ambientes: carrossel ClassyCO ----- */
.ambientes{background:var(--gesso)}
.vitrine{--car-card:var(--cartao);--car-linha:rgba(29,25,18,.1);--car-sombra:29,25,18;--car-suave:var(--tx-2);position:relative}
.vit-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--edge) 28px;scroll-padding-inline:var(--edge);scrollbar-width:none;cursor:grab;outline:none}
.vit-track::-webkit-scrollbar{display:none}
.vit-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.vit-track.dragging .vit{pointer-events:none}
.vit-track:focus-visible{outline:2px solid var(--ouro-tx);outline-offset:-2px;border-radius:24px}
.vit{flex:none;width:clamp(280px,29vw,380px);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:28px;background:var(--car-card);overflow:hidden;cursor:pointer;
  box-shadow:0 1px 0 var(--car-linha),0 24px 48px -36px rgba(var(--car-sombra),.45);transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.vit:hover{transform:translateY(-6px);box-shadow:0 1px 0 var(--car-linha),0 30px 60px -34px rgba(var(--car-sombra),.55)}
.vit-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--fendi)}
.vit-art::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--grad-ouro);transform:scaleX(.18);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.vit:hover .vit-art::after{transform:scaleX(1)}
.vit-art svg,.vit-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.vit:hover .vit-art svg,.vit:hover .vit-art img{transform:scale(1.04) rotate(-1.5deg)}
.vit-body{display:flex;flex-direction:column;gap:10px;padding:24px 24px 18px;flex:1}
.vit-body h3{font-size:clamp(20px,1.5vw,23px);color:var(--tx)}
.vit-body p{color:var(--car-suave);font-size:16.5px}
.vit-body .btn-line{margin-top:auto;padding-top:8px;color:var(--tx)}
.vit-hint{padding:0 var(--edge);color:var(--tx-2);transition:opacity .4s var(--ease)}
.vit-hint.gone,.insta-hint.gone{opacity:0}

/* ----- detalhes: o momento interativo ----- */
.detalhes{background:var(--onix)}
.det-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.det-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dt{position:relative;padding:18px 0 18px 30px;box-shadow:inset 0 -1px 0 var(--linha-d);cursor:pointer}
.dt::before{content:"";position:absolute;left:0;top:27px;width:14px;height:12px;background:var(--linha-df);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 210'%3E%3Cpath d='M20 10h26l74 140 74-140h26L120 199zM60 10h24l36 68 36-68h24l-60 113.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 210'%3E%3Cpath d='M20 10h26l74 140 74-140h26L120 199zM60 10h24l36 68 36-68h24l-60 113.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease)}
.dt h3{font-size:clamp(20px,1.6vw,25px);font-weight:400}
.dt button{all:unset;cursor:pointer;color:var(--tx-d2);transition:color var(--t-hover) var(--ease)}
.dt button:focus-visible{outline:2px solid var(--ouro);outline-offset:4px;border-radius:4px}
.dt p{max-height:0;overflow:hidden;opacity:0;color:var(--tx-d2);font-size:16.5px;max-width:40ch;transition:max-height .45s var(--ease-out),opacity .3s var(--ease),margin .3s var(--ease)}
.dt.on::before{background:var(--ouro);transform:scale(1.15)}
.dt.on button,.dt:hover button{color:var(--tx-d)}
.dt.on p{max-height:9em;opacity:1;margin-top:8px}
.det-painel{position:relative;border-radius:28px;background:radial-gradient(70% 70% at 60% 40%,#2A2319 0%,var(--onix-3) 70%);box-shadow:inset 0 0 0 1px var(--linha-d),0 40px 80px -50px rgba(0,0,0,.8);padding:clamp(16px,2.4vw,32px)}
.det-svg{display:block;width:100%;height:auto}
.det-svg .z{transition:opacity .35s var(--ease),filter .35s var(--ease);cursor:pointer}
.det-svg.foco .z:not(.on){opacity:.3;filter:saturate(.35)}
.det-svg .alvo{fill:none;stroke:var(--ouro-claro);stroke-width:1.6;stroke-dasharray:6 6;opacity:0;transition:opacity .3s var(--ease)}
.det-svg .z.on .alvo{opacity:.9}
.pontos circle{fill:var(--ouro);stroke:rgba(242,214,133,.35);stroke-width:8;paint-order:stroke;transition:opacity .3s var(--ease);pointer-events:none}
.pontos circle.on{opacity:0}
.pontos circle:not(.on){animation:pisca 2.4s var(--ease) infinite}
@keyframes pisca{50%{stroke-width:14;stroke:rgba(242,214,133,.12)}}
@media (max-width:900px){
  .det-grid{grid-template-columns:minmax(0,1fr)}
  .det-painel{order:-1}
}

/* ----- a Vellor ----- */
.vellor{background:var(--fendi)}
.vellor-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,104px);align-items:center}
.vellor-foto{margin:0;justify-self:center;width:min(100%,420px)}
.vf-quadro{position:relative;aspect-ratio:4/5;border-radius:6px}
/* fio duplo de ouro deslocado atrás da foto: o V da marca em linha */
.vf-quadro::before,.vf-quadro::after{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none}
.vf-quadro::before{transform:translate(18px,18px);box-shadow:inset 0 0 0 1.5px var(--ouro-velho)}
.vf-quadro::after{transform:translate(26px,26px);box-shadow:inset 0 0 0 1px rgba(157,121,59,.45)}
.vf-quadro img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 88%;border-radius:6px;box-shadow:0 30px 60px -36px rgba(29,25,18,.7)}
.vellor-foto figcaption{margin-top:40px;color:var(--tx-2)}
.vellor-txt .lede{margin-top:24px;max-width:52ch}
.fatos{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.fatos li{display:flex;align-items:flex-start;gap:14px;padding:16px 0;box-shadow:inset 0 -1px 0 var(--linha);font-weight:500;color:var(--tx)}
.fatos svg{width:20px;height:18px;flex:none;margin-top:4px}
@media (max-width:900px){
  .vellor-grid{grid-template-columns:minmax(0,1fr)}
  .vellor-foto{width:min(100%,360px);justify-self:start}
  .fatos{grid-template-columns:minmax(0,1fr)}
}

/* ----- como funciona: o gaveteiro ----- */
.como{background:var(--onix-3)}
.gavetas{list-style:none;margin:0;padding:clamp(10px,1.2vw,14px);display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);border-radius:14px;
  background:linear-gradient(180deg,#2B2419,#221C14);box-shadow:inset 0 0 0 1px rgba(242,214,133,.12),0 40px 80px -50px rgba(0,0,0,.85)}
.gaveta{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(24px,4vw,64px);align-items:center;padding:clamp(26px,3vw,38px) clamp(22px,3vw,44px) clamp(24px,2.8vw,34px);
  border-radius:6px;background:linear-gradient(180deg,#EFE8DD,#E2D9CB);color:var(--tx);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 20px -16px rgba(0,0,0,.7)}
/* puxador cava: o perfil dourado no alto da frente */
.gaveta::before{content:"";position:absolute;left:clamp(22px,3vw,44px);right:clamp(22px,3vw,44px);top:10px;height:3px;border-radius:3px;background:var(--grad-ouro);opacity:.75;
  transition:opacity var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.gaveta h3{font-size:clamp(21px,1.8vw,28px);font-weight:400}
.gaveta p{color:var(--tx-2);max-width:52ch}
.m-js .gavetas.m-in.m-done > .gaveta{transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.gaveta:hover::before{opacity:1;box-shadow:0 0 14px rgba(242,214,133,.6)}
/* as gavetas entram deslizando de lado, como quem fecha o gaveteiro */
.m-js .gavetas[data-m="stagger"] > .gaveta{transform:translate3d(-22px,0,0)}
.m-js .gavetas[data-m="stagger"].m-in > .gaveta{transform:none}
.gaveta:hover,.m-js .gavetas[data-m="stagger"].m-in > .gaveta:hover{transform:translateX(8px)}
.como-pe{margin-top:clamp(36px,4vw,56px)}
@media (max-width:760px){.gaveta{grid-template-columns:minmax(0,1fr)}}

/* ----- projetos: carrossel do Instagram ----- */
.insta{background:var(--gesso);overflow:hidden;--acento:var(--onix);--acento-texto:var(--ouro-claro)}
.insta-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(30px,3.6vw,48px)}
.insta-txt{max-width:720px}
.insta-txt .lede{margin-top:20px}
.setas{display:flex;gap:10px;flex:none}
.seta{position:relative;flex:none;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:none;color:var(--onix);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--linha-f);
  transition:background-color 180ms,color 180ms,box-shadow 180ms,transform 180ms,opacity .3s}
.seta i{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.seta i::before,.seta i::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--arrow) center/17px no-repeat;mask:var(--arrow) center/17px no-repeat;transition:transform 200ms}
.seta i::after{transform:translateX(-130%)}
.seta-volta i{transform:scaleX(-1)}
.seta:hover{background:var(--onix);color:var(--ouro-claro);box-shadow:inset 0 0 0 1.5px var(--onix);transform:translateY(-3px)}
.seta:hover i::before{transform:translateX(130%)}
.seta:hover i::after{transform:none}
.seta.fim{opacity:.32;pointer-events:none}
.insta-track{list-style:none;margin:0;display:flex;align-items:flex-start;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--edge) 34px;scroll-padding-inline:var(--edge);scrollbar-width:none;cursor:grab;outline:none}
.insta-track::-webkit-scrollbar{display:none}
.insta-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.insta-track.dragging .ig{pointer-events:none}
.insta-track:focus-visible{outline:2px solid var(--ouro-tx);outline-offset:-2px;border-radius:24px}
.insta-track > li{flex:none;width:clamp(240px,24vw,320px);scroll-snap-align:start}
@media (min-width:900px){.insta-track > li:nth-child(even){margin-top:48px}}
.ig{position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--fendi);-webkit-user-drag:none;box-shadow:0 1px 0 var(--linha),0 26px 50px -34px rgba(29,25,18,.55)}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1);-webkit-user-drag:none;user-select:none}
.ig::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(14,12,9,0);transition:background-color 300ms;pointer-events:none}
.ig:hover::before,.ig:focus-visible::before{background:rgba(14,12,9,.22)}
.ig:hover img{transform:scale(1.06)}
/* selo quadrado de cantos suaves, como um puxador: gesso com ícone de ouro; no mouse, ônix com ícone dourado */
.ig-selo{position:absolute;z-index:2;right:14px;bottom:14px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(244,240,233,.94);color:var(--ouro-tx);
  box-shadow:0 6px 16px -8px rgba(14,12,9,.6);transition:background-color 180ms,color 180ms,transform 180ms}
.ig-selo svg{width:22px;height:22px}
.ig:hover .ig-selo,.ig:focus-visible .ig-selo{background:var(--acento);color:var(--acento-texto);transform:translateY(-3px)}
.ig:focus-visible{outline-offset:4px}
.insta-pe{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:6px}
.insta-hint{color:var(--tx-2);transition:opacity .4s var(--ease)}
@media (max-width:700px){.insta-head{flex-direction:column;align-items:flex-start;gap:22px}}

/* ----- dúvidas ----- */
.duvidas{background:var(--fendi)}
.duv-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.duv-head{position:sticky;top:110px}
.duv-head .lede{margin-top:20px}
.duv-lista{display:flex;flex-direction:column}
.duv-lista details{box-shadow:inset 0 -1px 0 var(--linha-f)}
.duv-lista summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;list-style:none}
.duv-lista summary::-webkit-details-marker{display:none}
.duv-lista summary h3{font-size:clamp(18px,1.45vw,22px);font-weight:400;letter-spacing:-.01em;color:var(--tx)}
.duv-lista summary i{position:relative;flex:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--linha-f);transition:background-color var(--t-hover) var(--ease),transform .3s var(--ease)}
.duv-lista summary i::before,.duv-lista summary i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;background:var(--tx);transition:transform .3s var(--ease)}
.duv-lista summary i::after{transform:rotate(90deg)}
.duv-lista summary:hover i{background:var(--onix)}
.duv-lista summary:hover i::before,.duv-lista summary:hover i::after{background:var(--ouro-claro)}
.duv-lista details[open] summary i::after{transform:rotate(0)}
.duv-lista details p{padding:0 56px 26px 0;color:var(--tx-2);max-width:60ch}
@media (max-width:900px){.duv-grid{grid-template-columns:minmax(0,1fr)}.duv-head{position:static}.duv-lista details p{padding-right:0}}

/* ----- contato ----- */
.contato{background:radial-gradient(60% 60% at 15% 20%,rgba(203,164,86,.1),transparent 70%),var(--onix)}
.contato-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,104px);align-items:start}
.contato-txt .lede{margin-top:22px}
.contato-ic{list-style:none;margin:34px 0 0;padding:0;display:flex;gap:14px}
.ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:var(--ouro-claro);box-shadow:inset 0 0 0 1px var(--linha-df);
  transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.ic svg{width:24px;height:24px}
.ic:hover{background:var(--ouro);color:var(--onix);box-shadow:inset 0 0 0 1px var(--ouro);transform:translateY(-3px)}
.contato-onde{margin-top:26px;color:var(--tx-d2)}
.form{border-radius:28px;background:var(--onix-3);padding:clamp(24px,3vw,40px);box-shadow:inset 0 0 0 1px var(--linha-d),0 40px 80px -50px rgba(0,0,0,.85)}
.tipos{border:0;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tipos legend{padding:0;margin-bottom:14px;font-weight:600;color:var(--tx-d)}
.tipos label{position:relative;cursor:pointer}
.tipos input{position:absolute;opacity:0;width:1px;height:1px}
.tipos span{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;color:var(--tx-d2);box-shadow:inset 0 0 0 1px var(--linha-df);
  transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.tipos label:hover span{color:var(--tx-d);box-shadow:inset 0 0 0 1px var(--ouro)}
.tipos input:checked + span{background:var(--grad-ouro);color:var(--onix);box-shadow:none}
.tipos input:focus-visible + span{outline:2px solid var(--ouro);outline-offset:3px}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo-full{grid-column:1 / -1}
.campo span{font-size:14px;font-weight:500;color:var(--tx-d2)}
.campo input,.campo textarea{font:inherit;font-size:16.5px;color:var(--tx-d);background:rgba(241,234,223,.04);border:0;border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--linha-df);
  transition:box-shadow var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.campo textarea{resize:vertical;min-height:120px}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(184,173,155,.75)}
.campo input:focus,.campo textarea:focus{outline:none;background:rgba(241,234,223,.07);box-shadow:inset 0 0 0 1.5px var(--ouro)}
.err{min-height:1.5em;margin:14px 0 6px;color:#F0A78F;font-size:15px}
.note{margin-top:14px;font-size:14.5px;color:var(--tx-d2)}
.ok{margin-top:10px;font-size:15px;color:var(--ouro-claro)}
.ok:empty{display:none}
@media (max-width:900px){.contato-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.campos{grid-template-columns:minmax(0,1fr)}}

/* ----- rodapé ----- */
.foot{background:var(--noite);padding-top:clamp(56px,6vw,84px);color:var(--tx-d2)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:clamp(30px,3vw,44px)}
/* o logo real em JPG com fundo preto: "lighten" some com o preto em cima do fundo do rodapé */
.foot-logo{width:clamp(150px,14vw,200px);height:auto;mix-blend-mode:lighten}
.foot-ic{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.ic-sm{width:44px;height:44px}
.ic-sm svg{width:26px;height:26px}
.foot-motto b{font-family:var(--f-display);font-weight:300;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em;color:var(--tx-d)}

/* ----- botão do WhatsApp ----- */
.wa-float{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:50;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:#1F9D55;color:#F4FFF8;box-shadow:0 14px 30px -10px rgba(31,157,85,.7);transition:transform var(--t-hover) var(--ease)}
.wa-float[hidden]{display:none}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:translateY(-3px) scale(1.04)}
body.intro-on .wa-float{opacity:0;pointer-events:none}

/* ============ MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion:reduce){
  .mq-row,.hint-ic::after,.pontos circle{animation:none!important}
  .vit,.vit-art svg,.vit-art img,.ig img,.btn,.btn::before{transition:none}
  .vit:hover,.btn:hover,.seta:hover,.ic:hover{transform:none}
  .vit:hover .vit-art svg,.vit:hover .vit-art img,.ig:hover img{transform:none}
  .h-planta path{stroke-dashoffset:0!important;animation:none!important}
  .intro-mark.brilha::after{display:none}
}

/* Versão 2 (2026-10-31): a ilustração do hero não invade mais o título. A cena fica com no máximo 48% da largura
   e o título final um pouco menor, para "sob medida" não passar por cima do armário. */
@media (min-width:1025px){
  .cena{width:min(48vw,calc(80svh * 640 / 540),820px)}
  .band{width:min(42vw,600px)}
  .band-final .t{font-size:clamp(32px,3.3vw,56px);max-width:14ch}
}