.banner-produtos {
    background: linear-gradient(rgba(31,47,92,0.85), rgba(31,47,92,0.85)),
    url('img/teares.jpeg') center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 100px 20px 60px;
}

.filtros {
    text-align: center;
    margin: 40px 0;
}

.filtros button {
    background: var(--soft-blue);
    border: none;
    padding: 10px 20px;
    margin: 10px;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.filtros button:hover {
    background: var(--accent);
}

.categoria {
    padding: 100px 0 40px;
}

.titulo-categoria {
    margin-bottom: 30px;
    color: var(--primary);
    border-left: 5px solid var(--accent);
    padding-left: 15px;
}

.carrossel-container {
    position: relative;
}

.carrossel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.carrossel::-webkit-scrollbar {
    display: none;
}

.card-produto {
    min-width: 250px;
    flex: 0 0 250px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    padding-bottom: 15px;
    text-align: center;
}

.card-produto img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-produto h3 {
    margin: 10px 0 5px;
    color: var(--primary);
}

.card-produto p {
    font-size: 14px;
    padding: 0 10px;
}

.btn-prev,
.btn-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

.btn-prev { left: 0; }
.btn-next { right: 0; }

.btn-prev:hover,
.btn-next:hover {
    background: var(--rose);
}

@media (max-width: 768px) {

    .banner-produtos h1 {
        margin-top: 40px;
        font-size: 28px;
    }

}