/* Container principal do carrossel */
.meu-carrossel-container.swiper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Criamos um espaço de 50px nas laterais para as setas e 70px abaixo para os dots */
    padding: 0 50px 70px 50px !important; 
    position: relative;
    background-color: transparent !important;
    box-sizing: border-box;
}

/* Slide container */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent !important;
}

/* Imagens do carrossel - Proporção Vertical Perfeita (3:4) */
.carrossel-img-vertical {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important; /* Força o formato vertical de revista */
    object-fit: cover !important; /* Preenche o espaço sem distorcer e sem barras */
    display: block;
    border-radius: 8px; /* Cantos arredondados na imagem */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); /* Sombra sutil para dar profundidade */
}

/* SETAS: Forçar Pretas, Pequenas e do LADO DE FORA */
.meu-carrossel-container .swiper-button-next,
.meu-carrossel-container .swiper-button-prev {
    color: #000000 !important; /* Setas Pretas */
    top: 40%; /* Centraliza verticalmente em relação à imagem */
    width: 40px !important;
    height: 40px !important;
}

/* Joga a seta esquerda totalmente para o canto externo esquerdo */
.meu-carrossel-container .swiper-button-prev {
    left: 0px !important;
}

/* Joga a seta direita totalmente para o canto externo direito */
.meu-carrossel-container .swiper-button-next {
    right: 0px !important;
}

/* Tamanho estético das setas */
.meu-carrossel-container .swiper-button-next::after,
.meu-carrossel-container .swiper-button-prev::after {
    font-size: 22px !important; 
    font-weight: bold;
}

/* DOTS: Ajuste de cor e posição */
.meu-carrossel-container .swiper-pagination-bullet {
    background: #000000 !important;
    opacity: 0.2;
}

.meu-carrossel-container .swiper-pagination-bullet-active {
    background: #000000 !important;
    opacity: 1 !important;
}

/* Posiciona os dots na base do espaço criado embaixo */
.meu-carrossel-container .swiper-pagination {
    bottom: 20px !important;
}