.carousel-container {
    position: relative; /* Necesario para posicionar las flechas */
    width: 100%;

}

/* Posicionamiento de flechas */
.prev { left: -25px; }
.next { right: -25px; }

/* --- Viewport y Track --- */
.carousel-viewport {
    overflow: hidden;
    width: 100%;
    padding: 30px 0; 
    margin: -30px 0;
    
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}

.carousel-track {
    display: flex;
    gap: 32px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    align-items: flex-start; 
}

.service-card {
    background: var(--background2);

    flex: 0 0 calc(33.333% - 22px); 
    max-width: calc(33.333% - 22px);
    /* Límite máximo de 373px */
    max-width: min(calc(33.333% - 22px), 373px);
    
    /* Espacio para el efecto de agrandamiento (hover) */
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s;
    transition: z-index 0.3s; 
    z-index: 1;
}

.service-card:hover {
    /* 2. La tarjeta entera se "adelanta" para que la sombra no quede detrás de la vecina */
    z-index: 10;
}

.service-card img {
    height: 460px;
    width: 100%;      
    border-radius: 16px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease;
    will-change: transform;
}

.service-card img:hover {
    transform: scale(1.01); 
    box-shadow: 0 7px 15px rgba(0,0,0,0.2);
}


.service-card_content{
    padding: 0 .15rem; /*trampa*/
}
.service-card_content h6{
    margin: .7rem 0;
    font-weight: 600;
    color: var(--secondary);
}

.service-card_content p{
    font-family: var(--font-main);
    font-size: var(--fs-title2);
    color: var(--bodyText);
}


/* Responsividad */
@media (max-width: 990px) {
    .service-card {
        flex: 0 0 calc(50% - 16px);
        max-width: min(calc(50% - 16px), 373px);
    }
}
@media (max-width: 768px) {
    .service-card {
        flex: 0 0 100%;
        max-width: min(100%, 373px);
    }
    
    .prev { left: -25px; }
    .next { right: -25px; }
}