/* ========================================================= */
/* CLIENTES — A (color + reflector + scale) + B (spotlight desktop) */
/* ========================================================= */

.clientes-marquee-item{
    cursor:default;
    user-select:none;
    -webkit-user-select:none;
    overflow:hidden;
    z-index:1;
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.clientes-marquee-item:hover,
.clientes-marquee-item.is-spotlit{
    z-index:2;
    border-color:rgba(255,107,0,0.4);
    box-shadow:
        0 14px 36px rgba(255,107,0,0.16),
        0 0 0 1px rgba(255,255,255,0.04);
    transform:translateY(-5px) scale(1.13);
}

/* A: reflector CSS discreto (barra de luz al hover) */
.clientes-marquee-item::before{
    background:linear-gradient(
        115deg,
        transparent 0%,
        transparent 38%,
        rgba(255,255,255,0.14) 50%,
        transparent 62%,
        transparent 100%
    );
    background-size:220% 100%;
    background-position:120% 0;
    opacity:0;
    transition:opacity 0.35s ease, background-position 0.7s ease;
}

.clientes-marquee-item:hover::before,
.clientes-marquee-item.is-spotlit::before{
    opacity:1;
    background-position:-20% 0;
}

/* Sin brillo continuo: solo al interactuar */
.clientes-marquee-item__shine{
    animation:none;
    opacity:0;
}

.clientes-marquee-item:hover .clientes-marquee-item__shine,
.clientes-marquee-item.is-spotlit .clientes-marquee-item__shine{
    opacity:0.35;
    background:linear-gradient(
        105deg,
        transparent 0%,
        transparent 42%,
        rgba(255,255,255,0.12) 50%,
        transparent 58%,
        transparent 100%
    );
    background-size:200% 100%;
    animation:clientesShineHover 0.85s ease-out 1;
}

@keyframes clientesShineHover{
    0%{background-position:100% 0;}
    100%{background-position:-100% 0;}
}

/* A: color original siempre */
.clientes-marquee-item img{
    filter:none;
    opacity:1;
    transition:transform 0.35s ease, filter 0.35s ease;
    pointer-events:none;
}

.clientes-marquee-item:hover img,
.clientes-marquee-item.is-spotlit img{
    filter:brightness(1.04) contrast(1.02);
    transform:scale(1.04);
}

/* B: spotlight que sigue el mouse (solo desktop vía JS) */
.clientes-marquee-item__spotlight{
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    z-index:2;
    opacity:0;
    background:radial-gradient(
        circle 72px at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255,255,255,0.2) 0%,
        rgba(255,107,0,0.1) 32%,
        transparent 68%
    );
    mix-blend-mode:soft-light;
    transition:opacity 0.22s ease;
}

.clientes-marquee-item.is-spotlit .clientes-marquee-item__spotlight{
    opacity:1;
}

/* Pause del carrusel: se mantiene en styles.css (.clientes-marquee-viewport:hover) */

@media (max-width:991.98px){

    .clientes-marquee-item__spotlight{
        display:none!important;
    }

    .clientes-marquee-item:hover,
    .clientes-marquee-item.is-spotlit{
        transform:translateY(-2px) scale(1.06);
    }

    .clientes-marquee-item:hover img,
    .clientes-marquee-item.is-spotlit img{
        transform:none;
    }

}

@media (prefers-reduced-motion: reduce){

    .clientes-marquee-item,
    .clientes-marquee-item img,
    .clientes-marquee-item::before,
    .clientes-marquee-item__spotlight{
        transition:none!important;
        animation:none!important;
    }

    .clientes-marquee-item:hover,
    .clientes-marquee-item.is-spotlit{
        transform:none;
    }

    .clientes-marquee-item__spotlight{
        display:none!important;
    }

}