/* =========================================================================
   Magnético – Estrutura do site
   Reproduz o visual dos modelos que eram do Elementor Pro.
   Pontos de quebra iguais aos do Elementor: celular até 767px, tablet até 1024px.
   ========================================================================= */

:root {
	--mgn-blue: #371EFB;
	--mgn-blue-2: #3526FF;
	--mgn-green: #00D800;
	--mgn-grey: #7A7A7A;
	--mgn-press-font: "Benton Sans", Inter, sans-serif;
}

.mgn-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}

/* Na prévia (Elementor Pro ainda ativo) esconde as peças antigas. */
body.mgn-preview .elementor-location-header,
body.mgn-preview .elementor-location-footer,
body.mgn-preview #elementor-popup-modal-9 {
	display: none !important;
}

.mgn-on .screen-reader-text,
.mgn-form .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Botão do menu (três barras)
   ------------------------------------------------------------------------- */
.mgn-burger {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	color: var(--mgn-blue);
}

.mgn-burger::after {
	/* área de toque maior, sem mudar o desenho */
	content: "";
	position: absolute;
	inset: -11px -4px;
}

.mgn-burger span {
	position: absolute;
	left: 0;
	width: 40px;
	height: 4px;
	border-radius: 10px;
	background: var(--mgn-blue);
}

.mgn-burger span:nth-child(1) { top: 0; }
.mgn-burger span:nth-child(2) { top: 9px; }
.mgn-burger span:nth-child(3) { top: 18px; }

.mgn-burger:hover,
.mgn-burger:focus {
	background: transparent;
}

.mgn-burger:focus:not(:focus-visible) { outline: none; }
.mgn-burger:focus-visible {
	outline: 2px solid var(--mgn-blue);
	outline-offset: 6px;
}

/* -------------------------------------------------------------------------
   Cabeçalho
   ------------------------------------------------------------------------- */
.mgn-header {
	background: #fff;
	padding: 20px 0 40px;
}

.mgn-header__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.mgn-header__logo {
	display: block;
	line-height: 0;
}

.mgn-header__logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.mgn-header {
		padding: 15px 0 45px;
	}

	.mgn-header__logo img {
		width: 180px !important;
	}
}

/* -------------------------------------------------------------------------
   Rodapé
   Mesma geometria do modelo antigo do Elementor: duas colunas (67,569% e 32,387%;
   70% e 30% no tablet; uma embaixo da outra no celular), ícones em cinco células
   de 20% com 10px de respiro, que encolhem no tablet como antes.
   ------------------------------------------------------------------------- */
.mgn-footer {
	background: #fff;
	border-top: 2px solid rgba(55, 30, 251, 0.12);
}

.mgn-footer .mgn-footer__inner {
	display: flex;
	align-items: stretch;
	padding-left: 0;
	padding-right: 0;
}

.mgn-footer__brand {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 67.569%;
	padding: 10px;
	line-height: 0;
}

.mgn-footer__brand a {
	display: block;
	/* o logo antigo ficava numa linha de texto: 6,5px a mais embaixo */
	padding-bottom: 6.5px;
	line-height: 0;
}

.mgn-footer__brand img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

.mgn-footer__social {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	width: 32.387%;
	margin: 0;
	padding: 10px;
	list-style: none;
}

.mgn-footer__social li {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20%;
	width: 20%;
	min-width: 0;
	margin: 0;
	padding: 10px;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
}

.mgn-footer__social a {
	display: inline;
	line-height: inherit;
}

