/* Motion icons for services. Animations only run while the icon is on screen (.is-running). */
.mi {
    --mi-lime: #B5DE7C;
    --mi-ink: #ffffff;
    --mi-bg: #0d1733;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--mi-ink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mi * {
    transform-box: fill-box;
    transform-origin: center;
}

.mi:not(.is-running) * {
    animation-play-state: paused !important;
}

.mi .acc { stroke: var(--mi-lime); }
.mi .fill-acc { fill: var(--mi-lime); stroke: none; }
.mi .fill-bg { fill: var(--mi-bg); }
.mi .fill-ink { fill: var(--mi-ink); stroke: none; }

@keyframes mi-spin { to { transform: rotate(360deg); } }
@keyframes mi-spin-rev { to { transform: rotate(-360deg); } }

/* 1 · Sistema Operativo Empresarial: engranajes que giran solos */
.mi-gears .g-big { transform-box: view-box; transform-origin: 26px 36px; animation: mi-spin 8s linear infinite; }
.mi-gears .g-small { transform-box: view-box; transform-origin: 44px 20px; animation: mi-spin-rev 5.6s linear infinite; }
.mi-gears .pulse { animation: mi-gear-pulse 2s ease-in-out infinite; }
@keyframes mi-gear-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.8); opacity: 0.4; }
}

/* 2 · Consultoría por módulo: se elige y se resuelve un módulo */
.mi-modules .cell { fill: rgba(181, 222, 124, 0); }
.mi-modules .pick { animation: mi-pick 4.5s ease-in-out infinite; }
.mi-modules .pick-2 { animation-delay: 1.5s; }
.mi-modules .pick-3 { animation-delay: 3s; }
@keyframes mi-pick {
    0%, 30%, 100% { fill: rgba(181, 222, 124, 0); stroke: var(--mi-ink); transform: none; }
    8%, 22% { fill: rgba(181, 222, 124, 1); stroke: var(--mi-lime); transform: translateY(-3px) scale(1.1); }
}

