.testimonials {

    --linkedin-color: #258dbf;

    --swiper-pagination-color: var(--color-accent);
    --swiper-pagination-left: auto;
    --swiper-pagination-right: auto;
    --swiper-pagination-bottom: 0;
    --swiper-pagination-top: auto;
    --swiper-pagination-fraction-color: inherit;
    --swiper-pagination-bullet-size: 1.2rem;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.4;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-bullet-vertical-gap: 0px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;

    overflow: hidden;
    position: relative;
    background-image: url(./../../assets/img/backgrounds/testimonials-bg.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: black;
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
    }
}

.testimonials__container {
    z-index: 10;
    width: 100%;
    height: auto;
    /* border: 2px solid;
    border-color: transparent var(--color-accent); */
    /* max-width: var(--max-width); */
    max-width: 1920px;
    padding: var(--spacing-s) 0;
    @media only screen and (min-width: 768px) {
        & {
            padding: var(--spacing-l) 0;
        }
    }

    .title {
        text-align: center;
        font-family: var(--font-primary);
        font-weight: 500;
        font-size: clamp(1.8rem, 0.943rem + 4.286vw, 3rem);
        color: var(--color-text-wt);
        margin: 0 0 var(--spacing-s) 0;
        @media only screen and (min-width: 768px) {
            & {
                font-size: clamp(3rem, 2.537rem + 0.964vw, 3.2rem);
            }
        }@media only screen and (min-width: 1100px) {
            & {
                font-size: 3.2rem;
            }
        }
    }
}

.testimonials__swiper {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    height: fit-content;
    padding: 0 var(--spacing-s);
    box-sizing: border-box;
    /* border: 2px solid;
    border-color: var(--color-accent) transparent;
    background-color: #00000050;
    padding: var(--spacing-s); */

    @media only screen and (min-width: 768px) {
        & {
            padding: 0 var(--spacing-l);
        }
    }

    .swiper-pagination {
        width: fit-content;
        left: auto;
    }
    
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        /* background: #fff; */
        display: flex;
        justify-content: center;
        align-items: stretch; /* Stretch card to fill height */
        padding: 0 0 var(--spacing-l) 0;
        width: 100%;
        background: transparent;
        height: auto; /* Allow swiper to determine height */
        @media only screen and (max-width: 767px) {
            & {
                padding: 0 0 var(--spacing-m) 0;
            }
        }
    }.slide-video {
        .testimonials__card > .testimonials__content {
            padding: 0;
        }
    }.slide-text {
        .testimonials__card >
        .testimonials__content {
            display: flex; /* Use flex for alignment */
            flex-direction: column;
        }

        .testimonials__card >
        .testimonials__content >
        .testimonials__text {
            flex-grow: 1; /* Allow text to take available space */
            overscroll-behavior: auto;
            overflow-y: auto; /* Keep scroll for very long text, but UI is better */
            padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;

            &::-webkit-scrollbar {
                width: 5px;
                background-color: transparent;
            }
            &::-webkit-scrollbar-thumb {
                background: var(--color-accent);
            }
        }
    }
    
    &:hover {
        cursor: grab;
    }
}

.testimonials__card {
    background: rgba(30, 30, 30, 0.5); /* Lighter background for better glass effect */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto; /* Allow height to be dynamic */
    /* Altura se regula por el aspect-ratio del bloque de contenido + bloque autor */
    overflow: hidden; /* Ensure content respects border radius */
}

.testimonials__content {
    position: relative;
    flex: 0 0 auto; /* No crecer verticalmente */
    aspect-ratio: 16/9; /* Altura consistente para texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-text-wt);
    font-family: var(--font-secondary);
    font-weight: 400;
    overflow: hidden; /* Oculta exceso de vídeo */
    padding: var(--spacing-m);
    gap: var(--spacing-s);
    @media only screen and (max-width: 767px) {
        & {
            padding: var(--spacing-xs); /* Further reduced padding */
            gap: var(--spacing-xs);
        }
    }
    

    
    .testimonials__text {
        min-height: 0; /* Fix flexbox overflow bug */
        overflow-y: auto; /* Scroll solo si se necesita */
        overscroll-behavior: contain;
        padding-right: var(--spacing-xs);
        /* Estilo scroll */
        &::-webkit-scrollbar {
            width: 4px;
        }
        &::-webkit-scrollbar-thumb {
            background: var(--color-accent);
        }
    }

    /* Remove grid for text-only cards */
    &:not(&:has(.video-frame, iframe)) {
       /*  grid-template-columns: 1fr 9fr; -> No longer needed */
    }

    /* Remove animated border */
    &:has(.video-frame, iframe) {
        padding: 0; /* Vídeo ocupa todo el espacio */
        justify-content: stretch;
        @media only screen and (max-width: 767px) {
            justify-content: center; /* Centrar videos verticales en móviles */
        }
    }
    &:has(.video-frame, iframe)::before {
        content: none;
    }

    .quote-icon {
        font-size: 2.5rem; /* Make quote icon larger */
        color: var(--color-accent-light);
        text-align: center;
    }
    i {
        /* background: var(--color-accent); */
        color: var(--color-accent);
        padding: 0;
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        font-size: 2.5rem; /* Larger icon */
        opacity: 0.8;
        @media only screen and (max-width: 767px) {
            display: none;
        }
    }

    p {
        margin: 0;
        font-size: 1.2rem;
        font-family: var(--font-secondary);
        font-weight: 400;
        line-height: 1.8rem;
        text-align: left; /* Align text left for readability */
        hyphens: auto;

        @media only screen and (max-width: 768px) {
            & {
                font-size: clamp(1rem, 0.643rem + 1.786vw, 1.5rem);
                line-height: clamp(1.5rem, 0.964rem + 2.679vw, 2.25rem);
            }
        }
    }

    .video-frame, iframe {
        display: block;
        margin: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; /* Mostrar video completo sin recortes */
    }
}

