/* --- Estilos para la Sección de Testimonios (Versión Tecnológica) --- */

/* :root {
    --primary-color: #007bff;
    --secondary-color: #6f42c1; 
    --accent-color-ai: #00D9E9; 
    --text-color-dark: #1a202c; 
    --text-color-medium: #4a5568;
    --text-color-light: #718096;
    --section-bg-light: #f7fafc; 
    --section-bg-dark: #1A202C; 
    --card-bg-color: #ffffff;
    --card-bg-dark: #2D3748; 
    --star-filled-color: #ffc107; 
    --star-empty-color: #cbd5e0;
    --quote-icon-color: var(--primary-color);
    --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --border-radius-md: 0.5rem; 
    --border-radius-lg: 0.75rem;
    --shadow-md: 0 5px 15px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --container-max-width: 1140px; 

    /* Colores de acento para tarjetas (ejemplos) */
    --accent-color-testimonial-1: #00D9E9; /* Cian IA */
    --accent-color-testimonial-2: #8A2BE2; /* Azul Violeta */
    --accent-color-testimonial-3: #FF6B6B; /* Coral vivo */
    --accent-color-testimonial-4: #4CAF50; /* Verde educativo */
}
*/

/* Aplicar box-sizing globalmente */
.testimonios-section *,
.testimonios-section *::before,
.testimonios-section *::after {
    box-sizing: border-box;
}

.testimonios-section {
    padding: 80px 0;
    background-color: var(--section-bg-light, #f7fafc); /* Fondo claro y limpio */
    font-family: var(--font-family-sans-serif, 'Inter', sans-serif);
    overflow: hidden; 
}

.testimonios-section .container {
    max-width: var(--container-max-width, 1140px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.testimonios-section .section-header {
    margin-bottom: 60px;
    text-align: center;
}

.testimonios-section .section-kicker {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color, #007bff);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.testimonios-section .section-title {
    font-size: 2.4rem; /* Ajustado para el kicker */
    font-weight: 700;
    color: var(--text-color-dark, #1a202c);
    margin-bottom: 15px;
}
.testimonios-section .section-title .ai-highlight {
    color: var(--accent-color-ai, #00D9E9);
    /* Podría tener un efecto de gradiente si se desea */
}

.testimonios-section .section-subtitle {
    font-size: 1.15rem;
    color: var(--text-color-medium, #4a5568);
    max-width: 650px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

.testimonials-grid {
    display: grid;
    /* Ajuste para 4 columnas en 1024px (considerando container y gaps) */
    /* (1024px viewport - 30px padding container) = 994px. 
       (994px - 3*24px gap) / 4 = (994 - 72) / 4 = 922 / 4 = 230.5px */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 24px; /* Gap ligeramente menor para acomodar 4 columnas */
    margin-bottom: 50px;
    width: 100%;
}

.testimonial-card {
    background-color: var(--card-bg-color, #ffffff);
    border-radius: var(--border-radius-lg, 0.75rem);
    box-shadow: var(--shadow-md, 0 5px 15px rgba(0,0,0,0.06));
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Para que el footer se alinee abajo */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--card-accent-color, var(--primary-color)); /* Borde de acento superior */
    position: relative;
    overflow: hidden; /* Para el icono de comillas de fondo */
}

.testimonial-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.08));
}

.testimonial-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative; /* Para el badge */
}

.testimonial-icon-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--card-accent-color, var(--primary-color)); /* Fondo con color de acento */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.testimonial-profile-icon {
    font-size: 1.8rem; /* Tamaño del icono de perfil */
}

.testimonial-author-info {
    flex-grow: 1;
    text-align: left;
}

.testimonial-author-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color-dark, #1a202c);
    margin: 0 0 2px 0;
}

.testimonial-author-title {
    font-size: 0.85rem;
    color: var(--text-color-light, #718096);
    margin: 0;
}

.testimonial-ia-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--accent-color-ai, #00D9E9);
    color: var(--text-color-dark, #1a202c);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: var(--border-radius-sm, 4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.testimonial-ia-badge i {
    font-size: 0.8em;
}

.testimonial-card-body {
    text-align: left;
    margin-bottom: 15px; /* Espacio antes del footer (comillas de fondo) */
}

.testimonial-rating {
    margin-bottom: 12px;
}
.testimonial-rating .fa-star {
    font-size: 1rem; /* Estrellas un poco más grandes */
    margin-right: 3px;
}
.testimonial-rating .fa-star.filled {
    color: var(--star-filled-color, #ffc107);
}
.testimonial-rating .fa-star:not(.filled) {
    color: var(--star-empty-color, #cbd5e0);
}

.testimonial-text {
    font-size: 0.95rem; /* Texto del testimonio ligeramente más pequeño para encajar mejor */
    line-height: 1.65;
    color: var(--text-color-medium, #4a5568);
    margin: 0;
    /* font-style: italic; */ /* Quitar cursiva para un look más limpio/profesional */
}

.testimonial-card-footer {
    margin-top: auto; /* Empuja el footer hacia abajo */
    text-align: right; /* Alinea el icono de comillas a la derecha */
    height: 40px; /* Altura para el posicionamiento del icono */
    position: relative;
}

.testimonial-quote-bg-icon {
    font-size: 4rem; /* Comillas de fondo más grandes */
    color: var(--card-accent-color, var(--primary-color));
    opacity: 0.08; /* Muy sutiles */
    position: absolute;
    bottom: -10px; /* Ajustar posición */
    right: -5px;  /* Ajustar posición */
    line-height: 1;
}

.more-testimonials-link {
    text-align: center;
    margin-top: 20px; /* Reducir margen si el grid ya tiene suficiente */
}

.btn.btn-primary-outline { /* Asumiendo que tienes un estilo base para .btn */
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color, #007bff);
    background-color: transparent;
    border: 2px solid var(--primary-color, #007bff);
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.btn.btn-primary-outline i {
    margin-right: 8px;
}
.btn.btn-primary-outline:hover {
    background-color: var(--primary-color, #007bff);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--primary-color-rgb, 0,123,255),0.2); 
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    /* Ya está configurado para 4 columnas con minmax(220px, 1fr) si el contenedor lo permite */
}

@media (max-width: 767.98px) { /* Móviles - 2 columnas o 1 si es muy estrecho */
    .testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Podría ser 1 o 2 columnas */
        gap: 20px;
    }
    .testimonios-section .section-title {
        font-size: 2rem;
    }
    .testimonial-card {
        padding: 20px;
    }
    .testimonial-icon-container {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }
    .testimonial-profile-icon {
        font-size: 1.5rem;
    }
    .testimonial-author-name {
        font-size: 1rem;
    }
}

@media (max-width: 576px) { /* Móviles muy pequeños - 1 columna */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}