/* Copia local del 24-oct-2026. ORIGEN: VISORIA/sitio/assets/research/modelos-graficas.css (publicado en https://visoria.com.co/assets/research/). Se sirve desde javierrubiano.com para que la visita no haga peticiones a un servidor de VISORIA INTELLIGENCE S.A.S. (concepto juridico del 23-oct-2026, 13.4.3). Si cambia el original, se vuelve a copiar. */
/* VISORIA · gráficas animadas de los modelos gerenciales (módulo compartido)
   ════════════════════════════════════════════════════════════════════════════
   Nació en /research/ el 24-oct-2026 y está hecho para reutilizarse (Simulator y las
   demás páginas que muestren los modelos). Va junto con modelos-graficas.js.

   USO, en cualquier página:
     <link rel="stylesheet" href="/assets/research/modelos-graficas.css">
     <div data-grafica="matriz-bcg"></div>          (una por modelo)
     <script src="/assets/research/modelos-graficas.js" defer></script>

   El JS pinta el SVG dentro de cada [data-grafica], le pone la clase .vg-graf y solo deja
   correr la animación mientras está en pantalla (.vg-vivo). Con prefers-reduced-motion
   todo queda quieto. Los datos de las gráficas son ILUSTRATIVOS: la página que las use
   debe decirlo en un pie («Las gráficas usan datos ilustrativos»).

   Gramática de la casa: fondo azul noche, dorado de firma, teal solo en gráficas, violeta
   de Research como acento, DM Mono en cifras y rótulos. El panel mide 2:1.
   ESTE PAR DE ARCHIVOS ES LA FUENTE: para cambiar o agregar una gráfica se edita el
   objeto G de modelos-graficas.js (viewBox 240 x 120) y, si lleva movimiento nuevo, su
   clase g-* aquí. Clases de movimiento: g-blq, g-flota, g-barre, g-crece, g-flujo,
   g-onda, g-capa, g-elige, g-izq, g-der, g-traza, g-sube, g-radar; retardos g-d1..g-d3. */
.vg-graf{display:block;aspect-ratio:2/1;
  background:radial-gradient(120% 90% at 85% 0%,rgba(200,151,58,.14),transparent 60%),
    linear-gradient(rgba(169,187,212,.05) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(169,187,212,.05) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(180deg,#132441,#0B1628)}
.vg-graf svg{display:block;width:100%;height:100%}
/* ══ LAS DOCE GRAFICAS DE LOS MODELOS (24-oct-2026) ══ datos ilustrativos, quietas con movimiento reducido */
.vg-graf svg *{transform-box:fill-box}
.g-blq{animation:gBlq 4s ease-in-out infinite}
.g-flota{transform-origin:center;animation:gFlota 4.2s ease-in-out infinite}
.g-barre{animation:gBarre 5s ease-in-out infinite}
.g-crece{transform-origin:left center;animation:gCrece 4.8s cubic-bezier(.2,.8,.2,1) infinite}
.g-flujo{animation:gFlujo 1.3s linear infinite}
.g-onda{transform-origin:center;animation:gOnda 2.4s ease-out infinite}
.g-capa{transform-origin:center;animation:gCapa 4s ease-in-out infinite}
.g-elige{transform-origin:center;animation:gElige 3s ease-in-out infinite}
.g-izq{transform-origin:right center;animation:gResp 5s ease-in-out infinite}
.g-der{transform-origin:left center;animation:gResp 5s ease-in-out infinite}
.g-traza{stroke-dashoffset:1;animation:gTraza 5s ease-in-out infinite}
.g-traza[stroke-dasharray]{stroke-dashoffset:0;animation:gAparece 5s ease-in-out infinite}
.g-traza:not([stroke-dasharray]){stroke-dasharray:1}
.g-sube{transform-origin:center bottom;animation:gSube 4.6s cubic-bezier(.2,.8,.2,1) infinite}
.g-radar{transform-origin:center;animation:gRadar 4s ease-in-out infinite}
.g-d1{animation-delay:.35s}.g-d2{animation-delay:.7s}.g-d3{animation-delay:1.05s}
.vg-graf:not(.vg-vivo) *{animation-play-state:paused}
@keyframes gBlq{0%,100%{opacity:.55}20%,35%{opacity:1}}
@keyframes gFlota{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.06)}}
@keyframes gBarre{0%{transform:translateX(0)}45%,55%{transform:translateX(72px)}100%{transform:translateX(0)}}
@keyframes gCrece{0%{transform:scaleX(.05)}40%,85%{transform:scaleX(1)}100%{transform:scaleX(.05)}}
@keyframes gFlujo{to{stroke-dashoffset:-8}}
@keyframes gOnda{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes gCapa{0%,100%{opacity:.75}30%{opacity:1}}
@keyframes gElige{0%,100%{opacity:.25;transform:scale(.7)}35%,70%{opacity:1;transform:scale(1)}}
@keyframes gResp{0%,100%{transform:scaleX(.92)}50%{transform:scaleX(1.04)}}
@keyframes gTraza{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes gAparece{0%,30%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
@keyframes gSube{0%{transform:scaleY(.08)}40%,85%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
@keyframes gRadar{0%,100%{transform:scale(.9)}50%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.vg-graf *{animation:none!important;stroke-dashoffset:0!important;opacity:1}}