/* =========================================
   Contenedor Principal
   ========================================= */
.lo_que_dicen {
    padding: 60px 0;
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif; /* Tipografía limpia */
    overflow: hidden;
}

/* Forzar que los elementos se comporten como Flexbox (Cuadrícula) 
   y anular estilos inline del PHP/JS */
.slick_dicen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Espacio entre tarjetas */
    margin-bottom: 50px;
}

.swiper-resenas {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        overflow: hidden; /* Oculta lo que se sale de la pantalla */
    }
    
    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 350px; /* Ancho de cada tarjeta */
        height: auto;
    }

 /* Ajuste necesario para que Swiper no corte las sombras de las tarjetas */
    .swiper-resenas {
        padding: 20px 10px 40px 10px; /* Espacio para sombra y paginación */
    }
    .swiper-pagination-bullet-active {
        background-color: #bc0656 !important;
    }

/* =========================================
   Tarjeta de Reseña (Wrapper)
   ========================================= */
/* Corrección: Como el PHP imprime este div por cada reseña, 
   lo convertimos en la columna de la tarjeta */
.gem-testimonials-carousel-wrap {
    flex: 0 1 350px; /* Ancho base de 350px, pero flexible */
    min-width: 300px;
    margin: 0 !important;
}

/* Reset de estilos forzados por el HTML/JS antiguo */
.caroufredsel_wrapper,
.gem-testimonials-carousel,
.gem-testimonial-item {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    float: none !important;
    inset: auto !important;
    margin: 0 !important;
}

/* Diseño de la Tarjeta */
.gem-testimonial-item {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Sombra suave y moderna */
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    border: 1px solid #eee;
}

.gem-testimonial-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.gem-testimonial-wrapper {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

/* =========================================
   Imagen / Avatar
   ========================================= */
.gem-testimonial-image {
    margin-bottom: 20px;
    position: relative;
}

.gem-testimonial-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #bc0656; /* Usando tu color corporativo */
    padding: 2px;
    background: #fff;
}

/* Fallback para cuando no hay foto (iniciales) */
.inicial.mujer, 
.inicial {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #bc0656, #e91e63);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(188, 6, 86, 0.3);
}

/* =========================================
   Contenido de Texto
   ========================================= */
.gem-testimonial-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50 !important;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gem-testimonial-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666 !important;
    font-style: italic;
}

/* Logo de Google y Estrellas dentro de la reseña */
.gem-testimonial-text img.aligncenter {
    display: block;
    margin: 0 auto 15px auto;
    max-width: 80px;
    height: auto;
    
    /* CAMBIOS AQUÍ: */
    filter: grayscale(0%); /* Antes era 100% (gris), ahora es 0% (color original) */
    opacity: 1;            /* Antes era 0.6 (semitransparente), ahora es 1 (visible) */
    
    transition: all 0.3s ease;
}

/* Elemento decorativo comillas */
.custom-color-blockqute-mark {
    display: block;
    width: 40px;
    height: 3px;
    background-color: #bc0656;
    margin-top: 20px;
    border-radius: 2px;
}

/* Ocultar navegación vieja */
.gem-testimonials-navigation {
    display: none !important;
}

/* =========================================
   Sección de Resumen (Nota Media)
   ========================================= */
.container_nota {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 15px;
    border-right: 1px solid #ddd;
}

.nota_media {
    font-size: 3.5rem;
    font-weight: 800;
    color: #bc0656;
    margin: 0;
    line-height: 1;
}

.container_estrellas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
}

.container_estrellas p {
    margin: 0;
    font-size: 1rem;
    color: #555;
    font-weight: 600;
}

/* Responsive para la nota final */
@media (max-width: 768px) {
    .container_nota {
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 10px;
        padding-right: 0;
    }
    .container_estrellas {
        align-items: center;
        padding-left: 0;
    }
}