*{box-sizing: border-box;
margin: 0;}

.bgcolor{background: #f5f5f5;}

/*-----navbar-----*/

.navbar{background-color: #F9D3DC;
width: 100%;
height: 60px;
display: flex;
align-items: center;
padding: 0px 40px;}

.navbar-bottom{background-color: #EFAEB8;
width: 100%;
height: 8px;}

.peony-piano-a{text-decoration: none;
margin-right: auto;}

.peony-piano{line-height: 21px;
font-size: 24px;
text-align: center;
color: #121212;}

.pags{margin: 0px auto;
display: flex;
gap: 5vw;}

.pags > a{text-decoration: none;
font-family: "Sansation", sans-serif;
font-weight: 700;
font-style: normal;
color: #121212;
font-size: 15px;}

.pags > a:hover{text-decoration: underline;}

.lupa-a{margin-left: auto;
margin-right: 40px;}

.lupa{width: 20px;}

.lupa-invis{margin-left: auto;
margin-right: 40px;
opacity: 0;}

.cadastre-se-botao-a{text-decoration: none;}

.cadastre-se-botao{background: #121212;
font-size: 13px;
letter-spacing: 1px;
color: #f5f5f5;
line-height: 35px;
padding: 0px 25px;
border-radius: 6px;}

/*-----home-body-----*/

#banner{background-image: url(home/img-h-banner2.png);
background-size: cover;
background-position: center;
width: 100%;
height: calc(40vh + 12vw);
position: relative;
overflow: hidden;}

#encontre{position: absolute;
top: 4vw;
left: 4vw;
width: calc(350px + 20vw);}

.content-body{margin: 50px 4vw 0px;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;}

#destaques-text{font-size: 32px;
font-weight: 600;
color: #121212;}

#destaques-grid{margin: 35px 0 80px;
width: 100%;
height: calc(20vw + 200px);
display: grid;
grid-template-columns: 1fr 1fr 1fr 0.15fr;
gap: 1.5vw;}

.destaques-produto{border: solid 1px #ebf3ee;
padding: 1vw;
display: flex;
flex-direction: column;
text-decoration: none;
background-color: #ffffff;}

.destaques-produto:hover{border: solid 1px #BBDEC8;}

.destaques-produto:hover > div{border: solid 1px #BBDEC8;}

.d-p-imagem{background-color: #f5f5f5;
border: solid 1px #ebf3ee;
width: 100%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;}

.d-p-imagem > img{width: 100%;}

.d-p-nome{color: #121212;
font-weight: 600;
font-size: calc(10px + 1.2vw);
margin-top: 10px;}
.d-p-marca{color: #2E734D;
font-weight: 600;
font-size: calc(6px + 0.75vw);}
.d-p-preco{color: #121212;
font-weight: 600;
margin: auto 0px;
font-size: calc(7px + 1.3vw);}
.d-p-destaque{color: #2E734D;
font-weight: 600;
font-size: calc(5px + 1vw);}

.right-arrow{display: flex;
align-items: center;
justify-content: center;}

.right-arrow svg{width: calc(10px + 2vw);}

#linha{background-color: rgba(18, 18, 18, 12%);
width: 100%;
height: 3px;
display: block;
margin-bottom: 50px;}

#categorias-text{font-size: 32px;
font-weight: 600;
color: #121212;}

#categorias-grid{display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
justify-content: center;
width: 95%;
gap: 1vw;
margin: 45px auto 100px auto;}

#categorias-grid a{background-size: cover;
height: 30vw;
text-decoration: none;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
font-size: 3vw;
padding-top: calc(5vw + 100px);
user-select: none;}

#categorias-teclados{background-image: url(home/img-h-teclados.png);}

#categorias-pianos{background-image: url(home/img-h-pianos.png);}

#categorias-sintetizadores{background-image: url(home/img-h-sintetizadores.png);}

.rodape{background: #121212;
width: 100%;
height: 10vw;
display: flex;
padding: 1.5vw 8vw;
overflow: hidden;}

.rodape a{margin: auto 0px;}

.rodape a svg{height: 7vw;}

.rodape a:hover{text-decoration: underline;}

.rodape-links{display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin: auto 3vw;}

