.component.mini-topicos {padding: 81px 0 68px; background-color: var(--branco);}

section.texto {background-color: var(--branco);}
section.texto .conteudo .titulo {font: 500 41.33px/1.224 garet; color: var(--cinza3); text-align: center; padding: 0 0 78px; max-width: 97%;}


section.conheca {background-color: var(--preto1);}
section.conheca .conteudo {display: flex; flex-direction: column; padding: 92px 0 102px; gap: 85px;}
section.conheca .conteudo .cima {display: flex; justify-content: space-between; gap: 20px;}
section.conheca .conteudo .cima .img {max-width: 512px; width: 100%; border-radius: 10px; overflow: hidden; display: flex;}
section.conheca .conteudo .cima img {width: 100%; height: 100%; object-fit: cover; object-position: 23% 50%;}
section.conheca .conteudo .cima .textos {max-width: 592px; width: 100%; display: flex; flex-direction: column;}
section.conheca .conteudo .cima .textos .conheca-texto {font: 300 20px/24.57px garet; color: var(--bege2); letter-spacing: 18%;}
section.conheca .conteudo .cima .textos .titulo {font: 500 29.33px/1.224 garet; color: var(--branco); margin: 4px 0 28px;}
section.conheca .conteudo .cima .textos .texto {font: 400 15px/2.082 montserrat; color: var(--branco); hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; margin: 0 0 10px;}
section.conheca .conteudo .cima .textos .component.saiba-mais {margin: auto 0 0;}

section.conheca .conteudo .baixo {display: flex; justify-content: space-between; gap: 20px;}
section.conheca .conteudo .baixo .img {max-width: 587px; max-height: 332px; width: 100%; height: 100%; display: flex; overflow: hidden; border-radius: 10px;}
section.conheca .conteudo .baixo img {width: 100%; height: 100%; object-fit: cover;}
section.conheca .conteudo .baixo .textos {max-width: 520px; width: 100%; display: flex; flex-direction: column;}
section.conheca .conteudo .baixo .textos .titulo {font: 700 26.26px/1.371 garet; color: var(--branco);}
section.conheca .conteudo .baixo .textos .texto {font: 400 15px/2.082 montserrat; color: var(--branco); margin: 31px 0 0;}
section.conheca .conteudo .baixo .textos .component.whatsapp {margin: auto 0 0 ;}

section.areas {background-color: var(--preto1);}
section.areas .conteudo {display: flex; flex-direction: column; padding: 93px 0 110px; gap: 45px;}
section.areas .conteudo .cima {display: flex; flex-direction: column; align-items: center;}
section.areas .conteudo .cima .texto-areas {font: 300 20px/24.57px garet; color: var(--marrom1); letter-spacing: 18%;}
section.areas .conteudo .cima .pergunta {font: 500 41.33px/1.224 garet; color: var(--branco); text-align: center;}
section.areas .conteudo .areas {display: flex; flex-wrap: wrap; gap: 37px;}
section.areas .conteudo .areas .area {width: 100%; transition: .3s; padding: 14px; flex: 0 0 calc((100% - 2 * 37px) / 3); border: 3px solid var(--cinza1); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1;}
section.areas .conteudo .areas .area .icon {margin: 0 0 20px;}
section.areas .conteudo .areas .area .nome {font: 500 23.5px/1.2 garet; transition: .3s; color: var(--branco); text-align: center; max-width: 260px; width: 100%; margin: 0 0 27px;}
section.areas .conteudo .areas .area:hover {transform: scale(1.02);}
section.areas .conteudo .areas .area:hover .nome {color: var(--bege1);}

@media (max-width: 1100px) {
    section.areas .conteudo .areas {justify-content: center; width: 90%; margin: 0 auto;}
    section.areas .conteudo .areas .area {flex: 0 0 calc((100% - 37px) / 2); max-width: 300px;}
}

@media (max-width: 990px) {
    .component.mini-topicos {padding: 25px 0;}
    section.texto .conteudo .titulo {font-size: clamp(24px, 4.7vw, 28px); padding: 0 0 25px;}

    section.conheca .conteudo {gap: 25px; padding: 30px 0;}
    section.conheca .conteudo .cima {flex-direction: column;}
    section.conheca .conteudo .cima .textos {max-width: unset;}
    section.conheca .conteudo .cima .img {max-width: unset; align-items: center; max-height: 420px;}
    section.conheca .conteudo .cima .textos .titulo {text-align: justify; font-size: clamp(20px, 4.7vw, 28px); hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;}
    section.conheca .conteudo .cima .textos .conheca-texto {text-align: center; font-size: 17px;}
    section.conheca .conteudo .baixo {flex-direction: column-reverse;}
    section.conheca .conteudo .baixo .textos {max-width: unset;}
    section.conheca .conteudo .baixo .img {max-width: unset; align-items: center; max-height: 420px;}
    section.conheca .conteudo .baixo .textos .titulo {text-align: center; font-size: clamp(20px, 4.7vw, 28px);}
    section.conheca .conteudo .baixo .textos .texto {margin: 5px 0 15px;}

    section.conheca .conteudo .baixo .textos .component.whatsapp,
    section.conheca .conteudo .cima .textos .component.saiba-mais {margin: 0 auto;}

    section.areas .conteudo {padding: 25px 0; gap: 15px;}
    section.areas .conteudo .cima .texto-areas {font-size: 18px;}
    section.areas .conteudo .cima .pergunta {font-size: clamp(22px, 4.7vw, 28px);}
    section.areas .conteudo .areas {gap: 20px;}
    section.areas .conteudo .areas .area .nome {font-size: 17px;}
    section.areas .conteudo .areas .area .icon svg {width: 60px; height: 60px;}
}

@media (max-width: 600px) {
    section.areas .conteudo .areas .area {flex: 0 0 100%; max-width: 250px;}
}