/* ==========================================================================
   Faixa de parceiros — logótipos individuais em movimento contínuo
   (da direita para a esquerda, em loop infinito)
   --------------------------------------------------------------------------
   Estrutura: .parceiros (janela, overflow hidden)
              └── .parceiros__pista (4 cópias do conjunto, animada -50%)
                  └── .parceiros__logo (cada logótipo, um ficheiro por marca)

   Nada é clicável, seleccionável ou arrastável.
   ========================================================================== */

.parceiros-seccao {
    background-color: #ffffff;
}

.parceiros {
    /* Ajuste rápido: altere apenas estas variáveis */
    --parceiros-altura: 60px;        /* altura uniforme dos logótipos */
    --parceiros-largura-max: 180px;  /* trava logótipos muito horizontais */
    --parceiros-espaco: 70px;        /* espaço entre logótipos */
    --parceiros-velocidade: 45s;     /* maior = mais lento */
    --parceiros-fundo: #ffffff;      /* igual ao fundo da secção */

    position: relative;
    width: 100%;
    overflow: hidden;

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;     /* iOS: sem menu "Guardar imagem" */
}

/* Esbatimento nas extremidades: os logótipos entram e saem suavemente */
.parceiros::before,
.parceiros::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}

.parceiros::before {
    left: 0;
    background: linear-gradient(to right, var(--parceiros-fundo), rgba(255, 255, 255, 0));
}

.parceiros::after {
    right: 0;
    background: linear-gradient(to left, var(--parceiros-fundo), rgba(255, 255, 255, 0));
}

.parceiros__pista {
    display: flex;
    align-items: center;
    width: max-content;
    animation: parceiros-deslizar var(--parceiros-velocidade) linear infinite;
    will-change: transform;
}

.parceiros__logo {
    display: block;
    flex: 0 0 auto;                       /* nunca encolhe dentro do flex */
    height: var(--parceiros-altura);
    width: auto;
    max-width: var(--parceiros-largura-max);
    object-fit: contain;                  /* respeita a proporção original */
    margin-right: var(--parceiros-espaco);

    /* Bloqueios: sem clique, sem arrastar, sem selecção */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;

    /* Logótipos a cores. Para os uniformizar a cinzento, descomente:
       filter: grayscale(100%);
       opacity: .75;
    */
}

@keyframes parceiros-deslizar {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Ecrãs pequenos: logótipos menores, faixa um pouco mais rápida */
@media (max-width: 768px) {
    .parceiros {
        --parceiros-altura: 42px;
        --parceiros-largura-max: 130px;
        --parceiros-espaco: 40px;
        --parceiros-velocidade: 32s;
    }

    .parceiros::before,
    .parceiros::after {
        width: 45px;
    }
}

/* Acessibilidade: quem pediu menos animação no sistema vê a faixa parada */
@media (prefers-reduced-motion: reduce) {
    .parceiros__pista {
        animation: none;
        transform: none;
    }
}