/* Ajustes mobile que não cabem no JS.
   Os componentes vindos de `_ds_bundle.js` têm estilo inline, que vence qualquer
   regra CSS — por isso o `!important` aqui é necessário, e não preguiça. Está
   restrito a wrappers com classe própria, nunca a seletores amplos. */

@media (max-width: 767px) {
  .page {
    padding-inline: 20px;
  }

  /* Carrossel de segmentos: cards de 330px fixos estouram a viewport de 375.
     Vira um carrossel de largura proporcional, com scroll-snap. */
  .track {
    padding: 12px 20px 28px;
    gap: 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
  }

  .track > * {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    max-width: 320px;
    padding: 28px 22px !important;
    scroll-snap-align: start;
  }

  /* CtaBanner: 64px/48px de padding sobra pouco para o texto em 375. */
  .acs-cta > * {
    padding: 40px 20px !important;
  }
}

/* Tabela de comparação: 3 colunas de texto não reflowam. Rola na horizontal
   com largura mínima legível, em qualquer viewport onde não couber. */
.acs-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 767px) {
  .acs-table-scroll > * {
    min-width: 580px;
  }
}

/* Faixa de filtros do dashboard e afins. */
.acs-scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
}

.acs-scroll-x::-webkit-scrollbar {
  display: none;
}

@keyframes acs-drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* O marquee e o drawer animam; respeitar quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}