:root { --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
    body { font-family: var(--bs-body-font-family); }
:root{
  --page-bg: #0b0f22;            /* fondo del sitio */
  --brand:   #8b5cf6;            /* morado de UnoNueve */
  --brand-rgb: 139,92,246;
  --scroll-track: rgba(255,255,255,.06); /* pista tenue sobre fondo oscuro */
}
    /* Botón morado */
    .btn-contact, .btn-ingreso { background:#8b5cf6; border-color:#8b5cf6; color:#fff; }
    .btn-contact:hover, .btn-ingreso:hover { background:#7c3aed; border-color:#7c3aed; color:#fff; }

    /* Colores de links navbar (desktop) */
    .navbar-light .navbar-nav .nav-link { color:#1d022bff; }
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active { color:#9e5bf9ff; }

    /* Offcanvas fullscreen en móvil */
    @media (max-width: 991.98px){
      .offcanvas-nav { width:100vw !important; }
      .offcanvas-nav .nav-link { color:#1d022b; }
      .offcanvas-nav .nav-link:hover { color:#9e5bf9; }
    }

    html{
  /* thumb, track */
  scrollbar-color: rgba(var(--brand-rgb), .85) var(--scroll-track);
  scrollbar-width: thin; /* auto | thin | none */
}

/* ====== WebKit (Chrome/Edge/Safari) ====== */
::-webkit-scrollbar{
  width: 12px;
  height: 12px; /* para scroll horizontal si aparece */
}
@media (max-width: 992px){
  /* un poco más delgada en móvil/tablet */
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
}

::-webkit-scrollbar-track{
  background: var(--scroll-track);
  border-radius: 999px;
  /* leve relieve */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

::-webkit-scrollbar-thumb{
  border-radius: 999px;
  /* degradé corporativo */
  background: linear-gradient(180deg,
    rgba(var(--brand-rgb), .98) 0%,
    rgba(var(--brand-rgb), .80) 100%
  );
  /* crea “espacio” para que el thumb se vea como píldora */
  border: 3px solid transparent;
  background-clip: content-box;
  box-shadow:
    0 2px 10px rgba(var(--brand-rgb), .35),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,
    rgba(var(--brand-rgb), 1) 0%,
    rgba(var(--brand-rgb), .92) 100%
  );
  box-shadow:
    0 3px 14px rgba(var(--brand-rgb), .45),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

::-webkit-scrollbar-thumb:active{
  /* se “engrosa” un poquito al hacer click */
  border-width: 2px;
}

::-webkit-scrollbar-corner{
  background: transparent;
}

/* ====== Scrollbars también dentro de contenedores con overflow ======
   (offcanvas, modales, tarjetas con scroll, etc.)
   Aplica la misma estética si usas scroll interno en esos elementos. */
.offcanvas-body,
.modal-body,
.ticker__mask,
.formula-scroll .col-lg-6{
  scrollbar-color: rgba(var(--brand-rgb), .85) var(--scroll-track);
  scrollbar-width: thin;
}
.offcanvas-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar{
  width: 10px; height: 10px;
}
.offcanvas-body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  background: linear-gradient(180deg,
    rgba(var(--brand-rgb), .98), rgba(var(--brand-rgb), .8));
}

#scrollProgress{
  position: fixed; inset: 0 0 auto 0; /* top:0; left:0; right:0 */
  height: 3px;
  background: linear-gradient(90deg,
    rgba(var(--brand-rgb), 1) 0%,
    rgba(var(--brand-rgb), .55) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 9999;
  pointer-events: none;
}
/* Tamaño del logo en la navbar */
.logo-header{ height: 40px; }                /* móvil/tablet */
@media (min-width: 992px){
  .logo-header{ height: 48px; }              /* desktop */
}

/* (opcional) un poco más de alto a la barra si lo necesitas */
.navbar{ padding-top:.6rem; padding-bottom:.6rem; }

/* Si tu navbar es fixed-top y usas scroll-padding-top, ajusta: */
:root{ --nav-h: 80px; }  /* pon un valor cercano a la altura real de la navbar */