/* Pontos das faixas laterais (assets/js/scroll_controls.js), os mesmos do carrossel de contas e cartões do app.
   Só aparecem em aparelhos com mouse e quando há conteúdo escondido ao lado. */
.scroll-dots { display: flex; justify-content: center; gap: 7px; margin: 4px 0 10px; }
.scroll-dots[hidden] { display: none; }
.scroll-dots button { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--n-300); cursor: pointer; transition: width .2s ease, background .2s ease; }
.scroll-dots button::after { content: ""; position: absolute; inset: -11px -4px; } /* área de clique maior que o ponto */
.scroll-dots button.is-active { width: 22px; background: var(--c-accent); }
.scroll-dots button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .scroll-dots button { transition: none; } }