.testimonials-section {
    text-align: center;
    padding: 50px 20px;
    background: var(--carrara);
    scroll-margin-top: 100px;
}

.testimonials-section h4 {
    color: var(--pomegranate);
    margin: 0;
    text-transform: uppercase; /* força maiúsculas */
}

.testimonials-section h2 {
    color: var(--mirage);
    margin-bottom: 40px;
    text-transform: uppercase; /* força maiúsculas */
    font-size: 2.3rem;
}

.testimonials-section h2::before,
.testimonials-section h2::after {
    content: '';
    flex-grow: 1; 
    height: 3px;
    background-color: var(--pomegranate); 
    margin-top: 0;
    z-index: 2;
}

.testimonials-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 1600px; /* Limite o tamanho máximo do slider */
    margin: 0 auto; /* Centraliza */
}

.testimonials-viewport {
    overflow: hidden; /* ESSENCIAL: Esconde o que está fora */
    width: 90%; /* Define a largura da área visível */
}

.testimonials-wrapper {
    display: flex;
    gap: 20px;
    width: 100%; /* Ocupa 100% do viewport */
    transition: transform 0.5s ease-in-out; /* TRANSITION PARA A ANIMAÇÃO! */
}

.testimonial {
    background: white;
    padding: 20px;
    /* Define o tamanho exato de 3 cards + 2 gaps (20px * 2) */
    flex: 0 0 calc((100% - 40px) / 3); /* 3 cards visíveis, 2 gaps de 20px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    border: 2px solid var(--pomegranate);
    display: flex;
    flex-direction: column;
    z-index:1;
}

.testimonial h3 {
    margin: 0 0 5px 0;
    color: var(--pomegranate);
    font-style: italic;
    font-size: 700;
    text-transform: uppercase; 
    min-height: 24px; /* altura mínima uniforme para todos os h3 */
}

.testimonial h4 {
    margin: 0 0 15px 0;
    color: var(--mirage);
    font-weight: normal;
    font-size: 0.9em;
    text-transform: uppercase; /* força maiúsculas */
    min-height: 18px; /* altura mínima uniforme para todos os h3 */
}

.testimonial p {
    font-size: 0.9em;
    line-height: 1.5;
    text-transform: uppercase; /* força maiúsculas */
}

.arrow {
    background: var(--pomegranate);
    border: none;
    color: white;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: 40px;
    z-index: 2;
}

.arrow.left {
    left: 0%;
}

.arrow.right {
    right: 0%; 
}

@media (max-width: 768px) {
    /* Reduz o padding e o tamanho do título principal */
    .testimonials-section {
        padding: 40px 15px;
    }

    .testimonials-section h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    /* O slider ocupa 100% da largura em vez de ter padding nas laterais */
    .testimonials-viewport {
        width: 100%; 
    }

    /* * Mudar o tamanho do card:
     * 2 cards visíveis + 1 gap de 20px. 
     * Cálculo: (100% - 20px) / 2
     */
    .testimonial {
        flex: 0 0 calc((100% - 20px) / 2); 
    }

    /* Reduz o tamanho das flechas e as aproxima da borda */
    .arrow {
        height: 35px;
        width: 35px;
        font-size: 20px;
    }
    
    .arrow.left {
        left: 2%; /* Move a flecha para dentro */
    }

    .arrow.right {
        right: 2%; /* Move a flecha para dentro */
    }
}

/* --- */

/* * 2. Para Smartphones e Telas Pequenas (max-width: 480px)
 * Mostra 1 depoimento por vez
 */
@media (max-width: 480px) {
    .testimonials-section h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    /* * Mudar o tamanho do card:
     * 1 card visível. Não há gap dentro do 100% do viewport
     */
    .testimonial {
        /* Ocupa 100% da largura do viewport. O gap de 20px ainda está lá */
        flex: 0 0 100%; 
        padding: 15px; /* Reduz o padding interno do card */
    }

    /* Remove os botões de seta para sliders muito pequenos */
    /* Caso deseje mantê-los, ajuste a posição para que não atrapalhe o layout */
    .arrow {
        /* Se for um slider tocável, as setas podem ser removidas */
        display: none; 
    }

    /* Aumenta o espaçamento do wrapper para o gap entre os cards */
    .testimonials-wrapper {
        gap: 15px; 
    }

    /* Ajuste no tamanho da fonte dos textos internos */
    .testimonial p, 
    .testimonial h4 {
        font-size: 0.85em; 
    }
}