.rodape-links a{text-decoration: none;
color: #EFAEB8;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: calc(0.75vw + 5px);}

.rodape-text{display: flex;
align-items: end;
gap: 3vw;}

.rodape-copyright{padding: 1vw;
font-size: calc(0.5vw + 4px);
color: #EFAEB8;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;}

/*tenho preguiça entao vou copiar e colar tudo pra o rodape invertido e só mudar a cor*/

.rodape-invertido{background: #EFAEB8;
width: 100%;
height: 10vw;
display: flex;
padding: 1.5vw 8vw;
overflow: hidden;}

.rodape-invertido a{margin: auto 0px;}

.rodape-invertido a svg{height: 7vw;}

.rodape-invertido a:hover{text-decoration: underline;}

.rodape-links-invertido{display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin: auto 3vw;}

.rodape-links-invertido a{text-decoration: none;
color: #121212;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: calc(0.75vw + 5px);}

.rodape-copyright-invertido{padding: 1vw;
font-size: calc(0.5vw + 4px);
color: #121212;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;}


/*-----product body-----*/

#productbody{margin: 2vw 2vw 150px;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: #121212;}

#product-product{display: flex;}

#product-photo{display: grid;
width: 45vw;
height: calc(50vh + 10vw);
grid-template-columns: calc(20px + 3vw) 1fr;
grid-template-rows: repeat(4, calc(20px + 3vw)) 1fr;
gap: 15px;}

#product-photo div{background-color: white;
border: solid 1px #656565;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;}

#product-photo div img{width: 100%;}

#foto1{grid-column: 1;
grid-row: 1;}
#foto2{grid-column: 1;
grid-row: 2;}
#foto3{grid-column: 1;
grid-row: 3;}
#foto4{grid-column: 1;
grid-row: 4;}
#fotomain{grid-column: 2;
grid-row: span 5;}

#product-name{display: flex;
flex-direction: column;
padding: 0px 40px;}

#pr-name{font-weight: 600;
font-size: 55px;}
#pr-brand{font-weight: 600;
color: #2E734D;
font-size: 22px;
margin-top: 10px;}
#pr-rating{display: flex;
gap: 7px;
margin-top: 30px;}
#pr-price{margin-top: 30px;}
#pr-real{font-weight: 600;
font-size: 21px;}
#pr-valor{font-weight: 600;
font-size: 55px;
letter-spacing: -1px;}
#pr-specs{display: flex;
flex-direction: column;
margin-top: 40px;
font-size: 18px;
justify-content: space-between;
height: 225px;}
.pr-negrito{font-weight: 600;}
.pr-claro{color: #656565;}

#product-buy{border: solid 2.5px #BBDEC8;
border-radius: 12px;
margin-left: auto;
margin-right: 20px;
display: flex;
flex-direction: column;
padding: 25px 40px 40px;
height: fit-content;}

#buy-real{font-weight: 600;
font-size: 17px;}
#buy-valor{font-weight: 600;
font-size: 40px;
letter-spacing: -1px;}
#buy-estoque{font-weight: 500;
font-size: 15px;
color: #656565;}
#buy-quant{font-weight: 600;
margin: 30px 0px;
font-size: 15px;}
#buy-input{font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
text-align: right;
padding: 6px;
border:1px solid #121212;
background-color: #f5f5f5;
font-size: 16px;
border-radius: 2px;
margin-left: 10px;}
input::-webkit-inner-spin-button {-webkit-appearance: none;
margin: 0;}
#buy-carrinho{font-weight: 600;
font-size: 16px;
align-self: center;
text-decoration: none;
color: #121212;
background-color: #BBDEC8;
line-height: 50px;
padding: 0px 30px;
width: 235px;
border-radius: 25px;
display: flex;
justify-content: center;
margin-bottom: 30px;}
#buy-comprar{font-weight: 600;
font-size: 16px;
align-self: center;
text-decoration: none;
color: #121212;
background-color: #84C3A0;
line-height: 50px;
padding: 0px 30px;
width: 235px;
border-radius: 25px;
display: flex;
justify-content: center;}

#product-about{margin: 75px 30px;
display: flex;}

#desc-titulo{font-size: 32px;
font-weight: 600;
color: #121212;}
#desc-paragrafo{
color: #656565;
font-weight: 400;
font-size: 22px;
line-height: 30px;
width: 55vw;
margin-top: 40px;}

#product-avaliacao{margin-left: auto;
width: 30vw;}
#avaliacao-titulo{font-size: 32px;
font-weight: 600;
color: #121212;
margin-bottom: 40px;}
#a-user-data{margin-top: 40px;
margin-bottom: 10px;
display: flex;
align-items: center;}
#a-user-data span:nth-child(1){font-size: 22px;
font-weight: 700;
margin-right: auto;}
#a-user-data span:nth-child(2){color: #656565;
font-size: 17px;}
#a-review{margin-top: 10px;
color: #656565;
font-weight: 400;
font-size: 18px;
line-height: 25px;}

