/* =========================================================
   ILUSTRAÇÕES VETORIAIS (geradas por tools/illustrations.mjs)
   ========================================================= */
.illu { display: block; overflow: visible; }
.illu .ft, .illu .fr, .illu .fl, .illu .fb { stroke: #23313e; stroke-width: .7; stroke-opacity: .5; stroke-linejoin: round; }
.illu text { font-family: var(--mono); }

/* materiais */
.m-concrete .ft { fill: #f2f5f8; } .m-concrete .fr { fill: #d7dfe6; } .m-concrete .fl { fill: #c0cbd5; }
.m-found .ft { fill: #dce2e8; } .m-found .fr { fill: #c2cbd3; } .m-found .fl { fill: #aab6c1; }
.m-slab .ft { fill: #ffffff; fill-opacity: .82; } .m-slab .fr { fill: #e3e9ee; fill-opacity: .9; } .m-slab .fl { fill: #cdd7df; fill-opacity: .9; }
.m-yellow .ft { fill: #ffd45c; } .m-yellow .fr { fill: #f5b301; } .m-yellow .fl { fill: #d99b00; }
.m-blue .ft { fill: #8ad6f9; } .m-blue .fr { fill: #2fb0ee; } .m-blue .fl { fill: #0a86c4; }
.m-panel .ft { fill: #5d6c7a; } .m-panel .fr { fill: #404e5b; } .m-panel .fl { fill: #2d3944; }
.m-cab .ft { fill: #eef8fd; } .m-cab .fr { fill: #c4e6f7; } .m-cab .fl { fill: #93cfee; }
.m-white .ft { fill: #ffffff; } .m-white .fr { fill: #eef2f5; } .m-white .fl { fill: #dce3e9; }
.m-wood .ft { fill: #ecd4b0; } .m-wood .fr { fill: #d6b387; } .m-wood .fl { fill: #c09969; }
.m-wall .ft { fill: #ffffff; } .m-wall .fr { fill: #f5f8fa; } .m-wall .fl { fill: #edf1f5; }
.m-floor .ft { fill: #e3e9ee; } .m-floor .fr { fill: #ccd5dd; } .m-floor .fl { fill: #b6c2cc; }
.m-red .ft { fill: #ff8f8f; } .m-red .fr { fill: #e5484d; } .m-red .fl { fill: #c23a40; }
.m-glass .ft { fill: #dfe7ee; fill-opacity: .4; } .m-glass .fr { fill: #c8d4de; fill-opacity: .42; } .m-glass .fl { fill: #b5c3cf; fill-opacity: .48; }
.m-paper .ft { fill: #ffffff; } .m-paper .fr { fill: #e8edf1; } .m-paper .fl { fill: #d5dce3; }
.m-blueprint .ft { fill: #0f7fbe; } .m-blueprint .fr { fill: #0a6a9e; } .m-blueprint .fl { fill: #085782; }
.m-bluet .ft { fill: #e2f4fd; } .m-bluet .fr { fill: #c5e7f9; } .m-bluet .fl { fill: #a7d9f3; }
.m-yellowt .ft { fill: #fff4d2; } .m-yellowt .fr { fill: #ffe6a1; } .m-yellowt .fl { fill: #f7d677; }

/* elementos */
.illu .ground { fill: #e2e8ee; }
.stage .illu .ground { fill: #dde5ec; }
.illu .axis { fill: none; stroke: #9fb0bf; stroke-width: .8; stroke-dasharray: 5 5; }
.illu .bubble { fill: #fff; stroke: #8796a5; stroke-width: .9; }
.illu .bt { font: 600 9px var(--font); fill: #4a5a69; text-anchor: middle; }
.illu .lattice { fill: none; stroke: #b98500; stroke-width: .8; }
.illu .cable { fill: none; stroke: #4a5866; stroke-width: .8; }
.illu .pipe { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.illu .p-water { stroke: #2fb0ee; stroke-width: 3.4; }
.illu .p-hot { stroke: #f26b3a; stroke-width: 3.4; }
.illu .p-sewer { stroke: #8794a1; stroke-width: 5.5; }
.illu .p-power, .illu .p-conduit { stroke: #f2b400; stroke-width: 3; }
.illu .p-fire { stroke: #e5484d; stroke-width: 3; }
.illu .flow { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 3 11; opacity: 0; }
.illu .f-sewer { stroke: #e6eaee; stroke-width: 1.6; stroke-dasharray: 5 14; }
.illu .f-route { stroke-width: 1.8; stroke-dasharray: 4 10; }
.illu .route { fill: none; stroke: #1fae5b; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.illu .chev { fill: #ffffff; stroke: #168a48; stroke-width: 1; }
.illu .rebar { fill: none; stroke: #9a4a26; stroke-width: 2.4; stroke-linecap: round; }
.illu .stirrup { fill: none; stroke: #c06a3d; stroke-width: 1.1; }
.illu .moment { fill: rgba(0, 136, 204, .13); stroke: #0088cc; stroke-width: 2; stroke-linejoin: round; }
.illu .hatch { stroke: #0088cc; stroke-width: .8; opacity: .55; }
.illu .loads line, .illu .loads polyline { stroke: #0d141b; stroke-width: 1.4; fill: none; }
.illu .loads polygon { fill: #0d141b; }
.illu .tile { fill: none; stroke: #e1e7ed; stroke-width: .8; }
.illu .mirror { fill: #d6ebf8; stroke: #a9c9dc; stroke-width: 1; }
.illu .drain { fill: #9aa7b3; }
.illu .seat { fill: #f4f7f9; stroke: #9aa7b3; stroke-width: 1; }
.illu .basin { fill: #dbe4ec; stroke: #9aa7b3; stroke-width: 1; }
.illu .screen { fill: #2fb0ee; }
.illu .dropl { stroke: #2fb0ee; stroke-width: 1.6; stroke-linecap: round; }
.illu .skirt { fill: #e3e9ee; }
.illu .breaker { fill: #e9eef2; stroke: #2d3944; stroke-width: .5; }
.illu .toggle { fill: #2d3944; }
.illu .led { fill: #38d27a; }
.illu .plate { fill: #fff; stroke: #9aa7b3; stroke-width: .8; }
.illu .hole { fill: #55636f; }
.illu .bulb { fill: #fff6d6; stroke: #f2b400; stroke-width: 1.5; }
.illu .card { fill: #0d141b; }
.illu .ct { font-size: 9px; font-weight: 500; fill: #fff; letter-spacing: .08em; }
.illu .ct2 { font-size: 9px; fill: #8c9aa8; }
.illu .bus { stroke: #2fb0ee; stroke-width: 2; }
.illu .wire { stroke: #8c9aa8; stroke-width: 1.2; }
.illu .cb { fill: #0d141b; stroke: #f2b400; stroke-width: 1.2; }
.illu .door { fill: #1d7f49; stroke: #14603a; stroke-width: .8; }
.illu .exit { fill: #1fae5b; }
.illu .glass { fill: #ffe3e3; opacity: .7; }
.illu .reel { fill: #c23a40; stroke: #fff; stroke-width: 1.5; }
.illu .reelc { fill: #fff; }
.illu .spray { fill: #7fd0f7; opacity: 0; }
.illu .head { fill: #e5484d; }
.illu .det { fill: #fff; stroke: #9aa7b3; }
.illu .ring { fill: none; stroke: #e5484d; stroke-width: 1.5; }
.illu .lbl rect { fill: #0d141b; }
.illu .lbl text { font-size: 9.5px; font-weight: 500; fill: #fff; letter-spacing: .06em; }
.illu .ld { fill: none; stroke: #0d141b; stroke-width: 1; }
.illu .ldot { fill: #0088cc; stroke: #fff; stroke-width: 1.4; }
.illu .elev text { font-size: 9px; fill: #5b6875; }
.illu .elev polygon { fill: #0088cc; }
.illu .elev .ld { stroke: #9fb0bf; }
.illu .pin path { fill: #0088cc; stroke: #fff; stroke-width: 1.5; }
.illu .pin circle { fill: #fff; }
.illu .pulse { fill: rgba(0, 136, 204, .22); }
.illu .plan { fill: none; stroke: #0088cc; stroke-width: 1.6; stroke-linecap: round; }
.illu .planfill { fill: rgba(0, 136, 204, .12); }
.illu .bub1 { fill: #0088cc; }
.illu .tdot { fill: #fff; }
.illu .bub2 { fill: #fff; stroke: #c5d0da; }
.illu .bl { fill: #c5d0da; }
.illu .sketch { fill: none; stroke: #0d141b; stroke-width: 1.3; stroke-linecap: round; }
.illu .node { fill: #0088cc; }
.illu .ptip { fill: #3a3a3a; }
.illu .pwood { fill: #f1d3a8; }
.illu .pbody { fill: #ffcc33; stroke: #d9a400; stroke-width: .6; }
.illu .perase { fill: #f28b8b; }
.illu .bpl { fill: none; stroke: #cfeafb; stroke-width: 1.1; }
.illu .brim, .illu .ridge { fill: #e9a800; }
.illu .dome { fill: #ffc42e; }
.illu .check circle { fill: #1fae5b; }
.illu .check path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* versão em traço (chamada final, fundo escuro) */
.illu-line .ft, .illu-line .fr, .illu-line .fl, .illu-line .fb { fill: none; stroke: #7cc8f0; stroke-opacity: .55; stroke-width: .8; }
.illu-line .m-slab .ft { fill: rgba(47, 176, 238, .05); }
.illu-line .ground { fill: none; }
.illu-line .axis { stroke: rgba(255, 255, 255, .14); }
.illu-line .bubble { fill: none; stroke: rgba(255, 255, 255, .3); }
.illu-line .bt, .illu-line .elev text { fill: rgba(255, 255, 255, .45); }
.illu-line .lattice, .illu-line .cable { stroke: rgba(124, 200, 240, .45); }
.illu-line .elev .ld { stroke: rgba(255, 255, 255, .2); }

/* ---------- animações (só com JS ativo e sem "reduzir movimento") ---------- */
.illu.anim .grow { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s var(--ease) var(--d, 0s); }
.illu.anim .drop { opacity: 0; transform: translateY(-16px); transition: opacity .6s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.illu.anim .pop { opacity: 0; transform: scale(.86); transform-box: fill-box; transform-origin: center; transition: opacity .5s ease var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.illu.anim .fade, .illu.anim .concrete-fade { opacity: 0; transition: opacity 1s ease var(--d, 0s); }
.illu.anim .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) var(--d, 0s); }
.illu.play .grow { transform: none; }
.illu.play .drop, .illu.play .pop { opacity: 1; transform: none; }
.illu.play .fade, .illu.play .concrete-fade { opacity: 1; }
.illu.play .draw { stroke-dashoffset: 0; }
.illu:not(.anim) .flow { opacity: .95; }
.illu.play .flow { opacity: .95; transition: opacity .5s ease calc(var(--d, 0s) + 1.3s); animation: flow 1.1s linear infinite; }
.illu.play .f-sewer { animation-duration: 2.2s; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.illu.play .trolley { animation: trolley 7s ease-in-out 1s infinite alternate; }
@keyframes trolley { to { transform: translate(-112px, -65px); } }
.illu.play .bob { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
.illu .dropl { opacity: 0; }
.illu.play .dropl { animation: rain .9s linear calc(var(--i) * .1s) infinite; }
@keyframes rain { 0% { transform: translateY(-4px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(112px); opacity: 0; } }
.illu.play .glow { animation: glowPulse 2.6s ease-in-out infinite; }
@keyframes glowPulse { 50% { opacity: .55; } }
.illu.play .spray { animation: spray 2.4s ease-in-out calc(var(--i) * .22s) infinite; }
@keyframes spray { 40%, 60% { opacity: .55; } }
.illu .ring, .illu .pulse { transform-box: fill-box; transform-origin: center; }
.illu.play .ring { animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.illu.play .pulse { animation: pinPulse 2.2s ease-out infinite; }
@keyframes pinPulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.illu.play .tdot { animation: typing 1.2s ease-in-out calc(var(--i) * .15s) infinite; }
@keyframes typing { 30% { transform: translateY(-3px); opacity: .6; } }
.illu.play .layer.l2 { animation: explode2 4.2s var(--ease) infinite; }
.illu.play .layer.l3 { animation: explode3 4.2s var(--ease) infinite; }
@keyframes explode2 { 35%, 65% { transform: translateY(-10px); } }
@keyframes explode3 { 35%, 65% { transform: translateY(-22px); } }
.illu.play .pencil { animation: pencil 2.4s ease-in-out infinite; }
@keyframes pencil { 50% { transform: translate(-10px, 5px); } }
.illu.play .helmet { animation: float 3.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.illu .laptop { fill: #3e4c59; stroke: #23313e; stroke-width: .6; }
.illu .lscreen { fill: #2fb0ee; opacity: .85; }
.illu .cord { fill: none; stroke: #55636f; stroke-width: 1.4; stroke-linecap: round; }


/* instalações finas, armadura de malha e placa de saída */
.illu .p-thin { stroke-width: 2.1; }
.illu .r-thin { stroke-width: 1.6; }
.m-green .ft { fill: #5fd38f; } .m-green .fr { fill: #1fae5b; } .m-green .fl { fill: #168a48; }


/* =========================================================
   OBRA ANIMADA (linha do tempo controlada pelo app.js)
   ========================================================= */
.illu.tl .k { transition: opacity .5s ease, transform .7s var(--ease); }
.illu.tl .k-fade:not(.on) { opacity: 0; }
.illu.tl .k-pop { transform-box: fill-box; transform-origin: 50% 100%; }
.illu.tl .k-pop:not(.on) { opacity: 0; transform: scale(.6); }
.illu.tl .k-drop:not(.on) { opacity: 0; transform: translateY(-22px); }
.illu.tl .k-grow { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .55s var(--ease), opacity .2s; }
.illu.tl .k-grow:not(.on) { transform: scaleY(0); opacity: 0; }
.illu.tl .k-drive { transition: transform 1.6s cubic-bezier(.25, .8, .25, 1), opacity .5s ease; }
.illu.tl .k-drive:not(.on) { transform: translate(170px, 98px); opacity: 0; }
.illu.tl .k-draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease); }
.illu.tl .k-draw:not(.on) [pathLength] { stroke-dashoffset: 1; }
.illu.tl .k-draw > :not([pathLength]) { transition: opacity .5s ease .35s; }
.illu.tl .k-draw:not(.on) > :not([pathLength]) { opacity: 0; transition-delay: 0s; }
.illu.tl .flow { opacity: .95; }
.illu.tl .k-draw:not(.on) .glow, .illu.tl .k-draw:not(.on) .spray { animation: none; }
.illu.tl .lift, .illu.tl .hose-v { transition: transform .6s var(--ease); }
.illu.tl .hose-v { transform-box: fill-box; transform-origin: 50% 100%; }
.illu.tl.seek, .illu.tl.seek * { transition: none !important; }
/* concreto fresco (escuro) que cura e clareia */
.illu.tl .wet .ft, .illu.tl .wet .fr, .illu.tl .wet .fl { transition: fill 1.4s ease; }
.illu.tl .wet:not(.dry) .ft { fill: #b5c0ca; }
.illu.tl .wet:not(.dry) .fr { fill: #9ba8b4; }
.illu.tl .wet:not(.dry) .fl { fill: #8794a1; }

/* canteiro */
.illu .pit { fill: #b9a58b; opacity: .55; }
.illu .string { fill: none; stroke: #e5484d; stroke-width: .8; stroke-dasharray: 3 2; }
.illu .prop { fill: none; stroke: #7d8a97; stroke-width: 1.3; }
.m-form .ft { fill: #e2a55a; fill-opacity: .72; } .m-form .fr { fill: #c98a3f; fill-opacity: .72; } .m-form .fl { fill: #b0742f; fill-opacity: .72; }
.illu .shadow { fill: rgba(13, 20, 27, .12); }
.illu .drum { fill: #f1f4f7; stroke: #23313e; stroke-width: .7; stroke-opacity: .5; }
.illu .drum-cap { fill: #d6dee5; stroke: #23313e; stroke-width: .7; stroke-opacity: .5; }
.illu .drum-s { fill: none; stroke: #0088cc; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 5; }
.illu.play .drum-s { animation: drum 1s linear infinite; }
@keyframes drum { to { stroke-dashoffset: -28; } }
.illu .win { fill: #9ed8f5; stroke: #23313e; stroke-width: .5; }
.illu .tstripe { fill: #0088cc; }
.illu .tire { fill: #26313b; }
.illu .hub { fill: #aab6c1; }
.illu .chute { fill: none; stroke: #8794a1; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illu .hopper { fill: #6b7783; }
.illu .stream { fill: none; stroke: #8f9aa5; stroke-width: 3.2; stroke-linecap: round; }
.illu .stream-f { fill: none; stroke: #c9d1d8; stroke-width: 1.3; stroke-dasharray: 2 4; stroke-linecap: round; }
.illu.play .stream-f { animation: flow .6s linear infinite; }
.illu .hose { fill: none; stroke: #2d3944; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.illu .bucket { fill: #8794a1; stroke: #4a5866; stroke-width: .8; }
.illu .bucket-top { fill: #b5c0ca; stroke: #4a5866; stroke-width: .6; }

/* operários */
.illu .wk-sh { fill: rgba(13, 20, 27, .18); }
.illu .wk-leg { stroke: #1f3a5a; stroke-width: 2.1; stroke-linecap: round; }
.illu .wk-l { stroke: #e8b48c; stroke-width: 1.5; stroke-linecap: round; }
.illu .wk-vest { fill: #ff7a1a; }
.illu .wk-ref { stroke: #f4f7f9; stroke-width: 1.1; }
.illu .wk-skin { fill: #e8b48c; }
.illu .wk-hy { fill: #ffc42e; stroke: #d99b00; stroke-width: .5; }
.illu .wk-hw { fill: #ffffff; stroke: #9aa7b3; stroke-width: .5; }
.illu .wk-tool { fill: #4a5866; }
.illu .wk-bar { stroke: #9a4a26; stroke-width: 1.4; stroke-linecap: round; }
.illu .wk-paper { fill: #ffffff; stroke: #0088cc; stroke-width: .6; }
.illu .wk-flag { fill: #e5484d; }
.illu .wk-tri { stroke: #4a5866; stroke-width: .8; }
.illu .wk-inst { fill: #ffc42e; stroke: #4a5866; stroke-width: .5; }
.illu .wk-barrow { fill: #7d8a97; stroke: #4a5866; stroke-width: .5; }
.illu .wk-wheel { fill: #26313b; }
.illu .wk-arm { transform-origin: 2.4px -11px; }
.illu.play .a-hammer { animation: hammer .45s ease-in-out infinite alternate; }
@keyframes hammer { from { transform: rotate(-50deg); } to { transform: rotate(18deg); } }
.illu.play .a-wave { animation: wave .9s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-35deg); } to { transform: rotate(25deg); } }
.illu.play .walk { animation: walk 3.2s ease-in-out infinite alternate; }
@keyframes walk { to { transform: translate(17px, 10px); } }


/* banheiro realista (hidrossanitário) */
.m-chrome .ft { fill: #f4f7f9; } .m-chrome .fr, .m-chrome .fb { fill: #c9d2da; } .m-chrome .fl { fill: #aab5bf; }
.m-stone .ft { fill: #f3f1ee; } .m-stone .fr { fill: #dcd7d0; } .m-stone .fl { fill: #c9c2b9; }
.illu .mirror-frame { fill: #c9d2da; }
.illu .showerfloor { fill: #d5dee6; }
.illu .drain-r { fill: #c9d2da; stroke: #8794a1; stroke-width: .6; }
.illu .drain-g { fill: #6b7783; }
.illu .heater-base { fill: #d5dde4; }
.illu .lcd { fill: #23313e; }
.illu .lcd-d { fill: #2fb0ee; }
.illu .knob { fill: #aab5bf; stroke: #6b7783; stroke-width: .5; }
.illu .brand { fill: #0088cc; }
.illu .chrome-p { fill: none; stroke: #9aa7b3; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.illu .flush { fill: #dfe6ec; stroke: #9aa7b3; stroke-width: .6; }
.illu .flush-i { fill: #aab5bf; }
.illu .lid { fill: #ffffff; stroke: #b9c4ce; stroke-width: .8; }
.illu .lid-in { fill: #f1f4f7; stroke: #dfe6ec; stroke-width: .6; }
.illu .porc { fill: #eef2f5; stroke: #b9c4ce; stroke-width: .8; }
.illu .porc-top { fill: #ffffff; stroke: #b9c4ce; stroke-width: .8; }
.illu .bowl-in { fill: #dfe7ee; stroke: #c9d2da; stroke-width: .6; }
.illu .water { fill: #9ed8f5; opacity: .85; }
.illu .door { fill: #dcb98a; stroke: #b48a5a; stroke-width: .6; }
.illu .handle { fill: #6b7783; }
.illu .basin-rim { fill: #ffffff; stroke: #c9d2da; stroke-width: .7; }
.illu .basin { fill: #dfe7ee; stroke: #b9c4ce; stroke-width: .6; }
.illu .spout { fill: none; stroke: #8d9aa6; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.illu .lever { fill: none; stroke: #6b7783; stroke-width: 1.8; stroke-linecap: round; }
.illu .valve-plate { fill: #e9eef2; stroke: #9aa7b3; stroke-width: .7; }
.illu .head-body { fill: #c9d2da; stroke: #8d9aa6; stroke-width: .6; }
.illu .head-face { fill: #eef2f5; stroke: #aab5bf; stroke-width: .5; }
.illu .glassbox { fill: #bfe3f6; opacity: .22; }
.illu .glass-edge { fill: none; stroke: #9aa7b3; stroke-width: 1.4; }


/* elétrico realista */
.m-steel .ft { fill: #e3e8ed; } .m-steel .fr, .m-steel .fb { fill: #c3ccd4; } .m-steel .fl { fill: #aab5bf; }
.m-tv .ft { fill: #3e4c59; } .m-tv .fr { fill: #2d3944; } .m-tv .fl { fill: #23313e; }
.m-chair .ft { fill: #4a5866; } .m-chair .fr { fill: #3a4753; } .m-chair .fl { fill: #2d3944; }
.illu .qdc-in { fill: #f4f7f9; stroke: #c9d2da; stroke-width: .6; }
.illu .qdc-plate { fill: #0088cc; }
.illu .plate-t, .illu .sign-t, .illu .exit-t { fill: #fff; font-family: var(--font); font-weight: 700; letter-spacing: .04em; }
.illu .din { fill: #9aa7b3; }
.illu .dr-btn { fill: #2f6fd6; }
.illu .qdc-door { fill: #d7dfe6; stroke: #8794a1; stroke-width: .7; }
.illu .tv-screen { fill: #1b2a38; stroke: #0d141b; stroke-width: .6; }
.illu .keys { fill: #55636f; }
.illu .socket { fill: #eef2f5; stroke: #aab5bf; stroke-width: .6; }
.illu .rocker { fill: #f4f7f9; stroke: #aab5bf; stroke-width: .6; }
.illu .rocker-d { fill: #dfe6ec; }
.illu .shade { fill: #2d3944; stroke: #1b2733; stroke-width: .6; }
.illu .shade-in { fill: #ffe9a8; }
/* PPCI realista */
.illu .doorframe { fill: #9aa7b3; }
.illu .firedoor { fill: #c9d2da; stroke: #8794a1; stroke-width: .7; }
.illu .panic { fill: none; stroke: #6b7783; stroke-width: 1.8; stroke-linecap: round; }
.illu .emled { fill: #fffbe6; stroke: #c9d2da; stroke-width: .4; }
.illu .floor-mark { fill: #e5484d; }
.illu .floor-mark-in { fill: #ffd34d; }
.illu .sign-red { fill: #e5484d; stroke: #b3333a; stroke-width: .5; }
.illu .ext-top { fill: #ff8f8f; }
.illu .ext-dome { fill: #e5484d; stroke: #b3333a; stroke-width: .5; }
.illu .ext-band { fill: #ffffff; opacity: .9; }
.illu .ext-lever { fill: none; stroke: #2d3944; stroke-width: 1.8; stroke-linecap: round; }
.illu .gauge { fill: #ffffff; stroke: #2d3944; stroke-width: .6; }
.illu .gauge-in { fill: #1fae5b; }
.illu .ext-hose { fill: none; stroke: #1b2733; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illu .ext-nozzle { fill: none; stroke: #6b7783; stroke-width: 2.6; stroke-linecap: round; }
.illu .cab-in { fill: #f4f7f9; }
.illu .hose-c { fill: #f2d7b0; stroke: #c9a676; stroke-width: .8; }
.illu .hose-c2 { fill: #e8c79a; stroke: #c9a676; stroke-width: .8; }
.illu .valve-w { fill: none; stroke: #e5484d; stroke-width: 1.4; }
.illu .alarm-btn { fill: #ffffff; stroke: #b3333a; stroke-width: .5; }
.illu .strobe { fill: #ffb3b5; }
.illu .drop-p { stroke: #e5484d; stroke-width: 2; }
.illu .spr-body { fill: #d9a400; }
.illu .spr-bulb { fill: #e5484d; }
.illu .spr-def { fill: #c9a03a; }
.illu .det-rim { fill: #dfe6ec; }
.illu .det-led { fill: #e5484d; }
.illu.play .det-led { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.illu.play .strobe-g { animation: glowPulse .9s ease-in-out infinite; }

/* telas pequenas: rótulos ficariam ilegíveis */
@media (max-width: 600px) {
  .illu .lbl, .illu .elev, .illu .card, .illu .ct, .illu .ct2 { display: none; }
}