section.menu{
    padding: 2em 0 2em 0;
    background: var(--m);
}
section.menu li{
    display: inline-block;
}
section.menu li:not(:last-child)::after{
    content: "|";
    padding: 0 1em 0 1em;
    color: var(--mc);
}
section.menu li a{
    display: inline-block;
    padding: 1em 0 1em 0;
    color: var(--mc);
}



section.produtos{
    padding: 2em 0 2em 0;
    background: url("../imagens/bg-escuro.png") left top no-repeat;
    background-size: cover;
}
section.produtos .produto{
    display: block;
    position: relative;
    width: calc(33.3% - var(--e));
}
section.produtos .produto:hover{
    filter: brightness(107%);
}
section.produtos .produto img{
    width: 100%;
    border-radius: 25px;
}
section.produtos .produto h1{
    position: absolute;
    width: 60%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 50%;
    padding: 1em;
    font-weight: bold;
    font-size: 1.4em;
}
section.produtos .produto .info{
    position: absolute;
    top: 1em;
    left: 1em;
    width: 16px;
    height: 16px;
    background: url("../imagens/icone-informacao.svg") center center no-repeat;
    background-size: cover;
    cursor: pointer;
}
section.produtos .produto .info .texto{
    display: none;
    position: absolute;
    width: 250px;
    top: 1em;
    left: 1em;
    padding: 0.5em;
    background: #fff;
    border: 1px solid var(--p);
    border-radius: 5px;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
}
section.produtos .produto .info .texto span{
    display: inline-block;
    font-size: 0.8em;
    line-height: 1.2em;
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
    section.produtos .produto h1{
        padding: 0.5em;
        font-size: 1.1em;
    }
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    section.produtos .produto{
        width: calc(50% - var(--e));
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
    section.produtos .produto{
        width: 100%;
    }
    section.produtos .produto h1{
        padding: 0.5em;
        font-size: 1.3em;
    }
}



section.contato{
    padding: 2em 0 2em 0;
}
section.contato .flex{
    align-items: stretch;
}
section.contato .opcao{
    display: block;
    position: relative;
    width: calc(33.3% - var(--e));
}
section.contato .opcao:hover{
    filter: brightness(107%);
}
section.contato .opcao img{
    width: 100%;
    border-radius: 25px;
}
section.contato .opcao h2{
    position: absolute;
    width: 65%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 50%;
    padding: 1em;
    color: #fff;
    font-size: 1.4em;
}
section.contato .opcao h2 b{
    color: #fff;
}
section.contato .desabilitado{
    cursor: default;
}
section.contato .desabilitado img{
    filter: grayscale(1);
}
section.contato .desabilitado h2 span{
    display: inline-block;
    font-size: 13px;
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
    section.contato .opcao h2{
        padding: 0.5em;
        font-size: 1.1em;
    }
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    section.contato .opcao h2{
        padding: 0.4em;
        font-size: 0.7em;
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
    section.contato .opcao{
        width: 100%;
    }
    section.contato .opcao h2{
        padding: 0.6em;
        font-size: 1.2em;
    }
}



section.orcamento{
    padding: 2em 0 2em 0;
    background: url("../imagens/bg-verde.png") left top no-repeat;
    background-size: cover;
}
section.orcamento .flex{
    align-items: flex-start;
}
section.orcamento .banner{
    width: calc(30% - var(--e));
}
section.orcamento .banner img{
    width: 100%;
    border-radius: 5px;
}
section.orcamento .formulario{
    width: calc(70% - var(--e));
    padding: 2em;
    margin: 0 auto;
    background: #fff;
    border-radius: 5px;
}
section.orcamento .banner-mobile{
    display: none;
    width: 100%;
}
section.orcamento .banner-mobile img{
    width: 100%;
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    section.orcamento .banner{
        display: none;
    }
    section.orcamento .formulario{
        width: 100%;
        padding: 2em;
    }
    section.orcamento .banner-mobile{
        display: block;
    }
}



section.catalogos{
    padding: 2em 0 2em 0;
    background: url("../imagens/bg-claro.png") left top no-repeat;
    background-size: cover;
}
section.catalogos .item{
    width: calc(33.3% - var(--e));
    padding: 2em;
    color: var(--sc);
    font-weight: 800;
    text-align: center;
    background: var(--s);
    border: 4px solid  #27622d;
    border-radius: 20px;
}
section.catalogos .item:hover{
    text-decoration: none;
    background: var(--sh);
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    section.catalogos .item{
        width: 100%;
    }
}



section.sobre{
    padding: 2em 0 2em 0;
}
section.sobre .flex{
    align-items: flex-start;
}
section.sobre .texto{
    width: calc(50% - var(--e));
}
section.sobre .imagem{
    width: calc(50% - var(--e));
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    section.sobre .texto{
        width: 100%;
    }
    section.sobre .imagem{
        width: 100%;
        text-align: center;
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
    section.sobre .texto{
        text-align: center;
    }
}



section.verde{
    padding: 2em 0 2em 0;
    background: #162526;
}
section.verde .links{

}
section.verde .redes{
    color: var(--sc);
    text-align: center;
}
section.verde .links li{
    display: inline-block;
}
section.verde .links li:not(:last-child)::after{
    content: "|";
    padding: 0 1em 0 1em;
    color: var(--sc);
}
section.verde .links li a{
    display: inline-block;
    padding: 1em 0 1em 0;
    color: var(--sc);
}
section.verde .redes a{
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 10px 5px 0 5px;
    text-align: center;
    background: var(--sc);
    border-radius: 100px;
}
section.verde .redes a img{
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-top: -2px;
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    section.verde .links,
    section.verde .redes{
        width: 100%;
        text-align: center;
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
    section.verde .links li{
        display: block;
    }
    section.verde .links li:not(:last-child)::after{
        display: none;
    }
}