/* Tuyo — Apresentação da marca 2026
   Paleta e tipografia seguem o deck: papel #F0EDE6 (mesmo fundo das fotos de produto,
   por isso as garrafas "flutuam" sem recorte), tinta #161616, verde, vinho e dourado. */
@font-face{font-family:Archivo;src:url(font/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Young Serif";src:url(font/youngserif.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#F0EDE6; --paper-2:#E7E3DA; --ink:#161616; --ink-2:#222; --white:#fff;
  --green:#1F3A2D; --wine:#4B1521; --gold:#B8935A; --gold-2:#D9BC8B; --yellow:#E8C373; --laser:#FF3B2F;
  --mute:rgba(22,22,22,.58); --line:rgba(22,22,22,.16);
  --gx:clamp(20px,5vw,80px); --sy:clamp(88px,11vw,176px);
  --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 Archivo,system-ui,sans-serif;font-stretch:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- tipografia ---------- */
.d{font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:.98;letter-spacing:-.015em}
.h1{font-size:clamp(30px,7.2vw,124px)}
.h2{font-size:clamp(34px,5.4vw,88px)}
.h3{font-size:clamp(22px,2.2vw,34px)}
.h2s{font-size:clamp(32px,4.3vw,70px)}
.s{font-family:"Young Serif",Georgia,serif;font-weight:400;line-height:1.14;letter-spacing:-.01em}
.s1{font-size:clamp(30px,4.3vw,68px)}
.s2{font-size:clamp(22px,2.4vw,36px)}
.s3{font-size:clamp(18px,1.5vw,22px);line-height:1.3}
.eye{font-size:11px;font-weight:600;font-stretch:112%;letter-spacing:.24em;text-transform:uppercase;opacity:.62;display:block}
.p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--mute);max-width:56ch}
.dark .p{color:rgba(255,255,255,.66)}
.gold{color:var(--gold)}
.logo{display:block;width:100%;height:auto;fill:currentColor;overflow:visible}

/* ---------- seções ---------- */
.sec{position:relative;padding:var(--sy) var(--gx)}
.dark{background:var(--ink);color:var(--paper)}
.dark{--line:rgba(255,255,255,.18);--mute:rgba(255,255,255,.62)}
.green{background:var(--green)} .wine{background:var(--wine)}
.wrap{max-width:1480px;margin:0 auto}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid currentColor;border-radius:99px;padding:8px 14px;font-size:10.5px;font-weight:600;font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.l{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.l>span{display:block;transform:translateY(108%);transition:transform 1.15s var(--ease) calc(var(--d,0s) + var(--i,0)*.09s)}
.in .l>span,.l.in>span{transform:none}
.clip{overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-io) var(--d,0s)}
.clip img{transform:scale(1.25);transition:transform 1.8s var(--ease) var(--d,0s);width:100%;height:100%;object-fit:cover}
.clip img[data-px]{scale:1.14}
.clip.in{clip-path:inset(0)} .clip.in img{transform:none}
.w{opacity:.16;transition:opacity .35s linear}.w.on{opacity:1}

/* ---------- pré-carregamento ---------- */
.pre{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:clip-path 1.1s var(--ease-io) .1s}
.pre-in{width:min(46vw,360px);overflow:hidden}
.pre .logo path,.pre .logo use{transform:translateY(-440px);animation:up 1s var(--ease) forwards}
.pre .logo use:nth-child(2){animation-delay:.08s}.pre .logo use:nth-child(3){animation-delay:.16s}.pre .logo use:nth-child(4){animation-delay:.24s}
@keyframes up{to{transform:none}}
.pre-n{position:absolute;right:var(--gx);bottom:28px;font-weight:800;font-stretch:125%;font-size:clamp(40px,8vw,110px);line-height:1;font-variant-numeric:tabular-nums}
.pre-t{position:absolute;left:var(--gx);bottom:36px}
.ready .pre{clip-path:inset(0 0 100% 0);pointer-events:none}

