@font-face { font-family: Sora; src: url('assets/fonts/sora-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Sora; src: url('assets/fonts/sora-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Sora; src: url('assets/fonts/sora-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root { --black:#0c0c0c; --white:#f7f5f1; --rose:#cf8993; --grey:#9c9792; }
* { box-sizing:border-box; }
html { width:100%; max-width:100%; overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none; background:var(--black); color:var(--white); font-family:Sora,Arial,sans-serif; }
body { position:relative; width:100%; max-width:100%; margin:0; overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none; background:var(--black); }
body::before { content:''; position:fixed; z-index:20; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:4.6vw 4.6vw; mix-blend-mode:screen; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } img { display:block; }
:focus-visible { outline:2px solid var(--rose); outline-offset:4px; }.skip { position:fixed; z-index:99; left:12px; top:12px; padding:10px; background:var(--white); color:var(--black); transform:translateY(-180%); }.skip:focus { transform:none; }
.x-header { position:fixed; z-index:30; top:0; left:0; right:0; height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 3.2vw; border-bottom:1px solid rgba(255,255,255,.16); background:rgba(12,12,12,.72); backdrop-filter:blur(16px); }
.x-logo { width:110px; height:55px; }.x-logo img { width:100%; height:100%; object-fit:contain; }.x-header p { margin:0; color:var(--grey); font-size:8px; font-weight:600; letter-spacing:.15em; }.x-exit { justify-self:end; padding-bottom:4px; border-bottom:1px solid; font-size:9px; font-weight:600; letter-spacing:.07em; }
.x-main { width:100%; max-width:100%; min-height:100dvh; overflow-x:hidden; overflow-x:clip; }.x-screen { width:100%; max-width:100%; min-height:100dvh; overflow-x:hidden; overflow-x:clip; padding-top:82px; }.x-screen[hidden] { display:none!important; }.x-progress { position:fixed; z-index:25; right:20px; top:50%; display:grid; justify-items:center; gap:10px; transform:translateY(-50%); }.x-progress i { width:1px; height:110px; background:linear-gradient(var(--rose) 25%,rgba(255,255,255,.2) 25%); }.x-progress span { font-size:7px; letter-spacing:.1em; }
.x-kicker { margin:0 0 18px; color:var(--rose); font-size:9px; font-weight:700; letter-spacing:.14em; }
.x-intro { position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-inline:5vw; isolation:isolate; }
.x-intro::before { content:''; position:absolute; z-index:-2; inset:0; background:radial-gradient(circle at 72% 44%,rgba(207,137,147,.25),transparent 30%),linear-gradient(120deg,#0c0c0c 0 52%,#181616 100%); }
.x-intro h1 { position:relative; z-index:2; margin:0; font-size:clamp(70px,10.8vw,180px); line-height:.72; letter-spacing:-.115em; }.x-intro h1 span { display:block; animation:x-title-in .9s cubic-bezier(.18,.8,.2,1) both; }.x-intro h1 span:nth-child(2) { margin-left:10vw; color:transparent; -webkit-text-stroke:1px rgba(247,245,241,.7); animation-delay:.08s; }.x-intro h1 span:nth-child(3) { margin-left:2vw; color:var(--rose); animation-delay:.16s; }
.x-intro-bottom { position:relative; z-index:3; display:flex; align-items:end; justify-content:space-between; margin-top:5vh; }.x-intro-bottom p { max-width:330px; margin:0; color:#c3bdb8; font-size:12px; line-height:1.7; }.x-intro-bottom button,.x-primary { display:inline-flex; align-items:center; justify-content:space-between; gap:34px; min-height:52px; padding:0 18px; border:1px solid var(--white); background:var(--white); color:var(--black); font-size:9px; font-weight:700; letter-spacing:.06em; transition:.25s; }.x-intro-bottom button:hover,.x-primary:hover { border-color:var(--rose); background:var(--rose); transform:translateY(-3px); }.x-intro-bottom b { font-size:16px; }
.x-ghost { position:absolute; z-index:-1; right:-4vw; bottom:-6vw; margin:0; color:transparent; font-size:20vw; font-weight:700; line-height:.7; letter-spacing:-.12em; -webkit-text-stroke:1px rgba(247,245,241,.1); white-space:nowrap; }
.x-orbit { position:absolute; z-index:0; right:5vw; top:50%; width:min(39vw,580px); aspect-ratio:1; border:1px solid rgba(207,137,147,.45); border-radius:50%; transform:translateY(-50%); animation:x-orbit 10s linear infinite; }.x-orbit i { position:absolute; left:50%; top:50%; width:72%; height:1px; background:rgba(255,255,255,.15); transform-origin:center; }.x-orbit i:nth-child(2) { transform:rotate(60deg); }.x-orbit i:nth-child(3) { transform:rotate(120deg); }
.x-mood { display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:5vw; padding-inline:5vw; background:var(--white); color:var(--black); }.x-heading h2,.x-selection h2,.x-piece h2,.x-fit h2,.x-result h2 { margin:0; font-size:clamp(55px,7.5vw,118px); line-height:.8; letter-spacing:-.105em; }.x-mood-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#aaa49f; border:1px solid #aaa49f; }.x-mood-card { position:relative; min-height:250px; display:flex; flex-direction:column; justify-content:space-between; padding:24px; overflow:hidden; border:0; background:#171717; color:var(--white); text-align:left; isolation:isolate; }.x-mood-card::before { content:''; position:absolute; z-index:-1; width:180px; aspect-ratio:1; right:-60px; top:-70px; border-radius:50%; background:var(--rose); transform:scale(.55); opacity:.16; transition:.6s cubic-bezier(.2,.8,.2,1); }.x-mood-card:hover::before { transform:scale(1.8); opacity:.9; }.x-mood-card:hover { color:var(--black); }.x-mood-card>span { font-size:8px; letter-spacing:.15em; }.x-mood-card div { display:grid; gap:9px; }.x-mood-card strong { font-size:clamp(18px,2vw,29px); letter-spacing:-.06em; }.x-mood-card small { max-width:200px; color:#aaa5a0; font-size:9px; line-height:1.5; transition:.4s; }.x-mood-card:hover small { color:#302a2b; }.x-mood-card b { position:absolute; right:22px; bottom:22px; font-size:18px; }
.x-selection { padding:140px 5vw 55px; overflow:hidden; }.x-selection-head { display:flex; align-items:end; justify-content:space-between; gap:30px; }.x-selection h2 { font-size:clamp(54px,7vw,105px); }.x-selection h2 em,.x-result h2 em { color:var(--rose); font-style:normal; }.x-text-button { padding:0 0 5px; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; font-size:8px; font-weight:700; letter-spacing:.08em; }.x-status { min-height:20px; margin:27px 0 18px; color:var(--grey); font-size:10px; }
.x-product-track { display:flex; gap:16px; overflow-x:auto; overscroll-behavior-inline:contain; padding:0 6vw 22px 0; scrollbar-width:none; scroll-snap-type:x mandatory; }.x-product-track::-webkit-scrollbar { display:none; }.x-product-track.is-single { overflow-x:hidden; padding-right:0; }.x-product-track.is-single .x-product { flex-basis:min(100%,410px); }.x-product { --card-rx:0deg; --card-ry:0deg; flex:0 0 min(31vw,410px); padding:0; border:0; background:transparent; color:var(--white); text-align:left; opacity:0; transform:perspective(950px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(18px); animation:x-product-reveal .75s var(--reveal-delay,0ms) cubic-bezier(.2,.8,.2,1) forwards; transition:transform .25s ease; scroll-snap-align:start; }.x-product-visual { position:relative; height:min(54vh,520px); overflow:hidden; background:#252321; }.x-product-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%); transform:translateX(-130%); transition:.8s; }.x-product:hover .x-product-visual::after { transform:translateX(130%); }.x-product-visual img { width:100%; height:100%; object-fit:cover; animation:x-product-breathe 7s ease-in-out infinite alternate; transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s; }.x-product:hover img { transform:scale(1.045); filter:saturate(1.08); }.x-product-fallback { position:absolute; left:50%; top:50%; color:var(--rose); font-size:90px; font-weight:600; letter-spacing:-.13em; transform:translate(-50%,-50%); }.x-product-number { position:absolute; z-index:2; left:13px; top:13px; padding:6px 8px; background:var(--rose); color:var(--black); font-size:8px; }.x-product-info { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; padding:14px 0 9px; border-bottom:1px solid rgba(255,255,255,.25); }.x-product-info p { grid-column:1/-1; margin:0; color:var(--rose); font-size:7px; letter-spacing:.12em; text-transform:uppercase; }.x-product-info h3 { margin:0; font-size:15px; letter-spacing:-.04em; }.x-product-info strong { font-size:9px; }.x-product-action { display:block; padding-top:10px; font-size:8px; font-weight:700; letter-spacing:.08em; }.x-drag-hint { display:flex; align-items:center; gap:18px; color:var(--grey); font-size:7px; letter-spacing:.12em; }.x-drag-hint i { width:100px; height:1px; background:linear-gradient(90deg,var(--rose) 40%,rgba(255,255,255,.2) 40%); }
.x-product-loading .x-product-visual { display:grid; place-items:center; color:rgba(255,255,255,.18); font-size:70px; animation:x-loading 1.3s ease-in-out infinite alternate; }.x-product-loading:nth-child(2) .x-product-visual { animation-delay:.15s; }.x-product-loading:nth-child(3) .x-product-visual { animation-delay:.3s; }
.x-piece { display:grid; grid-template-columns:1.08fr .92fr; align-items:stretch; }.x-back { position:absolute; z-index:4; top:105px; left:3vw; padding:0; border:0; background:transparent; color:var(--white); font-size:8px; letter-spacing:.08em; }.x-piece-visual { position:relative; min-height:calc(100dvh - 82px); overflow:hidden; background:#252321; }.x-piece-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,rgba(12,12,12,.22)); }.x-piece-visual img { width:100%; height:100%; object-fit:cover; }.x-piece-index { position:absolute; z-index:2; left:24px; bottom:22px; color:var(--white); font-size:8px; letter-spacing:.14em; }.x-piece-copy { align-self:center; padding:8vw 7vw; }.x-piece-copy h2 { font-size:clamp(55px,7vw,105px); }.x-piece-copy>p:not(.x-kicker) { max-width:470px; margin:28px 0; color:#beb8b3; font-size:12px; line-height:1.8; white-space:pre-line; }.x-piece-copy>strong { font-size:12px; }.x-piece-actions { display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:38px; }.x-piece-actions>a { padding-bottom:4px; border-bottom:1px solid; font-size:8px; letter-spacing:.07em; }
.x-fit { display:grid; grid-template-columns:.8fr 1.2fr; }.x-fit-art { position:relative; display:grid; place-items:center; overflow:hidden; background:var(--rose); color:var(--black); }.x-fit-art>p { position:absolute; left:-3vw; bottom:-3vw; margin:0; font-size:9vw; font-weight:700; line-height:.75; letter-spacing:-.12em; white-space:nowrap; }.x-body-map { position:relative; width:230px; height:390px; border:1px solid rgba(12,12,12,.45); border-radius:48% 48% 31% 31%; }.x-body-map::before { content:''; position:absolute; left:50%; top:-80px; width:112px; aspect-ratio:1; border:1px solid; border-radius:50%; transform:translateX(-50%); }.x-body-map i { position:absolute; left:-45%; width:190%; height:1px; background:var(--black); animation:x-scan 3s ease-in-out infinite; }.x-body-map i:nth-child(1) { top:23%; }.x-body-map i:nth-child(2) { top:50%; animation-delay:.4s; }.x-body-map i:nth-child(3) { top:76%; animation-delay:.8s; }.x-body-map span { position:absolute; right:-56px; top:50%; font-size:7px; letter-spacing:.12em; transform:rotate(90deg); }.x-fit-form { align-self:center; display:grid; gap:22px; padding:120px 9vw 60px; }.x-fit-form h2 { font-size:clamp(50px,6vw,88px); }.x-fit-note { margin:-8px 0 4px; color:var(--grey); font-size:10px; }.x-fit-fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.x-fit-fields label { position:relative; display:grid; gap:7px; color:#bbb5b0; font-size:8px; font-weight:600; letter-spacing:.08em; }.x-fit-fields input { min-width:0; height:52px; padding:10px 42px 10px 12px; border:1px solid rgba(255,255,255,.35); border-radius:0; outline:0; background:transparent; color:var(--white); font-size:16px; }.x-fit-fields input:focus { border-color:var(--rose); box-shadow:0 0 0 3px rgba(207,137,147,.14); }.x-fit-fields small { position:absolute; right:12px; bottom:17px; color:var(--rose); font-size:8px; }.x-fit-form fieldset { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; border:0; }.x-fit-form legend { width:100%; margin-bottom:7px; color:#bbb5b0; font-size:8px; font-weight:600; letter-spacing:.08em; }.x-fit-form fieldset input { position:absolute; opacity:0; }.x-fit-form fieldset span { display:block; padding:10px 12px; border:1px solid rgba(255,255,255,.35); color:#bbb5b0; font-size:8px; cursor:pointer; }.x-fit-form fieldset input:checked+span { border-color:var(--rose); background:var(--rose); color:var(--black); }.x-fit-error { min-height:15px; margin:0; color:var(--rose); font-size:9px; }.x-fit-form .x-primary { justify-self:start; }
.x-result { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:100px 8vw 50px; overflow:hidden; }.x-result::before { content:'CAIMENTO'; position:absolute; right:-5vw; bottom:-4vw; color:transparent; font-size:18vw; font-weight:700; line-height:.7; letter-spacing:-.12em; -webkit-text-stroke:1px rgba(255,255,255,.08); }.x-result-orb { position:relative; width:min(40vw,540px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--rose); animation:x-result-pulse 4s ease-in-out infinite; }.x-result-orb::before,.x-result-orb::after { content:''; position:absolute; inset:-35px; border:1px solid rgba(207,137,147,.35); border-radius:50%; }.x-result-orb::after { inset:-75px; opacity:.4; }.x-result-orb span { color:var(--black); font-size:clamp(150px,22vw,330px); font-weight:700; line-height:.7; letter-spacing:-.16em; }.x-result-copy { position:relative; z-index:2; }.x-result-copy h2 { font-size:clamp(55px,6.5vw,98px); }.x-result-copy>p:not(.x-kicker) { max-width:430px; color:#c0bab5; font-size:12px; line-height:1.7; }.x-result-caveat { font-size:8px!important; }.x-result-copy>div { display:flex; align-items:center; gap:22px; margin-top:30px; }.x-result-copy .x-primary { text-decoration:none; }
.x-fit-art { --motion-x:0px; --motion-y:0px; --motion-r:0deg; isolation:isolate; }.x-fit-halo { position:absolute; z-index:0; left:50%; top:49%; width:min(31vw,430px); aspect-ratio:1; border:1px solid rgba(12,12,12,.36); border-radius:50%; transform:translate(-50%,-50%); animation:x-halo-spin 13s linear infinite; }.x-fit-halo::before,.x-fit-halo::after { content:''; position:absolute; border:1px solid rgba(12,12,12,.22); border-radius:50%; }.x-fit-halo::before { inset:13%; }.x-fit-halo::after { inset:-13%; }.x-fit-halo i { position:absolute; left:50%; top:50%; width:140%; height:1px; background:rgba(12,12,12,.22); transform:translate(-50%,-50%) rotate(25deg); }.x-fit-halo i:nth-child(2) { transform:translate(-50%,-50%) rotate(85deg); }.x-fit-halo i:nth-child(3) { transform:translate(-50%,-50%) rotate(145deg); }
.x-fit-character { position:absolute; z-index:2; left:50%; top:51%; width:78%; height:88%; transform:translate(calc(-50% + var(--motion-x)),calc(-50% + var(--motion-y))) rotate(var(--motion-r)); transition:transform .16s ease-out; will-change:transform; }.x-fit-character img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; filter:drop-shadow(0 24px 30px rgba(12,12,12,.24)); transform:scale(.94); transition:opacity .45s ease,transform .65s cubic-bezier(.2,.8,.2,1); }.x-fit-character[data-character="a"] [data-character-image="a"],.x-fit-character[data-character="b"] [data-character-image="b"] { opacity:1; transform:scale(1); }.x-character-scan { position:absolute; z-index:3; left:13%; right:13%; top:10%; height:2px; background:var(--white); box-shadow:0 0 18px rgba(255,255,255,.85); animation:x-character-scan 3.2s ease-in-out infinite; }
.x-character-switch { position:absolute; z-index:5; left:24px; top:105px; display:flex; border:1px solid rgba(12,12,12,.45); }.x-character-switch button,.x-motion-button { min-height:34px; padding:0 10px; border:0; background:rgba(247,245,241,.82); color:var(--black); font-size:7px; font-weight:700; letter-spacing:.08em; }.x-character-switch button+button { border-left:1px solid rgba(12,12,12,.35); }.x-character-switch button.is-active { background:var(--black); color:var(--white); }.x-motion-button { position:absolute; z-index:5; right:20px; bottom:20px; border:1px solid var(--black); }.x-motion-button:disabled { opacity:.72; }
@keyframes x-title-in { from { opacity:0; transform:translateY(65px) skewY(3deg); } to { opacity:1; transform:none; } } @keyframes x-orbit { to { transform:translateY(-50%) rotate(360deg); } } @keyframes x-scan { 0%,100% { transform:translateY(-20px); opacity:.25; } 50% { transform:translateY(20px); opacity:1; } } @keyframes x-result-pulse { 50% { transform:scale(1.04); box-shadow:0 0 100px rgba(207,137,147,.25); } } @keyframes x-loading { from { background:#1b1a19; } to { background:#302b2b; } } @keyframes x-product-reveal { to { opacity:1; transform:perspective(950px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(0); } } @keyframes x-product-breathe { to { transform:scale(1.025); } } @keyframes x-halo-spin { to { transform:translate(-50%,-50%) rotate(360deg); } } @keyframes x-character-scan { 0%,100% { transform:translateY(0); opacity:.25; } 50% { transform:translateY(58vh); opacity:1; } }
@media(max-width:800px){body::before{background-size:12vw 12vw}.x-header{height:68px;padding:0 18px;grid-template-columns:1fr 1fr}.x-logo{width:86px;height:44px}.x-header p{display:none}.x-exit{font-size:7px}.x-screen{padding-top:68px}.x-progress{display:none}.x-intro{padding-inline:20px}.x-intro h1{font-size:19vw;line-height:.78}.x-intro h1 span:nth-child(2){margin-left:5vw}.x-intro-bottom{align-items:flex-start;flex-direction:column;gap:25px}.x-orbit{right:-25vw;width:80vw;opacity:.7}.x-mood{display:block;padding:110px 18px 35px}.x-heading h2{font-size:16vw}.x-mood-grid{grid-template-columns:1fr;margin-top:45px}.x-mood-card{min-height:160px}.x-selection{padding:110px 18px 35px}.x-selection-head{align-items:flex-start;flex-direction:column}.x-selection h2{font-size:15vw}.x-product{flex-basis:78vw}.x-product-track.is-single .x-product{flex-basis:100%}.x-product-track{padding-right:0}.x-product-visual{height:57vh}.x-piece{display:block;padding-top:68px}.x-back{position:fixed;top:83px;left:18px;text-shadow:0 1px 4px #000}.x-piece-visual{min-height:56vh;height:56vh}.x-piece-copy{padding:45px 21px 70px}.x-piece-copy h2{font-size:17vw}.x-fit{display:block;padding-top:68px}.x-fit-art{height:370px}.x-fit-halo{width:245px}.x-fit-character{width:78%;height:90%}.x-character-switch{left:14px;top:15px}.x-motion-button{right:14px;bottom:14px}.x-fit-art>p{font-size:18vw}.x-fit-form{padding:45px 21px 70px}.x-fit-form h2{font-size:15vw}.x-fit-fields{grid-template-columns:1fr 1fr}.x-result{display:block;padding:120px 21px 70px}.x-result-orb{width:72vw;margin:0 auto 80px}.x-result-copy h2{font-size:15vw}.x-result-copy>div{align-items:flex-start;flex-direction:column}.x-result-orb span{font-size:44vw}}
@media(max-width:430px){.x-fit-fields{grid-template-columns:1fr}.x-product{flex-basis:84vw}.x-intro-bottom button,.x-primary{width:100%}.x-mood-card{min-height:145px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.x-product-track.is-single::after { content:'UMA PEÇA.\A MUITOS MOVIMENTOS.'; flex:1 0 42%; align-self:stretch; display:grid; place-items:center; min-height:520px; padding:40px; border:1px solid rgba(255,255,255,.08); color:transparent; font-size:clamp(42px,6vw,92px); font-weight:700; line-height:.82; letter-spacing:-.09em; white-space:pre-line; -webkit-text-stroke:1px rgba(207,137,147,.38); }
.x-piece-visual.is-fallback { display:grid; place-items:center; background:radial-gradient(circle at 50% 48%,rgba(207,137,147,.28),transparent 36%),#1a1918; }.x-piece-visual.is-fallback::before { content:''; position:absolute; width:58%; aspect-ratio:1; border:1px solid rgba(207,137,147,.45); border-radius:50%; box-shadow:0 0 0 42px rgba(207,137,147,.08),0 0 0 84px rgba(207,137,147,.04); }.x-piece-visual.is-fallback img { position:relative; z-index:1; width:48%; height:35%; object-fit:contain; }
@media(max-width:800px){.x-product-track.is-single::after{display:none}}