/* ======================================= */
/* Sección de Testimonios - Estilos Generales */
/* ======================================= */
.testimonials-section {
    padding: 80px 0;
    background-color: #f9fafb; /* Fondo claro para contrastar */
    text-align: center;
    overflow: hidden; /* Oculta el contenido que sale del área del carrusel */
    position: relative;
    /* Degradado sutil para el fondo si se desea
    background: linear-gradient(180deg, #f0f2f5 0%, #ffffff 100%);
    */
}

.testimonials-section .section-title {
    margin-bottom: 15px;
    font-size: 2.5rem;
    color: #1a202c;
}

.testimonials-section .section-subtitle {
    font-size: 1.15rem;
    color: #4a5568;
    max-width: 800px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}

/* ======================================= */
/* Estilos del Grid de Testimonios (Carrusel) */
/* ======================================= */
.testimonials-grid {
    display: flex; /* Para organizar las columnas horizontalmente */
    gap: 15px; /* Reducimos el espacio entre columnas para que quepan más */
    justify-content: center;
    position: relative;
    height: 650px; /* Aumenta un poco la altura para más visibilidad vertical */
    max-width: 1800px; /* Aumenta el ancho máximo para acomodar más columnas */
    margin: 0 auto; /* Centrar el grid */
    padding: 20px 0; /* Espacio vertical dentro del carrusel */
    /* Ajuste del mask-image para suavizar los cortes */
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.testimonial-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre tarjetas dentro de una columna */
    flex-shrink: 0; /* Evita que las columnas se encojan */
    width: 280px; /* Ancho fijo para cada columna, ligeramente más pequeño */
    animation-duration: 50s; /* Duración de la animación más larga para fluidez */
    animation-timing-function: linear; /* Velocidad constante */
    animation-iteration-count: infinite; /* Repetir indefinidamente */
    animation-play-state: running; /* Por defecto, corriendo, JS lo pausará en hover */
}

/* Animaciones específicas para cada columna */
.testimonial-column.column-1,
.testimonial-column.column-3,
.testimonial-column.column-5 { /* Nuevas columnas también hacia arriba */
    animation-name: scrollUp; /* Sube */
}

.testimonial-column.column-2,
.testimonial-column.column-4,
.testimonial-column.column-6 { /* Nuevas columnas también hacia abajo */
    animation-name: scrollDown; /* Baja */
}

/* ======================================= */
/* Keyframes para las animaciones de scroll */
/* ======================================= */
@keyframes scrollUp {
    0% {
        transform: translateY(0%);
    }
    100% {
        /* Desplaza hacia arriba el 50% de la altura total (contenido duplicado) */
        transform: translateY(-50%);
    }
}

@keyframes scrollDown {
    0% {
        /* Comienza abajo del contenido original (equivalente a -50% del total duplicado) */
        transform: translateY(-50%);
    }
    100% {
        /* Desplaza hacia arriba al inicio del contenido original */
        transform: translateY(0%);
    }
}

/* ======================================= */
/* Estilos de las Tarjetas de Testimonio */
/* ======================================= */
.testimonial-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 25px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto; /* Ajusta la altura al contenido */
    flex-shrink: 0; /* Evita que las tarjetas se encojan */
    border: 1px solid #e2e8f0;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #6a00ff; /* Borde de color principal */
    flex-shrink: 0;
}

.testimonial-info h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #1a202c;
    font-weight: 600;
}

.testimonial-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #718096;
}

.testimonial-text {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ======================================= */
/* Media Queries para Responsividad */
/* ======================================= */
@media (max-width: 1400px) {
    .testimonials-grid {
        max-width: 1200px; /* Reducir el ancho máximo si hay menos espacio */
        height: 600px;
        gap: 15px;
    }
    .testimonial-column {
        width: 260px; /* Ajustar el ancho de columna */
    }
}

@media (max-width: 1024px) {
    .testimonials-grid {
        max-width: 900px;
        height: 550px;
        gap: 20px; /* Aumentar un poco el gap para 3 columnas cómodas */
        /* Ajustar el mask-image para 3 columnas */
        mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    }
    /* Mostrar solo 3 columnas en pantallas medianas */
    .testimonial-column:nth-child(n+4) { /* Ocultar a partir de la 4ta columna */
        display: none;
    }
    .testimonial-column {
        width: 280px; /* Darles más ancho */
        animation-duration: 40s; /* Reducir duración */
    }

    /* Ajustar keyframes para 3 columnas si cambian las alturas */
    @keyframes scrollUp {
        0% { transform: translateY(0%); }
        100% { transform: translateY(-50%); }
    }
    @keyframes scrollDown {
        0% { transform: translateY(-50%); }
        100% { transform: translateY(0%); }
    }
}

@media (max-width: 768px) {
    .testimonials-section .section-title {
        font-size: 2rem;
    }
    .testimonials-section .section-subtitle {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    .testimonials-grid {
        flex-direction: column; /* Apila las columnas */
        align-items: center;
        height: auto; /* Remueve altura fija para móviles */
        max-width: 100%;
        gap: 30px; /* Espacio entre las columnas apiladas */
        padding: 0;
        mask-image: none; /* Desactivar la máscara para evitar cortes raros en móvil */
        -webkit-mask-image: none;
    }
    .testimonial-column {
        width: 90%; /* Ajusta el ancho para mejor visualización en móviles */
        max-width: 400px;
        height: auto;
        animation: none !important; /* Desactiva animaciones en móvil */
        flex-direction: column; /* Apila tarjetas en móvil */
        gap: 20px;
    }
    .testimonial-column:nth-child(n+3) { /* Ocultar a partir de la 3ra columna en móvil */
        display: none;
    }
    .testimonial-card {
        width: 100%; /* Una tarjeta por fila en móvil */
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .testimonials-section {
        padding: 50px 0;
    }
    .testimonials-section .section-title {
        font-size: 1.8rem;
    }
    .testimonials-section .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }
    .testimonial-card {
        padding: 20px;
    }
    .testimonial-avatar {
        width: 45px;
        height: 45px;
    }
    .testimonial-info h4 {
        font-size: 1rem;
    }
    .testimonial-info p {
        font-size: 0.85rem;
    }
    .testimonial-text {
        font-size: 0.9rem;
    }
}