.container { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }
.s-pad { padding: 7rem 0; }

main > :not(.hero):not(.ticker-block),
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* Firefox (scrollbar-color + scrollbar-width) */
html,
body,
* {
  scrollbar-width: thin;           /* thin = más delgada y sin flechas */
  scrollbar-color: var(--accent) var(--bg2);
  /* thumb (accent) | track (fondo oscuro) */
}

/* Chrome, Edge, Safari, Brave, etc. (::-webkit-scrollbar) */
::-webkit-scrollbar {
  width: 8px;      /* vertical */
  height: 8px;     /* horizontal */
}

::-webkit-scrollbar-track {
  background: var(--bg2);        /* fondo del track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent);     /* color principal = tu accent */
  border-radius: 10px;
  border: 2px solid var(--bg2);  /* para que no toque los bordes y se vea más limpio */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent2);    /* al pasar el mouse cambia a tu segundo accent (rosa) */
}

/* Opcional: corner (la esquina donde se juntan vertical y horizontal) */
::-webkit-scrollbar-corner {
  background: var(--bg2);
}

@media (max-width: 768px), (hover: none) {
  main > :not(.hero):not(.ticker-block),
  .footer {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}