@charset "utf-8";
/* CSS Document */

/* Menu de navegação
/* ................. */

#menuMobile, #corpoMenuMobile { display: none; }

nav {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 30px;
	text-align: center;
	z-index: 2;
}

	nav * { transition: 0.3s; }
	nav li { list-style: none; }

	nav .ico-menu {
		width: 30px;
		display: block;
		margin: 0 auto 10px;
		filter: brightness(20);
	}

	nav .dtk-menu-titulo,
	nav .dtk-menu-titulo:hover {
		font-weight: bold;
		color: var(--backCorpo);
		padding: 20px 0;
	}

	nav .dtk-menu { font-weight: bold; }
		nav .dtk-menu:hover { color: var(--corFonte); }

	nav a {
		text-align: left;
		display: block;
	}

		nav a:hover { color: var(--corPadrao); }

	nav > ul {
		padding: 0;
		margin: 0;
	}

		nav > ul > li > a::before {
			content: "";
			display: block;
			position: relative;
			top: 23px;
			width: 80%;
			height: 1px;
			background: var(--corPadrao);
			transform: scaleX(0%);
			transform-origin: left;
			transition: transform 0.7s;
		}

			nav > ul > li > a:hover::before {
				transform: scaleX(100%);
			}

			nav > ul > li > a > .img-seta {
				width: 8px;
				position: relative;
				top: -1px;
				left: 3px;
				filter: brightness(20);
				transform: rotate(0deg);
				transition: transform 0.3s;
			}

				nav > ul:hover > li > a > .img-seta {
					transform: rotate(180deg);
				}

		nav > ul > li > ul {
			position: absolute;
			top: 95px;
			left: 0;
			padding: 0;
			width: 0;
			margin-top: 10px;
			opacity: 0;
			overflow: hidden;
			transition: width 0s, opacity 0.5s;
		}

			nav > ul:hover > li > ul {
				opacity: 1;
				width: 100%;
				padding: 0px 50vw;
				transform: translate(-50vw, 0px);
				z-index: 2;
				margin: 0;
			}

			nav > ul:hover > li > ul::before {
					content: "";
					position: absolute;
					top: 0;
					width: 300%;
					height: 100%;
					background: var(--backCorpo);
					transform: translate(-50%,0);
					z-index: -1;
				}
	
			nav > ul > li > ul > li {
				display: flex;
				flex-wrap: nowrap;
				justify-content: start;
				align-items: stretch;
				gap: 30px;
				width: 80%;
				margin: 30px 10%;
			}

				nav > ul > li > ul > li > ul {
					flex-grow: 1;
					margin: 0;
					padding: 0;
				}

					nav > ul > li > ul > li > ul > li {
						margin: 20px 0;
					}

				nav > ul > li > ul > li > .divisor {
					padding: 0;
				}

					nav > ul > li > ul > li > .divisor > li {
						border-left: 1px solid var(--corFonteClaro);
						height: calc(100% - 40px);
					}

/* ............................ */
/* Menu mobile
/* ............................ */


@media only screen and (max-width: 820px) {

    nav .img-seta {
        display: none !important;
    }

}

@media only screen and (max-width: 680px) {

    nav {
        display: none !important;
    }

    #menuMobile {
        display: block;
        position: absolute;
        top: -58px;
        right: 50px;
        cursor: pointer;
        z-index: 3;
    }

        #menuMobile .icoMobileMenu {
            height: 8px;
            width: 50px;
            border-radius: 10px;
            background: var(--corPadrao);
            transition: 0.3s;
        }

			#menuMobile  .icoMobileMenu:is(:nth-child(2), :nth-child(3)) {
				margin-top: 7px;
			}          

                .iconeXHamburguer_cima, .iconeXHamburguer_baixo {
                    width: 55px !important;
                }

                .iconeXHamburguer_cima { transform: rotate(-36deg) translate(-5px, 15px); }
                .iconeXHamburguer_centro { opacity: 0; }
                .iconeXHamburguer_baixo { transform: rotate(36deg) translate(-4px, -14px); }
   
        #corpoMenuMobile {
            display: block;
            position: absolute;
            right: 0;
            top: 0px;
            min-width: 300px;
            text-align: center;
            transform: translateY(-150vh);
            transition: 0.3s;
            background: var(--backCorpo);
            box-shadow: -4px 5px 20px 5px rgba(0,0,0,0.3);
        }

        .abrirMenuMobile {
            transform: translateY(-80px) !important;
        }

            #corpoMenuMobile ul {
                margin: 60px 0 0 0;
                padding: 20px;
            }

                #corpoMenuMobile ul li {
                    list-style: none;
                    text-align: right;
                    font-size: 3rem !important;
                    line-height: 5rem !important;
                }

                    #corpoMenuMobile ul li a {
                        background: none;
                        padding: 2rem 30px 2rem 0;
                        display: block;
                    }

                    #corpoMenuMobile ul li .menuAberto,
                    #corpoMenuMobile ul li a:hover {
                        background: var(--corPadrao2);
                        color: var(--corPadrao);
                        font-weight: bold;
                    }

					#corpoMenuMobile ul li a img {
						width: 40px;
						margin-bottom: -10px;
					}
        
}