.testimonials__author {
    width: 100%;
    min-height: 130px; /* Set min-height for vertical consistency */
    height: fit-content;
    background: rgba(0, 0, 0, 0.3); /* Darker footer for contrast */
    display: grid;
    grid-template-columns: auto 1fr; /* Adjust columns to prevent overflow */
    gap: 1rem;
    align-items: center;
    padding: var(--spacing-s) var(--spacing-m); /* Consistent padding */
    @media only screen and (max-width: 767px) {
        & {
            padding: var(--spacing-xs) var(--spacing-s);
            gap: var(--spacing-xs);
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
        & {
            padding: var(--spacing-xs) var(--spacing-s);
            gap: var(--spacing-s);
        }
    }
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    .testimonials__author-image-link {
        justify-self: right;

        &:hover, &:focus {
            .testimonials__author-image-container {
                border-color: var(--linkedin-color);
            }
        }
    }

    .testimonials__author-image-container {
        --author-img-size: 96px; /* Valor base */
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--author-img-size);
        height: var(--author-img-size);
        aspect-ratio: 1/1;
        /* justify-self: right; */ /* MOVED TO LINK */
        border-radius: 50%;
        overflow: hidden;
        background-color: white;
        border: 2px solid var(--color-accent);
        transition: border-color 0.3s ease;

        @media only screen and (max-width: 767px) {
            & {
                --author-img-size: 80px; /* Reduce size on mobile */
            }
        }
        @media only screen and (min-width: 768px) and (max-width: 1023px) {
            & {
                --author-img-size: 88px;
            }
        }
 
        img {
            width: 100%;
            height: 100%;
            transform: scale(1.01);
            display: block;
            transition: transform 0.3s ease, opacity 0.3s ease;
            object-fit: cover;

            &:hover,
            &:focus {
                transform: scale(1.06);
                opacity: 0.9;
            }
        }
    }

    .testimonials__author-info {
        display: flex;
        flex-direction: column;
        text-align: left;
        gap: var(--spacing-xs);
        width: fit-content;
        height: fit-content;
        justify-content: center;
        a {
            width: fit-content;
            height: fit-content;
            overflow: hidden;
            text-decoration: none;
            margin: 0;
            padding: 0;

            &:hover,
            &:focus {
                & > h4 {
                    color: var(--linkedin-color);
                    & > i {
                        background-color: var(--linkedin-color);
                    }
                }
            }

            h4 {
                margin: 0;
                padding: 0;
                color: var(--color-accent);
                font-family: var(--font-primary);
                font-weight: 500;
                font-size: clamp(1.3rem, 1.1rem + 0.4vw, 1.6rem);
                transition: color 0.3s ease; /* Simplified transition */

                @media only screen and (max-width: 767px) {
                    & {
                        font-size: clamp(1.3rem, 0.8rem + 2.5vw, 2rem);
                    }
                }
                @media only screen and (min-width:768px) and (max-width: 1023px) {
                    & {
                        font-size: clamp(1.2rem, 0.8rem + 1vw, 1.4rem);
                    }
                }

                i {
                    margin-left: var(--spacing-xs);
                }
            }

            i {
                position: relative;
                color: white;
                font-size: clamp(1rem, 0.8rem + 0.4vw, 1.3rem); /* Responsive icon size */
                aspect-ratio: 1/1;
                transform: none;
                transition: background-color 0.3s ease; /* Simplified transition */
                padding: 6px;
                background-color: var(--color-accent);
                border-radius: 8px;
                
                @media only screen and (max-width: 767px) {
                    & {
                        font-size: clamp(0.9rem, 0.471rem + 2.143vw, 1.3rem);
                    }
                }
                @media only screen and (min-width: 768px) and (max-width: 1023px) {
                    & {
                        font-size: clamp(1.1rem, 0.8rem + 0.8vw, 1.3rem);
                    }
                }
            }
        }
        
        p {
            margin: 0;
            color: var(--color-text-wt);
            font-family: var(--font-secondary);
            font-weight: 400;
            font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.3rem);
            @media only screen and (min-width: 768px) and (max-width: 1023px) {
                & {
                    font-size: clamp(1.0rem, 0.8rem + 0.5vw, 1.2rem);
                }
            }
        }

        /* Estilos para testimonios sin LinkedIn */
        .testimonials__author-name-container {
            width: fit-content;
            height: fit-content;
            overflow: hidden;
            margin: 0;
            padding: 0;

            h4 {
                margin: 0;
                padding: 0;
                color: var(--color-accent);
                font-family: var(--font-primary);
                font-weight: 500;
                font-size: clamp(1.3rem, 1.1rem + 0.4vw, 1.6rem);

                @media only screen and (max-width: 767px) {
                    & {
                        font-size: clamp(1.3rem, 0.8rem + 2.5vw, 2rem);
                    }
                }
                @media only screen and (min-width:768px) and (max-width: 1023px) {
                    & {
                        font-size: clamp(1.2rem, 0.8rem + 1vw, 1.4rem);
                    }
                }
            }
        }
    }

    /* Estilos para contenedor de imagen sin enlace */
    .testimonials__author-image-link--no-link {
        cursor: default;
        
        &:hover, &:focus {
            .testimonials__author-image-container {
                transform: none;
            }
        }
    }

    .testimonials__author-link {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        position: relative;

        i {
            color: white;
            background: var(--linkedin-color);
            /* font-size: 2rem; */
            width: fit-content;
            height: fit-content;
            padding: 8px;
            border-radius: 10px;
            transition: color 0.3s ease, background-color 0.3s ease;

            @media only screen and (min-width: 768px) {
                & {
                    color: var(--color-accent);
                    background-color: transparent;
                }&:hover {
                    color: white;
                    background: var(--linkedin-color);
                }
            }
            @media only screen and (min-width: 1024px) {
                & {
                    /* font-size: 1.8rem; */
                }
            }
        }
    }

    /* Ajuste imagen para escritorio grande */
    .testimonials__author-image-container {
        @media only screen and (min-width: 1024px) {
            & {
                --author-img-size: 90px;
            }
        }
    }
}




