/* Seção "Principais clientes" — usada na home e na página da empresa.
   Antes as logos apareciam como uma tira sem título perto do rodapé: quem
   chegava ali não sabia se eram clientes, parceiros ou certificadoras. */

.secao-clientes {
    padding: 60px 0;
    background: #f7f9fc;
}

    /* na página da empresa a seção já está dentro de um bloco com fundo e
       espaçamento próprios; aqui ela entra sem repetir nenhum dos dois */
    .secao-clientes.secao-clientes-embutida {
        padding: 10px 0 0;
        background: transparent;
    }

    .secao-clientes .cabecalho {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 38px;
    }

    .secao-clientes .rotulo {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #337ab7;
        margin-bottom: 10px;
    }

    .secao-clientes h2 {
        font-size: 26px;
        font-weight: 700;
        color: #1b2a4a;
        margin: 0 0 12px;
        text-transform: uppercase;
    }

    .secao-clientes .apoio {
        font-size: 15px;
        line-height: 1.7;
        color: #5a6270;
        margin: 0;
    }

/* as logos vêm em 400x140 com proporções de marca diferentes; a caixa fixa
   com object-fit deixa todas com o mesmo peso visual, sem distorcer nenhuma */
.grade-clientes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
    align-items: center;
}

/* Os arquivos das logos são quadrados (125x125). Num card deitado o object-fit
   limitava pela altura: a logo renderizava a 66px e sobravam 73px de largura
   vazios dos dois lados. Card quase quadrado faz a imagem sair no tamanho
   natural dela, sem ampliar (o que só borraria) e sem desperdício. */
.cliente-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 8px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

    .cliente-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* Azul da casa em repouso, cor da marca ao passar o mouse: a grade lê como
           um conjunto curado, sem as logos coloridas competindo entre si, e ainda
           puxa a identidade da Grofe em vez do cinza neutro.
           Como se chega ao azul: dessatura, tinge de sépia (que dá um tom
           amarelado) e gira a matiz até o azul. O brightness acima de 1 é o que
           mantém o fundo branco dos JPG realmente branco - sem ele sobra um
           retângulo acinzentado atrás de cada logo dentro do card. */
        filter: grayscale(1) sepia(1) hue-rotate(174deg) saturate(1.8) brightness(1.06);
        opacity: .8;
        transition: filter .25s ease, opacity .25s ease;
    }

    /* sobe e cresce de leve junto com a volta da cor. O scale fica em 1.04 de
       proposito: o card tem 175px e o espaco entre eles é de 18px, entao ele
       cresce ~7px no total e nunca encosta no vizinho. E transform nao reflui
       layout, entao a grade inteira fica parada enquanto um card se destaca. */
    .cliente-logo:hover {
        border-color: #cbd8ea;
        box-shadow: 0 8px 20px rgba(27, 42, 74, .12);
        transform: translateY(-3px) scale(1.04);
        z-index: 1;
    }

        /* none, e nao grayscale(0): a propriedade filter substitui a lista inteira,
           entao um grayscale(0) deixaria o sepia e o hue-rotate ainda valendo e a
           logo nao voltaria a cor original */
        .cliente-logo:hover img {
            filter: none;
            opacity: 1;
        }

.secao-clientes .nota {
    text-align: center;
    margin-top: 30px;
    font-size: 13px;
    color: #8b93a1;
}

@media (max-width: 600px) {
    .secao-clientes {
        padding: 40px 0;
    }

        .secao-clientes h2 {
            font-size: 21px;
        }

    .grade-clientes {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }

    .cliente-logo {
        height: 120px;
        padding: 8px;
    }
}