#similar-grid{margin: 35px 0 80px;
width: 95%;
height: calc(20vw + 150px);
display: grid;
grid-template-columns: 1fr 1fr 1fr 0.15fr;
gap: 1.5vw;
margin: 50px auto -50px;}

/*-----product grid-----*/

#grade-body{padding: 65px 2.5vw;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: #121212;}

#grade-divisor{width: 100%;
display: grid;
grid-template-columns: 200px 1fr;
gap: 10px;}

#grade-divisor div{width: 100%;}

#grade-categorias{display: flex;
flex-direction: column;
padding: 70px 10px;}

#grade-categorias > span{font-weight: 600;
font-size: 27px;
margin-bottom: 18px;}

#grade-categorias a{text-decoration: none;
font-size: 20px;
font-weight: 500;
margin: 10px 0;}

#grade-categorias a:hover{text-decoration: underline;}

.a-selected{color: black;}

.a-unselected{color: #656565;}

#categoria-titulo{font-size: 20px;
color: #656565;
font-weight: 400;
margin-left: 30px;}

#grade-grade > span{font-size: 45px;
font-weight: 600;}

#grade-grade-grade{display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(200px + 4vw), 1fr));
grid-template-rows: repeat(auto-fit, 450px);
width: 100%;
gap: 15px;
margin-top: 30px;}

.grade-produto{border: solid 1px #ebf3ee;
padding: 1vw;
display: flex;
flex-direction: column;
text-decoration: none;
background-color: #fdfdfd;}

.grade-produto:hover{border: solid 1px #BBDEC8;
height: 100%;}

.grade-produto:hover > div{border: solid 1px #BBDEC8;}

.g-imagem{background-color: white;
border: solid 1px #ebf3ee;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
overflow: hidden;}

.g-imagem > img{width: 80%;
margin: auto 0px;}

.g-nome{color: #121212;
font-weight: 600;
font-size: calc(10px + 1.2vw);
margin-top: 10px;}
.g-marca{color: #2E734D;
font-weight: 600;
font-size: calc(6px + 0.75vw);
margin-top: 0px}
.g-preco{color: #121212;
font-weight: 600;
margin: 20px 0px;
font-size: calc(5px + 1.2vw);}

/*-----pesquisa-----*/

#section-pesquisa{width: 100%;
height: calc(150px + 10vw);
background: #121212;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-size: calc(20px + 2vw);
color: #F9D3DC;
letter-spacing: 3px;
gap: 30px;}

#div-search{display: flex;
align-items: center;
width: max-content;
padding: 15px 20px;
border-radius: 40px;
background-color: #F9D3DC;}

#search-input{font-family: "Noto Sans", sans-serif;
font-size: 23px;
font-weight: 400;
color: #121212;
margin-left: 14px;
outline: none;
border: none;
background: transparent;
width: 400px;
}

/*-----cadastro-----*/

#cadastro-body{min-height: 100vh;
width: 100%;
background-image: url(cadastro/img-c-bg.png);
background-position: center;
background-size: cover;
display: flex;
align-items: center;
flex-direction: column;
font-family: "Noto Sans", sans-serif;}

#junte-se{font-size: calc(3vw + 12px);
color: #F9D3DC;
font-weight: 700;
margin: 40px 0;}

#caixa-cadastro{background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 40px;
border-radius: 20px;
margin-bottom: 80px;}

#c-c-texto1{color: #2E734D;
font-size: 35px;
font-weight: 600;}

#svgs-cadastro{display: flex;
justify-content: space-between;
width: 200px;
margin: 30px 0;}

#svgs-cadastro a{width: 50px;
height: 50px;
border-radius: 25px;
border: solid 1px #656565;
display: flex;
align-items: center;
justify-content: center;}

#svgs-cadastro a path{fill: #2E734D;}

#c-c-texto2{color: #2E734D;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;}

.c-c-div-input{background: #ffffff;
padding: 10px 20px;
border-radius: 40px;
border: solid 1px #84C3A0;
width: max-content;
margin: 20px 0;}

.c-c-div-input input{outline: none;
border: none;
background: transparent;
font-size: 18px;
font-weight: 400;
font-family: "Noto Sans", sans-serif;
width: 350px;}

#botao-criar{background: #BBDEC8;
color: #121212;
text-decoration: none;
font-weight: 500;
font-size: 20px;
padding: 15px 50px;
border-radius: 60px;
margin: 20px 0 40px;
border: none;
outline: none;
cursor: pointer;}

