/* ===== josemedina.es · Iconos animados de servicios (adaptado de iconos/animados/iconos-animados-snippet.html)
   SVG en línea con [jm_svg name="ico-…"]. El hover se activa desde la tarjeta o el ítem que los contiene.
   Dibujado al aparecer: añadir la clase jm-ico-anim al contenedor (jm-animations.js añade is-visible). */

.sd-ico { width: 88px; height: 88px; overflow: visible; }
.jm-svg--ico-mantenimiento, .jm-svg--ico-diseno, .jm-svg--ico-seo, .jm-svg--ico-seguridad { width: 88px; }
.jm-ico--sm .jm-svg { width: 48px; }
.jm-ico--sm .sd-ico { width: 48px; height: 48px; }
.sd-ico .sd-glow { filter: drop-shadow(0 0 5px rgba(34, 211, 238, .75)); }
.sd-ico .sd-soft { filter: drop-shadow(0 0 4px rgba(168, 85, 247, .55)); }

/* Dibujado al aparecer (solo con JS) */
.jm-js .jm-ico-anim .sd-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.jm-js .jm-ico-anim .sd-fade { opacity: 0; }
.jm-js .jm-ico-anim.is-visible .sd-draw { animation: sdDraw 1.1s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(var(--d, 0s) + var(--i, 0) * .15s); }
.jm-js .jm-ico-anim.is-visible .sd-fade { animation: sdFade .6s ease forwards; animation-delay: calc(var(--d, .8s) + var(--i, 0) * .15s); }
.jm-js .jm-ico-anim.is-drawn .sd-draw { stroke-dashoffset: 0; }
.jm-js .jm-ico-anim.is-drawn .sd-fade { opacity: 1; }
@keyframes sdDraw { to { stroke-dashoffset: 0; } }
@keyframes sdFade { to { opacity: 1; } }

/* Hover: mantenimiento (engranaje gira) */
.sd-gear { transform-box: fill-box; transform-origin: center; }
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-gear { animation: sdSpin 2.4s linear infinite; }
@keyframes sdSpin { to { transform: rotate(360deg); } }

/* Hover: diseño (cursor hace clic, bloques se iluminan) */
.sd-cursor { transform-box: fill-box; transform-origin: top left; }
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-cursor { animation: sdClick 1.6s ease-in-out infinite; }
@keyframes sdClick { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-7px, -6px); } 50% { transform: translate(-7px, -6px) scale(.85); } 60% { transform: translate(-7px, -6px); } }
.sd-block { transition: stroke .3s; }
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-block { animation: sdPulse 1.6s ease-in-out infinite; }
@keyframes sdPulse { 40%, 60% { stroke: #22D3EE; } }

/* Hover: SEO/WPO (flecha se redibuja, rayo destella) */
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-trend { stroke-dasharray: 1; animation: sdRedraw 1.6s ease-in-out infinite; }
@keyframes sdRedraw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
.sd-bolt { transform-box: fill-box; transform-origin: center; }
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-bolt { animation: sdFlash 1.6s ease-in-out infinite; }
@keyframes sdFlash { 0%, 45%, 100% { opacity: 1; transform: scale(1); } 55% { opacity: .3; transform: scale(1.25); } 65% { opacity: 1; transform: scale(1.1); } }

/* Hover: seguridad (escaneo + check) */
.sd-scan { opacity: 0; }
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-scan { animation: sdScan 1.8s ease-in-out infinite; }
@keyframes sdScan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-check { stroke-dasharray: 1; animation: sdRedraw 1.8s ease-in-out infinite; }
.sd-shield { transform-box: fill-box; transform-origin: center; }
:is(.jm-card, .jm-card--light, .jm-ico-hover):hover .sd-shield { animation: sdBeat 1.8s ease-in-out infinite; }
@keyframes sdBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
	.sd-ico * { animation: none !important; transition: none !important; }
	.jm-js .jm-ico-anim .sd-draw { stroke-dashoffset: 0; }
	.jm-js .jm-ico-anim .sd-fade { opacity: 1; }
}