/* =====================================================
   ARQUIVO: PAGINAS/QUALIDADE.CSS
   CSS NUTRIBEM
===================================================== */

/* CSS específico da página Qualidade será adicionado quando a página for criada. */
/* =====================================================
   QUALIDADE - SOBRE
===================================================== */

.qualidade-sobre-background{

    min-height:600px;

    display:flex;

    align-items:center;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.80),
            rgba(255,255,255,.20)
        ),
        url("../../assets/Institucional/qualidade.jpg");

    background-size:cover;

    background-position:center;

}

.qualidade-sobre-texto{

    max-width:580px;

    padding:100px 0;

}

.qualidade-sobre-texto h2{

    margin:20px 0;

    font-size:clamp(36px,4vw,52px);

}

.qualidade-sobre-texto p{

    margin-bottom:20px;

    line-height:1.8;

}


/* =====================================================
   PILARES
===================================================== */

.qualidade-pilares{

    padding:110px 0;

    background:#fafafa;

}

.pilares-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:60px;

}

.pilar-card{

    padding:40px 30px;

    text-align:center;

    background:#fff;

    border-radius:12px;

    transition:.3s;

}

.pilar-card:hover{

    transform:translateY(-8px);

}

.pilar-icone{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--vermelho-escuro);

    color:#fff;

    font-size:26px;

}


/* =====================================================
   PROCESSO
===================================================== */

.processo{

    padding:110px 0;

}

.processo-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:20px;

    margin-top:60px;

}

.etapa{

    text-align:center;

}

.etapa span{

    width:65px;

    height:65px;

    margin:auto;

    margin-bottom:18px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--amarelo-principal);

    color:#000;

    font-size:24px;

    font-weight:bold;

}

.etapa h3{

    font-size:17px;

}


/* =====================================================
   COMPROMISSO
===================================================== */

.compromisso-cliente{

    padding:110px 0;

    background:var(--cinza-claro);

}

.compromisso-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.compromisso-grid h2{

    margin:20px 0;

    font-size:46px;

}

.compromisso-lista{

    display:grid;

    gap:20px;

}

.compromisso-lista div{

    padding:25px;

    background:#fff;

    border-radius:10px;

    font-weight:600;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:900px){

    .pilares-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .processo-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .compromisso-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:700px){

    .pilares-grid{

        grid-template-columns:1fr;

    }

    .processo-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:500px){

    .processo-grid{

        grid-template-columns:1fr;

    }

}