/* =============================================
   CARROSSEL CONTÍNUO (Deslize Suave JS)
   ============================================= */

.carousel-section {
    background: #fff;
    padding: 2.5rem 0 3rem;
    overflow: hidden;
}

.carousel-outer {
    position: relative;
    width: 100%;
    margin-top: 1.5rem;
}

/* O Track agrupa os slides lateralmente */
.carousel-track {
    display: flex;
    gap: 8px; /* Pequeno espaço entre as imagens */
    padding: 0 4vw; /* Pad interno */
    overflow-x: auto;
    /* Comportamento de touch e hide scrollbar */
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
    /* Removido o scroll-snap para não travar a rolagem contínua via JS */
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

/* Individual Slide (visual da referência) */
.carousel-slide {
    flex: 0 0 calc(88vw - 8px); /* Quase tela toda */
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18); /* Sombra mais destacada */
    background: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    max-height: 480px; /* Aumenta bastante o limite pro card crescer */
    object-fit: contain;
    display: block;
    pointer-events: none; /* Previne arrastar a imagem em si (bug) */
}

/* Dots: mantidos do design */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* em caso de muitos slides */
    max-width: 90vw;
    margin: 1rem auto 0; /* Colar mais no carrossel */
    gap: 8px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #CBD5E1; /* Cinza claro */
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.carousel-dot.active {
    background: #000; /* Preto pro dot ativo */
    transform: scale(1.3);
}

/* Ocultar botões nativos */
.carousel-btn { display: none; }

@media (min-width: 768px) {
    .carousel-slide {
        flex: 0 0 320px;
    }
    .carousel-track {
        gap: 16px;
        padding: 0 calc(50% - 160px);
    }
}