/* =====================================================================
   Carrosséis — Antes/Depois (galeria) e Depoimentos
   Sem dependências externas (vanilla CSS + carousel.js)
   Suporta múltiplos slides por view via [data-carousel-per-view].
   ===================================================================== */

.carousel {
    position: relative;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: 40px; /* espaço para as setas */
}

.carousel-viewport { overflow: hidden; }

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding-inline: var(--space-sm);
}

/* --- Galeria (Antes e Depois): 3 por view --- */
.carousel-galeria .carousel-slide { flex-basis: 33.3333%; }
.galeria-slide img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: var(--shadow);
    background: var(--color-white);
}

/* --- Depoimentos: 4 por view --- */
.carousel-depoimentos .carousel-slide { flex-basis: 25%; }
.depoimento-slide { display: flex; }
.depoimento-card {
    background: var(--color-cream);
    border: 1px solid #C7C7C7;
    border-left: 4px solid var(--color-gold);
    border-radius: 4px;
    padding: var(--space-lg) var(--space-md);
    width: 100%;
    text-align: left;
}
.depoimento-aspas {
    width: 42px;
    height: auto;
    margin: 0 0 var(--space-sm);
}
.depoimento-nome {
    font-weight: 600;
    color: var(--color-black);
    font-size: 1rem;
    margin: 0 0 var(--space-xs);
}
.depoimento-papel {
    color: var(--color-gold);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 var(--space-md);
}
.depoimento-texto {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-charcoal);
}

/* --- Botões de navegação --- */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--color-gold-beige);
    border-radius: 50%;
    z-index: 5;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t);
}
.carousel-btn:hover { color: var(--color-gold); transform: translateY(-50%) scale(1.12); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
.carousel-prev { left: -4px; }
.carousel-next { right: -4px; }
.carousel-btn svg { width: 28px; height: 28px; }

/* --- Dots --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
}
.carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: rgba(180, 155, 99, 0.4);
    transition: background var(--t-fast), transform var(--t-fast);
}
.carousel-dot.is-active {
    background: var(--color-gold);
    transform: scale(1.2);
}
.carousel-dot:hover { background: var(--color-gold-beige); }

/* --- Responsivo --- */
@media (max-width: 960px) {
    .carousel-galeria .carousel-slide { flex-basis: 50%; }
    .carousel-depoimentos .carousel-slide { flex-basis: 50%; }
}

@media (max-width: 600px) {
    .carousel { padding-inline: 28px; }
    .carousel-galeria .carousel-slide { flex-basis: 100%; }
    .carousel-depoimentos .carousel-slide { flex-basis: 100%; }
    .carousel-btn { width: 34px; height: 34px; }
    .carousel-btn svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track { transition: none; }
}