.mgn-footer__social img {
	display: inline-block;
	width: 48px;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.mgn-footer__social .mgn-footer__menu {
	align-self: stretch;
}

.mgn-footer__social .mgn-burger {
	width: 40px;
	max-width: 100%;
	min-width: 32px;
	/* as barras antigas ficavam 4px abaixo do centro */
	top: 4px;
}

.mgn-footer__social .mgn-burger span {
	width: 100%;
}

@media (max-width: 1024px) {
	.mgn-footer__brand {
		width: 70%;
		padding: 0 0 0 10px;
	}

	.mgn-footer__brand a {
		padding-left: 15px;
	}

	.mgn-footer__social {
		width: 30%;
	}
}

@media (max-width: 767px) {
	.mgn-footer .mgn-footer__inner {
		flex-direction: column;
	}

	.mgn-footer__brand {
		justify-content: center;
		width: 100%;
		padding: 10px 0;
	}

	.mgn-footer__brand a {
		margin-top: 20px;
		padding-left: 0;
	}

	.mgn-footer__brand img {
		width: 224px !important;
	}

	.mgn-footer__social {
		width: 100%;
	}

	.mgn-footer__social img {
		width: 44px;
	}
}

/* -------------------------------------------------------------------------
   Menu verde em tela cheia
   ------------------------------------------------------------------------- */
/* Como no menu antigo, a página atrás não é travada: a barra de rolagem continua
   no lugar (em computadores com barra fixa, o X e os links ficam na mesma posição). */
.mgn-menu {
	position: fixed;
	inset: 0;
	right: auto;
	/* largura da janela inteira: a rolagem própria do menu fica por cima da barra da página */
	width: 100vw;
	z-index: 100000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--mgn-green);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mgn-menu[hidden] {
	display: none;
}

.mgn-menu.is-open {
	opacity: 1;
}

.mgn-menu:focus {
	outline: none;
}

.mgn-menu__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	min-height: 100%;
	padding: 20px;
}

.mgn-menu__nav {
	padding-top: 100px;
}

.mgn-menu__list,
.mgn-menu__langs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mgn-menu__list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.mgn-menu__list li,
.mgn-menu__langs li {
	margin: 0;
	padding: 0;
}

.mgn-menu__list a,
.mgn-menu__langs a {
	display: block;
	padding: 19px 15px;
	font-family: Roboto, Inter, sans-serif;
	font-size: 32px;
	font-weight: 300;
	line-height: 32px;
	letter-spacing: normal;
	text-align: right;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: color 0.2s;
}

.mgn-menu__list a:hover,
.mgn-menu__list a:focus-visible,
.mgn-menu__list .current-menu-item > a,
.mgn-menu__list .current-menu-ancestor > a,
.mgn-menu__langs a:hover,
.mgn-menu__langs a:focus-visible {
	color: var(--mgn-blue-2);
}

.mgn-menu__list a:focus:not(:focus-visible),
.mgn-menu__langs a:focus:not(:focus-visible) {
	outline: none;
}

.mgn-menu__langs {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 100px;
}

.mgn-menu__close {
	-webkit-appearance: none;
	appearance: none;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 30px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.mgn-menu__close::after {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background: var(--mgn-close-icon) no-repeat center / contain;
	transform: rotate(180deg);
	filter: brightness(100);
}

/* Só o X, sem nenhum quadrado, sombra ou traço em volta, em qualquer estado
   (o tema Hello Elementor desenha contorno preto + sombra branca no foco). */
.mgn-menu .mgn-menu__close,
.mgn-menu .mgn-menu__close:hover,
.mgn-menu .mgn-menu__close:focus,
.mgn-menu .mgn-menu__close:focus-visible,
.mgn-menu .mgn-menu__close:active {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}

.admin-bar .mgn-menu {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.admin-bar .mgn-menu__close {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 20px);
}

/* -------------------------------------------------------------------------
   Página de projeto
   ------------------------------------------------------------------------- */
.mgn-project {
	padding-top: 50px;
}

.mgn-project__grid,
.mgn-project__bottom {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	padding-right: 0;
}

.mgn-project__grid {
	align-items: flex-start;
	margin-bottom: 50px;
}

.mgn-project__gallery {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 65%;
	padding-right: 0;
}

.mgn-project__figure {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.mgn-project__figure a {
	display: block;
}

.mgn-project__img {
	display: block;
	width: 100%;
	height: auto;
}

.mgn-project__info {
	box-sizing: border-box;
	width: 35%;
	padding: 50px 10px 0 50px;
	font-family: Roboto, Inter, sans-serif;
}

.mgn-back {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	line-height: 0;
	cursor: pointer;
}

.mgn-back:hover,
.mgn-back:focus {
	background: transparent;
}

.mgn-back img {
	display: block;
	width: 50px;
	height: auto;
	opacity: 0.4;
	transition: opacity 0.2s;
}

.mgn-back:hover img,
.mgn-back:focus-visible img {
	opacity: 0.8;
}

.mgn-back--top {
	margin-bottom: 50px;
}

.mgn-project .mgn-project__title {
	margin: 0 0 20px;
	padding: 0;
	font-family: Roboto, Inter, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mgn-blue);
}

.mgn-project__content {
	font-family: Roboto, Inter, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--mgn-grey);
}

