/* ==========================================================================
   MÓDULO: Testimonios y CTA Bar
   ========================================================================== */

.module-testimonios-cta {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* Quitamos márgenes si quieres que pegue con el módulo de arriba/abajo */
}

/* =====================================================
   COLUMNA IZQUIERDA: TESTIMONIOS (70%)
   ===================================================== */
.testimonio-col {
    width: 70%;
    background-color: var(--color-primary); /* Azul Marino muy oscuro calcado de tu captura */
    padding: 35px 5%;
    display: flex;
    align-items: center;
}

.testimonio-col-inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px; /* Separación entre icono, texto y flechas */
}

.testimonio-icon {
    color: var(--color-white);
    flex-shrink: 0; /* Evita que el icono se encoja */
}

.testimonio-icon svg {
    width: 32px;
    height: 32px;
}

/* Contenedor principal de los textos */
.testimonio-slider-wrap {
    flex-grow: 1;
    position: relative;
    min-height: 60px; /* Previene saltos bruscos de altura */
    display: flex;
    align-items: center;
}

.testimonio-slide {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.testimonio-slide.active {
    position: relative;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.testimonio-texto {
    font-size: var(--text-base);
    color: var(--color-white);
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.testimonio-autor {
    font-size: 14px;
    color: var(--color-secondary); /* Gris claro */
    margin-left: 10px;
}

/* Flechas */
.testimonio-controls {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.testimonio-controls button {
    background: transparent;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.testimonio-controls button svg {
    width: 24px;
    height: 24px;
}

.testimonio-controls button:hover {
    color: var(--color-secondary);
    transform: scale(1.1);
}

/* =====================================================
   COLUMNA DERECHA: BOTÓN CTA (30%)
   ===================================================== */
.cta-col {
    width: 30%;
    background-color: var(--color-secondary); /* Rojo corporativo */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 35px 20px;
    transition: background-color 0.3s ease;
}

.cta-col:hover {
    background-color: color-mix(in srgb, var(--color-secondary), 10% transparent); /* Rojo más oscuro al pasar el mouse */
}

.cta-barra-texto {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-primary);
    text-transform: capitalize;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 992px) {
    .testimonio-col { width: 60%; }
    .cta-col { width: 40%; }
    .testimonio-col-inner { gap: 15px; }
    .testimonio-texto { font-size: 14px; }
    .cta-barra-texto { font-size: 18px; }
}

@media (max-width: 768px) {
    .testimonio-col, .cta-col { 
        width: 100%; /* Pasan a ocupar el 100% en móviles */
    }
    .testimonio-col { padding: 40px 20px; }
    .cta-col { padding: 30px 20px; }
    .testimonio-col-inner { flex-direction: column; text-align: center; }
    .testimonio-controls { justify-content: center; margin-top: 10px; }
    .testimonio-autor { display: block; margin-top: 5px; margin-left: 0; }
}