/* ===================================================================
   AimTeams HQ — hoja única de escena (v53)
   Reescrita desde cero. Cada regla aparece una sola vez; no quedan
   restos de v33/v34/v37/v48, que se pisaban entre sí y provocaban
   personajes recortados, tamaños inconsistentes y sprites espejados.
   =================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
body.visual-only-page{display:grid;min-height:100vh;place-items:center;
  padding:18px;background:#050b18;overflow:auto;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
.visual-stage{width:min(1672px,100%)}

/* ---- lienzo --------------------------------------------------- */
.office-card{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;
  border:1px solid #24456d;border-radius:18px;background:#07152d;
  box-shadow:0 20px 60px #0008;isolation:isolate;
  --scene-image:url('./assets/pixel-hq-midday.png')}
.scene-stack{position:absolute;inset:0;z-index:0}
.office-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease}
.office-bg.active{opacity:1}

/* ---- cielo: las nubes se cortan en la línea del techo ---------- */
.sky-motion{position:absolute;top:0;z-index:1;width:50%;height:46%;
  overflow:hidden;opacity:.8;pointer-events:none}
.sky-left{left:0;clip-path:polygon(0 0,100% 0,0 72%)}
.sky-right{right:0;clip-path:polygon(0 0,100% 0,100% 72%)}
.pixel-cloud{position:absolute;width:74px;height:22px;background:#ffffffcc;
  border-radius:11px;box-shadow:18px -7px 0 -3px #ffffffcc,-20px 5px 0 -5px #ffffffb0;
  filter:blur(.4px)}
.cloud-one  {top:22%;left:-30%;animation:drift 82s linear infinite}
.cloud-two  {top:48%;left:-55%;animation:drift 104s linear infinite;transform:scale(.8)}
.cloud-three{top:12%;left:-80%;animation:drift 128s linear infinite;transform:scale(1.1)}
@keyframes drift{to{left:130%}}
.office-card[data-scene="night"] .sky-motion{opacity:.3}
.office-card[data-scene="rain"]  .sky-motion{opacity:.22}

/* ---- lluvia: sólo cielo y ciudad, nunca dentro de la oficina --- */
.rain-layer{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  transition:opacity 1.2s}
.rain-layer::before,.rain-layer::after,.rain-layer i{content:"";position:absolute;
  inset:0;display:block;
  background:repeating-linear-gradient(104deg,transparent 0 12px,
    rgba(170,220,255,.5) 13px 14px,transparent 15px 26px);
  background-size:150px 150px}
.rain-layer::before        {clip-path:polygon(0 0,52% 0,0 46%)}
.rain-layer::after         {clip-path:polygon(48% 0,100% 0,100% 46%)}
.rain-layer i:nth-child(1) {clip-path:polygon(0 60%,0 100%,44% 100%)}
.rain-layer i:nth-child(2) {clip-path:polygon(100% 60%,100% 100%,56% 100%)}
.office-card[data-scene="rain"] .rain-layer{opacity:.55;animation:rainFall .55s steps(4) infinite}
@keyframes rainFall{to{background-position:-150px 150px}}