.mgn-project .mgn-project__content h1,
.mgn-project .mgn-project__content h2,
.mgn-project .mgn-project__content h3,
.mgn-project .mgn-project__content h4,
.mgn-project .mgn-project__content h5,
.mgn-project .mgn-project__content h6 {
	font-family: Inter, sans-serif;
}

.mgn-project__bottom {
	margin-top: -110px;
	padding-top: 10px;
	padding-bottom: 30px;
}

.mgn-project__bottom-spacer {
	width: 65%;
}

.mgn-project__bottom-back {
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	width: 35%;
	padding-left: 10px;
}

@media (max-width: 1024px) {
	.mgn-back--top {
		display: none;
	}
}

@media (max-width: 767px) {
	.mgn-project__gallery,
	.mgn-project__info,
	.mgn-project__bottom-spacer,
	.mgn-project__bottom-back {
		width: 100%;
	}

	.mgn-project__gallery {
		padding: 10px;
	}

	.mgn-project__info {
		padding: 10px;
	}

	.mgn-project__bottom {
		margin-top: -20px;
	}

	.mgn-project__bottom-spacer {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Grades
   ------------------------------------------------------------------------- */
.mgn-grid {
	display: grid;
	column-gap: 30px;
	row-gap: 35px;
}

.mgn-grid--portfolio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mgn-grid--press {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.mgn-grid--portfolio,
	.mgn-grid--press {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.mgn-grid--portfolio,
	.mgn-grid--press {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Arquitetura */
.mgn-card {
	margin: 0;
}

.mgn-card__link {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 300px;
	overflow: hidden;
	background-color: #eee;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-decoration: none;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	transition: filter 0.3s;
}

.mgn-card__link:hover,
.mgn-card__link:focus-visible {
	filter: none;
	-webkit-filter: none;
}

.mgn-card__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	opacity: 0;
	transition: opacity 0.3s;
}

.mgn-card__title {
	position: relative;
	margin: 0;
	padding: 0 0 20px 20px;
	font-family: Roboto, Inter, sans-serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mgn-blue);
	opacity: 0;
	transition: opacity 0.3s;
}

.mgn-card__link:hover .mgn-card__overlay,
.mgn-card__link:focus-visible .mgn-card__overlay,
.mgn-card__link:hover .mgn-card__title,
.mgn-card__link:focus-visible .mgn-card__title {
	opacity: 1;
}

/* Press */
.mgn-press {
	display: flex;
	margin: 0;
	/* o modelo antigo tinha uma seção vazia de 1px embaixo de cada caixa */
	padding-bottom: 1px;
}

.mgn-press__box {
	position: relative;
	box-sizing: border-box;
	flex: 1 1 auto;
	margin: 5px;
	padding: 15px;
	background: var(--mgn-green);
	font-family: var(--mgn-press-font);
}

.mgn-press__box p {
	margin: 0 0 0.9rem;
}

.mgn-press__title,
.mgn-press__s1,
.mgn-press__s2,
.mgn-press__summary {
	display: flow-root;
}

.mgn-press__title {
	font-family: var(--mgn-press-font);
	font-size: 28px;
	font-weight: 400;
	line-height: 38px;
	color: var(--mgn-blue-2);
}

.mgn-press__meta {
	width: 80%;
	margin-top: 90px;
	color: #fff;
}

.mgn-press__s1,
.mgn-press__s2 {
	font-family: var(--mgn-press-font);
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
}

.mgn-press__s1 {
	min-height: 52px;
	margin-bottom: 10px;
	font-weight: 500;
}

.mgn-press__s2 {
	margin-top: -10px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #fff;
	font-weight: 300;
}

.mgn-press__summary {
	margin-top: -10px;
	font-family: var(--mgn-press-font);
	font-size: 14px;
	font-weight: 300;
	line-height: 16px;
}

.mgn-press__image {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	overflow: hidden;
}

.mgn-press__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s;
}

.mgn-press__image:hover img,
.mgn-press__image:focus-visible img {
	opacity: 1;
}

@media (min-width: 768px) {
	.mgn-press__meta { width: 80%; }
}

@media (max-width: 767px) {
	.mgn-press__title {
		font-size: 22px;
		line-height: 27px;
	}

	.mgn-press__meta {
		width: 100%;
		margin-top: 10px;
	}

	/* no celular, a coluna vazia do modelo antigo descia para baixo do texto (1px) */
	.mgn-press__box {
		padding-bottom: 16px;
	}
}

/* -------------------------------------------------------------------------
   Formulário de contato
   ------------------------------------------------------------------------- */
.mgn-form {
	position: relative;
	--mgn-field-color: var(--mgn-blue-2);
	--mgn-btn-bg: var(--mgn-blue-2);
	--mgn-btn-color: #fff;
	--mgn-row-gap: 40px;
}

.mgn-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mgn-form__fields {
	display: flex;
	flex-wrap: wrap;
}

.mgn-form__group {
	box-sizing: border-box;
	width: var(--mgn-w, 100%);
	margin-bottom: var(--mgn-row-gap);
}

.mgn-form__label {
	display: block;
	margin-bottom: 0;
	font-family: "Inter Tight", Inter, sans-serif;
	font-weight: 300;
}

.mgn-form input[type="text"],
.mgn-form input[type="email"],
.mgn-form input[type="tel"],
.mgn-form input[type="url"],
.mgn-form input[type="number"],
.mgn-form input[type="date"],
.mgn-form input[type="time"],
.mgn-form textarea,
.mgn-form select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	font-family: "Inter Tight", Inter, sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mgn-field-color);
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mgn-form textarea {
	padding: 5px 14px;
	resize: vertical;
}

.mgn-form ::placeholder {
	color: var(--mgn-field-color);
	opacity: 1;
}

.mgn-form input:focus,
.mgn-form textarea:focus,
.mgn-form select:focus {
	outline: 2px solid var(--mgn-field-color);
	outline-offset: 0;
}

.mgn-form [aria-invalid="true"] {
	outline: 2px solid #d63638;
}

.mgn-form__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: "Inter Tight", Inter, sans-serif;
	font-size: 16px;
	color: var(--mgn-field-color);
}