/* 3 · Planificación estratégica: la ruta se traza hasta la meta */
.mi-roadmap .road { stroke-dasharray: 1 1; animation: mi-road 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.mi-roadmap .ms2 { animation: mi-pop-at-25 4.5s ease-out infinite; }
.mi-roadmap .flag { transform-origin: 0% 100%; animation: mi-pop-at-45 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.mi-roadmap .flag-cloth { transform-origin: 0% 50%; animation: mi-wave 0.9s ease-in-out infinite alternate; }
@keyframes mi-road {
    0% { stroke-dashoffset: 1; opacity: 1; }
    45%, 85% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mi-pop-at-25 {
    0%, 22% { transform: scale(0); }
    30%, 85% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}
@keyframes mi-pop-at-45 {
    0%, 42% { transform: scale(0); }
    52%, 85% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}
@keyframes mi-wave {
    from { transform: skewY(-8deg) scaleX(0.9); }
    to { transform: skewY(6deg) scaleX(1.05); }
}

/* 4 · Sistema comercial: prospectos que pasan por el embudo */
.mi-funnel .drop { opacity: 0; animation: 3s cubic-bezier(0.55, 0, 0.45, 1) infinite; }
.mi-funnel .d1 { animation-name: mi-drop-a; }
.mi-funnel .d2 { animation-name: mi-drop-b; animation-delay: 1s; }
.mi-funnel .d3 { animation-name: mi-drop-c; animation-delay: 2s; }
.mi-funnel .out { animation: mi-out 1s ease-out infinite; }
@keyframes mi-drop-a {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: translate(14px, 26px); }
    62% { transform: translate(14px, 44px); opacity: 1; }
    72%, 100% { transform: translate(14px, 44px); opacity: 0; }
}
@keyframes mi-drop-b {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: translate(0, 26px); }
    62% { transform: translate(0, 44px); opacity: 1; }
    72%, 100% { transform: translate(0, 44px); opacity: 0; }
}
@keyframes mi-drop-c {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: translate(-14px, 26px); }
    62% { transform: translate(-14px, 44px); opacity: 1; }
    72%, 100% { transform: translate(-14px, 44px); opacity: 0; }
}
@keyframes mi-out {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* 5 · Taller de estrategia comercial: la flecha da en el blanco */
.mi-target .arrow { animation: mi-arrow 3.2s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.mi-target .hit { opacity: 0; animation: mi-hit 3.2s ease-out infinite; }
@keyframes mi-arrow {
    0% { transform: translate(18px, -18px); opacity: 0; }
    15% { opacity: 1; }
    35% { transform: translate(0, 0); }
    39% { transform: translate(1.5px, -1.5px); }
    43%, 85% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes mi-hit {
    0%, 34% { transform: scale(0.5); opacity: 0; }
    36% { transform: scale(1); opacity: 1; }
    70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* 6 · Entrenamiento en ventas: las ventas suben */
.mi-bars .bar { transform-origin: 50% 100%; animation: mi-bar 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.mi-bars .b2 { animation-delay: 0.15s; }
.mi-bars .b3 { animation-delay: 0.3s; }
.mi-bars .b4 { animation-delay: 0.45s; }
.mi-bars .trend { stroke-dasharray: 1 1; animation: mi-trend 4s ease-in-out infinite; }
.mi-bars .tip { animation: mi-tip 4s ease-out infinite; }
@keyframes mi-bar {
    0% { transform: scaleY(0); }
    25%, 85% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
@keyframes mi-trend {
    0%, 30% { stroke-dashoffset: 1; opacity: 1; }
    55%, 85% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mi-tip {
    0%, 52% { opacity: 0; transform: translate(-4px, 4px); }
    58%, 85% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

/* 7 · Taller de experiencia de cliente: clientes felices que califican */
.mi-cx .heart { animation: mi-beat 1.2s ease-in-out infinite; }
.mi-cx .star { fill: rgba(181, 222, 124, 0); stroke: var(--mi-ink); stroke-width: 1.5; animation: mi-star 4s ease-out infinite; }
.mi-cx .s2 { animation-delay: 0.25s; }
.mi-cx .s3 { animation-delay: 0.5s; }
.mi-cx .s4 { animation-delay: 0.75s; }
.mi-cx .s5 { animation-delay: 1s; }
@keyframes mi-beat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.22); }
    30% { transform: scale(0.96); }
    45% { transform: scale(1.12); }
}
@keyframes mi-star {
    0%, 10% { fill: rgba(181, 222, 124, 0); stroke: var(--mi-ink); transform: scale(1); }
    18% { fill: rgba(181, 222, 124, 1); stroke: var(--mi-lime); transform: scale(1.45); }
    26%, 80% { fill: rgba(181, 222, 124, 1); stroke: var(--mi-lime); transform: scale(1); }
    100% { fill: rgba(181, 222, 124, 0); stroke: var(--mi-ink); }
}

/* 8 · Asistente virtual: la agenda se completa sola */
.mi-calendar .check { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: mi-check 4.2s ease-out infinite; }
.mi-calendar .c2 { animation-delay: 0.4s; }
.mi-calendar .c3 { animation-delay: 0.8s; }
.mi-calendar .c4 { animation-delay: 1.2s; }
.mi-calendar .c5 { animation-delay: 1.6s; }
.mi-calendar .hand { transform-box: view-box; transform-origin: 50px 46px; animation: mi-spin 3s linear infinite; }
@keyframes mi-check {
    0%, 5% { stroke-dashoffset: 1; opacity: 1; }
    15%, 80% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* 9 · OneFlow: los datos fluyen entre herramientas */
.mi-flow .flow { stroke-dasharray: 3 7; animation: mi-flow 0.9s linear infinite; }
.mi-flow .hub { animation: mi-hub 1.8s ease-in-out infinite; }
.mi-flow .node { animation: mi-node 1.8s ease-in-out infinite; }
.mi-flow .n2 { animation-delay: 0.3s; }
.mi-flow .n3 { animation-delay: 0.9s; }
@keyframes mi-flow { to { stroke-dashoffset: -20; } }
@keyframes mi-hub {
    0%, 100% { fill: rgba(181, 222, 124, 0.15); }
    50% { fill: rgba(181, 222, 124, 0.9); }
}
@keyframes mi-node {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* 10 · Desarrollo web: se escribe el código y aparece el botón */
.mi-web .code { transform-origin: 0% 50%; animation: mi-type 4.4s steps(12, end) infinite; }
.mi-web .l2 { animation-delay: 0.5s; }
.mi-web .l3 { animation-delay: 1s; }
.mi-web .cursor { animation: mi-blink 0.8s steps(1) infinite; }
.mi-web .cta { animation: mi-cta 4.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes mi-type {
    0% { transform: scaleX(0); }
    20%, 85% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}
@keyframes mi-blink { 50% { opacity: 0; } }
@keyframes mi-cta {
    0%, 40% { transform: scale(0); }
    50% { transform: scale(1.15); }
    56%, 85% { transform: scale(1); }
    100% { transform: scale(0); }
}

/* 11 · Constitución S.A.S.: el sello oficializa la empresa */
.mi-stamp .stamp { animation: mi-press 3.6s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.mi-stamp .seal { animation: mi-seal 3.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes mi-press {
    0% { transform: translateY(-14px); opacity: 0; }
    15% { transform: translateY(-14px); opacity: 1; }
    35% { transform: translateY(5px) scaleY(0.92); }
    48% { transform: translateY(-16px); opacity: 1; }
    62%, 100% { transform: translateY(-16px); opacity: 0; }
}
@keyframes mi-seal {
    0%, 34% { transform: scale(0); opacity: 0; }
    42% { transform: scale(1.2); opacity: 1; }
    50%, 85% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

/* 12 · Registro de marca: se escanea y se protege la marca */
.mi-shield .scan { animation: mi-scan 2.8s ease-in-out infinite; }
.mi-shield .glow { animation: mi-glow 2.8s ease-in-out infinite; }
.mi-shield .mark { animation: mi-mark 2.8s ease-in-out infinite; }
@keyframes mi-scan {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    55% { transform: translateY(38px); opacity: 1; }
    60%, 100% { transform: translateY(38px); opacity: 0; }
}
@keyframes mi-glow {
    0%, 50% { fill: rgba(181, 222, 124, 0); }
    65% { fill: rgba(181, 222, 124, 0.35); }
    100% { fill: rgba(181, 222, 124, 0); }
}
@keyframes mi-mark {
    0%, 52% { transform: scale(1); }
    62% { transform: scale(1.18); }
    74%, 100% { transform: scale(1); }
}

/* 13 · Contratos y LOPDP: se redacta, se firma y se protege */
.mi-contract .text { transform-origin: 0% 50%; animation: mi-type 4.6s steps(10, end) infinite; }
.mi-contract .t2 { animation-delay: 0.35s; }
.mi-contract .t3 { animation-delay: 0.7s; }
.mi-contract .sign { stroke-dasharray: 1 1; animation: mi-sign 4.6s ease-in-out infinite; }
.mi-contract .shackle { animation: mi-lock 4.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.mi-contract .lock-body { animation: mi-lock-fill 4.6s ease-out infinite; }
@keyframes mi-sign {
    0%, 25% { stroke-dashoffset: 1; opacity: 1; }
    50%, 85% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mi-lock {
    0%, 55% { transform: translateY(-5px); }
    65%, 90% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}
@keyframes mi-lock-fill {
    0%, 60% { fill: var(--mi-bg); }
    68%, 90% { fill: rgba(181, 222, 124, 0.9); }
    100% { fill: var(--mi-bg); }
}

/* 14 · Ventas al sector público: vigilamos y detectamos oportunidades */
.mi-sercop .lens { animation: mi-lens 4s ease-in-out infinite; }
.mi-sercop .found { animation: mi-found 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes mi-lens {
    0%, 100% { transform: translate(0, 0); }
    35% { transform: translate(14px, -4px); }
    55%, 70% { transform: translate(22px, 2px); }
}
@keyframes mi-found {
    0%, 52% { transform: scale(0); }
    60% { transform: scale(1.25); }
    66%, 88% { transform: scale(1); }
    100% { transform: scale(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mi * {
        animation: none !important;
    }
}