.deco3d{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;min-height:290px;border-radius:28px;cursor:pointer;overflow:hidden;
 background:radial-gradient(120% 90% at 70% 10%,rgba(233,211,164,.16),transparent 55%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
 border:1px solid rgba(233,211,164,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -40px #000;--rx:0deg;--ry:0deg}
.deco3d:focus-visible{outline:3px solid #E9D3A4;outline-offset:4px}
.deco3d .scene{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 30%}
.deco3d .float{position:absolute;left:50%;top:52%;transform-style:preserve-3d}
.deco3d .obj{position:absolute;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(calc(58deg + var(--ry))) rotateZ(calc(-38deg + var(--rx)));transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.deco3d .shadow{position:absolute;left:50%;top:66%;width:250px;height:60px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent);filter:blur(6px);opacity:.85}
.deco3d.vis .float{animation:fl3 5s ease-in-out infinite alternate}@keyframes fl3{to{transform:translateY(-8px)}}
.deco3d .lbl{position:absolute;left:14px;bottom:12px;display:inline-flex;align-items:center;gap:7px;font:600 .74rem var(--sans);color:#F4E6C6;background:rgba(5,12,24,.45);border:1px solid rgba(233,211,164,.25);padding:6px 11px;border-radius:99px;backdrop-filter:blur(6px)}
.deco3d .lbl svg{width:15px;height:15px}
/* cube primitive: ground plane x,y; z up */
.cb{position:absolute;left:0;top:0;width:var(--w);height:var(--d);transform-style:preserve-3d;transform:translate3d(var(--x),var(--y),var(--z));transition:transform .7s cubic-bezier(.2,.8,.25,1)}
.cb i{position:absolute;left:0;top:0;backface-visibility:visible}
.cb .t{width:var(--w);height:var(--d);transform:translateZ(var(--h));background:var(--top,#F8F3EA)}
.cb .fr{width:var(--w);height:var(--h);transform-origin:0 0;transform:translateY(var(--d)) rotateX(90deg);background:var(--front,#D9CBB0)}
.cb .bk{width:var(--w);height:var(--h);transform-origin:0 0;transform:rotateX(90deg);background:var(--front,#D9CBB0)}
.cb .rt{width:var(--h);height:var(--d);transform-origin:0 0;transform:translateX(var(--w)) rotateY(-90deg);background:var(--side,#BFAE8E)}
.cb .lf{width:var(--h);height:var(--d);transform-origin:0 0;transform:rotateY(-90deg);background:var(--side,#BFAE8E)}
.dc{position:absolute;left:var(--x);top:var(--y);transform-style:preserve-3d;transform:translateZ(var(--z))}
.dc i{position:absolute;width:calc(var(--r)*2);height:calc(var(--r)*2);left:calc(var(--r)*-1);top:calc(var(--r)*-1);border-radius:50%;transform:translateZ(var(--k));background:var(--rim,#9C7A3C)}
.dc i:last-child{background:var(--face,radial-gradient(circle at 35% 30%,#FFF4D6,#E3C27C 45%,#B8914C 80%));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
/* gabinete: folder */
.d-gabinete .board{--top:linear-gradient(135deg,#1F3A63,#152B4B);--front:#0E1F38;--side:#0B192E}
.d-gabinete .paper{--top:linear-gradient(160deg,#FFFDF8,#F1E8D7);--front:#E4D8C2;--side:#D8CAB0}
.d-gabinete .paper .t{background-image:linear-gradient(#B8914C,#B8914C),repeating-linear-gradient(180deg,transparent 0 13px,rgba(24,52,90,.18) 13px 15px);background-size:60% 6px,80% 70%;background-position:14px 14px,14px 34px;background-repeat:no-repeat}
.d-gabinete .tab{--top:#E9D3A4;--front:#B8914C;--side:#9C7A3C}
.d-gabinete .hinge{position:absolute;transform-style:preserve-3d;transform:translateZ(26px);transform-origin:0 0;transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.d-gabinete .cover{--top:linear-gradient(135deg,#C9A35E,#E9D3A4 40%,#B8914C);--front:#8F6C31;--side:#7E5E29}
.d-gabinete.on .hinge{transform:translateZ(26px) rotateX(-78deg)}
.d-gabinete.on .p2{transform:translate3d(36px,-18px,40px) rotateZ(-6deg)}
.d-gabinete.on .p1{transform:translate3d(20px,-8px,28px) rotateZ(3deg)}
/* balanca */
.d-balanca .base{--rim:#0E1F38;--face:radial-gradient(circle at 35% 30%,#2E5285,#18345A 60%,#0F2341)}
.d-balanca .b3{--face:radial-gradient(circle at 35% 30%,#FFF4D6,#D9B66F 55%,#A9843E);--rim:#8F6C31}
.d-balanca .pillar{--top:#F0DDB0;--front:linear-gradient(90deg,#C9A35E,#F0DDB0 45%,#B8914C);--side:#8F6C31}
.d-balanca .beam{--top:linear-gradient(90deg,#B8914C,#F4E2B8 50%,#B8914C);--front:#8F6C31;--side:#7E5E29}
.d-balanca .knob{--top:#FFF4D6;--front:#C9A35E;--side:#9C7A3C}
.d-balanca .arm{position:absolute;transform-style:preserve-3d;transform-origin:100px 70px 158px;transform:rotateY(5deg);transition:transform 1s cubic-bezier(.3,1.4,.4,1)}
.d-balanca.on .arm{transform:rotateY(-6deg)}
.d-balanca .pan{--rim:#8F6C31}
.d-balanca .cord{position:absolute;left:var(--x);top:70px;width:2px;height:82px;background:linear-gradient(#E9D3A4,#B8914C);transform-origin:0 0;transform:translateZ(76px) rotateX(-90deg)}
/* tributos */
.d-tributos .coin{--rim:#8F6C31}
.d-tributos .block{--top:linear-gradient(135deg,#FBF6EC,#E8DCC6);--front:linear-gradient(#D9CBB0,#C2B08D);--side:#AE9B78}
.d-tributos .k2{--top:linear-gradient(135deg,#29497A,#18345A);--front:#132A4A;--side:#0D1D35}
.d-tributos .flip{position:absolute;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.d-tributos .chip{--top:linear-gradient(135deg,#FFFDF8,#EFE4CF);--front:#B8914C;--side:#9C7A3C}
.d-tributos .chip .t{background-image:linear-gradient(#18345A,#18345A),linear-gradient(#B8914C,#B8914C);background-size:55% 9px,35% 7px;background-position:12px 14px,12px 34px;background-repeat:no-repeat}
.d-tributos.on .flip{transform:translate3d(10px,-60px,40px) rotateX(-24deg) rotateZ(10deg)}
.d-tributos.on .c1{transform:translateZ(calc(var(--z) + 14px))}
.d-tributos .c1{transition:transform .7s cubic-bezier(.2,.8,.25,1)}
@media(max-width:560px){.deco3d{min-height:250px}.deco3d .obj{scale:.82}}
@media(prefers-reduced-motion:reduce){.deco3d *,.deco3d{animation:none!important;transition:none!important}}
.deco3d .obj{width:220px;height:150px;left:0;top:0}
.d-gabinete .paper .t,.d-tributos .chip .t{background-color:#FFFCF5}
.d-balanca .cord{transform:translateZ(76px) rotateX(90deg)}
.d-balanca .obj{width:200px;height:140px}
.d-tributos .obj{width:240px;height:200px}
.d-balanca .float{top:64%}.d-tributos .float{top:58%}.d-tributos .obj{scale:.86}
.d-gabinete.on .hinge{transform:translateZ(26px) rotateX(78deg)}
@media(max-width:560px){.d-tributos .obj{scale:.72}.d-balanca .obj{scale:.78}}