/* AMVORA :: faixas que rolam para o lado (ver assets/js/rolagem.js)
   Sem barra de rolagem visível. As setas ficam presas nas bordas da própria
   faixa (position: sticky), com um esmaecido da cor do fundo por trás.
   Cada lugar define --rola-fundo com a cor que está atrás da faixa. */
.rola { scrollbar-width: none; -ms-overflow-style: none; scroll-padding-inline: 44px; }
.rola::-webkit-scrollbar { display: none; }
.rola-seta {
  position: sticky; z-index: 2; flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; width: 44px; padding: 0; border: 0; cursor: pointer;
  color: var(--rola-cor, #0A2E5C); font: inherit;
}
.rola-seta[hidden] { display: none; }
.rola-seta--ant { left: 0; margin-right: -44px; justify-content: flex-start; background: linear-gradient(90deg, var(--rola-fundo, #fff) 55%, transparent); }
.rola-seta--prox { right: 0; margin-left: -44px; justify-content: flex-end; background: linear-gradient(270deg, var(--rola-fundo, #fff) 55%, transparent); }
.rola-seta--ant .rola-seta-bola svg { transform: rotate(180deg); }
.rola-seta-bola {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--rola-bola, #fff); color: inherit;
  border: 1px solid var(--rola-borda, rgba(10, 46, 92, .22));
  box-shadow: 0 4px 14px -6px rgba(0, 20, 47, .45);
}
.rola-seta:hover .rola-seta-bola { border-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .rola { scroll-behavior: smooth; }
  .rola-seta-bola { transition: transform 200ms cubic-bezier(.16, .84, .24, 1), border-color 200ms ease; }
  .rola-seta:hover .rola-seta-bola { transform: scale(1.08); }
  .rola-seta:not([hidden]) .rola-seta-bola { animation: rola-surge 320ms cubic-bezier(.16, .84, .24, 1) both; }
  .rola-seta--prox:not([hidden]) .rola-seta-bola { animation: rola-surge 320ms cubic-bezier(.16, .84, .24, 1) both, rola-chama 1.6s ease-in-out 600ms 2; }
  @keyframes rola-surge { from { opacity: 0; transform: scale(.7); } }
  @keyframes rola-chama { 50% { transform: translateX(4px); } }
}
@media print { .rola-seta { display: none !important; } }