/* ---------- cabeçalho ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gx);color:var(--ink);transition:color .4s,transform .6s var(--ease);pointer-events:none}
.top>*{pointer-events:auto}
.top.on-dark{color:var(--paper)}
.top-l{display:flex;align-items:center;gap:22px}
.top-logo{width:84px;display:block}
.top .btn{background:rgba(240,237,230,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);border-color:rgba(22,22,22,.18)}
.top .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.idx-open .top{z-index:85;color:var(--paper)}
.top-mid{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;font-stretch:112%;letter-spacing:.2em;text-transform:uppercase}
.top-mid b{font-variant-numeric:tabular-nums;font-weight:700}
.top-mid i{width:28px;height:1px;background:currentColor;opacity:.5}
.top-r{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;border-radius:99px;padding:10px 18px;font-size:11px;font-weight:700;font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;transition:background .35s,color .35s,border-color .35s}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-dark .btn:hover,.dark .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .btn.fill{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.bar{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);z-index:70}

/* índice em tela cheia */
.idx{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);padding:96px var(--gx) 40px;overflow:auto;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);visibility:hidden}
.idx.open{clip-path:inset(0);visibility:visible}
.idx ol{list-style:none;columns:2;column-gap:64px;max-width:1200px;margin:0 auto}
.idx li{break-inside:avoid;border-top:1px solid rgba(255,255,255,.16)}
.idx a{display:flex;align-items:baseline;gap:18px;padding:14px 0;font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(18px,2.4vw,34px);letter-spacing:-.01em;transition:color .3s,padding .4s var(--ease)}
.idx a small{font-size:11px;font-weight:600;letter-spacing:.2em;opacity:.5;min-width:28px}
.idx a:hover{color:var(--gold-2);padding-left:14px}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s;opacity:0;mix-blend-mode:normal}
.cur span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:0;white-space:nowrap;transition:opacity .2s}
.cur.big{width:84px;height:84px;margin:-42px 0 0 -42px}.cur.big span{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* grão */
.grain{position:fixed;inset:-50%;z-index:55;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-2%,3%)}80%{transform:translate(4%,1%)}100%{transform:translate(0,0)}}

/* ---------- 01 hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:1.08fr .92fr;padding:0}
.hero-l{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(96px,12vh,140px) var(--gx) 36px}
.hero-logo{overflow:hidden;margin:auto 0 0}
.hero-logo use{transform:translateY(-460px);transition:transform 1.3s var(--ease)}
.hero-logo use:nth-child(1){transition-delay:.55s}.hero-logo use:nth-child(2){transition-delay:.63s}.hero-logo use:nth-child(3){transition-delay:.71s}.hero-logo use:nth-child(4){transition-delay:.79s}
.ready .hero-logo use{transform:none}
.hero-tag{margin:clamp(18px,2.4vw,36px) 0 auto;font-size:clamp(34px,4.6vw,76px)}
.hero-tag .l>span{transition-delay:calc(1s + var(--i,0)*.1s)}
.ready .hero-tag .l>span{transform:none}
.hero-b{display:flex;flex-direction:column;gap:22px;opacity:0;transform:translateY(20px);transition:opacity 1s 1.5s,transform 1s var(--ease) 1.5s}
.ready .hero-b{opacity:1;transform:none}
.hero-meta{display:flex;justify-content:space-between;gap:16px;align-items:center}
.hero-r{position:relative;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease-io) .45s;background:#e9e7e8}
.ready .hero-r{clip-path:inset(0)}
.hero-r img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:50% 20%;transform:scale(1.2);transition:transform 2.4s var(--ease) .45s}
.ready .hero-r img{transform:none}
.badge{position:absolute;left:-64px;bottom:12%;width:128px;height:128px;z-index:3;color:var(--paper);background:var(--ink);border-radius:50%;display:grid;place-items:center;transform:scale(0);transition:transform 1s var(--ease) 1.7s}
.ready .badge{transform:none}
.badge svg.ring{position:absolute;inset:6px;animation:spin 16s linear infinite}
.badge svg.ring text{font:700 12.5px Archivo;font-stretch:112%;letter-spacing:.17em;fill:currentColor;text-transform:uppercase}
.badge b{font-size:22px;color:var(--gold-2)}
@keyframes spin{to{transform:rotate(360deg)}}
.scrollhint{display:flex;align-items:center;gap:10px}
.scrollhint i{width:1px;height:34px;background:currentColor;display:block;transform-origin:50% 0;animation:hint 1.8s var(--ease-io) infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:50% 0}51%{transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* faixa rolante */
.mq{background:var(--ink);color:var(--paper);overflow:hidden;padding:22px 0;white-space:nowrap}
.mq-t{display:inline-flex;gap:0;will-change:transform}
.mq-t span{display:inline-flex;align-items:center;gap:36px;padding-right:36px;font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(20px,2.6vw,40px);letter-spacing:-.01em}
.mq-t span::after{content:"✦";color:var(--gold);font-size:.6em}
.mq-t span:nth-child(even){font-family:"Young Serif",serif;font-weight:400;text-transform:none;font-stretch:100%}

