*{ font-family: "Lexend Deca", sans-serif; font-optical-sizing: auto; padding: 0; margin: 0; box-sizing: border-box; list-style: none; }

html,body{ height: 100%; overflow: hidden; }

body{ display: flex; flex-direction: column; background: #ffffff; }

:root{
	--color-gray: #d8d8d8;
	--color-black: #000000;
}

.container{ padding: 0 30px; margin: 0 auto; max-width: 1400px; }

header, main, footer{ display: block; }

/* ANIMATION INTRO */
.draw{ fill: none; stroke: #000; stroke-width: .1; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; animation: desenhar 4s ease-in-out forwards; }
@keyframes desenhar {
  to { stroke-dashoffset: 0; }
}

.wrapper_icon_animation{ position: absolute; inset: 0; width: 100%; height: 0%; z-index: 200; background: #d8d8d8; display: flex; align-items: center; justify-content: center; opacity: 0; animation: w_icon 5s; overflow: hidden; }
@keyframes w_icon {
	0%{ opacity: 1; height: 100%; }
	80%{ opacity: 1; height: 100%; }
	100%{ opacity: 0; height: 100%; }
}

.icon_animation{ position: relative; width: 90%; max-width: 100px; }
.icon_animation svg{ display: block; width: 100%; height: auto; }

#icon_fill{ position: absolute; left: 0; top: 0px; width: 90%; left: 5.2%; top: 2%; animation: icon_fill 5s; opacity: 1; }
@keyframes icon_fill {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


#icon, #icon2{ animation: icon 5s; opacity: 0; }
@keyframes icon {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#icon2{ position: absolute; width: 500%; left: -200%; top: -200%; }
#icon2 path{ opacity: .7; stroke-width: .08; }


/* HEADER */
.wrapper_header{ width: 100%; padding: 16px 0; background: var(--color-gray); }

.wrapper_header .container{ display: flex; align-items: center; }

.logo{ width: 240px; margin-right: 30px; }
.logo img{ display: block; width: 100%; height: auto; }



.menu_nav{ display: none; position: relative; width: 30px; height: 25px; margin-top: 4px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
.menu_nav span{ display: block; position: absolute; height: 2px; width: 100%; background: var(--color-black); border-radius: 1px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }

.menu_nav span:nth-child(1){ top: 0px; }
.menu_nav span:nth-child(2),.menu_nav span:nth-child(3){ top: 8px; width: 80%; }
.menu_nav span:nth-child(4){ top: 16px; width: 70%; }

.menu_nav.open span:nth-child(1){ top: 8px; width: 0%; left: 50%; }
.menu_nav.open span:nth-child(2){ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 100%; }
.menu_nav.open span:nth-child(3){ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 100%; }
.menu_nav.open span:nth-child(4){ top: 18px; width: 0%; left: 50%; }




.menu_main ul{ display: flex; }
.menu_main ul a{ display: block; padding: 10px 30px; font-size: 16px; font-weight: 300; color: var(--color-black); text-decoration: none; }
.menu_main ul a span{ position: relative; }
.menu_main ul a span::before, .menu_main ul a span::after{ content: ""; display: block; width: 0; height: 2px; background: var(--color-black); position: absolute; bottom: -10px; left: 50%; transition: all .5s; }
.menu_main ul a:hover span::before{ width: 100%; left: 0px; }

.menu_main ul a.active span::after{ width: 100%; opacity: .1; left: 0px; }

.menu_main ul:hover a{ opacity: .5; }
.menu_main ul:hover a:hover{ opacity: 1; }

/* MAIN */
main{ flex: 0 1 100%; overflow-y: auto; overflow-x: hidden; }

section{ min-height: 100%; }


/* FOOTER */
.wrapper_footer{ position: relative; width: 100%; padding: 10px 0; background: var(--color-gray); z-index: 50; }

.infos_footer{ display: flex; align-items: center; }
.infos_footer img{ display: block; width: 14px; height: auto; margin-right: 10px; }
.infos_footer p{ font-size: 11px; font-weight: 300; color: var(--color-black); }
.infos_footer span{ display: inline-block; padding: 0 10px; }

.wrapper_footer .container{ display: flex; align-items: center; justify-content: space-between; }

.copy_footer p{ font-size: 10px; font-weight: 200; color: #959595; }
.copy_footer p b{ font-weight: 300; }



/*
*
* SECTIONS
*
*/
.page{ display: none; opacity: 0; transition: opacity 0.3s ease; }
.page.active{ display: block; opacity: 1; }

.title_pages{ font-size: 34px; font-weight: 100; color: var(--color-gray); margin-bottom: 20px; }


/* HOME */
.home{ height: 100%; }

/* Gallery */
.wrapper{ position: relative; width: 100%; height: 100%; }

.gallery{ width: 100%; height: 100%; position: relative; overflow: hidden; }

.slides{ position: relative; width: 100%; height: 100%; }

.slide{ position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.slide img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.slide.active{ opacity: 1; z-index: 1; }

.gallery-info{ position: absolute; top: 0; width: 100%; padding-top: 80px; z-index: 2; }
.gallery-info .container{ display: flex; }

.arrow{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; color: #fff; cursor: pointer; user-select: none; z-index: 2; }
.arrow svg{ display: block; width: 50px; height: auto; opacity: .5; transition: all 1s; }
.arrow svg polygon{ fill: #ffffff; }
.arrow:hover svg{ opacity: 1; }

.arrow.left{ left: 10px; }
.arrow.right{ right: 10px; }

.bullets{ position: absolute; bottom: 15px; width: 100%; text-align: center; z-index: 2; }
.bullet{ display: inline-block; width: 10px; height: 10px; margin: 3px; border-radius: 50%; background: #fff; cursor: pointer; transition: all 1s; }
.bullet.active{ transform: scale(1.5); }

.wrapper_info-content{ position: relative; }

.info-blur{ display: block; position: absolute; inset: -60px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 1; mask-image: linear-gradient(to top, transparent, black 30%), linear-gradient(to bottom, transparent, black 30%), linear-gradient(to left, transparent, black 30%), linear-gradient(to right, transparent, black 30%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to top, transparent, black 30%), linear-gradient(to bottom, transparent, black 30%), linear-gradient(to left, transparent, black 30%), linear-gradient(to right, transparent, black 30%); -webkit-mask-composite: destination-in; }


@supports (-webkit-mask-composite: add) and not (mask-composite: intersect) {
	.info-blur::before{ content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: -1; -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: cover; mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); mask-repeat: no-repeat; mask-position: center; mask-size: cover;
	}
}

.info-content{ position: relative; opacity: 0; transform: translateY(15px); z-index: 2; cursor: pointer; }
.info-content h2{ font-size: 48px; font-weight: 100; color: var(--color-black); opacity: .3; }
.info-content p{ font-size: 14px; font-weight: 200; color: var(--color-black); }
.info-content p b{ font-size: 14px; font-weight: 600; color: var(--color-black); }

.see_more{ display: flex; margin-top: 10px; cursor: pointer; }
.see_more p{ display: block; padding-bottom: 1px; }
.see_more svg{ display: block; width: 6px; height: auto; margin-left: 8px; transition: all .5s; }
.info-content:hover .see_more svg{ margin-left: 10px; }

.info-content.enter{ opacity: 1; transform: translateY(0); transition: all 1s ease; }
.info-content.exit{ opacity: 0; transform: translateY(-15px); transition: all 1s ease; }



/* ABOUT */
.sobre{ padding: 20px 0; }

.infos_about{ display: flex; align-items: start; }

.photo{ display: flex; align-items: center; justify-content: center; max-width: 400px; width: 100%; aspect-ratio: 1 / 1; background: rgba(0,0,0,.1); border-radius: 50%; margin: 0 auto; margin-bottom: 30px; overflow: hidden; }
.photo img{ display: block; width: 100%; height: auto; }

.text_about{ flex: 0 1 100%; margin-left: 40px; }
.text_about p{ font-size: 16px; font-weight: 200; margin-bottom: 20px; }



/* PROJECTS */
.projetos{ padding: 20px 0; }

.project_item{ width: 100%; }
.project_item img{ display: block; width: 100%; height: auto; }



/* PROJECT DETAIL */
.projetodetalhe{ padding: 20px 0; }
.projetodetalhe .datainfos{ display: flex; }

.detail_project_infos{ flex: 1 0 400px; }

.projetodetalhe h3{ font-size: 48px; font-weight: 100; color: var(--color-gray); margin-bottom: 20px; }
.detail_project_infos p{ font-size: 14px; font-weight: 200; color: var(--color-black); margin-bottom: 2px; }
.detail_project_infos p b{ font-size: 14px; font-weight: 600; color: var(--color-black); }
.container_description{ padding-top: 20px; }
.container_description p{ margin-bottom: 20px; }

.list_images{ flex: 0 1 100%; }

.imte_img{ width: 100%; height: auto; margin-bottom: 20px; }
.imte_img img{ display: block; width: 100%; height: auto; }



/* CONTACT */
.contato{ padding: 20px 0; }

.wrapper_contact{ display: flex; justify-content: start; flex-direction: row-reverse; }

.infos_contact{ padding-top: 20px; }

.contato p{ display: flex; align-items: center; }
.container_address{ display: flex; align-items: start; }
.container_address svg{ margin-top: 2px; }
.icon_contact{ display: inline-block; width: 14px; height: auto; margin-right: 10px; }
.icon_contact path{ fill: var(--color-black); }

.tel{ font-size: 18px; font-weight: 300; color: var(--color-black); margin-bottom: 4px; }
.email{ margin-bottom: 22px; }
.email a{ font-size: 14px; font-weight: 300; color: var(--color-black); text-decoration: none; }

.instagram{ margin-bottom: 22px; }
.instagram a{ font-size: 14px; font-weight: 300; color: var(--color-black); text-decoration: none; }

.address{ font-size: 14px; font-weight: 300; color: var(--color-black); }

.form_contact{ position: relative; width: 100%; max-width: 500px; margin-right: 40px; }
.form_contact label{ display: block; font-size: 14px; font-weight: 200; margin-bottom: 2px; }
.form_contact input, .form_contact textarea{ width: 100%; outline: none; border: 1px solid var(--color-black); padding: 12px; margin-bottom: 10px; font-size: 15px; font-weight: 300; border-radius: 3px; margin-bottom: 10px; transition: all .5s; }
.form_contact input:focus, .form_contact textarea:focus{ box-shadow: 0 0 10px rgba(0,0,0,.2); }
.form_contact textarea{ resize: none; height: 200px; }
.form_contact button{ display: inline-block; padding: 16px 20px; background: var(--color-black); font-size: 16px; font-weight: 500; color: #fff; border: 0; border-radius: 3px; cursor: pointer; }


.wrapper_msg_form{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 20; }
.wrapper_msg_form.active{ animation: activeMsg 1s both; }
@keyframes activeMsg{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}

.container_msg_form{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(255,255,255,.9); }
.container_msg_form img{ display: block; width: 40px; height: auto; margin: 0 auto; margin-bottom: 10px; }



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

	.wrapper_header .container{ justify-content: space-between; }

	.logo{ position: relative; width: 60%; z-index: 50; }

	.menu_main{ position: fixed; inset: 0; left: 100%; width: 100%; height: 100%; background: var(--color-gray); z-index: 10; transition: all .2s; }

	.menu_nav{ display: block; position: relative; z-index: 50; }

	.menu_main ul{ display: block; padding-top: 100px; }
	.menu_main ul a{ padding: 30px 30px; font-size: 28px; position: relative; }

	.menu_main.open{ left: 0; }
	
	.menu_main.open li a {
	  position: relative;
	  opacity: 0;
	    left: -20px;
	  animation: itemMenu 0.6s ease both; /* 🔥 mantém estado final */
	}

	/* delays */
	.menu_main.open li:nth-child(1) a {
	  animation-delay: 0.2s;
	}

	.menu_main.open li:nth-child(2) a {
	  animation-delay: 0.4s;
	}

	.menu_main.open li:nth-child(3) a {
	  animation-delay: 0.6s;
	}

	/* animação */
	@keyframes itemMenu {
	  0% {
	    opacity: 0;
	    left: -20px;
	  }
	  100% {
	    opacity: 1;
	    left: 0;
	  }
	}


	.gallery-info{ padding-top: 40px; }

	.arrow svg{ width: 20px; }


	.infos_about{ display: block; }
	.text_about{ margin: 0; }



	.projetodetalhe .datainfos{ display: block; }
	.list_images{ flex-direction: column; }




	.wrapper_contact{ display: flex; justify-content: start; flex-direction: column; }
	.infos_contact{ padding-top: 0px; margin-bottom: 20px; }
	.form_contact{ margin: 0; }




	.wrapper_footer .container{ display: block; }

	.infos_footer span{ display: block; padding: 0; font-size: 1px; }

	.copy_footer{ padding-top: 10px; padding-bottom: 20px; }
	.copy_footer p{ text-align: center; }

}