*{box-sizing:border-box}html{min-height:100%;background:#163f52}body{margin:0;color:#e9f2ed;font:12px/1.6 Verdana,Arial,sans-serif;background:radial-gradient(ellipse at 50% 0,#397f91 0,transparent 65%),linear-gradient(#215e74,#123443);min-height:100vh}body:before{content:"";position:absolute;inset:0 0 auto;height:65px;opacity:.35;background:url('/assets/skyline.svg') repeat-x;pointer-events:none}.site{width:1060px;max-width:calc(100% - 48px);margin:0 auto}.masthead{height:108px;display:flex;align-items:center;justify-content:space-between;position:relative}.original-brand{width:190px;height:85px;background:url('/assets/original-reference.png') no-repeat -45px 0;image-rendering:pixelated;clip-path:polygon(0 28%,60% 28%,60% 11%,95% 11%,95% 100%,0 100%);mix-blend-mode:lighten}.header-note{font:9px/2 Verdana,sans-serif;letter-spacing:1.8px;color:#a0c6ca}.header-note time{display:block;text-align:right;color:#d3b97d;letter-spacing:3px}.status-dot{display:inline-block;width:6px;height:6px;margin-right:9px;background:#a3d88a;box-shadow:0 0 10px #a3d88a80;border-radius:50%;animation:pulse 3s infinite}.toolbar{height:37px;border:1px solid #192e36;background:linear-gradient(#46565a,#303e43);border-radius:5px;box-shadow:inset 0 1px #80949260;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:10px;color:#d3dfdc}.toolbar b{padding:0 10px;color:#8ca0a5}.toolbar i{display:inline-block;width:6px;height:6px;background:#f0be63;margin-right:8px}button{font:10px Verdana,sans-serif;color:#e2e8dd;border:1px solid #7b8c85;background:#263d45;padding:5px 10px;border-radius:3px;cursor:pointer}button:hover{background:#3d5961}button:focus-visible{outline:2px solid #ffce70;outline-offset:3px}.construction{margin:22px 0 0;border:1px solid #6b919b;border-radius:7px;overflow:hidden;background:#173f50;box-shadow:0 20px 65px #04172270,inset 0 1px #bad4cf40}.scene-heading{text-align:center;padding:28px 20px 20px;background:linear-gradient(#225466,#1c485c)}.eyebrow{color:#edc47c;font-size:9px;letter-spacing:3px}h1{font-family:'Trebuchet MS',Verdana,sans-serif;font-size:32px;letter-spacing:-.8px;line-height:1.25;margin:7px 0 8px;color:#f7f2dc}.scene-heading p{margin:0;font-size:11px;color:#a6c2c6}.dialogues{display:grid;grid-template-columns:1fr 1fr;gap:24%;padding:8px 6% 0;position:relative;z-index:5;background:#1c485c}.bubble{position:relative;margin:0;padding:12px 15px;background:#fff9e9;border:2px solid #cd9a59;border-radius:5px;color:#293b40;font:11px/1.6 Verdana,Arial,sans-serif;align-self:start;box-shadow:3px 4px 0 #102f3c80}.bubble:before{content:"";position:absolute;bottom:-18px;left:30%;border-width:18px 18px 0 0;border-style:solid;border-color:#cd9a59 transparent transparent transparent}.bubble:after{content:"";position:absolute;bottom:-14px;left:calc(30% + 2px);border-width:15px 14px 0 0;border-style:solid;border-color:#fff9e9 transparent transparent transparent}.speaker{display:block;font-size:8px;color:#957044;letter-spacing:1.7px;font-weight:bold;margin-bottom:5px}.stage{position:relative;height:420px;overflow:hidden;background:linear-gradient(#1c485c,#2c6270 65%,#496c73);isolation:isolate}.moon{position:absolute;right:12%;top:12px;width:34px;height:34px;border-radius:50%;background:#f6e3ae;box-shadow:0 0 60px #eacb7f30}.stars{position:absolute;inset:0;background-image:radial-gradient(#cce2d7 1px,transparent 1px);background-size:97px 53px;opacity:.25}.distant-city{position:absolute;width:56%;height:auto;top:5px;left:-6%;opacity:.3;filter:saturate(.3)}.ground{position:absolute;inset:125px -250px -250px;transform:rotateX(50deg) rotateZ(-25deg);background-color:#537c80;background-image:linear-gradient(#78928f66 1px,transparent 1px),linear-gradient(90deg,#78928f66 1px,transparent 1px);background-size:45px 45px;z-index:-1;border-top:3px solid #75969a}.building{position:absolute;left:31%;top:37px;width:43%;height:330px;object-fit:contain;filter:drop-shadow(10px 14px 0 #193a4630)}.crane{position:absolute;left:60%;top:0;width:235px;height:275px}.crane-tower{position:absolute;left:102px;top:5px;width:17px;height:263px;background:repeating-linear-gradient(45deg,transparent 0 12px,#b99450 12px 16px,transparent 16px 22px),#5b654f;border:3px solid #d8ad5c;box-shadow:3px 0 #29414b}.crane-arm{position:absolute;left:0;top:4px;width:230px;height:15px;background:repeating-linear-gradient(130deg,#d9b45e 0 4px,transparent 4px 12px),#535e4f;border:3px solid #dcb65d}.crane-cab{position:absolute;top:16px;left:93px;width:35px;height:26px;border:4px solid #dcaa55;background:#80adae;box-shadow:inset 0 -5px #365965}.cable{position:absolute;top:19px;left:28px;height:105px;width:2px;background:#b0bba8;transform-origin:top;animation:crane 9s ease-in-out infinite}.load{position:absolute;bottom:-22px;left:-22px;width:46px;height:24px;border:2px solid #473e35;background:repeating-linear-gradient(0deg,#b57954 0 6px,#644d3e 6px 8px);box-shadow:0 4px #d3b574}.load:before{content:"";position:absolute;left:5px;top:-18px;width:30px;height:25px;border:1px solid #b1b9a5;transform:rotate(45deg)}.site-sign{position:absolute;top:135px;left:42%;color:#f8e5a9;background:#244656;border:3px solid #d1af71;transform:skewY(26deg);font:bold 12px/1.1 Verdana;padding:6px 10px;box-shadow:3px 3px #142d38}.site-sign span{display:block;color:#e6b850;font-size:20px}.actor{position:absolute;width:90px;height:120px;z-index:3}.sprite{width:100%;height:100%;background-image:url('/assets/crew.png');background-size:400% 200%;background-repeat:no-repeat;image-rendering:pixelated;animation:frame .85s steps(1,end) infinite;filter:drop-shadow(2px 3px 0 #183b4530)}.frank-actor{left:12%;top:140px;width:100px;height:134px}.frank-sprite{background-position-x:0%;animation-duration:2.8s}.hammer-actor{left:35%;top:222px}.hammer-sprite{background-position-x:33.3333%}.painter-actor{left:66%;top:156px}.painter-sprite{background-position-x:100%;animation-duration:1.7s}.carrier-route{position:absolute;inset:0;z-index:4;animation:delivery 18s linear infinite}.carrier-actor{left:10%;top:280px}.carrier-sprite{background-position-x:66.6667%;animation-duration:.5s}.actor-tag{position:absolute;bottom:0;left:25%;font-size:9px;color:#e7e9d5;background:#143746b0;padding:0 6px;border-radius:2px}.bricks{position:absolute;width:54px;height:27px;background:repeating-linear-gradient(0deg,#ad7250 0 7px,#6e5142 7px 9px);border:2px solid #433c35;box-shadow:5px -5px #cf9565;transform:skewY(-15deg);z-index:2}.bricks-one{left:25%;top:318px}.bricks-two{left:76%;top:317px;width:72px;height:36px}.toolbox{position:absolute;top:284px;left:29%;width:28px;height:17px;background:#ae4d39;border:2px solid #412f2b;box-shadow:0 -3px #dd7e54;z-index:4}.toolbox:before{content:"";position:absolute;left:7px;top:-9px;width:11px;height:6px;border:2px solid #29383a}.barrier{position:absolute;width:120px;height:14px;z-index:4;border:2px solid #263b40;background:repeating-linear-gradient(135deg,#f3cd70 0 12px,#334446 12px 24px);box-shadow:0 2px #ab9c6a}.barrier:before,.barrier:after{content:"";position:absolute;top:12px;height:20px;width:5px;background:#c7bf9f;border:1px solid #465558}.barrier:before{left:8px}.barrier:after{right:8px}.barrier-one{left:7%;top:321px;transform:skewY(7deg)}.barrier-two{right:5%;top:269px;transform:skewY(-17deg)}.cone{position:absolute;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:28px solid #eb9750;filter:drop-shadow(2px 3px #294d51);z-index:5}.cone:after{content:"";position:absolute;left:-5px;top:16px;width:10px;height:5px;background:#f5e8be}.cone-one{left:8%;top:280px}.cone-two{left:86%;top:334px}.cone-three{left:57%;top:350px}.workbench{position:absolute;left:37%;top:310px;width:68px;height:11px;background:#c2a074;border:2px solid #705a40;z-index:4;transform:skewY(-10deg)}.workbench:before,.workbench:after{content:"";position:absolute;top:9px;width:6px;height:21px;background:#7a6c51}.workbench:before{left:6px}.workbench:after{right:6px}.work-lamp{position:absolute;right:9%;top:210px;width:5px;height:85px;background:#263f48;z-index:2}.work-lamp:before{content:"";position:absolute;left:-13px;top:-4px;width:30px;height:20px;border:4px solid #384947;background:#ffdc88;box-shadow:0 0 60px 25px #f3d58825}.light{position:absolute;width:130px;height:65px;border-radius:50%;background:#ffdc7e12;filter:blur(10px);animation:pulse 4s infinite}.light-one{left:40%;top:207px}.light-two{right:5%;top:260px}.dust{position:absolute;left:52px;top:80px;width:4px;height:4px;background:#e7c68d;box-shadow:9px -8px #e7c68d,-7px -5px #e7c68d;animation:dust .85s infinite}.scene-label{position:absolute;left:22px;bottom:14px;font:8px Verdana;letter-spacing:1.4px;color:#e0e3cb;background:#1d404bbf;padding:7px 10px;border:1px solid #93aca140;border-radius:3px;z-index:6}.scene-label .status-dot{width:4px;height:4px}.label-divider{padding:0 8px;color:#90a7a1}.scene-footer{padding:17px 24px;display:flex;justify-content:space-between;align-items:center;background:#153847;border-top:1px solid #75918c60;font-size:11px;color:#a7bfc1}.scene-footer strong{color:#efe2b9;font-weight:normal}.footer-icon{color:#e8bc70;margin-right:8px}.coordinate{font-size:9px;letter-spacing:2px;color:#91aeb0}.coordinate b{color:#d4b576;padding:0 7px}.page-footer{display:flex;justify-content:space-between;padding:19px 2px 30px;color:#8aaab2;font-size:10px}.page-footer span:last-child{font-size:8px;letter-spacing:1.5px}.paused *{animation-play-state:paused!important}@keyframes frame{0%,49.99%{background-position-y:0%}50%,100%{background-position-y:100%}}@keyframes delivery{0%,10%{transform:translateX(0)}45%,55%{transform:translateX(60%)}90%,100%{transform:translateX(0)}}@keyframes crane{0%,100%{height:100px;transform:rotate(5deg)}50%{height:175px;transform:rotate(-6deg)}}@keyframes pulse{50%{opacity:.55}}@keyframes dust{0%,45%{opacity:0;transform:translateY(0)}50%{opacity:1}100%{opacity:0;transform:translateY(-17px)}}
@media(max-width:760px){.site{max-width:calc(100% - 24px)}.header-note{font-size:7px;letter-spacing:1px}.masthead{height:96px}.scene-heading h1{font-size:27px}.dialogues{gap:9%;padding:8px 4% 0}.bubble{font-size:10px;padding:10px}.stage{height:380px}.building{width:54%;left:26%;top:55px}.crane{left:52%;transform:scale(.8);transform-origin:top left}.frank-actor{left:6%;top:140px;width:81px;height:108px}.hammer-actor{left:30%;top:210px}.painter-actor{left:67%;top:165px}.actor{width:75px;height:100px}.carrier-actor{top:275px}.bricks-one{top:305px;left:26%}.bricks-two{top:306px}.workbench{top:288px;left:35%;width:48px}.barrier-one{top:305px;width:85px}.barrier-two{width:80px}.scene-label{font-size:7px;letter-spacing:.6px;left:10px;bottom:9px}.scene-footer{padding:14px;font-size:10px}.coordinate{font-size:7px}.page-footer{font-size:9px}.page-footer span:last-child{display:none}.toolbar{padding:0 9px;font-size:9px}.toolbar b{padding:0 5px}}
@media(max-width:440px){.header-note{max-width:145px;text-align:right;font-size:7px}.original-brand{width:180px;flex-shrink:0}.scene-heading{padding:23px 12px 18px}.scene-heading h1{font-size:24px}.scene-heading p{font-size:10px}.dialogues{gap:12px;padding:5px 10px 0}.bubble{font-size:9px;padding:8px}.speaker{font-size:7px}.stage{height:350px}.building{width:65%;left:20%;top:49px}.crane{left:46%;transform:scale(.65)}.actor{width:66px;height:88px}.frank-actor{top:133px;left:2%;width:74px;height:99px}.hammer-actor{top:195px;left:29%}.painter-actor{top:156px;left:68%}.carrier-actor{top:247px}.workbench{top:266px;left:35%}.bricks-one{top:289px;width:37px}.bricks-two{top:281px;width:43px}.barrier-one{top:278px;width:65px}.barrier-two{top:246px;width:53px}.cone-three{top:293px}.cone-two{top:300px}.cone-one{top:250px}.toolbox{top:260px;left:24%}.scene-label{font-size:6px;letter-spacing:.2px}.scene-footer{display:block}.coordinate{display:block;margin-top:7px}.toolbar button{font-size:8px;padding:5px}.toolbar{font-size:8px}.work-lamp{top:190px;height:65px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) *{animation-duration:0s!important}}
/* Cabecera con el color de la referencia original. */
.masthead{background:#388fab;border-radius:0 0 5px 5px;padding:0 20px}.original-brand{clip-path:none;mix-blend-mode:normal}.header-note{color:#e4f0ee}.header-note time{color:#ffe0a1}
@media(max-width:440px){.masthead{padding:0 6px}.header-note{max-width:120px}}
/* Logo original incrustado en el cartel, conservando su perspectiva. */
.site-sign{width:128px;height:76px;padding:9px 7px;background:#388fab;transform-origin:top left}
.sign-logo{width:108px;height:52px;background:url('/assets/original-reference.png') no-repeat -48px -26px;image-rendering:pixelated}
@media(max-width:440px){.site-sign{transform:skewY(26deg) scale(.85)}}
