/* -------------------- DEFININDO AS VARIÁVEIS  ------------------ */
:root {
    --branco--fundo: #f2f3f3;
    --fonte--principal: 'Alegreya Sans SC', sans-serif;
    --azul--principal: #00263D;
    --amarelo--principal: #E9AB01;
    --cinza--claro: #CDD1D2;
    --azul--texto: #04436E;
}

/* VISUALIZAÇÃO TELEFONE */
@media screen and (max-width: 490px){
    .banner_produtos {
        width: 100%;
    }
    .banner_produtos img{
        max-width: 100vw;
    }
    .produtos_chamada_um {
        color: var(--azul--texto);
        font-family: var(--fonte--principal);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3125rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem 2rem;
        display: flex;
        text-align: center;
    }
    .produtos_chamada_um span,
    .produtos_chamada_dois span{
        font-weight: 700;
    }
    .produtos_chamada_dois {
        color: var(--azul--texto);
        font-family: var(--fonte--principal);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3125rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem 2rem;
        display: flex;
        text-align: center;
    }

    /* LISTA DE PRODUTOS */
    .container_produtos {
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
        width: 100%;
    }
    .produto {
        display: flex;
        justify-content: center;
    }
    .produto img{
        width: 80%;
    }
    
}

/* VISUALIZAÇÃO DESKTOP */
@media only screen and (min-width: 1024px) {
    .banner_produtos {
        width: 100%;
    }
    .banner_produtos img{
        width: 100%;
    }
    .produtos_chamada_um {
        color: var(--azul--texto);
        font-family: var(--fonte--principal);
        font-size: 1.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4rem;
        display: flex;
        text-align: center;
    }
    .produtos_chamada_um span,
    .produtos_chamada_dois span{
        font-weight: 700;
    }
    .produtos_chamada_dois {
        color: var(--azul--texto);
        font-family: var(--fonte--principal);
        font-size: 1.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.5125rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem 6rem 2rem 6rem;
        display: flex;
        text-align: center;
        background-color: var(--amarelo--principal);
    }
    .container_produtos {
        
        padding-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .produto {
        max-width: 20%;
    }
    .produto img{
        width: 100%;
    }
    /* CONFIGURANDO MODAL PARA ABRIR AS IMAGENS */
    .produto {
        cursor: pointer;
    }
    
    .fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .fullscreen img {
        max-width: 100%;
        max-height: 100%;
    }
}