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

/* =====================================================
   SEÇÃO SOBRE A NUTRIBEM
===================================================== */

.sobre {

    background-color: var(--branco);

}


/* =====================================================
IMAGEM INSTITUCIONAL
===================================================== */

    .sobre-imagem {

        width: 100%;

        overflow: hidden;

    }


    .sobre-imagem img {

        display: block;

        width: 100%;
        height: auto;

    }

    .sobre-conteudo {
        background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 156, 0.98) 38%,
            rgba(255, 224, 86, 0.55) 65%,
            rgba(94, 82, 29, 0) 100%
        ),

        url("../../assets/Institucional/empresa.jpg");
        background-size: cover;
        padding-top: 90px;
        padding-bottom: 100px;

    }


    .sobre-texto {

        max-width: 700px;

    }

    .sobre h2 {

        margin-bottom: 25px;

        color: var(--preto);

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

        font-weight: 800;

        line-height: 1.15;

    }


    .sobre p {

        margin-bottom: 18px;

        color: var(--cinza-escuro);

        font-size: 17px;

        line-height: 1.7;

    }


    .sobre .botao {

        margin-top: 15px;

    }
    @media (max-width: 600px) {


        .sobre-conteudo {

            padding-top: 60px;
            padding-bottom: 70px;

        }


        .sobre h2 {

            font-size: 36px;

        }


        .sobre p {

            font-size: 16px;

        }

    }

/* =====================================================
   DIFERENCIAIS
===================================================== */

.diferenciais {

    padding: 110px 0;

    background-color: var(--branco);

}


.diferenciais-grid {

    display: grid;

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

    gap: 25px;

}


/* =====================================================
   CARD DE DIFERENCIAL
===================================================== */

.diferencial-card {

    padding: 35px 25px;

    text-align: center;

    border: 1px solid #EEEEEE;

    border-radius: 12px;

    background-color: var(--branco);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.diferencial-card:hover {

    transform: translateY(-6px);

    border-color: var(--vermelho-principal);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

}


/* =====================================================
   ÍCONE
===================================================== */

.diferencial-icone {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    border-radius: 50%;

    color: var(--vermelho-escuro);

    background-color: #FFF1F1;

}


.diferencial-icone span {

    font-size: 30px;

    font-weight: 800;

}


/* =====================================================
   TEXTO
===================================================== */

.diferencial-card h3 {

    margin-bottom: 12px;

    color: var(--preto);

    font-size: 20px;

}


.diferencial-card p {

    color: var(--cinza-escuro);

    font-size: 15px;

    line-height: 1.6;

}




/* =====================================================
   ELEMENTO DECORATIVO
===================================================== */

.chamada-contato::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -250px;

    border-radius: 50%;

    background-color: var(--amarelo-principal);

    opacity: 0.9;

    z-index: 1;

}


.chamada-conteudo {

    position: relative;

    z-index: 2;

}


/* =====================================================
   RESPONSIVIDADE - DIFERENCIAIS
===================================================== */

@media (max-width: 1100px) {


    .diferenciais-grid {

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

    }


}


@media (max-width: 700px) {


    .diferenciais {

        padding: 80px 0;

    }


    .diferenciais-grid {

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

        gap: 15px;

    }


    .diferencial-card {

        padding: 25px 18px;

    }


}


@media (max-width: 500px) {


    .diferenciais-grid {

        grid-template-columns: 1fr;

    }


}


/* =====================================================
   RESPONSIVIDADE - CHAMADA PARA CONTATO
===================================================== */

@media (max-width: 700px) {


    .chamada-contato {

        padding: 65px 0;

    }


    .chamada-conteudo {

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

    }


    .chamada-contato h2 {

        font-size: 36px;

    }


    .chamada-contato p {

        font-size: 16px;

    }


    .chamada-acao {

        width: 100%;

    }


    .chamada-acao .botao {

        width: 100%;

    }


    .chamada-contato::after {

        width: 300px;
        height: 300px;

        right: -180px;
        bottom: -200px;

    }

}