/* ---------- 02 quem somos ---------- */
.quem-top{display:grid;grid-template-columns:1fr;gap:28px;max-width:1200px}
.quem-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,110px);align-items:end;margin-top:clamp(56px,7vw,110px)}
.quem-img{aspect-ratio:1/1.08;position:relative}
.quem-img .clip{position:absolute;inset:0}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:clamp(40px,5vw,72px)}
.pillar{border-top:1.5px solid var(--ink);padding-top:16px;position:relative}
.pillar b{display:block;font-size:11px;font-weight:700;font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.pillar p{font-size:15px;color:var(--mute);line-height:1.5}

/* ---------- 03 números ---------- */
.nums{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,6vw,96px);border-top:1px solid var(--line)}
.num{padding:clamp(24px,3vw,48px) clamp(0px,2vw,32px) clamp(28px,3.4vw,56px) 0;border-bottom:1px solid var(--line);position:relative}
.num+.num{padding-left:clamp(16px,2.4vw,40px);border-left:1px solid var(--line)}
.num:nth-child(4){padding-left:0;border-left:0}
.num strong{display:block;font-weight:800;font-stretch:125%;font-size:clamp(40px,6.4vw,112px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.num strong small{font-size:.38em;opacity:.55;letter-spacing:0}
.num p{margin-top:14px;font-size:clamp(14px,1.1vw,17px);color:var(--mute);max-width:30ch}
.num::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--gold);transition:width 1.4s var(--ease) var(--d,0s)}
.num.in::before{width:56px}
.grow .s1{font-size:clamp(26px,3.2vw,52px)}
.grow{position:relative;display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:clamp(16px,2.4vw,40px);align-items:end;padding:clamp(40px,5vw,84px) 0 clamp(28px,3.4vw,56px);border-bottom:1px solid var(--line)}
.grow>div{position:relative}
.grow-l{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.grow-l path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease-io) .35s}
.grow.in .grow-l path{stroke-dashoffset:0}
.grow-k strong{display:block;font-weight:800;font-stretch:125%;font-size:clamp(40px,6.4vw,112px);line-height:1;letter-spacing:-.03em;color:var(--gold-2)}
.grow-k p{margin-top:12px;font-size:clamp(14px,1.1vw,17px);color:var(--mute)}
@media (max-width:640px){.grow{grid-template-columns:1fr 1fr}.grow>div:first-of-type{grid-column:1/-1}}
.foot{font-size:12px;opacity:.5;margin-top:28px;max-width:80ch}

