/**
 * CCESDN Logo Carousel – CSS puro, sin dependencia de JS
 */

.cclc-wrap {
    width: 100%;
    padding: 36px 0;
    box-sizing: border-box;
}

.cclc-head {
    text-align: center;
    margin-bottom: 24px;
}

.cclc-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a2e;
    font-family: 'Montserrat', sans-serif;
}

/* Viewport: oculta lo que sale del área y aplica fade */
.cclc-outer {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}

/* Track: fila infinita con 2 sets, animación mueve exactamente -50% */
.cclc-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 56px;
    width: max-content;
    animation: cclc-marquee 20s linear infinite;
    will-change: transform;
}

/* Pausa al hover */
.cclc-track.cclc-pause:hover {
    animation-play-state: paused;
}

@keyframes cclc-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Items */
.cclc-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}

.cclc-item img {
    display: block !important;
    width: auto !important;
    height: var(--cclc-h, 60px) !important;
    max-width: 200px !important;
    max-height: var(--cclc-h, 60px) !important;
    min-height: unset !important;
    object-fit: contain !important;
    transition: opacity 0.25s;
    flex-shrink: 0;
}

a.cclc-item:hover img {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .cclc-track { gap: 36px; }
    .cclc-item img {
        max-width: 130px !important;
    }
}

@media (max-width: 480px) {
    .cclc-track { gap: 24px; }
    .cclc-item img {
        max-width: 90px !important;
    }
}