/* ============================================================
   Elementor Logo Carousel Infinito — Estilos
   ============================================================ */

/* ── Contenedor externo ── */
.elc-carousel-outer {
    width: 100%;
    overflow: hidden;
}

/* ── Wrapper (fondo, padding, fades) ── */
.elc-carousel-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* ── La pista que se mueve ── */
.elc-track {
    display: flex;
    align-items: center;
    width: max-content;          /* Ancho exacto del contenido */
    animation-name: elc-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* ── Animación principal de desplazamiento ── */
@keyframes elc-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
    /* Al llegar al 50% hemos recorrido exactamente una copia,
       con lo que el loop es invisible para el usuario */
}

/* ── Cada logo ── */
.elc-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding horizontal controlado por Elementor (responsive) */
}

.elc-logo-item img {
    display: block;
    max-width: none;       /* Evita que WordPress recorte la imagen */
    object-fit: contain;
    transition: opacity 0.35s ease, filter 0.35s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Escala de grises ── */
.elc-grayscale .elc-logo-item img {
    filter: grayscale(100%);
}

.elc-grayscale.elc-grayscale-hover .elc-logo-item:hover img {
    filter: grayscale(0%);
}

/* ── Pausa al hover sobre el wrapper ── */
.elc-pause-hover:hover .elc-track {
    animation-play-state: paused;
}

/* ── Accesibilidad: respetar preferencias de movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
    .elc-track {
        animation-play-state: paused;
    }
}

/* ── Responsive: reducir gap en móvil si no se usa la opción de Elementor ── */
@media (max-width: 767px) {
    .elc-logo-item img {
        /* El alto lo controla Elementor (responsive slider),
           aquí garantizamos que no se desborde */
        max-height: 50px;
    }
}