/* La obra: un edificio con grúa y cuatro monitos que reaccionan al tocarlos
   y siguen al cursor con los ojos. Tres pisos listos y el cuarto en
   estructura; la grúa sube cajas al último piso y las ventanas se van
   prendiendo. Decorativa: si se quita, el aviso queda igual. Todo el estilo
   vive aquí (la CSP es style-src 'self'); el JS sólo pone clases y
   posiciones. Los transform-origin van en unidades del SVG, relativos a cada
   monito (los pies en 0,0). */

.obra{position:relative;width:100%;max-width:460px;justify-self:center;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  animation:aparecer .9s cubic-bezier(.2,.7,.2,1) .25s both}
@keyframes aparecer{from{opacity:0;translate:0 14px}}
/* En el teléfono la obra llega a las orillas: los monitos ganan tamaño y el
   suelo ya se desvanece solo en los extremos. */
@media(max-width:560px){.obra{justify-self:stretch;width:auto;max-width:none;margin-inline:-18px}}
.escena{display:block;width:100%;height:auto;overflow:visible;
  --piel:#ececef;--ropa:#8d8e94;--jefe:#5d5e64;--caja:#2a2a2e;--borde:#6a6b71;
  --muro:#121215;--trazo:#55565c}

.suelo{stroke-width:2}
.piedras{stroke:#2a2a2e;stroke-width:2;stroke-linecap:round}
.caja{fill:var(--caja);stroke:var(--borde);stroke-width:1.5}
.cinta{stroke:var(--ambar);stroke-width:3;opacity:.75}

/* El edificio: al tocarlo prende todas sus ventanas. */
.fachada{fill:var(--muro);stroke:var(--trazo);stroke-width:1.5}
.puerta{fill:#0b0b0c;stroke:var(--trazo);stroke-width:1.5}
.losa{stroke:#6a6b71;stroke-width:3;stroke-linecap:round}
.columna,.trabe{stroke:#77787e;stroke-width:4;stroke-linecap:round}
.trabe-falta{stroke:#4a4b50;stroke-width:1.5;stroke-dasharray:5 6;animation:hormigas 1.6s linear infinite}
@keyframes hormigas{to{stroke-dashoffset:-22}}
.contraviento{stroke:#3a3b40;stroke-width:1.5}
.ventana{fill:#1b1b1e;stroke:var(--trazo);stroke-width:1.5;transition:fill .5s}
.ventana.titila{animation:titila 9s ease-in-out infinite}
.t2{animation-delay:-3s}.t3{animation-delay:-6s}
@keyframes titila{0%,35%{fill:#1b1b1e}45%,80%{fill:#b8894a}90%,100%{fill:#1b1b1e}}
.resplandor{opacity:0;transition:opacity .6s}
[data-luz]{cursor:pointer}
[data-luz].luz .ventana{fill:var(--ambar);animation:none}
[data-luz].luz .resplandor{opacity:1}
.cono{fill:var(--ambar);opacity:.85}
.cono-franja{stroke:#fff;stroke-width:2;opacity:.75}

/* La grúa: el carro va y viene sobre la pluma, el cable sube y baja. Las
   cuatro animaciones de 12 s van juntas. */
.torre{fill:none;stroke:#77787e;stroke-width:2}
.celosia{fill:none;stroke:#4a4b50;stroke-width:1.2}
.tirante{fill:none;stroke:#4a4b50;stroke-width:1}
.base-grua,.contrapeso{fill:#2a2a2e;stroke:var(--borde);stroke-width:1.5}
.cabina{fill:#1d1d20;stroke:#77787e;stroke-width:1.5}
.vidrio{fill:#0b0b0c}
.carrito{fill:#9b9ba1}
.garfio{fill:none;stroke:#c9cacf;stroke-width:2;stroke-linecap:round}
.eslinga{stroke:#77787e;stroke-width:1.2}
.cable{stroke:#9b9ba1;stroke-width:1.2;transform-origin:0 0;animation:cable 12s ease-in-out infinite}
.gancho{animation:gancho 12s ease-in-out infinite}
.carro{animation:carro 12s ease-in-out infinite}
.carga-grua{animation:cargaGrua 12s linear infinite}
@keyframes carro{0%,14%{transform:translateX(0)}36%,66%{transform:translateX(-73px)}86%,100%{transform:translateX(0)}}
@keyframes cable{0%{transform:scaleY(187)}14%,36%{transform:scaleY(30)}48%,58%{transform:scaleY(79)}66%,86%{transform:scaleY(30)}98%,100%{transform:scaleY(187)}}
@keyframes gancho{0%{transform:translateY(187px)}14%,36%{transform:translateY(30px)}48%,58%{transform:translateY(79px)}66%,86%{transform:translateY(30px)}98%,100%{transform:translateY(187px)}}
@keyframes cargaGrua{0%,54%{opacity:1}58%,97%{opacity:0}99%,100%{opacity:1}}

/* Monitos: ropa gris, brazos y cara claros, casco ámbar como el punto del chip. */
.m{cursor:pointer}
.toque{fill:transparent;pointer-events:all}
.pierna{stroke:var(--ropa);stroke-width:6.5;stroke-linecap:round}
.brazo{stroke:var(--piel);stroke-width:5.5;stroke-linecap:round}
.tronco{fill:var(--ropa)}
.cabeza{fill:var(--piel)}
.pupila{fill:#000}
/* Los ojos siguen al cursor (o al dedo): el JS sólo mueve este grupo. */
.mirada{transition:transform .25s ease-out}
.casco{fill:var(--ambar)}
.ala{stroke:var(--ambar);stroke-width:3;stroke-linecap:round}
.m.tocado .reaccion{animation:brinco .5s cubic-bezier(.3,.6,.4,1)}
@keyframes brinco{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}

/* Operador: sólo se le ve la cara en la cabina; al tocarlo se asoma. */
.m-operador.tocado .reaccion{animation:asomo .6s ease-in-out}
@keyframes asomo{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}

/* Señalero: agita los dos brazos guiando la caja; al tocarlo, más rápido. */
.m-senalero .senal-a,.m-senalero .senal-b{transform-origin:0 -40px;animation:senal 1s ease-in-out infinite}
.m-senalero .senal-b{animation-name:senal2}
@keyframes senal{0%,100%{transform:rotate(40deg)}50%{transform:rotate(75deg)}}
@keyframes senal2{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(-75deg)}}
.m-senalero.tocado :is(.senal-a,.senal-b){animation-duration:.3s}

/* Soldador: careta abajo, flama y chispas; al tocarlo se levanta la careta
   y se le ven los ojos. */
.careta rect{fill:#3a3b40;stroke:#55565c;stroke-width:1}
.careta path{stroke:var(--ambar);stroke-width:1.5;stroke-linecap:round;opacity:.8}
.careta{transform-origin:2px -60px;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.m-soldador.tocado .careta{transform:rotate(-115deg)}
.soplete{stroke:#9b9ba1;stroke-width:3;stroke-linecap:round}
.brillo{animation:flama .16s steps(2,jump-none) infinite alternate}
@keyframes flama{from{opacity:.95}to{opacity:.45}}
.chispa-a,.chispa-b{fill:none;stroke:#ffd58a;stroke-width:1.4;stroke-linecap:round}
.chispa-a{animation:parpadeo .24s steps(1) infinite}
.chispa-b{animation:parpadeo .24s steps(1) -.12s infinite}
@keyframes parpadeo{0%{opacity:1}50%{opacity:0}}
.m-soldador.tocado :is(.brillo,.chispa-a,.chispa-b){animation:none;opacity:0}
.m-soldador.tocado .reaccion{animation:none}

/* La paleta ALTO/SIGA se voltea sola; al tocarlo la voltea a lo loco. */
.poste{stroke:#9b9ba1;stroke-width:2}
.paleta{transform-origin:14px -77px;animation:voltea 6s linear infinite}
.cara-siga{animation:caraSiga 6s linear infinite}
.cara-alto{opacity:0;animation:caraAlto 6s linear infinite}
@keyframes voltea{0%,45%{transform:scaleX(1)}47.5%{transform:scaleX(0)}50%,95%{transform:scaleX(1)}97.5%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes caraSiga{0%,47.4%{opacity:1}47.5%,97.4%{opacity:0}97.5%,100%{opacity:1}}
@keyframes caraAlto{0%,47.4%{opacity:0}47.5%,97.4%{opacity:1}97.5%,100%{opacity:0}}
.cara-siga circle{fill:var(--ambar)}
.cara-alto circle{fill:#ececef}
.paleta text{font-size:7px;font-weight:800;letter-spacing:.3px;text-anchor:middle;fill:#000}
.m-bandera.tocado :is(.paleta,.cara-siga,.cara-alto){animation-duration:1s}

/* Globo de diálogo: HTML encima del SVG para que la letra no se encoja con
   la escena en el teléfono. Nace desde la colita. */
.globo{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;
  background:#fff;color:#000;font-size:12.5px;font-weight:700;letter-spacing:-.1px;line-height:1;
  padding:8px 11px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.4);
  transform:translate(-50%,-100%) scale(.6);transform-origin:var(--cola,50%) 100%;opacity:0;
  transition:opacity .15s ease,transform .3s cubic-bezier(.3,1.5,.5,1)}
.globo::after{content:"";position:absolute;top:100%;left:var(--cola,50%);margin-left:-6px;
  border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.globo.ver{opacity:1;transform:translate(-50%,-100%) scale(1)}

/* Sin movimiento: escena quieta con la caja ya arriba; al tocarlos sólo
   hablan y miran. */
@media(prefers-reduced-motion:reduce){
  .obra,.obra *{animation:none !important}
  .carga-grua{opacity:1}
  .gancho{transform:translateY(30px)}
  .cable{transform:scaleY(30)}
  .globo{transition:opacity .15s ease;transform:translate(-50%,-100%)}
  .globo.ver{transform:translate(-50%,-100%)}
}