/* Animación de iconos: trazo que se redibuja + movimiento propio de cada icono (continuo y sutil) */

/* 1) Redibujado escalonado del trazo (lo activa icons.js con pathLength=1) */
.ai-s{stroke-dasharray:1;animation:aiDraw 9s ease-in-out infinite;animation-delay:var(--ai-d,0s)}
@keyframes aiDraw{0%,84%{stroke-dashoffset:0}90%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}

/* 2) Brillo suave del icono */
.ai-icon{animation-duration:4.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;transform-origin:50% 50%}
.ico .ai-icon,.tool .ai-icon,.dg-badge .ai-icon{filter:drop-shadow(0 0 4px rgba(139,123,255,.55))}

/* 3) Movimiento propio por icono (a nivel de <svg>, sin chocar con las animaciones internas al pasar el cursor) */
.ic-bolt{animation-name:aiBolt}
@keyframes aiBolt{0%,86%,100%{transform:none;filter:drop-shadow(0 0 4px rgba(139,123,255,.55))}89%{transform:skewX(-7deg) scale(1.08);filter:drop-shadow(0 0 9px #35e0ff)}92%{transform:skewX(6deg)}95%{transform:scale(1.1)}}
.ic-chat,.ic-msg{animation-name:aiBob}
@keyframes aiBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(-4deg)}}
.ic-spark{animation-name:aiSpin;animation-duration:9s}
@keyframes aiSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}
.ic-doc,.ic-log,.ic-sheet,.ic-bill,.ic-folder{animation-name:aiSway}
@keyframes aiSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-1.5px)}}
.ic-chart{animation-name:aiGrow;transform-origin:50% 100%}
@keyframes aiGrow{0%,100%{transform:scaleY(.88)}50%{transform:scaleY(1.06)}}
.ic-pen{animation-name:aiWrite;transform-origin:30% 90%}
@keyframes aiWrite{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) translateX(1px)}}
.ic-user,.ic-crm{animation-name:aiNod}
@keyframes aiNod{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
.ic-shield{animation-name:aiPulse}
@keyframes aiPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ic-lock{animation-name:aiShake}
@keyframes aiShake{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-6deg)}88%{transform:rotate(6deg)}92%{transform:rotate(-3deg)}}
.ic-eye{animation-name:aiBlink}
@keyframes aiBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.ic-mail{animation-name:aiTilt}
@keyframes aiTilt{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-6deg) translateY(-2px)}}
.ic-cal{animation-name:aiPop}
@keyframes aiPop{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(2deg)}}
.ic-web{animation-name:aiSpinSlow;animation-duration:18s;animation-timing-function:linear}
@keyframes aiSpinSlow{to{transform:rotate(360deg)}}
.ic-db{animation-name:aiBob}
.ic-api{animation-name:aiBracket}
@keyframes aiBracket{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.14)}}
.ic-robot{animation-name:aiNod}
.ic-cap{animation-name:aiBob}
.ic-social{animation-name:aiPop}

/* 4) Iconos sin tipo concreto: pulso general */
.ico svg:not([class*="ic-"]),.f-social svg,.empty-ico svg,.thumb-ph svg{animation:aiPulse 4.5s ease-in-out infinite}

/* 5) Al pasar el cursor por la tarjeta o el icono: animación más viva */
.card:hover .ai-icon,.tool:hover .ai-icon,.f-social a:hover .ai-icon{animation-duration:1.6s}
.card:hover .ai-s,.tool:hover .ai-s{animation-duration:3.2s}

@media (prefers-reduced-motion:reduce){.ai-s,.ai-icon,.ico svg,.f-social svg{animation:none!important}}