/* ---------- capítulos ---------- */
.chap{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;padding:0;color:var(--paper);overflow:hidden}
.chap-l{padding:clamp(110px,14vh,170px) var(--gx) clamp(48px,6vw,90px);display:flex;flex-direction:column;justify-content:space-between;position:relative}
.chap-n{position:absolute;right:-.06em;bottom:-.2em;font-weight:900;font-stretch:125%;font-size:clamp(200px,34vw,560px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);pointer-events:none;user-select:none}
.chap h2{font-size:clamp(34px,5.6vw,96px)}
.chap-r{position:relative;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.chap-bottle{height:min(74vh,720px);width:auto}
.chap-cap{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:var(--ink)}
.strips{display:flex;height:100%;min-height:60vh;background:var(--wine);gap:3px}
.strip{flex:1;position:relative;overflow:hidden;transition:flex 1s var(--ease)}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);transform:scale(1.08)}
.strip:hover{flex:2.6}.strip:hover img{transform:none}
.strip span{position:absolute;left:16px;bottom:16px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* ---------- 05 classic ---------- */
.classic{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,110px);align-items:start}
.classic-vis{position:sticky;top:96px;background:#fff;border-radius:6px;overflow:hidden;aspect-ratio:1;display:grid;place-items:center}
.classic-vis img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s,transform 1.2s var(--ease)}
.classic-vis img.on{opacity:1;transform:none}
.classic-tabs{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;z-index:2}
.classic-tabs button{width:34px;height:4px;background:rgba(22,22,22,.18);border-radius:2px;transition:background .3s}
.classic-tabs button.on{background:var(--ink)}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:clamp(32px,4vw,56px)}
.feat{border-top:1px solid var(--line);padding:18px 0 26px}
.feat b{display:block;font-size:12px;font-weight:800;font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.feat p{font-size:15px;color:var(--mute)}
.sizes{margin-top:36px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end}
.sizes-b{display:flex;align-items:flex-end;gap:4px;height:210px}
.sizes-b img{height:210px;width:auto;transform-origin:50% 100%;transition:transform .8s var(--ease),opacity .5s,filter .5s;opacity:.35;filter:grayscale(1);cursor:pointer}
.sizes-b img:nth-child(1){transform:scale(.72)}.sizes-b img:nth-child(2){transform:scale(.86)}
.sizes-b img.on{opacity:1;filter:none}
.sizes-o{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.size{border:1.5px solid var(--ink);padding:12px 14px;text-align:left;transition:background .35s,color .35s}
.size b{display:block;font-weight:800;font-stretch:125%;font-size:clamp(15px,1.4vw,20px);text-transform:uppercase}
.size span{font-size:12.5px;opacity:.7}
.size.on{background:var(--ink);color:var(--paper)}
.note{font-size:13px;color:var(--mute);margin-top:18px}

/* ---------- 06 golden: rolagem horizontal presa ---------- */
.hz{padding:0;position:relative}
.hz-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.hz-track{display:flex;height:100%;will-change:transform}
.hz-p{flex:0 0 auto;height:100%;display:flex;flex-direction:column;justify-content:center;padding:90px clamp(28px,4vw,72px) 60px;position:relative}
.hz-intro{width:min(94vw,1080px);padding-left:var(--gx)}
.hz-intro .s2{margin:24px 0 18px;max-width:20ch}
.hz-b{width:clamp(280px,30vw,460px);align-items:center;text-align:center;border-left:1px solid var(--line)}
.hz-b img{height:min(58vh,600px);width:auto;transition:transform 1s var(--ease)}
.hz-b:hover img{transform:translateY(-14px) rotate(-2deg)}
.hz-b .nn{position:absolute;top:96px;left:24px;font-size:11px;font-weight:700;letter-spacing:.2em}
.hz-b h3{margin-top:22px;font-size:12px;font-weight:700;font-stretch:112%;letter-spacing:.22em;text-transform:uppercase}
.hz-b h3 em{font-style:normal;color:var(--gold)}
.hz-q{width:min(92vw,760px);background:var(--wine);color:var(--paper);padding-left:clamp(32px,5vw,90px);padding-right:clamp(32px,5vw,90px)}
.hz-q .eye{margin-top:22px}
.hz-prog{position:absolute;left:var(--gx);right:var(--gx);bottom:28px;height:2px;background:var(--line);z-index:3}
.hz-prog i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}

/* detalhes dourados */
.gdet{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,100px);align-items:center}
.gdet-g{display:grid;grid-template-columns:1fr 1.2fr;gap:6px}
.gdet-g .clip{aspect-ratio:1/1}.gdet-g .clip:nth-child(odd){aspect-ratio:.82/1}
.gdet-g .clip:nth-child(1),.gdet-g .clip:nth-child(4){transform:none}
.list{list-style:none;margin:28px 0 40px;border-bottom:1px solid var(--line)}
.list li{border-top:1px solid var(--line);padding:14px 0;font-size:clamp(15px,1.2vw,18px);display:flex;gap:14px;align-items:center}
.list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.q{margin-bottom:18px}

