/* GesMan HERMES — escenas 3D del landing (assets/js/lx-scene.js).
 *
 * - .hm-hero-3d: piezas industriales en los bordes del hero, detrás del contenido (z 0; el
 *   contenido va en z 1, el emblema y las estrellas en negativo).
 * - .hm-band-3d: el portátil que se abre con el scroll, sobre la banda de producto. Cuando dibuja
 *   su primer cuadro, el contenedor recibe .lx3d-ready y el mockup plano se desvanece; el pie de
 *   foto se mantiene. Sin WebGL2 todo queda como antes.
 */
.hm-hero-3d {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
}
.hm-hero-3d.is-ready { opacity: 1; }

.hm-3d-band { position: relative; }
/* El canvas sube sobre el límite con el hero pero no baja hasta el pie de foto: en celular el
   portátil lo tapaba. La figura queda encima (transparente) para que el pie se lea siempre. */
.hm-band-3d {
  position: absolute; left: -8%; top: -30%; width: 116%; height: 122%;
  z-index: 2; pointer-events: none; opacity: 0; transition: opacity .9s ease;
}
.hm-3d-band.lx3d-ready .hm-band-3d { opacity: 1; }
.hm-3d-band .hm-marco img { transition: opacity .7s ease; }
.hm-3d-band.lx3d-ready .hm-marco { position: relative; z-index: 3; border-color: transparent; box-shadow: none; background: transparent; }
.hm-3d-band.lx3d-ready .hm-marco img { opacity: 0; }
.hm-3d-band.lx3d-ready .hm-brillo::after { display: none; }

@media (max-width: 780px) {
  /* 108% como máximo: con 112% el canvas se salía de la pantalla (desborde horizontal de 6 px a 390). */
  .hm-band-3d { left: -4%; width: 108%; top: -34%; height: 124%; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-3d, .hm-band-3d, .hm-3d-band .hm-marco img { transition: none; }
}