/* nmc-hero-assemble-13839.css
   "Del caos al orden": al cargar, las cajas vuelan desde posiciones caóticas y se colocan en una
   rejilla perfecta. Es la promesa de la marca, hecha animación. Detrás del contenido del hero. */

.nmc-public .nmc-home-clean-hero{position:relative;}
.nmc-public .nmc-hero-fx{
  position:absolute;top:0;right:0;width:48%;height:100%;z-index:0;pointer-events:none;
  overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 22%);
}
.nmc-public .nmc-hero-fx i{
  position:absolute;width:clamp(30px,3.4vw,46px);height:clamp(30px,3.4vw,46px);
  border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transform:translate(var(--sx),var(--sy)) rotate(var(--sr));opacity:0;
  animation:nmcAssemble .85s cubic-bezier(.18,.9,.22,1.08) forwards;
}
/* "etiqueta" sutil de la caja */
.nmc-public .nmc-hero-fx i::before{
  content:"";position:absolute;left:7px;right:7px;top:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.28);
}
.nmc-public .nmc-hero-fx i.on{
  background:rgba(227,6,19,.9);border-color:rgba(227,6,19,.9);
  box-shadow:0 8px 24px -8px rgba(227,6,19,.8),inset 0 1px 0 rgba(255,255,255,.25);
}
.nmc-public .nmc-hero-fx i.on::before{background:rgba(255,255,255,.85);}

@keyframes nmcAssemble{
  from{transform:translate(var(--sx),var(--sy)) rotate(var(--sr));opacity:0;}
  60%{opacity:1;}
  to{transform:translate(0,0) rotate(0);opacity:1;}
}

/* ligero "respiro" tras colocarse */
.nmc-public .nmc-hero-fx i{animation-fill-mode:forwards;}

@media (max-width:980px){.nmc-public .nmc-hero-fx{display:none;}}  /* en móvil manda el formulario */
@media (prefers-reduced-motion: reduce){
  .nmc-public .nmc-hero-fx i{animation:none;transform:none;opacity:1;}
}