/* sections/testimonials.css */
.testimonials-section {
    display: none;
    padding-top: 60px;
    padding-bottom: 70px;
}

.testimonial-carousel-container {
    text-align: center;
    max-width: 650px;
    /* Ancho base solo para la tarjeta */
    margin: 0 auto;
    position: relative;
    /* Contexto para posicionar las flechas */
}

.testimonial-carousel-wrapper {
    overflow: hidden;
}

.testimonial-grid {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-carousel-container .slider-controls {
    margin-top: 30px;
}

/* --- Posicionamiento de Flechas (Escritorio) --- */
.testimonial-carousel-container .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.testimonial-carousel-container .arrow.prev {
    left: -50px;
    /* Flecha fuera del contenedor a la izquierda */
}

.testimonial-carousel-container .arrow.next {
    right: -50px;
    /* Flecha fuera del contenedor a la derecha */
}

/* --- Estilos de Puntos --- */
.testimonials-section .slider-dots span {
    background-color: var(--dot-inactive-dark);
    border-color: transparent;
}

.testimonials-section .slider-dots span.active {
    background-color: var(--color-light);
    border-color: var(--dot-active-border-dark);
    border-width: 2px;
}

/* --- Media Queries para Revertir Posición --- */

/* Para Tabletas (hasta 992px) */
@media (max-width: 992px) {

    /* Hacemos el contenedor más ancho para dar espacio a las flechas adentro */
    .testimonial-carousel-container {
        max-width: calc(600px + (var(--arrow-space) * 2));
    }

    /* Revertimos los valores negativos para que las flechas vuelvan al interior */
    .testimonial-carousel-container .arrow.prev {
        left: 5px;
    }

    .testimonial-carousel-container .arrow.next {
        right: 5px;
    }
}

/* Para Móviles (hasta 767px) */
@media (max-width: 767px) {
    .testimonial-carousel-container {
        max-width: 100%;
    }

    .testimonial-carousel-container .slider-controls {
        margin-top: 25px;
    }

    .testimonial-carousel-container .arrow {
        display: none;
    }
}