/* ---------- 08 pearly ---------- */
.pearly{overflow:hidden}
.holo{background:linear-gradient(100deg,#8fb8e8,#f3b8cf 22%,#f6e7b4 40%,#a8e6d9 58%,#b9a8f0 76%,#8fb8e8);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holo 7s linear infinite;-webkit-text-stroke:1px rgba(22,22,22,.14)}
@keyframes holo{to{background-position:300% 0}}
.pearly-top{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.pearly-img{margin:clamp(40px,5vw,72px) calc(var(--gx)*-1) 0;height:clamp(240px,42vw,620px);position:relative;overflow:hidden}
.pearly-img .clip{position:absolute;inset:0}
.pearly-img img{object-position:60% 50%}
.pearly-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 47%,rgba(180,220,255,.35) 52%,transparent 66%);background-size:260% 100%;mix-blend-mode:soft-light;animation:sheen 6s var(--ease-io) infinite;pointer-events:none}
@keyframes sheen{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.pearls{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);margin-top:clamp(40px,5vw,72px)}
.pearl{position:relative;text-align:center;padding:32px 16px 26px;border:1px solid var(--line);border-radius:6px;overflow:hidden;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.pearl img{height:clamp(220px,30vw,440px);width:auto;margin:0 auto}
.pearl::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,180,220,.55),rgba(150,210,255,.4) 28%,rgba(190,255,220,.25) 46%,transparent 62%);mix-blend-mode:color;opacity:0;transition:opacity .5s;pointer-events:none}
.pearl:hover::after{opacity:1}
.pearl h3{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

/* ---------- 09 paleta ---------- */
.pal-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.pal-head .h1{font-size:clamp(56px,11vw,200px);letter-spacing:-.03em}
.pal-head .s2{max-width:22ch;text-align:right}
.pal{display:grid;grid-template-columns:.8fr 1.2fr;margin-top:clamp(32px,4vw,64px);min-height:min(74vh,720px);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pal-b{position:relative;display:grid;place-items:center;padding:24px;min-height:420px}
.pal-b img{position:absolute;inset:0;margin:auto;height:86%;width:auto;opacity:0;transform:translateY(22px) scale(.97);transition:opacity .55s,transform .9s var(--ease)}
.pal-b img.on{opacity:1;transform:none}
.pal-c{background:var(--c,#1c1c1d);color:var(--ct,#fff);padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between;transition:background .7s var(--ease),color .5s;position:relative;overflow:hidden}
.pal-c .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pal-n{font-size:clamp(34px,5.2vw,92px);overflow:hidden}
.pal-n span{display:block;animation:nameIn .8s var(--ease)}
@keyframes nameIn{from{transform:translateY(105%)}}
.pal-k{font-variant-numeric:tabular-nums;font-weight:800;font-stretch:125%;font-size:clamp(18px,2vw,30px)}
.sw{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sw button{width:clamp(30px,3.1vw,46px);aspect-ratio:1;border-radius:50%;background:var(--c);border:1px solid rgba(22,22,22,.14);position:relative;transition:transform .45s var(--ease)}
.sw button::after{content:"";position:absolute;inset:-6px;border:1.5px solid var(--ink);border-radius:50%;opacity:0;transform:scale(.8);transition:opacity .3s,transform .45s var(--ease)}
.sw button:hover{transform:translateY(-5px)}
.sw button.on::after{opacity:1;transform:none}

/* ---------- 11 laser ---------- */
.laser{overflow:hidden}
.laser-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:center}
.eyebrow-l{color:var(--gold-2);opacity:1}
.engr{position:relative;background:radial-gradient(120% 90% at 50% 20%,#2b2b2c,#101010 70%);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:28px 24px 24px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;overflow:hidden}
.engr::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:18px 18px;mask-image:linear-gradient(#000,transparent 80%);-webkit-mask-image:linear-gradient(#000,transparent 80%)}
.engr svg{height:min(60vh,520px);width:auto;position:relative;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.engr-ui{position:relative;display:flex;flex-direction:column;gap:18px}
.engr-ui label{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.6;display:block;margin-bottom:8px}
.engr-ui input{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(255,255,255,.35);color:#fff;font:400 clamp(22px,2.2vw,32px) "Young Serif",serif;padding:6px 0 10px;outline:0;border-radius:0}
.engr-ui input:focus{border-color:var(--laser)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:8px 13px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:.3s}
.seg button.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dots{display:flex;gap:8px}
.dots button{width:26px;height:26px;border-radius:50%;background:var(--c);border:1.5px solid rgba(255,255,255,.3);transition:transform .3s var(--ease)}
.dots button.on{transform:scale(1.2);border-color:#fff}
.engr-st{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;display:flex;gap:8px;align-items:center;color:var(--laser);min-height:16px}
.engr-st i{width:7px;height:7px;border-radius:50%;background:var(--laser);box-shadow:0 0 12px 3px var(--laser);animation:blink .5s steps(2) infinite}
.engr-st.done{color:rgba(255,255,255,.6)}.engr-st.done i{background:#7fd69b;box-shadow:none;animation:none}
@keyframes blink{50%{opacity:.2}}
.laser-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:clamp(48px,6vw,96px)}
.laser-ph figure{position:relative}
.laser-ph .clip{aspect-ratio:4/5}
.laser-ph figcaption{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:12px}
.beam{position:absolute;top:0;bottom:0;width:1px;left:0;background:linear-gradient(transparent,var(--laser),transparent);box-shadow:0 0 18px 2px var(--laser);opacity:.5;animation:beam 9s linear infinite;pointer-events:none}
@keyframes beam{to{transform:translateX(100vw)}}

/* ---------- 12 stickers ---------- */
.stk{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:center}
.stk-sheet{width:min(100%,360px);margin-top:36px;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-12px) rotate(1.5deg)}}
.pols{position:relative;height:clamp(520px,58vw,820px);touch-action:pan-y}
.pol{touch-action:pan-y;position:absolute;width:clamp(170px,22vw,320px);background:#fff;padding:10px 10px 0;box-shadow:0 18px 40px -14px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.08);transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(var(--sc,1));transition:transform .6s var(--ease),box-shadow .4s;cursor:grab;user-select:none;-webkit-user-drag:none}
.pol.drag{transition:none;cursor:grabbing;--sc:1.05;box-shadow:0 40px 70px -20px rgba(0,0,0,.45)}
.pol img{aspect-ratio:1;object-fit:cover;width:100%;pointer-events:none}
.pol b{display:block;padding:11px 2px 13px;font-size:11px;font-weight:800;font-stretch:125%;letter-spacing:.08em;text-transform:uppercase}
.pol:nth-child(1){left:2%;top:2%;--r:-5deg}.pol:nth-child(2){right:4%;top:0;--r:4deg}
.pol:nth-child(3){left:14%;bottom:0;--r:3deg}.pol:nth-child(4){right:0;bottom:4%;--r:-4deg}
.pols:not(.in) .pol{--y:120px;opacity:0}
.pol{transition:transform .9s var(--ease) calc(var(--k,0)*.12s),opacity .6s calc(var(--k,0)*.12s),box-shadow .4s}
.pols.in .pol.moved{transition:transform .6s var(--ease),box-shadow .4s}

/* ---------- 13 pins ---------- */
.pins{background:var(--yellow);padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.pins-img{position:relative;overflow:hidden;min-height:60vh}
.pins-img img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.pins-c{padding:var(--sy) var(--gx);display:flex;flex-direction:column;justify-content:center}
.pins-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:36px 0}
.pins-3 .clip{aspect-ratio:1}
.pins-3 .clip:hover img{transform:scale(1.12)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1.5px solid var(--ink);padding-top:18px}
.trio b{display:block;font-weight:800;font-stretch:125%;font-size:clamp(20px,2.4vw,38px);letter-spacing:-.02em;line-height:1.05}
.trio span{font-size:14px;opacity:.75;display:block;margin-top:6px}
.dark .trio{border-color:rgba(255,255,255,.4)}

/* ---------- 14 acessórios ---------- */
.acc{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,72px)}
.acc-hero{position:relative;min-height:420px;border-radius:6px;overflow:hidden}
.acc-hero .clip{position:absolute;inset:0}
.acc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)}
.card{background:#fff;border-radius:6px;padding:14px 16px 18px;transition:transform .5s var(--ease),box-shadow .5s;transform-style:preserve-3d;will-change:transform}
.card:hover{box-shadow:0 30px 50px -28px rgba(0,0,0,.35)}
.card figure{aspect-ratio:1.25;display:grid;place-items:center;overflow:hidden}
.card img{max-height:100%;width:auto;max-width:86%;transition:transform .8s var(--ease)}
.card:hover img{transform:scale(1.1) rotate(-3deg)}
.card b{display:block;font-size:12px;font-weight:800;font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;margin:10px 0 6px}
.card p{font-size:13.5px;color:var(--mute);line-height:1.45}
.head2{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.head2 .s2{max-width:20ch;text-align:right}

/* ---------- 15 comunidade ---------- */
.com{padding:0;display:grid;grid-template-columns:1.2fr .8fr}
.com-l{padding:var(--sy) var(--gx)}
.rows{margin-top:clamp(36px,4vw,64px);border-bottom:1px solid var(--line)}
.rowx{display:grid;grid-template-columns:200px 1fr;gap:24px;border-top:1px solid var(--line);padding:20px 0;transition:padding .5s var(--ease),background .4s}
.rowx:hover{padding-left:14px}
.rowx b{font-size:12px;font-weight:800;font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.rowx p{font-size:clamp(15px,1.15vw,17px);color:var(--mute)}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(40px,5vw,72px)}
.quad b{display:block;font-weight:800;font-stretch:125%;font-size:clamp(22px,2.6vw,42px);letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
.quad span{font-size:13.5px;color:var(--mute);display:block;margin-top:6px}
.com-r{background:var(--ink);color:var(--paper);padding:var(--sy) var(--gx);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.com-r::before{content:"“";position:absolute;top:-.12em;right:.04em;font:400 clamp(260px,34vw,560px)/1 "Young Serif",serif;color:rgba(255,255,255,.06)}
.qs{position:relative;min-height:clamp(200px,22vw,330px);margin-top:28px}
.qs blockquote{position:absolute;inset:0;font-size:clamp(26px,3vw,48px);opacity:0;transform:translateY(24px);transition:opacity .7s,transform .9s var(--ease)}
.qs blockquote.on{opacity:1;transform:none}
.ticks{display:flex;gap:6px;margin:18px 0}
.ticks i{flex:1;height:2px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;max-width:60px}
.ticks i.on::after{content:"";position:absolute;inset:0;background:var(--gold-2);transform-origin:0 50%;animation:tick 4s linear forwards}
@keyframes tick{from{transform:scaleX(0)}}

/* ---------- 16 empresas ---------- */
.emp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,100px);align-items:center}
.emp-v{background:#fff;border-radius:8px;display:grid;grid-template-columns:1.25fr 1fr;align-items:end;justify-items:center;padding:clamp(24px,4vw,56px) 16px 22px;gap:8px;position:relative;overflow:hidden}
.emp-v figure{text-align:center}
.emp-v img{height:clamp(260px,36vw,520px);width:auto;margin:0 auto;transition:transform 1s var(--ease)}
.emp-v figure:hover img{transform:translateY(-10px)}
.emp-v figcaption{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-top:14px;line-height:1.7}
.emp-v figcaption small{display:block;font-weight:500;opacity:.6;font-size:9.5px}
.box{background:var(--ink);color:var(--paper);padding:20px 22px;margin:28px 0 22px;border-radius:4px}
.box .eye{color:var(--gold-2);opacity:1;margin-bottom:8px}
.box p{font-size:15px;line-height:1.55}

/* ---------- 17 como funciona ---------- */
.how{padding:0;display:grid;grid-template-columns:.42fr 1fr}
.how-img{position:relative;overflow:hidden;min-height:480px}
.how-img img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.how-img .eye{position:absolute;left:20px;top:92px;color:#fff;opacity:.9;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.how-c{padding:var(--sy) var(--gx);min-width:0}
.com>*,.pins>*,.chap>*,.hero>*{min-width:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px);margin-top:clamp(40px,5vw,72px);position:relative;padding-top:26px}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.steps-f{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
.step{position:relative;opacity:.3;transition:opacity .6s}
.step.on{opacity:1}
.step::before{content:"";position:absolute;left:0;top:-32px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--line);transition:.5s var(--ease)}
.step.on::before{background:var(--gold);border-color:var(--gold);transform:scale(1.15)}
.step i{font-style:normal;display:block;font-weight:800;font-stretch:125%;font-size:clamp(36px,4.6vw,76px);color:var(--gold);line-height:1;letter-spacing:-.03em}
.step b{display:block;font-size:12px;font-weight:800;font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;margin:12px 0 8px}
.step p{font-size:14.5px;color:var(--mute);line-height:1.5}
.how .trio{margin-top:clamp(40px,5vw,72px)}
.lgs{margin-top:clamp(40px,5vw,64px);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lgs-t{display:flex;gap:clamp(40px,5vw,84px);width:max-content;align-items:center;animation:lgs 26s linear infinite;padding-top:18px}
.lgs:hover .lgs-t{animation-play-state:paused}
.lgs img{height:clamp(34px,3.6vw,52px);width:auto;mix-blend-mode:multiply;filter:contrast(1.06)}
@keyframes lgs{to{transform:translateX(-50%)}}

/* ---------- 18 revenda ---------- */
.rev-g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px);margin-top:clamp(48px,6vw,96px)}
.rev{border-top:1.5px solid var(--paper);padding-top:18px;position:relative}
.rev small{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--gold-2)}
.rev b{display:block;font-weight:800;font-stretch:125%;font-size:clamp(15px,1.5vw,22px);text-transform:uppercase;margin:10px 0;line-height:1.1}
.rev p{font-size:14.5px;color:var(--mute);line-height:1.55}
.march{background:var(--paper);padding:clamp(36px,5vw,72px) var(--gx) 0;overflow:hidden}
.march-i{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,28px);max-width:1400px;margin:0 auto}
.march img{height:clamp(110px,19vw,300px);width:auto;transform:translateY(105%);transition:transform 1.2s var(--ease) calc(var(--k)*.07s)}
.march.in img{transform:none}
.march img:hover{transform:translateY(-12px);transition-delay:0s;transition-duration:.5s}

/* ---------- 19 fim ---------- */
.end{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(120px,16vh,200px);padding-bottom:36px;overflow:hidden}
.end-c{text-align:center}
.end-logo{width:min(78vw,1100px);margin:0 auto;overflow:hidden}
.end-logo use{transform:translateY(-460px);transition:transform 1.4s var(--ease) calc(var(--k,0)*.09s)}
.end-logo.in use{transform:none}
.end .s1{margin-top:clamp(20px,3vw,44px)}
.end-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:36px}
.links{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:64px}
.links a{display:block;font-size:clamp(14px,1.15vw,17px);margin-top:8px;position:relative;width:fit-content}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .top-mid{display:none}
  .hero{grid-template-columns:1fr}
  .hero-l{min-height:74svh;padding-top:96px}
  .hero-r{height:86vw;max-height:80svh}
  .badge{left:auto;right:18px;bottom:auto;top:-64px}
  .hero-r{overflow:visible}.hero-r img{inset:0;height:100%}
  .quem-grid,.classic,.gdet,.pearly-top,.laser-g,.stk,.emp,.acc{grid-template-columns:1fr}
  .classic-vis{position:relative;top:0}
  .chap{grid-template-columns:1fr;min-height:0}
  .chap-l{min-height:68svh;gap:48px}
  .chap-r{min-height:70vh}.strips{min-height:64vh}
  .pal{grid-template-columns:1fr}.pal-b{min-height:54vh}.pal-c{min-height:240px}
  .pal-head .s2,.head2 .s2{text-align:left}
  .pins,.com,.how{grid-template-columns:1fr}
  .how-img{min-height:70vw}
  .rev-g{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:44px}
  .steps::before,.steps-f,.step::before{display:none}.step{opacity:1}
  .idx ol{columns:1}
  .acc-hero{min-height:74vw}
  /* golden vira carrossel de arrastar */
  .hz{height:auto!important}
  .hz-pin{position:relative;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .hz-track{transform:none!important;height:auto}
  .hz-p{scroll-snap-align:start;padding-top:72px;min-height:78svh}
  .hz-intro,.hz-q{width:88vw}.hz-b{width:72vw}.hz-b img{height:46vh}
  .hz-prog{display:none}
}
@media (max-width:640px){
  .pillars,.feats,.sizes,.pins-3,.trio,.quad,.links,.rev-g{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}
  .num,.num+.num{padding-left:0;border-left:0;padding-right:12px}
  .num:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .sizes{grid-template-columns:1fr}
  .acc-g{grid-template-columns:1fr 1fr}
  .engr{grid-template-columns:1fr;justify-items:center}.engr-ui{width:100%}
  .engr svg{height:380px}
  .rowx{grid-template-columns:1fr;gap:6px}
  .pearls{gap:6px}.pearl{padding:18px 4px 14px}.pearl h3{font-size:9.5px;letter-spacing:.12em}
  .laser-ph{grid-template-columns:1fr 1fr}.laser-ph figure:last-child{display:none}
  .emp-v img{height:62vw}
  .top .btn.hide-s{display:none}
  .pols{height:118vw}.pol{width:46vw}
  .pre-t{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .grain,.cur,.beam{display:none}
  .w{opacity:1}
}