/* Mi Web de Una — íconos animados (estilo Lottie). Compartido: web pública + portal. */
/* ---------- ÍCONOS ANIMADOS (estilo Lottie) — ver inc/anim.php ----------
   .ai        contenedor; main.js le pone .in al entrar en pantalla
   .d / .d2   trazos que se dibujan (pathLength=1)
   .f         relleno verde de marca · .s relleno negro · .fw blanco */
.ai{display:inline-flex;width:56px;height:56px;color:var(--black);flex:none}
.ai svg{width:100%;height:100%;overflow:visible}
.ai-lg{width:84px;height:84px}
.ai-sm{width:34px;height:34px}
.ai-xs{width:22px;height:22px}
.ai .f{fill:var(--green);stroke:none}
.ai .s{fill:currentColor;stroke:none}
.ai .fw{fill:#fff}
.on-dark .ai{color:#fff}
.on-dark .ai .fw{fill:var(--black)}
/* estado inicial: solo si hay JS (html.js); sin JS se ven completos */
.js .ai .d,.js .ai .ln{stroke-dasharray:1;stroke-dashoffset:1}
.js .ai .f,.js .ai .s,.js .ai .pen,.js .ai .orbit,.js .ai .coin,.js .ai .flame{opacity:0}
.ai.in .d{animation:ai-draw .9s cubic-bezier(.6,.1,.3,1) forwards}
.ai.in .d2{animation-delay:.45s}
.ai.in .f,.ai.in .s,.ai.in .pen,.ai.in .orbit,.ai.in .coin,.ai.in .flame{animation:ai-fade .4s .35s ease forwards}
@keyframes ai-draw{to{stroke-dashoffset:0}}
@keyframes ai-fade{to{opacity:1}}
/* movimientos en bucle (arrancan después del dibujo) */
.ai .pop,.ai .blk,.ai .beat,.ai .spin,.ai .pen,.ai .coin,.ai .lift,.ai .roll,.ai .tp{transform-box:fill-box;transform-origin:center}
.ai.in .pop{animation:ai-fade .4s .3s ease forwards,ai-pop 2.8s 1.2s ease-in-out infinite}
@keyframes ai-pop{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}
.ai.in .pen{animation:ai-fade .4s .3s forwards,ai-pen 2.4s 1s ease-in-out infinite}
@keyframes ai-pen{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-4px,-3px) rotate(-8deg)}60%{transform:translate(-1px,2px) rotate(4deg)}}
.ai.in .blk{animation:ai-fade .4s .3s forwards,ai-blk 3.2s 1.2s ease-in-out infinite}
@keyframes ai-blk{0%,100%{transform:scale(1)}20%{transform:scale(.7)}40%{transform:scale(1.06)}55%{transform:scale(1)}}
.ai.in .ln{animation:ai-type 3.2s 1s ease-in-out infinite}
.ai.in .l2{animation-delay:1.25s}.ai.in .l3{animation-delay:1.5s}
@keyframes ai-type{0%{stroke-dashoffset:1}30%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ai .orbit{transform-box:view-box;transform-origin:24px 25px}
.ai.in .orbit{animation:ai-fade .4s .3s forwards,ai-spin 4.5s 1s linear infinite}
.ai.in .spin{animation:ai-spin 6s 1.2s linear infinite}
@keyframes ai-spin{to{transform:rotate(360deg)}}
.ai.in .led{animation:ai-fade .3s .3s forwards,ai-led 1.4s 1s steps(2) infinite}
.ai.in .l2.led{animation-delay:.3s,1.7s}
@keyframes ai-led{50%{opacity:.25}}
.ai.in .beat{animation:ai-beat 2.4s 1.3s ease-in-out infinite}
@keyframes ai-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(1)}45%{transform:scale(1.05)}}
.ai.in .tp{animation:ai-fade .3s .4s forwards,ai-dot 1.2s 1s ease-in-out infinite}
.ai.in .t2{animation-delay:.4s,1.15s}.ai.in .t3{animation-delay:.4s,1.3s}
@keyframes ai-dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.ai.in .coin{animation:ai-coin 2.6s .4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes ai-coin{0%{opacity:0;transform:translateY(-16px)}25%{opacity:1;transform:translateY(0)}35%{transform:translateY(-3px)}45%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:scale(.6)}}
.ai.in .lift{animation:ai-lift 2.2s 1s ease-in-out infinite}
@keyframes ai-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ai .flame{fill:var(--blue);stroke:none;transform-box:fill-box;transform-origin:50% 0}
.ai.in .flame{animation:ai-fade .3s .5s forwards,ai-flame .35s 1s ease-in-out infinite alternate}
@keyframes ai-flame{from{transform:scaleY(.75)}to{transform:scaleY(1.15)}}
.ai.in .roll{animation:ai-roll 2.6s 1s ease-in-out infinite}
@keyframes ai-roll{0%,100%{transform:translateX(0)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}}

/* .still: se dibuja una vez y se queda quieto (sin bucles) */
.ai.still.in *{animation-iteration-count:1!important}
.ai.still.in .ln{animation:ai-draw .9s .3s forwards!important}
.ai.still.in .coin{animation:ai-fade .4s .35s forwards!important}
@media(prefers-reduced-motion:reduce){
  .ai *{animation:none!important}
  .js .ai .d,.js .ai .ln{stroke-dashoffset:0}
  .js .ai .f,.js .ai .s,.js .ai .pen,.js .ai .orbit,.js .ai .coin,.js .ai .flame{opacity:1}
}