/* app.husvord.com: a fachada do prédio da torre (JM, 2026-10-01). Visual do husvord.com/escritório.
   Fontes (opção C): IBM VGA 8x16 só em múltiplos de 16 px (24 px só no celular) + IBM Plex Mono no texto.
   Procedência e licenças: deploy/fontes/baixar.sh e fonts/LICENSE-*.txt. CSP: tudo 'self', sem estilo inline. */
@font-face{font-family:"IBM VGA";src:url(fonts/IBM-VGA-8x16.woff) format("woff");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(fonts/IBMPlexMono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(fonts/IBMPlexMono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(fonts/IBMPlexMono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(fonts/IBMPlexMono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}

:root{--bg:#12101c;--box:#1b2150;--line:#e9e4ff;--yellow:#ffd75e;--cyan:#5ee0c8;--lilac:#b48cff;--red:#ff6b6b;
  --fachada:#2b2f5e;--fachada2:#242851;--vidro:#0b0d22;--px:4px;
  --vga:"IBM VGA",ui-monospace,monospace;--txt:"IBM Plex Mono",ui-monospace,monospace}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--line);font-family:var(--txt);font-size:15px;line-height:1.7}
a{color:var(--cyan)}

/* faixa amarela, como a do husvord.com */
.topo{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;
  padding:10px clamp(12px,3vw,40px);background:var(--yellow);color:var(--bg);border-bottom:var(--px) solid var(--line)}
.marca{display:flex;align-items:center;gap:10px;color:var(--bg);text-decoration:none;font-family:var(--vga);font-size:16px;letter-spacing:2px}
.marca svg{width:26px;height:26px}
.usuario{display:flex;align-items:center;gap:12px;min-width:0}
.direita{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.idiomas,.skins{display:flex;gap:6px}
.skins{margin-right:6px}
.idiomas button,.skins button{font-family:var(--vga);font-size:16px;line-height:1;color:var(--bg);background:transparent;padding:6px 8px;border:2px solid var(--bg);cursor:pointer}
.idiomas button[aria-pressed="true"],.idiomas button:hover,.idiomas button:focus-visible,
.skins button[aria-pressed="true"],.skins button:hover,.skins button:focus-visible{background:var(--bg);color:var(--yellow);outline:none}
.quem{font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}

.btn{display:inline-block;font-family:var(--vga);font-size:16px;line-height:1.4;color:var(--bg);background:var(--yellow);text-decoration:none;
  padding:10px 16px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 #000;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--cyan);outline:none}
.btn:active{transform:translate(var(--px),var(--px));box-shadow:none}
.btn-claro{background:var(--bg);color:var(--yellow);padding:6px 10px}
.topo .btn-claro{border-color:var(--bg);box-shadow:none}

/* palco: céu da noite com estrelas */
.palco{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:clamp(24px,5vw,56px) 16px 0;background:linear-gradient(#0b0d22 0%,#171a3a 55%,#241f4a 100%)}
.ceu{position:absolute;inset:0;pointer-events:none}
.ceu i{position:absolute;width:var(--px);height:var(--px);background:var(--line);animation:pisca 3s steps(1,end) infinite}
.ceu i:nth-child(2n){background:var(--lilac);animation-delay:-1.3s}
.ceu i:nth-child(1){left:4%;top:8%}.ceu i:nth-child(2){left:13%;top:24%}.ceu i:nth-child(3){left:22%;top:6%}
.ceu i:nth-child(4){left:31%;top:30%}.ceu i:nth-child(5){left:40%;top:12%}.ceu i:nth-child(6){left:58%;top:5%}
.ceu i:nth-child(7){left:66%;top:26%}.ceu i:nth-child(8){left:74%;top:10%}.ceu i:nth-child(9){left:83%;top:20%}
.ceu i:nth-child(10){left:92%;top:7%}.ceu i:nth-child(11){left:8%;top:44%}.ceu i:nth-child(12){left:88%;top:40%}

/* estados (carregando, entrada, sem andar, erro) */
.caixa{position:relative;z-index:2;align-self:center;margin:auto 0;max-width:560px;width:100%;background:var(--box);
  border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 #000;padding:clamp(16px,3vw,28px)}
.caixa p{margin:0 0 18px;max-width:62ch}
.titulo{font-family:var(--vga);font-weight:400;font-size:32px;line-height:1.1;color:var(--yellow);margin:0 0 16px;text-shadow:var(--px) var(--px) 0 #000}
.piscando::after{content:"_";animation:pisca 1s steps(1,end) infinite}

/* o prédio */
.cena{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center}
.resumo{margin:0 0 60px;color:var(--line);text-align:center}  /* 60px: espaço para a antena (40px + luz) não cobrir o texto */
.predio{width:min(640px,100%);display:flex;flex-direction:column}
.telhado{position:relative;height:48px;margin:0 16px;background:#3a3168;border:var(--px) solid var(--line);border-bottom:0;
  display:flex;align-items:center;justify-content:center}
.antena{position:absolute;left:24px;bottom:100%;width:var(--px);height:40px;background:var(--line)}
.antena::after{content:"";position:absolute;left:-4px;top:-8px;width:12px;height:12px;background:var(--red);animation:pisca 1.6s steps(1,end) infinite}
.placa{font-family:var(--vga);font-size:16px;line-height:1;color:var(--bg);background:var(--yellow);padding:6px 10px;border:var(--px) solid var(--bg)}
.andares{display:flex;flex-direction:column;border-left:var(--px) solid var(--line);border-right:var(--px) solid var(--line)}
.andar{display:grid;grid-template-columns:56px 28px 28px minmax(0,1fr) 28px 28px;align-items:center;gap:12px;min-height:72px;padding:12px 16px;
  background:var(--fachada);border-top:var(--px) solid var(--vidro);color:var(--line);text-decoration:none}
.andar:nth-child(2n){background:var(--fachada2)}
.num{font-family:var(--vga);font-size:16px;line-height:1;color:var(--yellow);background:var(--vidro);padding:6px 4px;text-align:center}
.janela{height:40px;background:var(--vidro);border:2px solid #5a60a8;box-shadow:inset 0 -8px 0 rgba(255,255,255,.04)}
.janela.acesa{background:var(--yellow);border-color:#fff3b8;box-shadow:0 0 12px rgba(255,215,94,.55)}
.vitrine{min-width:0;min-height:40px;display:flex;flex-direction:column;justify-content:center;padding:4px 10px;background:var(--vidro);border:2px solid #5a60a8}
.vitrine.acesa{background:#3b3412;border-color:var(--yellow)}
.nome{font-family:var(--vga);font-size:16px;line-height:1.4;color:var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slug{font-size:12px;line-height:1.4;color:#9a95c9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.andar:hover,a.andar:focus-visible{outline:var(--px) solid var(--cyan);outline-offset:calc(var(--px) * -1);background:#353a78}
a.andar:hover .vitrine,a.andar:focus-visible .vitrine{border-color:var(--cyan)}
a.andar:hover .nome,a.andar:focus-visible .nome{color:var(--cyan)}
a.andar:hover .nome::after,a.andar:focus-visible .nome::after{content:" ›"}
.sem-link{opacity:.6}
.andar.livre{background:#1d2046}
.andar.livre .vitrine{border-style:dashed;border-color:#3a3f7a}
.andar.livre .nome{color:#7d82b8}
.terreo{display:flex;align-items:flex-end;justify-content:center;gap:16px;height:88px;padding:0 16px;background:#1d2046;
  border:var(--px) solid var(--line);border-bottom:0}
.porta{width:56px;height:64px;background:var(--vidro);border:var(--px) solid #5a60a8;border-bottom:0}
.letreiro{align-self:center;font-family:var(--vga);font-size:16px;line-height:1;color:var(--bg);background:var(--cyan);padding:6px 10px}
.calcada{width:100%;height:24px;background:#07080f;border-top:var(--px) solid #2a2f5a}

.rodape{text-align:center;padding:16px 12px 20px;color:var(--lilac);font-size:13px;line-height:1.5;background:#07080f}
.rodape small{display:block;font-size:12px;opacity:.75}

@keyframes pisca{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.ceu i,.antena::after,.piscando::after{animation:none}}
@media (max-width:560px){
  .titulo{font-size:24px}
  .andar{grid-template-columns:48px 20px minmax(0,1fr) 20px;gap:8px;padding:12px 10px}
  .andar .j2,.andar .j3{display:none}
  .telhado{margin:0 8px}
  .quem{max-width:30vw}
}

/* prédio e andar do JM em TELA CHEIA, como o predio.css/andar.css dele: o canvas ocupa 100vw × 100vh, sem
   moldura, e os cartões flutuam por cima (pointer-events:none; só os controles são clicáveis). */
body[data-estado="predio"],body[data-estado="andar"]{height:100vh;overflow:hidden;background:#0b0d22}
body[data-estado="predio"] .palco,body[data-estado="andar"] .palco{padding:0;background:#0b0d22}
body[data-estado="predio"] > .rodape,body[data-estado="andar"] > .rodape{display:none}
.predio-canvas{position:fixed;inset:0;display:block;width:100vw;height:100vh;image-rendering:pixelated;background:#0b0d22;z-index:0}
#estado-predio,.andar-cena{position:static}
.hud{position:fixed;left:16px;right:16px;top:16px;z-index:2;display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;justify-content:space-between;pointer-events:none}
.hud-direita{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;justify-content:flex-end}
.hud-card{background:var(--box);border:3px solid var(--line);border-radius:6px;box-shadow:0 0 0 3px var(--vidro),inset 0 0 0 3px var(--vidro);
  display:flex;align-items:center;gap:12px;padding:8px 14px;min-width:0}
.hud-guarda{flex-direction:column;align-items:flex-start;gap:6px}
.hud-logo{font-family:var(--vga);font-size:16px;line-height:1;color:var(--yellow);letter-spacing:2px}
.hud-sub{font-size:13px;line-height:1.3;color:#aeb3e0}
.hud-data{font-family:var(--vga);font-size:16px;line-height:1;color:#aeb3e0}
.hud-hora{font-family:var(--vga);font-size:32px;line-height:1;color:#fff}
.hud-voltar{font-family:var(--vga);font-size:16px;line-height:1;color:var(--yellow);text-decoration:none;pointer-events:auto}
.hud-voltar:hover,.hud-voltar:focus-visible{color:var(--cyan);outline:none}
/* a faixa de controles (nome, SAIR, PIXEL|FORMAL, EN/ES/PT) vira um cartão flutuante no canto superior */
.hud-direita .topo{position:static;border:3px solid var(--line);border-radius:6px;box-shadow:0 0 0 3px var(--vidro),inset 0 0 0 3px var(--vidro);
  background:var(--box);color:var(--line);padding:8px 12px;pointer-events:auto}
.hud-direita .topo .marca{display:none}
.hud-direita .topo .quem{color:#aeb3e0}
.hud-direita .topo .btn-claro{background:transparent;color:var(--yellow);border:2px solid var(--yellow);box-shadow:none}
.hud-direita .topo .btn-claro:hover,.hud-direita .topo .btn-claro:focus-visible{background:var(--yellow);color:var(--bg)}
.hud-direita .topo .idiomas button,.hud-direita .topo .skins button{color:var(--line);border-color:#5a60a8}
.hud-direita .topo .idiomas button[aria-pressed="true"],.hud-direita .topo .skins button[aria-pressed="true"],
.hud-direita .topo .idiomas button:hover,.hud-direita .topo .skins button:hover{background:var(--yellow);color:var(--bg);border-color:var(--yellow)}
.hud-rodape{position:fixed;left:16px;right:16px;bottom:8px;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 22px;pointer-events:none}
.predio-log{font-family:var(--vga);font-size:16px;line-height:1.4;color:#aeb3e0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.hud-rodape small{font-size:12px;line-height:1.4;color:#7d82b8}
/* o resumo e a lista de andares são para leitor de tela e teclado; a lista aparece ao receber foco */
#estado-predio .resumo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.andares-acessivel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.andares-acessivel:focus-within{position:fixed;left:16px;bottom:48px;z-index:4;width:min(520px,calc(100vw - 32px));height:auto;clip:auto;white-space:normal}
.andares-acessivel button.andar{font:inherit;width:100%;text-align:left;cursor:pointer;border:0}
.andar-botoes{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:2;display:flex;gap:12px;pointer-events:auto}
.andar-botoes .btn[disabled]{opacity:.45;cursor:default}
@media (max-width:560px){
  .hud{left:10px;right:10px;top:10px;gap:10px}
  .hud-direita{gap:10px;justify-content:flex-start}
  .hud-hora{font-size:24px}
  .hud-rodape{left:10px;right:10px}
  /* o rodapé (log + crédito) ocupa ~3 linhas: o mundo sobe para o térreo não ficar por baixo */
  .predio-canvas{--reserva-inferior:84px}
  .andar-canvas{--reserva-inferior:170px}   /* cabe a faixa dos botões APP/INFRA + rodapé */
  .andar-botoes{bottom:96px}
}
.modal{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(11,13,34,.78)}
.dialogo{display:flex;flex-direction:column;gap:12px;max-width:520px}
.dialogo-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dialogo-titulo{margin:0;font-family:var(--vga);font-weight:400;font-size:16px;line-height:1.4;color:var(--yellow)}
.fechar{font-family:var(--vga);font-size:32px;line-height:1;border:0;background:none;color:#aeb3e0;cursor:pointer;padding:0 4px}
.dialogo-desc{margin:0;color:#aeb3e0}
.campo{display:flex;flex-direction:column;gap:4px;color:#aeb3e0;font-size:13px}
.campo input{font-family:var(--txt);font-size:16px;padding:8px 10px;background:var(--vidro);color:#fff;border:2px solid #3a3f70;outline:none}
.campo input:focus{border-color:var(--yellow)}
.dialogo-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#aeb3e0}
.dialogo-meta b{font-weight:600;color:#fff}
.dialogo-aviso{margin:0;min-height:1.4em;font-size:13px;color:var(--red)}
.dialogo-acoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}