/* =====================================================================
   Íconos estándar del sitio (ver ICONOS.md en la raíz del repositorio).
   Cada concepto tiene UN solo ícono y UNA sola animación: si ya existe, se
   reutiliza tal cual. Todos son SVG en línea, sin fondo, con el color del texto
   (currentColor) y movimientos suaves que se detienen si la persona pidió
   reducir animaciones.
   Uso:  <div class="ico ico-laptop"><svg class="v64" viewBox="0 0 64 64">…</svg></div>
   ===================================================================== */
.ico{display:block;width:44px;height:44px;flex:none;color:#0B3BE6}
.ico svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ico .v64{stroke-width:3.2}
.ico .v24{stroke-width:1.2}
.ico svg *{transform-box:fill-box;transform-origin:center}

@keyframes ico-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ico-line{0%,100%{stroke-dasharray:0 40;opacity:.3}40%,80%{stroke-dasharray:40 0;opacity:1}}
@keyframes ico-glow{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes ico-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes ico-wave{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes ico-spin{to{transform:rotate(360deg)}}
@keyframes ico-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ico-check{0%{stroke-dashoffset:1;opacity:1}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* Portátil */
.ico-laptop .lap{animation:ico-bob 3s ease-in-out infinite}
.ico-laptop .l1{animation:ico-line 2.8s ease-in-out infinite}
.ico-laptop .l2{animation:ico-line 2.8s ease-in-out .5s infinite}
/* Computador de escritorio */
.ico-desktop .l1{animation:ico-line 2.8s ease-in-out infinite}
.ico-desktop .led{animation:ico-glow 2.4s ease-in-out infinite}
/* Workstation de alto rendimiento */
.ico-workstation .fan{animation:ico-spin 6s linear infinite}
/* Monitor */
.ico-monitor .scr{animation:ico-glow 3s ease-in-out infinite}
/* Inventario disponible (caja) */
.ico-box .lid{animation:ico-lift 2.8s ease-in-out infinite}
/* Garantía (escudo con check) */
.ico-shield .tick{stroke-dasharray:1;stroke-dashoffset:0;animation:ico-check 3.2s ease-in-out infinite}
/* Configuración (engranaje) */
.ico-gear .teeth{animation:ico-spin 16s linear infinite}
/* Soporte (diadema) */
.ico-headset .cups{animation:ico-pop 2.4s ease-in-out infinite}
.ico-headset .w1{animation:ico-wave 1.8s ease-in-out infinite}
.ico-headset .w2{animation:ico-wave 1.8s ease-in-out .35s infinite}

@keyframes ico-out{0%,100%{transform:translateY(0)}50%{transform:translateY(1.4px)}}
@keyframes ico-shackle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
@keyframes ico-wiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}

/* Impresora (impresión láser, multifuncionales): la bandeja de salida baja un poco, como si imprimiera */
.ico-printer .out{animation:ico-out 2.4s ease-in-out infinite}
/* Documento (gestión documental, digitalización): las líneas se "escriben" una tras otra */
.ico-docs .l1{animation:ico-line 3s ease-in-out infinite}
.ico-docs .l2{animation:ico-line 3s ease-in-out .35s infinite}
.ico-docs .l3{animation:ico-line 3s ease-in-out .7s infinite}
/* Candado (seguridad de la información): el arco se levanta apenas */
.ico-lock .shackle{animation:ico-shackle 2.8s ease-in-out infinite}
/* Llave de mantenimiento (servicio técnico, mantenimiento): oscila suave */
.ico-wrench .tool{animation:ico-wiggle 3s ease-in-out infinite}

@keyframes ico-slide{0%,100%{transform:translateX(-1.6px)}50%{transform:translateX(1.6px)}}

/* Tablet: el botón inferior late y una línea de pantalla se "escribe" */
.ico-tablet .dot{animation:ico-glow 2.4s ease-in-out infinite}
.ico-tablet .l1{animation:ico-line 2.8s ease-in-out infinite}
/* Celular (movilidad, celulares empresariales): el indicador inferior late */
.ico-phone .dot{animation:ico-glow 2.4s ease-in-out infinite}
/* Equipo ruggedizado (reforzado): la pantalla interior brilla suave */
.ico-rugged .scr{animation:ico-glow 3s ease-in-out infinite}
/* Gestión / administración / ajustes (controles deslizantes): las perillas se mueven */
.ico-sliders .k1{animation:ico-slide 3s ease-in-out infinite}
.ico-sliders .k2{animation:ico-slide 3s ease-in-out -1s infinite}
.ico-sliders .k3{animation:ico-slide 3s ease-in-out -2s infinite}
/* Wi-Fi / conectividad: las ondas aparecen de adentro hacia afuera */
.ico-wifi .w1{animation:ico-wave 2.2s ease-in-out infinite}
.ico-wifi .w2{animation:ico-wave 2.2s ease-in-out .3s infinite}
.ico-wifi .w3{animation:ico-wave 2.2s ease-in-out .6s infinite}

/* ---- Íconos agregados para Ciberseguridad (ver ICONOS.md) ---- */
@keyframes ico-wob{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2px)}}
@keyframes ico-draw{0%{stroke-dashoffset:1;opacity:1}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ico-head{0%,50%{opacity:0}60%,88%{opacity:1}100%{opacity:0}}
@keyframes ico-dl{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes ico-tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* Lupa / análisis / diagnóstico / evaluar: la lupa se mueve apenas */
.ico-search .lens{animation:ico-wob 3s ease-in-out infinite}
/* Gráfica ascendente / crecimiento / ingeniería de preventa y postventa: la flecha se dibuja de abajo hacia arriba */
.ico-chart .tl{stroke-dasharray:1;stroke-dashoffset:0;animation:ico-draw 3.2s ease-in-out infinite}
.ico-chart .th{animation:ico-head 3.2s ease-in-out infinite}
/* Grupo de personas / colaboradores / acompañamiento: la del centro late y las de los lados suben y bajan */
.ico-group .center{animation:ico-pop 2.6s ease-in-out infinite}
.ico-group .left{animation:ico-bob 2.6s ease-in-out .3s infinite}
.ico-group .right{animation:ico-bob 2.6s ease-in-out .9s infinite}
/* Red / nodos conectados / infraestructura y red / XDR / NOC: los tres nodos brillan por turnos */
.ico-network .n1{animation:ico-glow 2.4s ease-in-out infinite}
.ico-network .n2{animation:ico-glow 2.4s ease-in-out .8s infinite}
.ico-network .n3{animation:ico-glow 2.4s ease-in-out 1.6s infinite}
/* Servidores / equipos y servidores / rack: los LED parpadean por turnos */
.ico-rack .led{animation:ico-glow 1.6s ease-in-out infinite}
.ico-rack .led2{animation:ico-glow 1.6s ease-in-out .8s infinite}
/* Radar / detección gestionada / MDR: el barrido gira */
.ico-radar .sweep{transform-box:view-box;transform-origin:50% 50%;animation:ico-spin 4.5s linear infinite}
/* Descarga / instalación y despliegue: la flecha baja y sube */
.ico-download .arrow{animation:ico-dl 2s ease-in-out infinite}
/* Base de datos / integración con el entorno: los dos discos inferiores brillan por turnos */
.ico-database .a1{animation:ico-glow 2.6s ease-in-out infinite}
.ico-database .a2{animation:ico-glow 2.6s ease-in-out 1.3s infinite}
/* Bombilla / idea / transferencia de conocimiento: el filamento brilla */
.ico-bulb .fil{animation:ico-glow 2.2s ease-in-out infinite}
/* ---- Íconos agregados para Servicios profesionales (ver ICONOS.md) ---- */
/* Nube / infraestructura y nube / migraciones: la nube sube y baja apenas */
.ico-cloud .cl{animation:ico-bob 3.2s ease-in-out infinite}
/* Ingeniero con casco / ingeniería especializada: inclina la cabeza */
.ico-worker .head{transform-origin:50% 100%;animation:ico-tilt 3.2s ease-in-out infinite}
/* ---- Íconos agregados para Data Capital (ver ICONOS.md) ---- */
@keyframes ico-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes ico-coin{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@keyframes ico-slide-x{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
/* Hoja / crecimiento sostenible: se mece apenas */
.ico-leaf .leaf{transform-origin:20% 90%;animation:ico-sway 3.4s ease-in-out infinite}
/* Calendario / plazos de pago: los 3 puntos brillan por turnos */
.ico-calendar .d1{animation:ico-glow 2.4s ease-in-out infinite}
.ico-calendar .d2{animation:ico-glow 2.4s ease-in-out .8s infinite}
.ico-calendar .d3{animation:ico-glow 2.4s ease-in-out 1.6s infinite}
/* Actualizar / renovación: las flechas giran lento */
.ico-refresh .arrows{animation:ico-spin 9s linear infinite}
/* Monedas / liquidez / flujo de caja: suben una tras otra */
.ico-coins .c1{animation:ico-coin 2.6s ease-in-out infinite}
.ico-coins .c2{animation:ico-coin 2.6s ease-in-out .25s infinite}
.ico-coins .c3{animation:ico-coin 2.6s ease-in-out .5s infinite}
/* Código / desarrollo de software: los corchetes se desplazan en sentidos opuestos */
.ico-code .lb{animation:ico-slide-x 2.8s ease-in-out infinite}
.ico-code .rb{animation:ico-slide-x 2.8s ease-in-out 1.4s infinite}
@media(prefers-reduced-motion:reduce){.ico svg *{animation:none!important}}