.menu {border-top: 4px solid var(--vermelho); position: relative;}
.menu .conteudo {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}

.menu .logo {width: 210px; height: auto;}
.menu .logo a {display: flex;}
.menu .logo img {height: 100%; width: 100%; object-fit: contain;}

.menu .paginas .sob-pagina {position: relative;}
.menu .paginas .sob-pagina > .pagina {padding: 31px 15px 21px; display: block;}
.menu .paginas .all-paginas {display: flex; flex-direction: row; gap: 0; justify-content: center; align-items: stretch;}
.menu .paginas .pagina p{font: 400 15px montserrat; color: var(--preto-qua); transition: 0.4s;}
.menu .paginas .sub-pagina p {transition: 0.4s; color: var(--branco);}
.menu .paginas .pagina:hover > p {cursor: pointer; color: var(--vermelho);}
.menu .paginas .sub-pagina:hover > p {cursor: pointer; transform: scale(1.04);}
.menu .paginas .pagina.ativo p {font: 800 15px raleway; color: var(--vermelho);}
.menu .contatos {display: flex; flex-direction: row; gap: 35px; justify-content: center; align-items: center;}
.menu .contatos a {display: flex; flex-direction: row; gap: 5px; justify-content: center; align-items: center; font: 400 16.71px montserrat; color: var(--preto-qui); transition: 0.4s;}
.menu .contatos a.whatsapp:hover {color: var(--verde);}
.menu .contatos a.telefone:hover {color: var(--vermelho);}

/* .menu .paginas .mult.pagina.ativo {background-color: var(--vermelho); color: var(--branco);} */
/* .menu .paginas .mult.pagina.ativo > p{color: var(--branco);} */
/* .menu .paginas .mult.pagina.ativo::before {background: var(--vermelho);} */

.menu .paginas .mult.pagina:hover {background-color: var(--vermelho); color: var(--branco);}
.menu .paginas .mult.pagina:hover > p{color: var(--branco);}
.menu .paginas .mult.pagina:hover::before {background: var(--vermelho);}

.menu .paginas .mult.pagina.ativo > p {color: var(--vermelho);}
.menu .paginas .mult.pagina.ativo:hover > p {color: var(--branco);}
.menu .paginas .mult.pagina.ativo {font: 800 15px raleway;}
/* .menu .sub-paginas {} */
/* .menu .paginas .mult.pagina.ativo::before {background: var(--branco);} */

.menu .paginas .mult.pagina.ativo:hover {cursor: pointer;}
.menu .sub-paginas {position: absolute; top: calc(100% + 17px); white-space: nowrap; left: 0; padding: 15px; background: var(--vermelho); z-index: 1000; transform: scaleY(0); flex-direction: column; gap: 15px; display: flex; transition: 0.2s; transform-origin: top center;}
.menu .sub-paginas p {color: var(--branco);}
.menu .paginas .mult.pagina::before {content: '';position: absolute; top: 99%; left: 0; background: var(--branco); width: 100%; height: 18px; z-index: 1000;}
.menu .paginas .mult.pagina.ativo .sub-paginas {background-color: var(--vermelho); color: var(--branco);}
.menu .paginas .mult.pagina.ativo .sub-paginas p {color: var(--branco);}


.menu .paginas .mult.pagina:hover .sub-paginas, .menu .paginas .mult.pagina .sub-paginas:hover {transform: scaleY(1);}

.menu .paginas .mult.pagina::before ~ .sub-paginas {transform: scaleY(1);}

@media (max-width:990px){
     .menu .conteudo {padding: 15px 0 10px;}
     .menu .logo {width: 180px;}
     .menu .all-paginas .logo a {padding: 0 20px 15px ;}

     .btn-open {background-color: var(--branco); display: grid; place-content: center; place-items: center; position: relative; gap: 4px;}
     .btn-open .rec {width: 30px; height: 5px; background-color: var(--vermelho); position: relative;}     

     .btn-close {flex: 0 0 10%; background-color: var(--branco); padding: 20px; display: grid; place-content: center; place-items: center; position: relative;}
     .btn-close .rec {width: 30px; height: 5px; background-color: var(--vermelho); position: relative;}
     .btn-close .rec.rec-1 {transform: rotate(-45deg) translate(-1px,3px);}
     .btn-close .rec.rec-2 {transform: rotate(45deg) translate(0,-3px);}

     .menu .contatos {gap: 10px;}
     .menu .contatos .whatsapp {display: none;}
     .menu .contatos a p {display: none;}
     .menu .contatos a.telefone .icone {width: 25px; height: 25px;}

     .menu .paginas .sob-pagina {width: 100%;}
     .menu .paginas {width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: #94929283; position: fixed; top: 0; right: 0; z-index: 1000; transition: 0.4s;}
     .menu .paginas.close {right: 100%;}
     .menu .paginas .all-paginas {width: 90%; height: 100%; background-color: var(--branco); flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 20px 0; gap: 5px;}
     .menu .paginas .all-paginas .pagina {width: 100%; padding: 15px 25px;}
     /* .menu .paginas .all-paginas .pagina.ativo {background-color: var(--vermelho);} */
     .menu .paginas .sub-pagina:hover > p {color: var(--vermelho); transform: scale(1);}
     .menu .paginas .mult.pagina .sub-pagina:hover p, .menu .paginas .mult.pagina.ativo .sub-pagina:hover p {color: var(--vermelho);}
     
     /* .menu .paginas .pagina.ativo p {color: var(--branco);} */
     .menu .paginas .mult.pagina .sub-paginas {padding-bottom: 0;}
     .menu .paginas .mult.pagina:hover .sub-paginas, .menu .paginas .mult.pagina .sub-paginas:hover {display: flex;}
     .menu .paginas .mult.pagina::before {content: unset;}
     .menu .sub-paginas {position: static; display: none;}
     

     .menu .sub-paginas {padding-left: 0; padding-right: 0;}
     .menu .paginas .mult.pagina > p {padding: 0 25px;}
     .menu .paginas .mult.pagina {padding-left: 0; padding-right: 0;}
     .menu .paginas .mult.pagina:hover {padding-bottom: 0;}
     .menu .paginas .mult.pagina .sub-pagina {padding: 10px 30px; background-color: var(--branco);}
     .menu .paginas .mult.pagina .sub-paginas p, .menu .paginas .mult.pagina.ativo .sub-paginas p {color: var(--preto);}
     .menu .paginas .mult.pagina .sub-paginas {gap: 0;}

     .menu .paginas .mult.pagina .sub-pagina.ativo p {color: var(--vermelho);}

     /* .logo.mobile {width: 90%; background-color: var(--branco); padding: 20px;} */
}