#login{font-size: 16px;
color: #121212;}

#login a{color: #2E734D;}

#form-cadastro{display: flex;
flex-direction: column;
align-items: center;}

/*-----sobre nos-----*/

#sobre-nos{background-color: #121212;}

#banner-sobre-nos{background-image: url(sobre_nos/img-sn-banner.png);
background-size: cover;
background-position: center;
width: 100%;
height: calc(35vh + 10vw);
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;}

#banner-sobre-nos > div{font-family: "Uncial Antiqua", system-ui;
font-weight: 400;
font-style: normal;
color: #E0AAB7;
font-size: calc(50px + 4vw);}

#sobre-nos-body{height: 100vh;
margin: 0 calc(8vw + 80px);
display: flex;
flex-direction: column;
align-items: center;
height: max-content;}

.sobre-nos-titulos{font-family: "Uncial Antiqua", system-ui;
font-weight: 400;
font-style: normal;
color: #F9D3DC;
font-size: 65px;
margin: 50px;
text-wrap: nowrap;}

#quem-somos-texto{width: 100%;
color: #F9D3DC;
font-size: calc(12px + 0.5vw);
line-height: 40px;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;}

#quem-somos-texto img{float: left;
height: 350px;
margin: 0px 40px 40px 0;}

#nosso-objetivo-texto{width: 100%;
color: #F9D3DC;
font-size: calc(12px + 0.5vw);
line-height: 40px;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;}

#nosso-objetivo-texto img{float: right;
height: 500px;
margin: 0px 0px 40px 40px;}

#que-oferecemos-texto{width: 100%;
color: #F9D3DC;
font-size: calc(12px + 0.5vw);
line-height: 40px;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
text-align: center;}

.obrigado{
margin: 100px;
font-size: 70px;}

/*-----contato-----*/

#body-contato{width: 100%;
min-height: 100vh;
background-image: url(contato/img-fc-bg.png);
background-size: cover;
background-position: center;
display: flex;
justify-content: center;}

#formulario{font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
background: #f5f5f5;
width: calc(250px + 50vw);
min-height: 500px;
display: flex;
flex-direction: column;
padding: 30px;
margin: 100px 0;
border-radius: 10px;}

#form-titulo{display: flex;
flex-direction: column;}

#form-titulo span:nth-child(1){color: #2E734D;
font-size: 50px;
font-weight: 600;}

#form-titulo span:nth-child(2){color: #999999;
font-size: 16px;
font-weight: 400;
margin: 15px 0;}

#form-grid{display: grid;
grid-template-columns: calc(125px + 5vw) 1fr;}

#form-grid div:nth-child(1){color: #2E734D;
display: flex;
flex-direction: column;
font-size: 16px;}

#form-grid div:nth-child(1) div{margin: 15px 0;
padding: 12px 0;}

#form-grid div:nth-child(2){color: #2E734D;
display: flex;
flex-direction: column;}

#form-grid div:nth-child(2) div{margin: 15px 0;
background-color: #ffffff;
border: solid 1px #84C3A0;
border-radius: 20px;
width: max-content;
padding: 10px 20px;
display: flex;
align-items: center;}

#form-grid div:nth-child(2) input{color: #656565;
font-size: 16px;
outline: none;
background: transparent;
border: none;
width: 500px;
font-family: "Noto Sans", sans-serif;}

#form-grid div:nth-child(2) input::placeholder{color: #999999;
font-weight: 400;}

#formulario form{margin: 15px auto;}

#form-grid div:nth-child(2) textarea{color: #656565;
font-size: 16px;
outline: none;
background: transparent;
border: none;
width: 500px;
font-family: "Noto Sans", sans-serif;
min-height: 250px;
}

#form-grid div:nth-child(2) textarea::placeholder{color: #999999;
font-weight: 400;}

#acaba{background: #2E734D;
color: #f5f5f5;
text-decoration: none;
font-weight: 500;
font-size: 25px;
padding: 15px 30px;
border-radius: 20px;
border: none;
outline: none;
cursor: pointer;
margin-top: 50px;}

#acaba-diva{margin: 20px auto;}









.uncial-antiqua-regular {
  font-family: "Uncial Antiqua", system-ui;
  font-weight: 400;
  font-style: normal;
}

.sansation-regular {
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sansation-bold {
  font-family: "Sansation", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*<weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name

.noto-sans-<uniquifier> {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

*/