@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

.arq-carrossel {
    /* largura do card e altura da imagem (mesma proporção 308x343) */
    --arq-card-w: 300px;
    --arq-img-h: calc(var(--arq-card-w) * 343 / 308);

    position: relative;
    font-family: 'Roboto', sans-serif;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}

.arq-carrossel *,
.arq-carrossel *::before,
.arq-carrossel *::after { box-sizing: border-box; }

/* faixa rolável */
.arq-carrossel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
}
.arq-carrossel__viewport::-webkit-scrollbar { display: none; } /* WebKit */

.arq-carrossel__track {
    display: flex;
    gap: 24px;
    padding-bottom: 4px;
}

/* cada card com largura fixa (apresentação idêntica à listagem) */
.arq-carrossel__track .arq-card {
    flex: 0 0 var(--arq-card-w);
    width: var(--arq-card-w);
}

/* ── SETAS ── */
.arq-carrossel__btn {
    position: absolute;
    top: calc(40px + var(--arq-img-h) / 2); /* centraliza na imagem */
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid #dde1e6;
    border-radius: 50%;
    color: #21272A;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .14);
    transition: background .15s, opacity .15s;
}

.arq-carrossel__btn:hover { background: #f2f4f8; }
.arq-carrossel__btn--prev { left: 6px; }
.arq-carrossel__btn--next { right: 6px; }

.arq-carrossel__btn:disabled {
    opacity: 0;
    pointer-events: none;
}

/* ── MOBILE: sem setas, navega por swipe ── */
@media (max-width: 768px) {
    .arq-carrossel {
        padding: 32px 0;
        --arq-card-w: 260px;
    }
    .arq-carrossel__btn { display: none; }
}