/* =========================================
   1. ESTILOS BASE Y GLOBALES
   ========================================= */
.testimonials-section {
    /* Degradado lineal: Inicia en el tono grisáceo y termina en el blanco/hueso */
    background: linear-gradient(to bottom, #E5E3DB 0%, #FAF9F6 100%);
    width: 100%;
    overflow: hidden;
    padding: 100px 0; 
}

/* El contenedor principal debe tener espacio a los lados para las flechas */
.testimonials-outer-wrapper {
    position: relative; 
    width: 100%;
    max-width: 1400px; /* Reducimos un poco el max-width para que las flechas no queden tan lejos en pantallas gigantes */
    margin: 0 auto;
    padding: 0 100px; /* Este padding de 100px crea el "carril" donde vivirán las flechas */
    display: flex;
    align-items: center;
}

/* Tipografías */
.Cormorant-Semibold-24 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600; 
    font-size: 24px;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}

.GeneralSans-Regular-16 {
    font-family: 'General Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Estrellas */
.star-rating {
    display: flex;
    justify-content: center;
    gap: 8px; 
    margin-bottom: 25px;
}

.star-icon {
    width: 24px; 
    height: 24px;
    object-fit: contain;
}
/* =========================================
   FLECHAS DE NAVEGACIÓN (Sin bordes extra)
   ========================================= */
.test-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* Quitamos los bordes y medidas que causaban el problema */
    border: none; 
    background: transparent;
    padding: 0; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Cambiamos el hover para que no use colores de fondo, 
   sino una suave transparencia y aumento de tamaño */
.test-nav-btn:hover {
    opacity: 0.7; 
    transform: translateY(-50%) scale(1.05); /* Importante mantener el translateY para que no se desalinee al hacer hover */
}

/* Posiciones exactas a los lados */
.prev-test {
    left: 20px;
}

.next-test {
    right: 20px;
}
/* =========================================
   LÓGICA DEL SLIDER (Técnica Grid para centrado perfecto)
   ========================================= */
/* Al usar CSS Grid, podemos empalmar elementos en la misma "celda" sin que pierdan su centrado */
.testimonials-slider-wrapper {
    width: 100%;
}

.testimonials-track {
    width: 100%;
    display: grid; 
}

.testimonial-slide {
    grid-area: 1 / 1; /* Forzamos a todas las reseñas a vivir en el mismo exacto lugar */
    width: 100%;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    display: flex;
    justify-content: center; /* Centra el contenido internamente */
}

.testimonial-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Contenido interno y separaciones */
.testimonial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px; /* Evita que el texto se estire de lado a lado */
}

.testimonial-quote {
    margin-top: 25px;
    margin-bottom: 50px;
}

/* Imagen combinada de la reseña */
.testimonial-combined-img {
    width: 55%; /* 441px equivale aprox al 55% de tu contenedor de 800px */
    height: auto;
    aspect-ratio: 441 / 208; /* Obliga al navegador a mantener la proporción exacta de Figma */
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

/* =========================================
   2. DESKTOP VIEW (>= 1024px)
   ========================================= */
@media (min-width: 1024px) {
    /* Los estilos base ya están optimizados para escritorio */
}

/* =========================================
   3. MOBILE VIEW (< 1024px)
   Reorganización y tamaños específicos
   ========================================= */
@media (max-width: 1023px) {
    .testimonials-section {
        padding: 60px 0;
    }

    .testimonials-outer-wrapper {
        padding: 0 20px; 
        flex-direction: column; /* Apilamos los elementos verticalmente */
    }

    /* 1. REORGANIZACIÓN VISUAL */
    .testimonials-slider-wrapper {
        order: 1; /* El texto y la imagen van arriba */
        width: 100%;
    }

    /* 2. FLECHAS (Abajo y centradas) */
    .testimonials-nav {
        order: 2; /* Las mandamos al fondo de la sección */
        display: flex;
        position: relative;
        width: 100%;
        justify-content: center;
        gap: 20px; /* Separación entre las dos flechas */
        margin-top: 40px; /* Espacio desde la imagen */
    }

    .test-nav-btn {
        display: flex; /* Reactivamos su visibilidad */
        position: relative; /* Quitamos el anclaje absoluto de escritorio */
        top: auto;
        left: auto;
        right: auto;
        transform: none; /* Quitamos el centrado vertical automático de desktop */
        
        /* Nuevo tamaño exacto de móvil */
        width: 56px; 
        height: 56px;
    }

    /* Evitamos que el hover rompa la alineación en móvil */
    .test-nav-btn:hover {
        transform: scale(1.05); 
    }

    /* 3. TEXTOS */
    .testimonial-content {
        max-width: 100%;
    }

    .Cormorant-Semibold-24 {
        font-size: 20px; /* Nombre del autor */
    }

    .GeneralSans-Regular-16 {
        font-size: 14px; /* Descripción de la reseña */
    }

    .testimonial-quote {
        margin-bottom: 30px;
    }

    /* 4. IMAGEN (Tamaño exacto fluido) */
    .testimonial-combined-img {
        width: 100%; /* Toma todo el ancho posible... */
        max-width: 279px; /* ...pero nunca supera los 279px de tu diseño */
        aspect-ratio: 279 / 129; /* Mantiene la proporción perfecta siempre */
    }
}