/* ==========================================================================
   Sliders e carrosséis do mobile
   Carregado por último: estes comportamentos transformam o layout das seções.
   ========================================================================== */

@media (max-width: 768px) {
  /* Slider horizontal de cards verticais de 200px
     (passos, formatos de conteúdo e dinâmicas + recursos).
     O card tocado desliza para a esquerda: assets_2026/js/carrosseis.js */
  .slider-mobile {
    flex: 1 1 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    margin: -6px -24px;
    padding: 6px 24px;
  }
  .slider-mobile::-webkit-scrollbar {
    display: none;
  }
  .slider-mobile button {
    scroll-snap-align: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }

  /* Carrossel "center mode" (Depoimentos, Cases e Perguntas frequentes): de ponta a ponta,
     item ativo ao centro e 30px dos vizinhos à mostra (padding lateral = 30 + gap de 12).
     Em telas mais largas o card para em --cm-largura e os vizinhos aparecem mais. */
  .carrossel-centro {
    --cm-largura: 360px;
    --cm-respiro: max(42px, calc(50vw - var(--cm-largura) / 2));
    margin-left: -24px;
    margin-right: -24px;
    padding-left: var(--cm-respiro);
    padding-right: var(--cm-respiro);
    gap: 12px;
    grid-auto-columns: 100%;
    scroll-snap-type: x mandatory;
  }
  .cases__trilho {
    --cm-largura: 480px;
  }
  .carrossel-centro > * {
    scroll-snap-align: center;
  }

  /* Setas de Depoimentos e FAQ centradas na borda do card ativo
     (o card fica a --cm-respiro da tela; o bloco das setas começa em 24px) */
  .depoimentos__conteudo,
  .faq__conteudo {
    --cm-seta: calc(max(42px, calc(50vw - 180px)) - 48px);
  }
  .depoimentos__carrossel .seta-carrossel--anterior,
  .faq__carrossel .seta-carrossel--anterior {
    left: var(--cm-seta);
  }
  .depoimentos__carrossel .seta-carrossel--proximo,
  .faq__carrossel .seta-carrossel--proximo {
    right: var(--cm-seta);
  }
}