/* =========================================================
   LAS ANIMACIONES DE CADA SERVICIO TECNICO (29-09-2026)
   Los dibujos estan en assets/servicios-anim.js. Aca solo el
   movimiento. Todo gira o se mueve respecto a su propia caja
   (transform-box: fill-box), no a coordenadas fijas del dibujo.
   ========================================================= */

/* La ilustracion ocupa la cabecera de la tarjeta, de borde a borde */
.st-serv__anim { margin: -18px -18px 14px; border-radius: var(--radio) var(--radio) 0 0; overflow: hidden; background: #f6f4fc; }
.st-serv__anim .sa { display: block; width: 100%; height: auto; }
.sa * { transform-box: fill-box; }

/* ---- diagnostico ---- */
.sa-pulso { stroke-dasharray: 190; animation: sa-dibujar 2.6s ease-in-out infinite; }
.sa-ok { transform-origin: center; animation: sa-ok 2.6s ease-in-out infinite; }
.sa-brazo-lupa { animation: sa-recorrer 4s ease-in-out infinite; }
@keyframes sa-dibujar { 0% { stroke-dashoffset: 190; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes sa-ok { 0%, 62% { opacity: 0; transform: scale(.4); } 72% { opacity: 1; transform: scale(1.15); } 80%, 100% { opacity: 1; transform: scale(1); } }
@keyframes sa-recorrer { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(38px, 6px); } }

/* ---- mantencion ---- */
.sa-giro { transform-origin: center; animation: sa-giro 1.1s linear infinite; }
.sa-giro--lento { animation-duration: 4s; }
@keyframes sa-giro { to { transform: rotate(360deg); } }
.sa-polvo { animation: sa-polvo 2.2s ease-out infinite; }
.sa-polvo--1 { animation-delay: .4s; } .sa-polvo--2 { animation-delay: .8s; }
.sa-polvo--3 { animation-delay: 1.2s; } .sa-polvo--4 { animation-delay: 1.6s; }
@keyframes sa-polvo { 0% { opacity: .9; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(26px, -46px); } }
.sa-termo { transform-origin: bottom; animation: sa-termo 4.4s ease-in-out infinite; }
.sa-termo-bulbo { animation: sa-termo-color 4.4s ease-in-out infinite; }
@keyframes sa-termo { 0%, 15% { transform: scaleY(1); fill: #e5484d; } 70%, 100% { transform: scaleY(.38); fill: #0f8a4d; } }
@keyframes sa-termo-color { 0%, 15% { fill: #e5484d; } 70%, 100% { fill: #0f8a4d; } }
.sa-brocha { animation: sa-barrer .9s ease-in-out infinite alternate; }
@keyframes sa-barrer { from { transform: translate(0, 0) rotate(0); } to { transform: translate(8px, 4px) rotate(3deg); } }

/* ---- formateo ---- */
.sa-barra { transform-origin: left; animation: sa-llenar 3.4s ease-in-out infinite; }
@keyframes sa-llenar { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
.sa-archivo { animation: sa-respaldo 3.4s ease-in-out infinite; }
.sa-archivo--1 { animation-delay: .5s; } .sa-archivo--2 { animation-delay: 1s; }
@keyframes sa-respaldo { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 60% { opacity: 1; transform: translate(-82px, 18px) scale(.8); } 70%, 100% { opacity: 0; transform: translate(-82px, 18px) scale(.8); } }

/* ---- cambio SSD ---- */
.sa-entra-lado { animation: sa-entra-lado 3.6s ease-in-out infinite; }
@keyframes sa-entra-lado { 0% { transform: translateX(70px); opacity: 0; } 15% { opacity: 1; } 45%, 100% { transform: translateX(0); opacity: 1; } }
.sa-arco { stroke-dasharray: 100; animation: sa-arco 3.6s ease-in-out infinite; }
@keyframes sa-arco { 0%, 45% { stroke-dashoffset: 100; } 85%, 100% { stroke-dashoffset: 18; } }
.sa-aguja { transform-origin: right bottom; animation: sa-aguja 3.6s ease-in-out infinite; }
@keyframes sa-aguja { 0%, 45% { transform: rotate(0); } 85%, 100% { transform: rotate(150deg); } }

/* ---- RAM ---- */
.sa-baja { animation: sa-baja 3s ease-in infinite; }
@keyframes sa-baja { 0% { transform: translateY(-44px); opacity: 0; } 20% { opacity: 1; } 55%, 100% { transform: translateY(0); opacity: 1; } }
.sa-destello { transform-origin: center; animation: sa-destello 3s ease-out infinite; }
@keyframes sa-destello { 0%, 52% { opacity: 0; transform: scale(.3) rotate(0); } 62% { opacity: 1; transform: scale(1.2) rotate(20deg); } 80%, 100% { opacity: 0; transform: scale(.6) rotate(40deg); } }

/* ---- pantalla ---- */
.sa-rota { animation: sa-rota 4.2s ease-in-out infinite; }
@keyframes sa-rota { 0%, 30% { opacity: 1; } 42%, 100% { opacity: 0; } }
.sa-nueva { animation: sa-nueva 4.2s ease-in-out infinite; }
@keyframes sa-nueva { 0%, 38% { opacity: 0; transform: translateY(-14px); } 58%, 100% { opacity: 1; transform: translateY(0); } }

/* ---- bateria ---- */
.sa-sale { animation: sa-sale 4.4s ease-in-out infinite; }
@keyframes sa-sale { 0%, 20% { transform: translateX(0); opacity: 1; } 45%, 100% { transform: translateX(-70px); opacity: 0; } }
.sa-entra { animation: sa-entra 4.4s ease-in-out infinite; }
@keyframes sa-entra { 0%, 30% { transform: translateX(50px); opacity: 0; } 55%, 100% { transform: translateX(0); opacity: 1; } }
.sa-carga { opacity: .15; animation: sa-carga 4.4s steps(1) infinite; }
.sa-carga--0 { animation-name: sa-carga0; } .sa-carga--1 { animation-name: sa-carga1; }
.sa-carga--2 { animation-name: sa-carga2; } .sa-carga--3 { animation-name: sa-carga3; }
@keyframes sa-carga0 { 0%, 58% { opacity: .15; } 60%, 100% { opacity: 1; } }
@keyframes sa-carga1 { 0%, 68% { opacity: .15; } 70%, 100% { opacity: 1; } }
@keyframes sa-carga2 { 0%, 78% { opacity: .15; } 80%, 100% { opacity: 1; } }
@keyframes sa-carga3 { 0%, 88% { opacity: .15; } 90%, 100% { opacity: 1; } }
.sa-rayo { animation: sa-parpadeo 1.1s ease-in-out infinite; }
@keyframes sa-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- upgrade ---- */
.sa-sube { transform-origin: bottom; animation: sa-sube 3.6s ease-out infinite; }
.sa-sube--1 { animation-delay: .15s; } .sa-sube--2 { animation-delay: .3s; } .sa-sube--3 { animation-delay: .45s; }
@keyframes sa-sube { 0% { transform: scaleY(.25); } 50%, 100% { transform: scaleY(1); } }
.sa-flecha { stroke-dasharray: 100; animation: sa-flecha 3.6s ease-out infinite; }
@keyframes sa-flecha { 0%, 25% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 0; } }
.sa-punta { animation: sa-punta 3.6s ease-out infinite; }
@keyframes sa-punta { 0%, 66% { opacity: 0; } 72%, 100% { opacity: 1; } }
.sa-globo { animation: sa-flotar 2.4s ease-in-out infinite; }
@keyframes sa-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---- reparacion ---- */
.sa-cautin { animation: sa-soldar 1.4s ease-in-out infinite; }
@keyframes sa-soldar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, 3px); } }
.sa-chispa { transform-origin: center; animation: sa-chispa 1.4s ease-out infinite; }
.sa-chispa--1 { animation-delay: .2s; } .sa-chispa--2 { animation-delay: .45s; } .sa-chispa--3 { animation-delay: .7s; }
@keyframes sa-chispa { 0%, 40% { opacity: 0; transform: scale(.2) translate(0, 0); } 55% { opacity: 1; transform: scale(1.3) translate(0, -4px); } 100% { opacity: 0; transform: scale(.4) translate(0, -12px); } }
.sa-humo { animation: sa-humo 2.8s ease-out infinite; }
@keyframes sa-humo { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(6px, -34px) scale(1.8); } }
.sa-chip { animation: sa-chip 2.8s ease-in-out infinite; }
@keyframes sa-chip { 0%, 100% { fill: #1d1540; } 50% { fill: #2f2470; } }

/* Con "reducir movimiento" pedido en el sistema, quietos y enteros */
@media (prefers-reduced-motion: reduce) {
  .sa *, .sa { animation: none !important; }
  .sa-carga { opacity: 1; }
}