:root{--gold:#c9a96e;--ink:#151515;--soft:#f4f2ee}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;background:#f2f0ed;color:#151515;margin:0}button,select{font:inherit}button{cursor:pointer}.topbar{background:#0c0c0c;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:16px 26px;gap:20px;min-height:64px}.brand-back{color:#fff;text-decoration:none;border-bottom:1px solid #776e5c;padding-bottom:5px;font-size:12px;letter-spacing:.12em}.brand-back:hover{color:var(--gold)}.top-brand{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.brand-gold{color:var(--gold);letter-spacing:.2em;font-size:11px;font-weight:800}.brand-text{font-size:13px;font-weight:800;letter-spacing:.18em}.top-caption{font-size:11px;color:#bbb}.viewer{display:flex;min-height:600px;border-bottom:4px solid #0d0d0d}.left-panel{width:252px;flex-shrink:0;background:#111;color:white;padding:20px 18px;display:flex;flex-direction:column;gap:12px}.section-label{color:var(--gold);font-size:10px;letter-spacing:.2em;font-weight:800;margin:0}.category-tabs{display:flex;flex-direction:column;gap:7px}.cat{background:#1e1e1e;color:#ddd;border:1px solid #353535;text-align:left;text-transform:uppercase;letter-spacing:.08em;padding:10px 12px;font-size:11px;font-weight:800}.cat.active,.cat:hover{border-color:var(--gold);background:#29231a;color:#fff}.current-swatch{height:145px;background:#303030 center/cover;border:2px solid var(--gold);margin-top:6px}.current-name{text-align:center;text-transform:uppercase;font-size:13px;font-weight:800;line-height:1.45}.current-code{text-align:center;color:var(--gold);font-size:10px;letter-spacing:.08em;min-height:14px}.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#999;font-size:11px}.pager button{background:#202020;color:#fff;border:1px solid #393939;padding:8px 14px}.pager button:hover{border-color:var(--gold)}.divider{border-top:1px solid #333;margin:4px 0}.left-panel select{width:100%;font-size:13px;color:#fff;background:#242424;border:1px solid #5b5549;padding:11px}.isolation-preview{display:flex;align-items:center;gap:10px;min-height:66px;border:1px solid #46413b;padding:6px;background:#1f1f1f}.isolation-preview img{width:67px;height:51px;object-fit:cover}.isolation-preview span{font-size:12px;font-weight:700}.note{font-size:11px;color:#bbb;line-height:1.5}.main-stage{flex:1;min-width:0;display:flex;flex-direction:column}.mode-tabs{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:12px;background:#fff;border-bottom:1px solid #dedbd5}.mode{border:1px solid #dedbd5;color:#30302e;background:#fff;padding:12px 18px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.mode.active{background:#151515;color:var(--gold);border-color:#151515}.mode:hover{border-color:var(--gold)}.canvas-holder{position:relative;height:530px;background:radial-gradient(ellipse at 50% 40%,#fff 0%,#e9e7e4 70%,#dfdcd7 100%);overflow:hidden}#sateCanvas{display:block;height:100%;width:100%;touch-action:none}#fallback{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}#fallback[hidden]{display:none}#fallbackPlate{height:75%;aspect-ratio:2/5;max-width:45%;background-size:cover;background-position:center;box-shadow:14px 18px 26px #0003, -2px 3px 12px #0002;transform:perspective(700px) rotateY(-16deg)}#fallback p{font-size:12px;color:#777;text-align:center}.view-tools{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px;z-index:3}.view-tools button{font-size:12px;border:1px solid #bba77d;background:#151515;color:white;padding:10px 12px;font-weight:700}.view-tools button:hover{background:var(--gold);color:#151515}.layer-legend{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:8px;padding:11px;background:#111d;color:#fff;font-size:11px;z-index:3}.layer-legend div{display:flex;align-items:center;gap:8px}.dot{width:12px;height:12px;display:inline-block}.dot.gold{background:#c9a96e}.dot.green{background:#bad9ad}.dot.brick{background:#ae7965}.status{position:absolute;top:10px;left:12px;z-index:3;background:#fffE;color:#5d5d56;padding:6px 9px;font-size:11px;max-width:66%}.status:empty{display:none}.viewer-footnote{display:flex;gap:16px;justify-content:space-between;padding:11px 20px;font-size:11px;color:#777;background:#fff;align-items:center}.viewer-footnote strong{color:#111;font-size:14px;white-space:nowrap}.catalog-section{max-width:1380px;margin:auto;padding:35px 26px 60px}.catalog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}.catalog-top h2{font-size:14px;letter-spacing:.23em;color:#151515;margin:0}.catalog-top span{font-size:11px;color:#888}.finish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:13px}.finish-item{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid #e0ded9;padding:5px 5px 9px;text-align:left;transition:border-color .2s,transform .2s;min-width:0}.finish-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.finish-item span{font-size:11px;line-height:1.3;color:#555;padding:0 3px;min-height:26px}.finish-item small{color:#777;font-size:9px;padding:0 3px}.finish-item.active,.finish-item:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);transform:translateY(-1px)}.whatsapp-fixed{position:fixed;right:18px;bottom:18px;border-radius:50%;width:52px;height:52px;background:#25d366;color:#fff;text-decoration:none;display:grid;place-items:center;font-size:30px;box-shadow:0 8px 20px #0003;z-index:100}.canvas-holder:fullscreen{background:radial-gradient(ellipse at center,#fff,#e3e0db)}.canvas-holder:fullscreen canvas{width:100%;height:100%}@media(max-width:800px){.viewer{flex-direction:column}.left-panel{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.left-panel .divider{display:none}.left-panel .section-label:first-child,.category-tabs,.current-swatch,.current-name,.current-code,.pager{grid-column:1/-1}.category-tabs{flex-direction:row}.cat{flex:1}.current-swatch{height:100px;background-size:contain;background-repeat:no-repeat}.canvas-holder{height:450px}.top-caption{display:none}.layer-legend{font-size:10px}.viewer-footnote{flex-wrap:wrap}}@media(max-width:470px){.topbar{padding:14px}.brand-text{display:none}.mode{padding:10px 9px;font-size:10px}.canvas-holder{height:410px}.finish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.finish-item span{font-size:10px}.catalog-section{padding:24px 12px}.view-tools button{font-size:10px;padding:8px}.left-panel{padding:14px}.whatsapp-fixed{width:46px;height:46px}}

/* V3.5 graceful local fallback: interactive 3D-style CSS layers when WebGL is disabled. */
#fallback{perspective:1200px;overflow:hidden;justify-content:center;background:radial-gradient(ellipse at center,#fff,#ebe8e3)}
.fb-model{position:relative;width:145px;height:365px;min-height:100px;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(5deg) scale(var(--fb-zoom,1));transition:transform .12s;cursor:grab;flex-shrink:0}
.fb-layer{position:absolute;inset:0;background-color:#b8b5af;background-position:center;background-size:cover;box-shadow:8px 15px 22px #0003;border:1px solid #b9b6b0;backface-visibility:visible;transition:transform .45s ease,opacity .3s ease}
.fb-wall{background-color:#c7967a;transform:translate3d(-14px,0,-45px)}
.fb-insulation{background-color:#bedfc0;transform:translate3d(-7px,0,-22px)}
.fb-finish{transform:translate3d(0,0,0);box-shadow:12px 17px 24px #0003}
.fb-model.mode-plate .fb-wall,.fb-model.mode-plate .fb-insulation{opacity:0;pointer-events:none}
.fb-model.mode-system .fb-wall{transform:translate3d(-16px,0,-45px)}
.fb-model.mode-system .fb-insulation{transform:translate3d(-8px,0,-22px)}
.fb-model.mode-layers .fb-wall{transform:translate3d(-200px,0,-55px)}
.fb-model.mode-layers .fb-insulation{transform:translate3d(-100px,0,-28px)}
.fb-model.mode-layers .fb-finish{transform:translate3d(110px,0,12px)}
#fallbackNote{max-width:480px;padding:0 20px;text-align:center}
@media(max-width:640px){.fb-model.mode-layers .fb-wall{transform:translate3d(-125px,0,-55px)}.fb-model.mode-layers .fb-insulation{transform:translate3d(-55px,0,-28px)}.fb-model.mode-layers .fb-finish{transform:translate3d(75px,0,12px)}}
