@media (min-width: 768px) {
    /* Some o carrossel no desktop */
    .versao-mobile {
        display: none !important;
    }
}

/* Container do Swiper no mobile */
.versao-mobile .swiper-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    position: relative; /* Importante para posicionar setas */
}

/* Faz os slides ocuparem todo o espaço vertical */
.versao-mobile .swiper-wrapper {
    flex: 1;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Cada slide centraliza o card internamente */
.versao-mobile .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* Card ocupa 90% da tela, limitado em 400px */
.versao-mobile .swiper-slide .card {
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Paginação logo abaixo dos slides, centralizada */
.versao-mobile .swiper-pagination {
    position: static !important;
    margin-top: 1rem;
    text-align: center;
}

/* Botões de navegação: posicionados absolutamente no centro vertical do container */
.versao-mobile .swiper-button-next,
.versao-mobile .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5; /* Ficar sobre o card */
    color: var(--bs-warning); /* Ajuste a cor conforme desejar */
    width: auto;
    height: auto;
}

/* Distâncias das laterais para não ficarem fora da tela */
.versao-mobile .swiper-button-next {
    right: 5px;
}

.versao-mobile .swiper-button-prev {
    left: 5px;
}