/* ===========================
   CARRUSELES: SERVICIOS Y TESTIMONIOS
=========================== */

.carousel-container {
    --carousel-control-size: 48px;
    display: grid;
    grid-template-columns: var(--carousel-control-size) minmax(0, 1fr) var(--carousel-control-size);
    align-items: center;
    gap: 18px;
    width: 100%;
    margin-top: 36px;
}

.services-carousel,
.testimonials-carousel {
    overflow: hidden;
    min-width: 0;
    padding: 28px 0;
}

.carousel-track {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    width: max-content;
    padding: 0 calc(50% - min(225px, 32vw));
    transition: transform 560ms cubic-bezier(.22, .8, .25, 1);
    will-change: transform;
}

.carousel-track .service-card,
.carousel-track .testimonial-card {
    flex: 0 0 min(350px, 52vw);
    opacity: .42;
    filter: blur(1.5px);
    transform: scale(.82);
    transform-origin: center;
    transition: transform 560ms cubic-bezier(.22, .8, .25, 1), opacity 400ms ease, filter 400ms ease;
}

.carousel-track .service-card.active,
.carousel-track .testimonial-card.active {
    opacity: 1;
    filter: none;
    transform: scale(1);
    z-index: 1;
}

.carousel-track .service-card.active {
    flex-basis: min(450px, 66vw);
}

.carousel-track .testimonial-card.active {
    flex-basis: min(400px, 62vw);
}

.carousel-button {
    display: grid;
    place-items: center;
    width: var(--carousel-control-size);
    height: var(--carousel-control-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #00112c;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 17, 44, .18);
    transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.carousel-button:hover:not(:disabled) {
    background: #0b79ad;
    transform: scale(1.08);
}

.carousel-button:focus-visible,
.carousel-indicator:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

.carousel-button:disabled {
    cursor: default;
    opacity: .35;
}

.carousel-button svg {
    width: 23px;
    height: 23px;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
}

.carousel-indicator {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.carousel-indicator.active {
    background: #00112c;
    transform: scale(1.35);
}

.carousel-indicators:empty {
    display: none;
}

@media (max-width: 700px) {
    .carousel-container {
        --carousel-control-size: 40px;
        gap: 8px;
    }

    .carousel-track {
        gap: 12px;
        padding-inline: calc(50% - min(155px, 38vw));
    }

    .carousel-track .service-card,
    .carousel-track .testimonial-card {
        flex-basis: min(250px, 72vw);
    }

    .carousel-track .service-card.active,
    .carousel-track .testimonial-card.active {
        flex-basis: min(310px, 82vw);
    }
}