/* ---- nieve: mismos recortes de cielo que la lluvia ------------- */
.snow-layer{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  transition:opacity 1.2s}
.snow-layer::before,.snow-layer::after,.snow-layer i{content:"";position:absolute;
  inset:0;display:block;
  background-image:radial-gradient(#ffffffdd 1px,transparent 1.6px),
                   radial-gradient(#ffffffaa 1px,transparent 1.6px),
                   radial-gradient(#ffffff88 1px,transparent 1.4px);
  background-size:90px 90px,140px 140px,190px 190px;
  background-position:0 0,40px 60px,90px 20px}
.snow-layer::before        {clip-path:polygon(0 0,52% 0,0 46%);animation:snowFall 9s linear infinite}
.snow-layer::after         {clip-path:polygon(48% 0,100% 0,100% 46%);animation:snowFall 11s linear infinite}
.snow-layer i:nth-child(1) {clip-path:polygon(0 60%,0 100%,44% 100%);animation:snowFall 13s linear infinite}
.snow-layer i:nth-child(2) {clip-path:polygon(100% 60%,100% 100%,56% 100%);animation:snowFall 10s linear infinite}
@keyframes snowFall{to{background-position:14px 90px,-22px 200px,30px 210px}}
.office-card[data-scene="snow"] .snow-layer{opacity:.85}
.office-card[data-scene="snow"] .sky-motion{opacity:.35}
.office-card[data-scene="snow"] .office-glow{opacity:.8}

/* ---- ambiente: lámparas, pantallas, polvo, letrero ------------- */
.ambient{position:absolute;inset:0;z-index:2;pointer-events:none}
.ambient i{position:absolute;border-radius:50%;filter:blur(7px)}
/* lámparas de escritorio: parpadeo cálido muy lento */
.lamp{width:2.6%;aspect-ratio:1;background:#ffd89a;opacity:.30;
  animation:lampPulse 5.5s ease-in-out infinite}
.lamp-fu{left:32.0%;top:44.0%}
.lamp-st{left:54.3%;top:46.5%;animation-delay:-2.2s}
.lamp-mt{left:11.5%;top:27.0%;animation-delay:-3.6s}
@keyframes lampPulse{50%{opacity:.5;filter:blur(9px)}}
/* reflejo frío de los monitores sobre el escritorio */
.screen{width:4.2%;aspect-ratio:2.6;background:#8fe3ff;opacity:.10;
  animation:screenFlicker 3.2s steps(4) infinite}
.scr-re{left:35.5%;top:25.5%}
.scr-de{left:53.0%;top:25.0%;animation-delay:-.8s}
.scr-fu{left:34.5%;top:43.5%;background:#ffa6e0;animation-delay:-1.6s}
.scr-st{left:56.0%;top:46.0%;background:#ffd36b;animation-delay:-2.4s}
.scr-kv{left:84.0%;top:57.5%;animation-delay:-3.0s}
@keyframes screenFlicker{50%{opacity:.22}}
/* motas de polvo flotando en el haz de luz */
.motes{position:absolute;left:24%;top:18%;width:52%;height:46%;
  background-image:radial-gradient(#fff7e0 .9px,transparent 1.4px),
                   radial-gradient(#ffeecc .8px,transparent 1.2px);
  background-size:120px 120px,180px 180px;
  opacity:.16;animation:moteDrift 26s linear infinite;filter:none;border-radius:0}
@keyframes moteDrift{to{background-position:-40px -90px,60px -140px}}
/* el rótulo de la pared respira */
.sign{left:53%;top:9%;width:14%;aspect-ratio:5;background:#ffe9b0;opacity:.07;
  filter:blur(12px);animation:lampPulse 7s ease-in-out infinite}
.office-card[data-scene="night"] .lamp,
.office-card[data-scene="rain"]  .lamp{opacity:.5}
.office-card[data-scene="night"] .screen,
.office-card[data-scene="rain"]  .screen{opacity:.2}
.office-card[data-scene="midday"] .ambient,
.office-card[data-scene="dawn"]   .ambient{opacity:.55}
.office-card[data-scene="snow"]   .motes{opacity:.08}

/* ---- brillo de pantallas y vapor ------------------------------ */
.office-glow{position:absolute;inset:0;z-index:2;opacity:.5;pointer-events:none;
  transition:opacity 1.6s}
.office-glow i{position:absolute;width:5%;aspect-ratio:2.4;border-radius:50%;
  filter:blur(10px);opacity:.12;background:#55d9ff;
  animation:screenGlow 4.4s steps(3) infinite}
.office-glow i:nth-child(1){left:36%;top:26%}
.office-glow i:nth-child(2){left:56%;top:26%;animation-delay:-1s}
.office-glow i:nth-child(3){left:34%;top:45%;background:#ff55be;animation-delay:-2s}
.office-glow i:nth-child(4){left:56%;top:49%;background:#ffc847;animation-delay:-3s}
@keyframes screenGlow{50%{opacity:.26}}
.office-card[data-scene="night"] .office-glow,
.office-card[data-scene="rain"]  .office-glow{opacity:1}
.office-card[data-scene="midday"] .office-glow{opacity:.25}
.coffee-steam{position:absolute;z-index:205;left:71.5%;top:23.5%;
  width:14px;height:26px;pointer-events:none}
.coffee-steam i{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;
  background:#ffffff8a;animation:steamRise 2.6s linear infinite}
.coffee-steam i:nth-child(1){left:2px}
.coffee-steam i:nth-child(2){left:6px;animation-delay:-.9s}
.coffee-steam i:nth-child(3){left:10px;animation-delay:-1.8s}
@keyframes steamRise{to{transform:translateY(-24px) scale(1.8);opacity:0}}

/* ---- personajes ------------------------------------------------ */
/* La caja se ancla por los pies: translate(-50%,-100%).
   De pie y sentado NO pueden medir lo mismo; la escala sale de la
   silla de oficina del fondo (93 px de alto sobre 941).            */
.character{position:absolute;z-index:120;
  width:7.6%;height:auto;aspect-ratio:1/1;
  transform:translate(-50%,-100%);transform-origin:50% 100%;
  padding:0;border:0;background:transparent;cursor:pointer;
  transition:none;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.character.using-seat{width:6.4%}
.character .sprite-body{position:absolute;inset:0;width:100%;height:100%;
  background-repeat:no-repeat;image-rendering:pixelated;
  transform:none;scale:1;clip-path:none;animation:none;transition:none}
/* sólo la hoja de caminar de 8 direcciones se voltea */
.character.facing-left .sprite-body{transform:scaleX(-1)}
.character.using-seat .sprite-body,
.character.using-station .sprite-body{transform:none}
.character::after{content:"";position:absolute;z-index:-1;left:50%;bottom:4%;
  width:32%;height:3%;transform:translateX(-50%);border-radius:50%;
  background:rgba(2,8,20,.42);filter:blur(2px)}
.character.using-seat::after{opacity:.18}
/* el foco no debe deformar el sprite, sólo iluminarlo */
.character:hover,.character:focus-visible{outline:none;z-index:380;
  filter:drop-shadow(0 0 6px #53dfff) drop-shadow(0 3px 2px rgba(0,0,0,.55))}
.character .nameplate{position:absolute;left:50%;bottom:-6%;
  transform:translateX(-50%);padding:2px 5px;border-radius:5px;
  background:#061225ee;color:#fff;border:1px solid #ffffff3a;
  font-size:7px;font-weight:700;line-height:1.2;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .16s}
.character:hover .nameplate,.character:focus-visible .nameplate{opacity:1}

/* ---- globos de acción ------------------------------------------
   Reescritos: una etiqueta diminuta anclada ARRIBA de la cabeza.
   El tamaño se fija en el propio lienzo (cqw), no en px, para que
   escale con la escena y nunca tape la cara.                        */
.dialogue-layer{position:absolute;inset:0;z-index:400;pointer-events:none;
  container-type:inline-size}
.dialogue-layer .action-bubble{position:absolute;opacity:0;
  transform:translate(-50%,-100%);transition:opacity .16s ease;
  padding:.16cqw .36cqw;border-radius:.3cqw;
  background:#0d1b30e8;color:#eaf3ff;border:.06cqw solid #ffffff55;
  font-size:.62cqw;font-weight:600;line-height:1.25;letter-spacing:.01em;
  max-width:9cqw;text-align:center;width:max-content;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 .1cqw .3cqw rgba(0,0,0,.45)}
.dialogue-layer .action-bubble.show{opacity:.94}

/* ---- mobiliario que debe tapar a un personaje ------------------ */
.furniture-foreground{position:absolute;inset:0;z-index:260;pointer-events:none}
.furniture-mask{position:absolute;inset:0;background-image:var(--scene-image);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  image-rendering:pixelated}

/* ---- controles y pie ------------------------------------------- */
.scene-controls{position:absolute;z-index:500;top:12px;right:12px;
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:#08152bd9;border:1px solid #ffffff2e;color:#eaf3ff;
  transition:background .18s}
.scene-controls:hover{background:#0d2142ee}
.scene-icon{grid-area:1/1;font-size:16px;pointer-events:none}
/* el desplegable cubre el icono y es invisible: al pulsarlo se abre la lista */
.scene-controls select{grid-area:1/1;width:100%;height:100%;opacity:0;cursor:pointer;
  appearance:none;border:0;background:transparent;font-family:inherit}
.scene-controls select option{background:#0d2142;color:#eaf3ff;font-size:13px}
.office-caption{position:absolute;z-index:500;left:14px;bottom:10px;color:#eaf3ff;
  text-shadow:0 2px 6px #000b;font-size:12px;font-weight:700}
.office-caption small{display:block;font-weight:400;opacity:.7;font-size:10px}

@media(max-width:760px){
  body.visual-only-page{padding:0}
  .office-card{border-radius:0}
  .character{width:9%}
  .character.using-seat{width:7.6%}
  .scene-controls label{display:none}
}