/* Banners animados de la familia (23/10/2026). Solo CSS y SVG, sin librerias.
   Elegidos por Andres de sitio/belgranosoftware/propuestas-banners.html:
     A "El tablero vivo"   -> inicio del institucional
     B "Una sola base"     -> /conocer/conectado/
     D "La IA te contesta" -> seccion "Lo nuevo" del institucional
   El mismo archivo vive en sitio/belgranosoftware/ y en sitio/conocer/: si se cambia uno, copiar al otro.
   Con "reducir movimiento" activado en el sistema, todo queda quieto y completo. */
.bn{--bn-web:#007BFF;--bn-web-d:#0062CC;--bn-con:#0E9F6E;--bn-esc:#F86000;--bn-ink:#111417;--bn-text:#2B3036;
  --bn-muted:#636B73;--bn-border:#E3E6EA;--bn-c:var(--bn-web);
  position:relative;overflow:hidden;border-radius:22px;min-height:320px;display:grid;grid-template-columns:1.1fr 1fr;
  align-items:center;gap:24px;padding:36px 40px;background:#fff;border:1px solid var(--bn-border);
  box-shadow:0 10px 30px rgba(17,20,23,.06);font-family:"Geist",system-ui,sans-serif;color:var(--bn-text)}
@media (max-width:820px){.bn{grid-template-columns:1fr;padding:26px 22px}}
.bn .bn-ey{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bn-c)}
.bn h3{font-size:clamp(1.55rem,3.2vw,2.3rem);line-height:1.08;letter-spacing:-.02em;margin:.25em 0 .35em;color:var(--bn-ink);text-wrap:balance}
.bn h3 em{font-style:normal;color:var(--bn-c)}
.bn p.bn-l{color:var(--bn-muted);max-width:44ch;margin:0 0 18px}
.bn .bn-btn{display:inline-block;padding:11px 18px;border-radius:12px;background:var(--bn-c);color:#fff;font-weight:600;text-decoration:none}

/* A. El tablero vivo */
.bn-a{--bn-c:var(--bn-web);background:linear-gradient(135deg,#fff 0%,#EEF5FF 100%)}
.bn-tel{justify-self:center;width:230px;height:300px;border-radius:30px;background:#111417;padding:10px;position:relative;box-shadow:0 20px 40px rgba(0,98,204,.18)}
.bn-tel .bn-pant{background:#F6F8FB;border-radius:22px;height:100%;padding:16px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;position:relative}
.bn-tel .bn-t{font-size:.72rem;font-weight:700;color:var(--bn-ink)}
.bn-k{background:#fff;border-radius:12px;padding:9px 11px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.bn-k small{display:block;font-size:.62rem;color:var(--bn-muted)}
.bn-k b{font-size:1.15rem;color:var(--bn-ink);font-variant-numeric:tabular-nums}
.bn-k.bn-h{background:#E6F2FA}.bn-k.bn-h b{color:var(--bn-web-d)}
.bn-barra{height:6px;border-radius:9px;background:#E3E6EA;overflow:hidden;margin-top:5px}
.bn-barra i{display:block;height:100%;width:72%;background:var(--bn-web);transform-origin:left;animation:bn-crece 6s ease-out infinite}
@keyframes bn-crece{0%{transform:scaleX(.1)}35%,100%{transform:scaleX(1)}}
.bn-push{position:absolute;left:8px;right:8px;top:8px;background:rgba(255,255,255,.97);border-radius:14px;padding:9px 11px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);font-size:.66rem;display:flex;gap:8px;align-items:center;transform:translateY(-130%);animation:bn-push 6s ease-in-out infinite}
.bn-push i{width:22px;height:22px;border-radius:6px;background:var(--bn-con);flex:none}
.bn-push b{display:block;font-size:.7rem;color:var(--bn-ink)}
@keyframes bn-push{0%,40%{transform:translateY(-130%)}50%,85%{transform:translateY(0)}95%,100%{transform:translateY(-130%)}}

/* B. Una sola base */
.bn-b{--bn-c:var(--bn-con);background:linear-gradient(135deg,#fff 0%,#EAF7F1 100%)}
.bn-flujo{width:100%;max-width:440px;justify-self:center}
.bn-flujo .bn-linea{stroke:#BFE6D4;stroke-width:3;fill:none}
.bn-flujo .bn-dato{stroke:var(--bn-con);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:10 150;animation:bn-viaja 2.4s linear infinite}
.bn-flujo .bn-dato.bn-v{animation-direction:reverse;stroke:var(--bn-esc)}
@keyframes bn-viaja{to{stroke-dashoffset:-160}}
.bn-flujo text{font:600 12px Geist,sans-serif;fill:var(--bn-text)}
.bn-pulso{animation:bn-pulso 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes bn-pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* D. La IA te contesta */
.bn-d{--bn-c:var(--bn-esc);background:linear-gradient(135deg,#fff 0%,#FFF2E8 100%)}
.bn-chat{justify-self:center;width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
.bn-msg{padding:11px 14px;border-radius:16px;font-size:.95rem;max-width:85%;opacity:0;animation:bn-aparece 9s infinite}
.bn-msg.bn-yo{align-self:flex-end;background:var(--bn-ink);color:#fff;border-bottom-right-radius:4px}
.bn-msg.bn-ia{align-self:flex-start;background:#fff;border:1px solid var(--bn-border);border-bottom-left-radius:4px;animation-delay:2.4s}
.bn-msg.bn-ia b{color:var(--bn-esc)}
.bn-tipeo{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--bn-border);border-radius:16px;opacity:0;animation:bn-tipeo 9s infinite}
.bn-tipeo i{width:7px;height:7px;border-radius:50%;background:#B9C0C7;animation:bn-punto 1s infinite}
.bn-tipeo i:nth-child(2){animation-delay:.15s}.bn-tipeo i:nth-child(3){animation-delay:.3s}
@keyframes bn-aparece{0%{opacity:0;transform:translateY(8px)}6%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes bn-tipeo{0%,10%{opacity:0}12%,25%{opacity:1}27%,100%{opacity:0}}
@keyframes bn-punto{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.bn-chips{display:flex;gap:6px;flex-wrap:wrap}
.bn-chips span{font-size:.75rem;padding:4px 9px;border-radius:99px;background:#fff;border:1px solid var(--bn-border);color:var(--bn-muted)}

@media (prefers-reduced-motion: reduce){
  .bn *{animation:none!important}
  .bn-push{transform:none}.bn-msg{opacity:1}.bn-tipeo{display:none}
}

/* Diagrama de BSGestion Web: el dato va y vuelve por cada linea (ida azul, vuelta azul oscuro). */
.bn-flujo .bn-linea.w{stroke:#C7DDFB}
.bn-flujo .bn-dato.w{stroke:#007BFF}
.bn-flujo .bn-dato.w.bn-v{stroke:#0B3D91;animation-delay:-1.2s}