:root {
  /* Tonos del hero: blue-500 (#3b82f6) y blue-800 (#1e40af), suavizados */
  --scroll-track: #f1f4f9;
  --scroll-thumb: #b8c8de;
  --scroll-thumb-hover: #8fa6c8;
  --scroll-thumb-active: #6b84ad;
}

html {
  overflow-x: hidden;
  max-width: 100%;
  scrollbar-gutter: stable;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background-color: var(--scroll-track);
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--scroll-track);
  border-radius: 9999px;
  background-color: var(--scroll-thumb);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--scroll-thumb-active);
}