.mgn-form__actions {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-bottom: 0;
}

.mgn-form__actions--start { justify-content: flex-start; }
.mgn-form__actions--center { justify-content: center; }
.mgn-form__actions--stretch .mgn-form__button { width: 100%; }

.mgn-form__button {
	-webkit-appearance: none;
	appearance: none;
	min-height: 40px;
	margin: 0;
	padding: 0 16px;
	font-family: "Inter Tight", Inter, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	color: var(--mgn-btn-color);
	background: var(--mgn-btn-bg);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: opacity 0.2s;
}

.mgn-form__button:hover,
.mgn-form__button:focus {
	color: var(--mgn-btn-color);
	background: var(--mgn-btn-bg);
	opacity: 0.85;
}

.mgn-form__button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.mgn-form__message {
	margin-top: calc(var(--mgn-row-gap) * 0.5);
	font-family: "Inter Tight", Inter, sans-serif;
	font-size: 16px;
	color: var(--mgn-field-color);
}

.mgn-form__message:empty {
	display: none;
}

.mgn-form__message.is-error {
	color: #d63638;
}

/* -------------------------------------------------------------------------
   CSS que estava guardado nas páginas pelo Elementor Pro
   ------------------------------------------------------------------------- */

/* Sobre (PT e EN): fotos da equipe com texto ao passar o mouse */
.boxEquipe { position: relative; min-height: 450px; }
.boxEquipe .content { position: absolute; height: 100%; top: 0; left: 0; display: none; background-color: #3526FF; z-index: 2; }
.boxEquipe:hover .content { display: block; }
.boxEquipe .photo { width: 100% !important; height: 100%; position: absolute; left: 0; top: 0; }
.boxEquipe .imgd { position: absolute; bottom: 0; left: 20px; z-index: 3; width: auto !important; height: auto !important; max-width: 90px; max-height: 90px; }
.boxEquipe .imgd.close { display: none; }
.boxEquipe:hover .imgd.close { display: block; }
.boxEquipe:hover .imgd.open { display: none; }
@media (max-width: 768px) {
	.boxEquipe .content { height: calc(100% + 20px); }
}