/* --- Estilos para el Bloque LinkedIn CTA dentro de Testimonios --- */
.testimonials__linkedin-cta {
    margin: var(--spacing-m) 0;
    /* padding: var(--spacing-s); */
    width: 100%;
    position: relative;
    z-index: 10;

    /* border-top: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent); */

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* background-color: rgb(0 0 0 / 0.4); */
}

.testimonials__linkedin-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);
    padding: var(--spacing-s) var(--spacing-s);

    text-decoration: none;
    border: 2px solid;
    border-color: white;
    border-radius: 4px;

    transition: all 0.3s ease;
}

.testimonials__linkedin-text {
    font-size: clamp(1.1rem, 0.918rem + 0.909vw, 1.8rem);
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--color-text-wt);
    
    & > span {
        /* background-color: var(--color-accent); */
        color: var(--color-accent);
        font-weight: 600;
        /* padding: calc(var(--spacing-xs) / 1.33) var(--spacing-xs); */
        border-radius: 8px;
        transition: color 0.3s ease;
    }
}

.testimonials__linkedin-icon {
    display: flex;
    align-items: center;
    font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.6rem);
    color: white;
    /* border: 1px solid;
    border-color: transparent white; */
    background-color: var(--color-accent);
    border-radius: 8px;
    padding: var(--spacing-xs);
    /* vertical-align: middle; */
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* --- Hover Effects --- */
.testimonials__linkedin-link:hover,
.testimonials__linkedin-link:focus {
    background-color: var(--linkedin-color);
    border-color: var(--linkedin-color);
    transform: translateY(-4px);
    & > .testimonials__linkedin-icon {
        background-color: var(--linkedin-color);
    }
    & > .testimonials__linkedin-text {
        & > span {
            /* background-color: white; */
            color: white;
        }
    }
}

/* --- Responsive Adjustments --- */
@media only screen and (max-width: 767px) {
    .testimonials__linkedin-cta {
        /* margin-top: var(--spacing-m); */
    }
    .testimonials__linkedin-link {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
        /* background-color: var(--linkedin-color); */
        /* border-color: var(--linkedin-color); */
    }
    .testimonials__linkedin-text {
        font-size: 1.4rem;
        & > span {
            /* color: white; */
        }
    }
}

@media only screen and (min-width: 768px) {
    .testimonials__swiper {
        display: flex; /* Regresamos a flex */
        overflow: visible; /* Permitimos que la tarjeta más alta se muestre completa */
    }
}

/* Ajustes de texto en el contenido para tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .testimonials__content p {
        font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
        line-height: 1.6rem;
    }
}