.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 40px 0;
    /* Removemos o fundo branco daqui para ficar transparente ou usar o do container */
    background: transparent;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 180s linear infinite;
}

.marquee-item {
    flex: 0 0 auto;

    /* 1. FORMATO QUADRADO (Square) */
    width: 180px;
    /* Largura fixa */
    height: 180px;
    /* Altura igual à largura */

    /* 2. VISUAL DE CARD */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    /* Arredondamento um pouco maior fica mais moderno */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* 3. ESPAÇAMENTO */
    margin: 0 15px;

    /* 4. CENTRALIZAÇÃO */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    /* Respiro interno para a logo */
}

.marquee-item img {
    /* Limita o tamanho máximo da imagem para ela não estourar o quadrado */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    object-fit: contain;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    opacity: 0.85;
}

/* Efeito Hover: O Card "flutua" */
.marquee-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: #b0b0b0;
}

.marquee-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
    /* Leve zoom na logo */
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}