/* =====================================================================
   Banner superior de CIM (unidades/transaccional.html): los productos aparecen uno tras otro.
   Sobre la imagen original (sin modificarla) se apilan: 1) una capa difuminada ("fantasma") que
   cubre la zona de los equipos y 2) una capa nítida por producto, recortada con una máscara
   suave, que entra en secuencia (laptop, monitor, tableta, equipo compacto, audífonos,
   multifuncional, impresora de etiquetas). Al final la capa difuminada se desvanece y queda el
   banner original. Las capas reutilizan .hban-img, así que en celular siguen el mismo recorte.
   Las máscaras están en % de la imagen de 1920x700.
   ===================================================================== */
.hban-prods{position:absolute;inset:0;z-index:1;pointer-events:none}
.hp,.hp-ghost{position:absolute;inset:0}
.hp .hban-img,.hp-ghost .hban-img{display:block}
.hp{opacity:0;animation:hp-in .9s cubic-bezier(.2,.7,.2,1) both}
.hp-ghost .hban-img{filter:blur(28px) brightness(1.7) saturate(.35) contrast(.8);-webkit-mask:radial-gradient(closest-side,#000 72%,transparent 100%) 108.7% 62% / 52.08% 64.29% no-repeat;mask:radial-gradient(closest-side,#000 72%,transparent 100%) 108.7% 62% / 52.08% 64.29% no-repeat}
.hp-ghost{animation:hp-ghost .9s ease 4.6s both}
@keyframes hp-in{0%{opacity:0;transform:translateY(22px) scale(.95)}100%{opacity:1;transform:none}}
@keyframes hp-ghost{0%{opacity:1}100%{opacity:0;visibility:hidden}}
.hp-p1 .hban-img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%) 70.07% 69.28% / 25.39% 40.71% no-repeat;mask:radial-gradient(closest-side,#000 68%,transparent 100%) 70.07% 69.28% / 25.39% 40.71% no-repeat}
.hp-p1{animation-delay:0.50s}
.hp-p2 .hban-img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%) 84.47% 39.77% / 22.03% 49.71% no-repeat;mask:radial-gradient(closest-side,#000 68%,transparent 100%) 84.47% 39.77% / 22.03% 49.71% no-repeat}
.hp-p2{animation-delay:0.95s}
.hp-p3 .hban-img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%) 81.01% 78.50% / 10.31% 31.07% no-repeat;mask:radial-gradient(closest-side,#000 68%,transparent 100%) 81.01% 78.50% / 10.31% 31.07% no-repeat}
.hp-p3{animation-delay:1.40s}
.hp-p4 .hban-img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%) 86.96% 75.64% / 21.09% 38.14% no-repeat;mask:radial-gradient(closest-side,#000 68%,transparent 100%) 86.96% 75.64% / 21.09% 38.14% no-repeat}
.hp-p4{animation-delay:1.85s}
.hp-p5 .hban-img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%) 92.72% 77.36% / 12.34% 27.43% no-repeat;mask:radial-gradient(closest-side,#000 68%,transparent 100%) 92.72% 77.36% / 12.34% 27.43% no-repeat}
.hp-p5{animation-delay:2.30s}
.hp-p6 .hban-img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%) 102.43% 65.96% / 22.27% 56.14% no-repeat;mask:radial-gradient(closest-side,#000 68%,transparent 100%) 102.43% 65.96% / 22.27% 56.14% no-repeat}
.hp-p6{animation-delay:2.75s}
.hp-p7 .hban-img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%) 102.13% 72.38% / 11.33% 27.86% no-repeat;mask:radial-gradient(closest-side,#000 68%,transparent 100%) 102.13% 72.38% / 11.33% 27.86% no-repeat}
.hp-p7{animation-delay:3.20s}
@media(prefers-reduced-motion:reduce){
  .hp{opacity:1;animation:none}
  .hp-ghost{display:none}
}