/* Equilíbrio entre a riqueza do mockup e a navegação limpa em pop-ups. */
.hero{background:#f4f1e9;position:relative;height:clamp(445px,calc(16vw + 210px),490px)}
.hero-copy{width:43%;z-index:3}
.hero-description{max-width:420px}
.hero-art{left:35%;right:3%;top:0;bottom:0;overflow:hidden}
.hero-art:before{display:block;content:'';position:absolute;inset:15px 10% 32px 0;width:auto;height:auto;z-index:-1;background-image:linear-gradient(#1d3b5610 1px,transparent 1px),linear-gradient(90deg,#1d3b5610 1px,transparent 1px);background-size:34px 34px;transform:perspective(900px) rotateY(-10deg) rotateZ(-5deg);mask-image:radial-gradient(ellipse,#000 8%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse,#000 8%,transparent 70%)}
.hero-art:after{display:block;content:'';position:absolute;left:25%;right:6%;height:22%;top:auto;bottom:10%;background:radial-gradient(ellipse,#7c786420,transparent 68%);z-index:-1}
.hero-parallax{inset:0}
.hero-picture.finished-picture{inset:10px 7% 47px 22%;transform:rotate(-4deg);filter:drop-shadow(0 22px 17px #18314925);transition:clip-path 1.5s cubic-bezier(.25,.1,.2,1),transform 1s}
.hero-picture.sketch-picture{inset:65px 36% 43px 0;background-size:520% 375%;background-position:40% 28%;mask-image:radial-gradient(ellipse,#000 23%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse,#000 23%,transparent 65%);filter:grayscale(1) contrast(1.12);opacity:.75;transform:rotate(-6deg);transition:opacity 1.2s,transform 1.2s}
.hero[data-stage='2'] .sketch-picture{opacity:.42;transform:rotate(-6deg) translateX(-9px)}
.hero-stitch{inset:auto 3% 13% 4%;height:57%;width:93%;stroke-width:1.4;opacity:.45;z-index:2;transform:rotate(-5deg)}
.hero[data-stage='2'] .hero-stitch{opacity:.38}
.studio-heading{position:absolute;left:14%;top:24px;z-index:2;display:flex;align-items:center;gap:10px;color:#344b5a;transform:rotate(-7deg);pointer-events:none}
.studio-heading span{width:27px;height:1px;background:var(--orange)}
.studio-heading p{font-size:15px;font-style:italic;font-weight:550;letter-spacing:.15px}
.swatches{position:absolute;right:0;top:12%;width:115px;height:230px;z-index:4;display:block;border:0;background:none;padding:0;text-align:center;transition:transform .4s}
.swatches:hover{transform:translateY(-5px)}
.swatch{position:absolute;background-image:var(--art);background-repeat:no-repeat;filter:drop-shadow(0 7px 5px #24364822);mask-image:radial-gradient(ellipse,#000 49%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,#000 49%,transparent 73%);width:85px;height:77px}
.swatch-navy{top:0;left:3px;background-size:1724% 1107%;background-position:79% 15.3%;transform:rotate(-10deg)}
.swatch-orange{top:57px;right:0;background-size:1640% 1045%;background-position:85.1% 21.55%;transform:rotate(9deg)}
.swatch-leather{top:116px;left:0;width:99px;background-size:1393% 1045%;background-position:81.9% 27.98%;transform:rotate(-7deg)}
.swatches-label{position:absolute;bottom:0;left:0;right:0;font-size:10px;letter-spacing:.6px;line-height:1.35;color:#536577}
.swatches-label b{display:block;color:#a94b16;font-weight:500;margin-top:5px}
.studio-stages{position:absolute;left:21%;right:16%;bottom:21px;z-index:5;display:flex;justify-content:space-between;gap:18px}
.studio-stages:before{content:'';position:absolute;height:1px;left:0;right:0;top:-10px;background:linear-gradient(90deg,#9dafa530,#c18d6455,#9dafa530)}
.studio-stages button{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:11px;color:#6b7884;white-space:nowrap}
.studio-stages button>span{font-size:10px;color:#889196}
.studio-stages button[aria-pressed=true]{color:#a34308;font-weight:700}
.studio-stages button[aria-pressed=true]>span{color:var(--orange)}
.motion-controls{bottom:17px;right:1%;z-index:6;gap:2px}
.motion-controls button{font-size:10px;padding:4px}
.motion-controls #motion span{display:none}
.feature{height:164px;border-color:#e4e5de;box-shadow:0 4px 12px #08203904}
.feature h2:before{content:'';display:block;width:23px;height:2px;background:#f76319;margin-bottom:10px}
.feature-text{padding-top:15px}
.feature-text>p,.custom-card .feature-text>p,.factory-card .feature-text>p,.project-card .feature-text>p,.process-card .feature-text>p{margin-top:8px}
.process-art{opacity:.84}
.panel-art{opacity:1}
.factory-art{opacity:.85}
.closing-stitch{opacity:.24}
@media(max-width:1180px) and (min-width:901px){
 .hero{height:435px}.hero-copy{width:46%}.hero-art{left:37%;right:2%}.studio-heading{left:17%;top:25px}.studio-heading p{font-size:12px}.swatches{width:90px;transform:scale(.85);transform-origin:top right;right:0;top:17%}.swatches:hover{transform:scale(.85) translateY(-4px)}.hero-picture.finished-picture{inset:30px 7% 60px 18%}.studio-stages{left:20%;right:18%;gap:8px}.studio-stages button{font-size:10px;gap:5px}.motion-controls{right:0;bottom:3px}
}
@media(max-width:900px){
 .hero{height:auto;padding-bottom:337px}.hero-copy{width:100%}.hero-art{left:0;right:0;top:auto;bottom:22px;height:300px}.hero-picture.finished-picture{inset:5px 13% 27px 13%}.hero-picture.sketch-picture{inset:48px 39% 36px -8%;opacity:.6}.hero[data-stage='2'] .sketch-picture{opacity:.31}.studio-heading{left:8%;top:10px;transform:rotate(-6deg)}.studio-heading p{font-size:11px}.studio-heading span{width:20px}.swatches{right:1%;top:7%;transform:scale(.58);transform-origin:top right}.swatches:hover{transform:scale(.58) translateY(-5px)}.swatches-label{font-size:12px}.studio-stages{left:12%;right:12%;bottom:0;gap:10px}.studio-stages button{font-size:10px;gap:6px}.studio-stages:before{top:-5px}.hero-stitch{inset:auto 3% 10% 3%;height:58%;width:94%;opacity:.25}.hero[data-stage='2'] .hero-stitch{opacity:.28}.motion-controls{bottom:1px;right:3%;gap:3px}.motion-controls button{font-size:9px}.motion-controls #replay span{display:none}.feature,.feature:not(.process-card){height:168px}.hero-art:before{inset:10px 4% 20px 1%}.hero-art:after{bottom:12%}
}
@media(max-width:370px){.studio-heading p{font-size:10px}.studio-stages{left:8%;right:8%}.studio-stages button{font-size:9px}.hero-picture.finished-picture{inset:25px 12% 34px 9%}.swatches{transform:scale(.5)}}