/* cliente 3: sem personagens, logo centralizado, maior e mais acima */
body {
    /* o grafico so existe nas laterais, entao em vez de uma imagem unica esticada ate cobrir a tela
       usamos as duas faixas repetidas na vertical. os arquivos tem 240px de largura e sao exibidos
       com 120px: a arte e sempre reduzida, nunca ampliada, e ainda sobra resolucao em tela retina.
       cada faixa ja vem espelhada na vertical, entao a repeticao fecha sem emenda - era o corte no
       meio do grafismo que parecia distorcao. a cor fica embaixo, para o meio e para o caso de a
       imagem nao carregar */
    background-color: #ce0f2e;
    background-image: url("/assets/images/login-bg-c03-left.png"), url("/assets/images/login-bg-c03-right.png");
    background-repeat: repeat-y, repeat-y;
    background-position: left top, right top;
    background-size: 120px auto, 120px auto;
}

header {
    background-image: none;
}

    header .flex-container .programLogo {
        width: 15rem;
        height: auto;
    }

    /* sem a imagem de fundo, o slogan nao precisa mais subir sobre o cabecalho */
    header p {
        margin-top: 0;
    }

/* altura unica para as oito logos do rodape: os arquivos vem com alturas diferentes, de 44px a 47px,
   e era por isso que algumas apareciam maiores e fora da linha das outras. no celular o bloco tem
   19rem e com o tamanho original a ultima logo saia cortada */
.customer-logos .footer-logo {
    height: 2.375rem;
    width: auto;
}

.customer-logos .footer-logo-row {
    align-items: flex-end;
}

    /* mediservice e meudoutor sao os unicos dois arquivos sem o guarda-chuva, e o desenho dentro
       deles nasce uns 5px mais baixo que o das outras seis. alinhar pela caixa nao resolve, porque a
       caixa ja esta alinhada: o desencontro e interno ao arquivo, entao sobe na mao */
    .customer-logos .footer-logo[src*="-fg"],
    .customer-logos .footer-logo[src*="-fh"] {
        margin-bottom: 0.3125rem;
    }

@media only screen and (min-width: 1024px) {
    /* a centralizacao vertical em si esta no Login.css, para valer em todos os clientes. aqui fica so
       a distancia entre a logo e o slogan */
    header {
        padding-bottom: 2.5rem;
    }

    /* o padrao reserva 4.5rem nas laterais para os personagens, que aqui nao existem */
    header .flex-container {
        padding: 0.75rem 0 0;
    }

        /* a logo e enviada pelo cliente e costuma vir com margem transparente em cima e embaixo, que
           entra na altura do cabecalho e empurra o resto da tela para baixo. o teto em vh faz ela
           encolher junto quando a janela e baixa, para a pagina caber sem rolagem */
        header .flex-container .programLogo {
            width: 22rem;
            height: auto;
            max-height: min(22rem, 20vh);
        }

    /* o bloco do formulario, onde fica o slogan, tinha 1.75rem de padding no topo vindo do .container */
    .form-showcase {
        padding-top: 0;
    }

    .showcase .sup-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.4rem;
    }

    /* respiro antes do cartao de login. fica aqui, e nao no slogan, porque quando o slogan ja vem
       desenhado na logo do cliente o .sup-title nasce vazio e a margem dele nao seguraria o espaco */
    .form-showcase_form {
        margin-top: 1.25rem;
    }

    /* as oito logos vem em dois blocos de quatro: o espaco entre os blocos e o espaco dentro de cada
       bloco precisam ser o mesmo, senao a emenda do meio fica mais larga que o resto */
    .customer-logos .container {
        padding: 0.75rem 0 1rem;
        gap: 2.25rem;
    }

    .customer-logos .footer-logo-row {
        justify-content: center;
        align-items: flex-end;
        gap: 2.25rem;
    }

        /* no desktop sobra largura, entao as logos podem ficar no tamanho original */
        .customer-logos .footer-logo {
            height: 2.9375rem;
        }

    footer .container {
        padding: 0.5rem 0;
        padding-bottom: 0.75rem !important;
    }
}