/* hero */
@keyframes asm-glow{0%,22%{opacity:0}35%,80%{opacity:1}95%,100%{opacity:0}}
@keyframes dust{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.asm{transform-box:fill-box;transform-origin:center;animation-duration:10s;animation-timing-function:cubic-bezier(.6,0,.2,1);animation-iteration-count:infinite}
@keyframes qa1{0%{transform:translate(-160px,-120px) rotate(-40deg);opacity:0}24%{transform:translate(0,0) rotate(0deg);opacity:1}84%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(-160px,-120px) rotate(-40deg);opacity:0}}
.qa1{animation-name:qa1}
@keyframes qa2{0%{transform:translate(170px,-140px) rotate(50deg);opacity:0}24%{transform:translate(0,0) rotate(0deg);opacity:1}84%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(170px,-140px) rotate(50deg);opacity:0}}
.qa2{animation-name:qa2}
@keyframes qa3{0%{transform:translate(200px,30px) rotate(-60deg);opacity:0}24%{transform:translate(0,0) rotate(0deg);opacity:1}84%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(200px,30px) rotate(-60deg);opacity:0}}
.qa3{animation-name:qa3}
@keyframes qa4{0%{transform:translate(150px,170px) rotate(40deg);opacity:0}24%{transform:translate(0,0) rotate(0deg);opacity:1}84%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(150px,170px) rotate(40deg);opacity:0}}
.qa4{animation-name:qa4}
@keyframes qa5{0%{transform:translate(-140px,180px) rotate(-50deg);opacity:0}24%{transform:translate(0,0) rotate(0deg);opacity:1}84%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(-140px,180px) rotate(-50deg);opacity:0}}
.qa5{animation-name:qa5}
@keyframes qa6{0%{transform:translate(-200px,10px) rotate(60deg);opacity:0}24%{transform:translate(0,0) rotate(0deg);opacity:1}84%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(-200px,10px) rotate(60deg);opacity:0}}
.qa6{animation-name:qa6}
@keyframes w-roll{0%,12.5%{transform:translateY(0)}16.7%,29.2%{transform:translateY(-14.2857%)}33.3%,45.8%{transform:translateY(-28.5714%)}50%,62.5%{transform:translateY(-42.8571%)}66.7%,79.2%{transform:translateY(-57.1429%)}83.3%,95.8%{transform:translateY(-71.4286%)}100%{transform:translateY(-85.7143%)}}
.w-roll{animation:w-roll 15s cubic-bezier(.7,0,.2,1) infinite}
.asm-glow{animation:asm-glow 10s ease-in-out infinite}
.dust{animation:dust 6s ease-in-out infinite}
/* clientes */
@keyframes mq{to{transform:translateX(-50%)}}
.mq{display:flex;width:max-content;animation:mq 40s linear infinite}
.mqw:hover .mq{animation-play-state:paused}
.lg img{transition:transform .4s ease}
.lg:hover img{transform:scale(1.06)}
/* mensajeria */
@keyframes phone{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(-1deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fly{0%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translate(0,0) scale(.3);opacity:0}}
@keyframes row{0%{opacity:0;transform:translateX(24px)}4%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes ping{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.phone{animation:phone 7s ease-in-out infinite}
.bob{animation:bob 5s ease-in-out infinite}
.fly{position:absolute;left:250px;top:330px;width:30px;height:22px;border-radius:11px 11px 11px 3px;animation:fly 5s ease-in infinite}
.row{opacity:0;animation:row 12.5s ease-out infinite}
.ping{animation:ping 1.4s ease-in-out infinite}
/* casos */
@keyframes grow{0%{flex-grow:1}4%,20%{flex-grow:6}24%,100%{flex-grow:1}}
@keyframes cap{0%,3%{opacity:0;transform:translateY(16px)}7%,19%{opacity:1;transform:none}23%,100%{opacity:0;transform:translateY(16px)}}
@keyframes lab{0%,2%{opacity:1}5%,21%{opacity:0}24%,100%{opacity:1}}
@keyframes pan{0%{transform:scale(1.12) translateY(0)}20%{transform:scale(1.02) translateY(-2%)}100%{transform:scale(1.12) translateY(0)}}
.acc:hover .p,.acc:hover .cap,.acc:hover .lab,.acc:hover .bg{animation-play-state:paused}
.p{position:relative;flex:1 1 0;min-width:0;border-radius:22px;overflow:hidden;animation:grow 20s cubic-bezier(.65,0,.35,1) infinite}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;animation:pan 20s ease-in-out infinite}
.cap{position:absolute;left:28px;right:28px;bottom:26px;opacity:0;animation:cap 20s ease-in-out infinite}
.lab{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);animation:lab 20s ease-in-out infinite}
/* tarjeta automatización */
@keyframes au{0%{opacity:0;transform:translateX(-10px)}6%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
.au{opacity:0;animation:au 6s ease-out infinite}
/* proceso */
@keyframes fill{0%{width:0}85%,100%{width:100%}}
@keyframes act{0%,2%{background:#FFFFFF;border-color:#D6E2F2;color:#0266BE;box-shadow:0 6px 16px rgba(7,49,109,.06)}6%,24%{background:linear-gradient(140deg,#1C9DE0,#0558B0);border-color:#1C9DE0;color:#FFFFFF;box-shadow:0 0 0 8px rgba(28,157,224,.14),0 14px 34px rgba(2,102,190,.35)}30%,100%{background:#FFFFFF;border-color:#D6E2F2;color:#0266BE;box-shadow:0 6px 16px rgba(7,49,109,.06)}}
@keyframes tx{0%,2%{opacity:.6}6%,24%{opacity:1}30%,100%{opacity:.6}}
.bar{height:2px;background:linear-gradient(90deg,#1C9DE0,#6CCBFA);animation:fill 12s cubic-bezier(.5,0,.3,1) infinite}
.node{animation:act 12s ease-in-out infinite}
.stx{animation:tx 12s ease-in-out infinite}
.pl{transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.pl:hover{border-color:#9FC3EC;transform:translateY(-3px);box-shadow:0 18px 40px rgba(7,49,109,.10)}
/* casos: muro 3D */
@keyframes mup{to{transform:translateY(-50%)}}
@keyframes mdown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.colu{display:flex;flex-direction:column;gap:22px;animation:mup 52s linear infinite}
.cold{display:flex;flex-direction:column;gap:22px;animation:mdown 58s linear infinite}
.tile{border-radius:12px;overflow:hidden;background:#FFFFFF;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.tile img{display:block;width:100%;height:auto}
/* footer */
@media (prefers-reduced-motion: reduce){.au{animation:none;opacity:1}.bar{animation:none;width:100%}.node,.stx{animation:none}.colu,.cold,.w-roll,.asm,.asm-glow,.dust,.mq,.phone,.bob,.fly,.ping,.p,.cap,.lab,.bg{animation:none}.row{animation:none;opacity:1}.fly{display:none}.cap{opacity:1}.lab{opacity:0}}
/* ---------- móvil ---------- */
@media (max-width:600px){
  #inicio{min-height:0!important}
  #inicio>div{padding:56px 20px 40px!important;gap:24px!important}
  #inicio>div>div:last-child{max-width:300px!important}
  #soluciones>div,#mensajeria>div,#proceso>div{padding:72px 20px!important;gap:40px!important}
  #soluciones article,#soluciones>div>div>a{padding:28px!important}
  #soluciones article>div[aria-hidden="true"]{min-height:200px!important}
  #mensajeria [style*="flex: 0 0 540px"]{zoom:.62}
  #proceso [style*="top: 27px"]{display:none}
  #proceso ol{gap:28px!important}
  #casos{height:auto!important}
  #casos>div:last-child{padding:72px 20px!important}
  #casos>div[aria-hidden="true"]:nth-of-type(2){background:linear-gradient(180deg,rgba(2,10,28,.80) 0%,rgba(2,10,28,.92) 100%)!important}
}
@media (max-width:360px){#mensajeria [style*="flex: 0 0 540px"]{zoom:.56}}