:root{font-family:Arial,Helvetica,sans-serif;color:#08283b;background:#eef6f9}*{box-sizing:border-box}body{margin:0}.demo{width:min(1080px,calc(100% - 32px));margin:36px auto}.eyebrow{font-weight:900;letter-spacing:.18em;font-size:12px;color:#087d91}h1{font-size:clamp(34px,5vw,58px);margin:8px 0;color:#08283b}.intro{font-size:18px;color:#567383}.viewer{position:relative;background:#061f33;padding:24px;border-radius:26px;box-shadow:0 22px 60px #072a3e26}.single-model{margin:2px 0 14px;color:#b9d9e5;font-size:14px;letter-spacing:.04em}.single-model strong{color:#61ead4;font-size:16px}.stage{position:relative;height:min(62vw,570px);min-height:330px;border-radius:20px;overflow:hidden;outline:none}.stage:focus-visible{box-shadow:0 0 0 4px #54f0d1}.stage-3d{isolation:isolate;display:grid;place-items:center;perspective:950px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;background:linear-gradient(90deg,rgba(2,18,31,.72),rgba(4,35,53,.45)),radial-gradient(circle at 50% 42%,transparent 18%,rgba(1,13,23,.5) 84%),url("assets/casa-melinet.webp") center/cover no-repeat}.stage-3d:active{cursor:grabbing}.stage-3d::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,17,28,.1) 45%,rgba(0,13,24,.68));pointer-events:none}.router-model-3d{--router-depth:56px;--premiumGlow:rgba(58,238,229,.72);position:relative;z-index:2;width:300px;height:220px;perspective:800px;transform-style:preserve-3d;transform:rotateX(var(--rotate-x,-18deg)) rotateY(var(--rotate-y,0deg)) scale3d(var(--zoom,1.15),var(--zoom,1.15),var(--zoom,1.15));transition:transform .08s linear}.router-shadow{position:absolute;left:33px;top:183px;width:238px;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,5,11,.65),rgba(0,8,15,0) 70%);filter:blur(7px);transform:rotateX(88deg) translateZ(-42px);pointer-events:none}.router-body-3d{position:absolute;left:20px;top:60px;width:260px;height:156px;transform-style:preserve-3d}.router-body-3d::after{content:"";position:absolute;inset:4px 7px auto;height:4px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--premiumGlow),rgba(80,180,255,.9),transparent);box-shadow:0 0 12px var(--premiumGlow);transform:translateZ(31px);pointer-events:none}.lid-rim{position:absolute;inset:-3px -3px auto;width:266px;height:156px;border:3px solid rgba(235,249,252,.9);border-bottom-color:#9caeb7;border-radius:20px;box-shadow:inset 0 0 0 2px rgba(33,92,112,.12),0 4px 8px rgba(0,18,28,.25);transform:translateZ(26px);pointer-events:none}.face{position:absolute;display:flex;border:1px solid #a7b7bf;backface-visibility:visible}.face.top,.face.bottom{width:260px;height:150px}.face.top{transform:translateZ(29px);border-radius:18px;align-items:center;justify-content:center;flex-direction:column;color:#777;background:linear-gradient(135deg,#fff 2%,#eef4f6 54%,#cbd8de);box-shadow:inset 8px 8px 18px #ffffffe6,inset -12px -10px 18px rgba(65,95,108,.12)}.face.top b{font-size:17px;letter-spacing:.08em}.face.top i{width:32px;height:3px;margin-top:6px;background:#e45353}.face.bottom{transform:rotateX(180deg) translateZ(29px);background:#aebdc4}.face.front,.face.back{width:260px;height:56px;left:0;top:47px;box-shadow:inset 0 9px 12px #ffffff80,inset 0 -11px 15px rgba(40,67,79,.2)}.face.front{transform:rotateX(-90deg) translateZ(75px);justify-content:center;gap:9px;padding-top:13px;background:repeating-linear-gradient(90deg,#dce7eb 0 8px,#9dadb4 9px 11px,#eef4f6 12px 18px)}.face.front i{width:45px;height:6px;background:#7c929b;border:1px solid #607984;border-radius:3px;box-shadow:inset 0 2px 2px #00000047}.face.back{transform:rotateX(90deg) translateZ(75px);align-items:center;justify-content:center;gap:4px;padding:5px;background:linear-gradient(#dfe8eb,#aebdc4)}.face.back b{font-size:6px;display:grid;place-items:center;width:25px;height:26px;color:#28343a;background:#efc719;border:3px solid #42515a;border-radius:3px;box-shadow:inset 0 3px 5px #0000007a,0 1px #fff}.face.back b:nth-child(-n+3){background:#a8b5bb;border-color:#40515a}.face.left,.face.right{width:var(--router-depth);height:150px;top:0;left:calc((260px - var(--router-depth))/2);background:repeating-linear-gradient(0deg,#cedbe0 0 8px,#93a7b0 9px 11px,#e9f0f2 12px 17px);box-shadow:inset 10px 0 14px #ffffff59,inset -10px 0 14px rgba(35,62,74,.2)}.face.left{transform:rotateY(-90deg) translateZ(130px)}.face.right{transform:rotateY(90deg) translateZ(130px)}.router-foot{position:absolute;width:28px;height:12px;border-radius:5px;background:linear-gradient(#9babb2,#63757d);transform:translateZ(-35px);box-shadow:0 4px 4px #00000059}.foot-a{left:22px;top:22px}.foot-b{right:22px;top:22px}.foot-c{left:22px;bottom:4px}.foot-d{right:22px;bottom:4px}.antenna{position:absolute;top:-48px;width:24px;height:176px;border:0;background:none;transform-style:preserve-3d;transform:translateZ(-48px);overflow:visible}.antenna-left{left:24px}.antenna-right{right:24px}.antenna-core,.antenna-side{position:absolute;inset:0;display:block;border:1px solid #aab9c0;border-radius:12px;background:linear-gradient(90deg,#c8d3d8,#fff 45%,#b9c8ce);backface-visibility:visible}.antenna-core{transform:translateZ(6px)}.antenna-side{width:12px;left:6px;background:linear-gradient(#dbe4e8,#8fa1aa);transform:rotateY(90deg) translateZ(12px)}.antenna-hinge{position:absolute;display:block;left:-5px;bottom:-7px;width:34px;height:30px;border:2px solid #8fa2ab;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#b7c5cb 55%,#71858e);box-shadow:0 0 0 3px rgba(34,217,225,.18),0 4px 7px #00000047;transform:translateZ(8px)}.signal-emitter{position:absolute;top:-20px;left:50%;width:86px;height:86px;z-index:-1;pointer-events:none;transform:translateX(-50%) translateZ(-12px)}.signal-emitter i{position:absolute;left:50%;bottom:0;width:42px;height:42px;border:3px solid rgba(79,244,220,.9);border-radius:50%;box-shadow:0 0 12px rgba(0,190,255,.55);opacity:0;transform:translate(-50%,50%) scale(.25);animation:signalPulse 2.7s ease-out infinite}.signal-emitter i:nth-child(2){animation-delay:.85s}.signal-emitter i:nth-child(3){animation-delay:1.7s}.signal-right i{border-color:rgba(64,190,255,.92)}.zoom-controls{position:absolute;z-index:3;right:16px;bottom:16px;display:flex;gap:5px}.zoom-controls button{min-width:46px;height:44px;border:1px solid #77e9dc;background:#06263dcc;color:#fff;border-radius:9px;font-weight:850;font-size:21px;cursor:pointer}.zoom-controls #reset3d{font-size:12px;padding:0 12px}.model-note{position:absolute;z-index:3;left:16px;bottom:14px;margin:0;color:#b9dbe3;font-size:12px}.condition{margin:18px 4px 0;color:#9ebcca;font-size:13px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes signalPulse{0%{opacity:0;transform:translate(-50%,50%) scale(.25)}18%{opacity:.9}100%{opacity:0;transform:translate(-50%,50%) scale(2.15)}}@media(max-width:700px){.demo{width:min(100% - 20px,1080px);margin:18px auto}.viewer{padding:12px;border-radius:18px}.stage{height:74vw;min-height:300px}.router-model-3d{width:270px;scale:.78}.signal-emitter{width:72px;height:72px}.signal-emitter i{width:36px;height:36px}.model-note{max-width:180px}.zoom-controls{bottom:12px}}@media(prefers-reduced-motion:reduce){.router-model-3d{transition:none}.router-body-3d::after{box-shadow:none}.signal-emitter i{animation:none;opacity:.28;transform:translate(-50%,50%) scale(1.15)}}
.router-brand{display:block;width:138px;height:auto;max-height:62px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,49,88,.14));pointer-events:none}
.stage-3d.is-following{cursor:url("assets/cursor-pulso.svg") 16 16,crosshair}.stage-3d.is-following .lid-rim{border-color:#55efd2;box-shadow:inset 0 0 0 2px rgba(33,92,112,.14),0 0 18px rgba(85,239,210,.8),0 0 34px rgba(17,189,232,.4)}.stage-3d.is-following .router-body-3d::after{height:5px;box-shadow:0 0 18px var(--premiumGlow),0 0 30px rgba(17,189,232,.55)}.stage-3d.is-following .zoom-controls,.stage-3d.is-following .zoom-controls button{cursor:pointer}@media(prefers-reduced-motion:reduce){.stage-3d.is-following{cursor:grab}.stage-3d.is-following .lid-rim{box-shadow:inset 0 0 0 2px rgba(33,92,112,.12),0 4px 8px rgba(0,18,28,.25)}}
.embed-router{margin:0;overflow:hidden;background:#061f33}.embed-router .stage{width:100%;height:100vh;min-height:350px;border-radius:0}.embed-router .router-model-3d{scale:.88}.embed-router .model-note{left:14px;bottom:12px}.embed-router .zoom-controls{right:12px;bottom:10px}@media(max-width:700px){.embed-router .stage{height:100vh;min-height:320px}.embed-router .router-model-3d{scale:.7}.embed-router .model-note{max-width:150px;font-size:10px}}

.router-model-3d,.router-model-3d *{pointer-events:none;-webkit-user-drag:none}


/* Antenas prismáticas: frente, fondo, dos laterales y tapa */
.antenna{--antenna-depth:10px;filter:drop-shadow(3px 5px 5px rgba(0,14,24,.28))}
.antenna-core,.antenna-side,.antenna-core::after,.antenna-side::before,.antenna::after{backface-visibility:hidden;transform-style:preserve-3d}
.antenna-core{inset:0;transform:translateZ(5px);border-color:#aebdc4;background:linear-gradient(90deg,#bdcbd1 0%,#fdfefe 36%,#fff 58%,#b2c2c9 100%);box-shadow:inset 3px 0 5px rgba(75,104,117,.22),inset -3px 0 5px rgba(80,105,116,.28),inset 0 1px 2px #fff}
.antenna-core::after{content:"";position:absolute;inset:0;border:1px solid #8fa2aa;border-radius:12px;background:linear-gradient(90deg,#91a4ad,#dbe5e9 45%,#8398a1);transform:translateZ(-10px)}
.antenna-side{inset:0 auto 0 7px;width:10px;height:176px;border-radius:5px;background:linear-gradient(90deg,#82969f,#cdd9de 55%,#748a94);transform:rotateY(90deg) translateZ(12px);box-shadow:inset -2px 0 3px rgba(26,53,65,.28)}
.antenna-side::before{content:"";position:absolute;inset:0;width:10px;height:176px;border:1px solid #8fa2aa;border-radius:5px;background:linear-gradient(90deg,#6f858f,#c5d3d8);transform:rotateY(180deg) translateZ(-24px)}
.antenna::after{content:"";position:absolute;left:2px;top:-5px;width:20px;height:10px;border:1px solid #9eb0b8;border-radius:50%;background:radial-gradient(ellipse at 45% 40%,#fff 10%,#dbe5e8 55%,#879ba4);transform:rotateX(90deg) translateZ(0)}
.antenna-hinge{box-shadow:inset 4px 3px 7px rgba(255,255,255,.8),inset -5px -4px 8px rgba(61,87,98,.3),0 0 0 3px rgba(34,217,225,.18),0 5px 8px rgba(0,0,0,.34)}