:root{
  /* Animación solo con propósito. Sin bounce, sin overshoot. */
  --bb-duration-fast: 120ms; /* @kind other */
  --bb-duration: 180ms; /* @kind other */
  --bb-duration-slow: 320ms; /* @kind other */
  --bb-ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
}
@media (prefers-reduced-motion: reduce){
  :root{
    --bb-duration-fast: 0ms; /* @kind other */
    --bb-duration: 0ms; /* @kind other */
    --bb-duration-slow: 0ms; /* @kind other */
  }
}

/* Diagrama de flujo (hero / how it works). ÚNICA excepción a "sin glow, sin animación decorativa":
   indica dirección del dato. Solo opacity y stroke-dashoffset; nunca posición ni escala. */
:root{
  --bb-flow-dash-duration: 2.6s; /* @kind other */
  --bb-flow-glow-duration: 4s; /* @kind other */
  --bb-flow-glow: radial-gradient(closest-side, rgba(124, 58, 237, 0.35), rgba(124, 58, 237, 0)); /* @kind other */
}
@keyframes bb-flow-dash { to { stroke-dashoffset: -52; } }
@keyframes bb-flow-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  :root{
    --bb-flow-dash-duration: 0s; /* @kind other */
    --bb-flow-glow-duration: 0s; /* @kind other */
  }
}