.sobre {padding: 86px 0 0;}
.sobre .gp-info {display: flex; justify-content: space-between; gap: 30px;}
.sobre .conteudo {display: flex; flex-direction: column; gap: 80px;}
.sobre .img img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px; object-position: center;}

.sobre .images {max-width: 570px; width: 100%; display: flex; flex-direction: column; justify-content: center; min-width: 425px; gap: 31px;}
.sobre .images .img {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.sobre .images img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
.sobre .images .img-main {width: 100%; height: 100%;}
.sobre .images .img-main img {width: 100%; height: 100%; aspect-ratio: 800 / 600;}
.sobre .images .thumbs {display: flex; gap: 31px;}
.sobre .images .thumbs .img img {aspect-ratio: 269 / 245;}

.sobre .gp-info .info {max-width: 536px; display: flex; flex-direction: column;}
.sobre .gp-info .texto {font: 400 15px / 2em var(--mont); color: var(--cinza); /* margin: 0 0 51px; */}
.sobre .gp-info .titulo {font: 400 clamp(24px,3.4vw,32px) / 1.26em var(--futura); color: var(--cinza); margin-bottom: 32px; display: flex; flex-direction: column;}
.sobre .gp-info .titulo span {font: 400 17.12px / 1.26em var(--mont); color: var(--vermelho); margin: 0 0 9px 2px; letter-spacing: 5.349px;}
.sobre .gp-info .titulo strong {font-weight: 700;}

.sobre .bot {display: flex; justify-content: space-between; gap: 30px;}
.sobre .bot .img {max-width: 570px; width: 100%; display: flex; flex-direction: column; justify-content: center; min-width: 425px; aspect-ratio: 570 / 421;}
.sobre .bot .img {display: flex; justify-content: center; align-items: center; width: 100%;}
.sobre .bot img {width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}

.sobre .bot .info {max-width: 539px;}
.sobre .bot .texto {font: 400 15px / 2em var(--mont); color: var(--cinza); hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto}
.sobre .bot .titulo {font: 400 clamp(24px,4vw,32.15px) / 1.26em var(--futura); color: var(--cinza); margin-bottom: 37px; display: flex; flex-direction: column;}
.sobre .bot .titulo span {font: 400 17.12px / 1.26em var(--mont); color: var(--vermelho); margin: 0 0 9px 2px;}
.sobre .bot .titulo strong {font-weight: 700;}

.sobre .bot .cards {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 30px; margin-top: 88px;}
.sobre .bot .card {border-radius: 20px; padding: 50px 44px 50px 44px; display: flex; gap: 24px; align-items: center;}
.sobre .bot .card .icone {min-width: 50px; height: 50px; max-width: min-content;}
.sobre .bot .card .icone svg {width: 100%; height: 100%;}
.sobre .bot .card .icone svg path {fill: var(--branco);}
.sobre .bot .card .titulo {font: 400 32.06px / 1.2em var(--futura); color: var(--branco); margin-bottom: 12px;}
.sobre .bot .card .texto {font: 400 15.02px / 2em var(--mont); color: var(--branco);}
.sobre .bot .card:nth-child(odd) {background: var(--azul);}
.sobre .bot .card:nth-child(even) {background: var(--vermelho);}

.sobre .btns {display: flex; flex-direction: row; gap: 15px; padding-top: 25px; margin-top: auto;}

#caracteristicas {padding: 77px 0 86px;}
#caracteristicas .cards {display: flex; justify-content: space-between;}
#caracteristicas .cards .card {display: flex; align-items: center; justify-content: flex-start; gap: 11px; }
#caracteristicas .cards .card .icone {min-width: 22px; height: 16px;}
#caracteristicas .cards .card .titulo {font: 500 clamp(12px,1.1vw,15px) / 1.49em var(--mont); color: var(--cinza);}


#cores {padding: 88px 0; background: var(--azul);}
#cores .titulo {font: 700 32.16px / 1.273em var(--futura); color: var(--branco); text-align: center; margin: 0 auto 54px; width: fit-content;;}
#cores .titulo .icone { position: absolute; transform: translate(-62%, -29%) rotate(-25deg); width: clamp(35px, 6vw, 75px); height: clamp(23px, 5vw, 63px);}
#cores .titulo .icone svg {width: 100%; height: 100%;}

#cores .btn-whats {margin: 65px auto 0;}

#cores .cards {display: flex; flex-direction: row; flex-wrap: wrap; gap: 35px 2.29%;}
#cores .cor {display: flex; justify-content: center; align-items: center; border-radius: 100px; overflow: hidden; width: calc((100% / 7) - 1.97%); aspect-ratio: 1 / 1;}
#cores .cor .img {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
#cores .cor .img img {width: 100%; height: 100%; object-fit: cover;}

main > .btn-whats {margin: 0 auto;}


@media (max-width: 1200px) {
     
     #caracteristicas .cards {flex-wrap: wrap; gap: 20px 2%; justify-content: flex-start;}
     #caracteristicas .cards .card {width: calc((100% / 3) - 1.34%); border: 1px solid var(--vermelho); padding: 1em 1.5em; border-radius: 70px; transition: 0.2s;}
     #caracteristicas .cards .card:hover {background: var(--vermelho);}
     #caracteristicas .cards .card:hover .titulo {color: var(--branco);}
     #caracteristicas .cards .card:hover .icone svg path {fill: var(--branco);}
}

@media (max-width: 990px) {
     .sobre {padding: 25px 0 15px;}
     .sobre .conteudo {gap: 25px;}
     
     .sobre .gp-info {flex-direction: column-reverse; align-items: center; gap: 15px;}
     .sobre .gp-info .titulo br {display: none;}
     .sobre .gp-info:nth-child(even) {flex-direction: column;}
     .sobre .gp-info:nth-child(odd) {flex-direction: column-reverse;}

     .sobre .bot {flex-direction: column; align-items: center; gap: 15px;}

     .sobre .gp-info .titulo {margin-bottom: 15px; text-align: center; font-size: var(--tt-mb);}
     .sobre .gp-info .titulo span {text-align: center; margin: 0 0 5px; font-size: 13px;}
     .sobre .gp-info .texto {margin-bottom: 10px; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; text-align: justify;}
     .sobre .btns {justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0; margin-top: 15px;}

     .sobre .images {min-width: unset; gap: 15px;}
     .sobre .images .thumbs {gap: 15px;}
     .sobre .gp-info .info {max-width: 100%;}
     .sobre .bot .info {max-width: 100%;}

     .sobre .bot .titulo {margin-bottom: 15px; text-align: center; font-size: var(--tt-mb);}
     .sobre .bot .texto {text-align: justify; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;}

     .sobre .bot .img {min-width: unset;}

     #caracteristicas {padding: 15px 0 25px;}

     #cores {padding: 30px 0 25px;}
     #cores .titulo {font-size: var(--ft-mb); margin-bottom: 15px;}
     #cores .btn-whats {margin: 20px auto 0;}

     #cores .cards {gap: 15px 2.29%; justify-content: center;}
     #cores .cor {width: calc((100% / 6) - 1.91%);}
}

@media (max-width: 900px) {
     #cores .cor {width: calc((100% / 5) - 1.84%);}
}

@media (max-width: 800px) {
     #caracteristicas .cards {gap: 15px 2%;}
     #caracteristicas .cards .card {width: calc((100% / 2) - 1.04%);}

     #cores .cor {width: calc((100% / 4) - 1.72%);}
}

@media (max-width: 700px) {
     #cores .cor {width: calc((100% / 3) - 1.53%);}
}

@media (max-width: 500px) {
     #caracteristicas .cards .card {width: calc(100%);}
     #cores .cor {width: calc((100% / 2) - 1.15%);}
}