/* ============================================================
   Header global — MeloQA
   Fonte única para todos os estilos do header (logo + nav).
   Linkado em todas as páginas do site.
   Versão canônica: home (index.html).
============================================================ */

/* ── Submenu "Recursos" — dropdown do nav ── */
#menu-item-58 {
	position: relative;
}

.sc_layouts_menu_nav > li > ul.sub-menu-recursos,
.sub-menu-recursos {
	background-color: #ffffff !important;
	top: calc(100% + 4px) !important;
	left: -160% !important;
	transform: none !important;
	position: absolute !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13) !important;
	padding: 12px !important;
	width: 570px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 6px !important;
	z-index: 9999 !important;
	list-style: none !important;
	margin: 0 !important;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

#menu-item-58:hover > .sub-menu-recursos {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.sub-menu-recursos > li {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
}

.sub-menu-recursos > li > a {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	color: #333 !important;
	background: transparent !important;
	transition: background 0.2s ease !important;
	line-height: 1 !important;
}

.sub-menu-recursos > li > a:hover,
.sub-menu-recursos > li > a:focus {
	background: #f5f3fb !important;
	color: #333 !important;
}

.sub-menu-recursos > li > a:after,
.sub-menu-recursos > li > a:before {
	display: none !important;
	content: none !important;
}

.smr-icon {
	display: block;
	width: 48px;
	height: 48px;
	min-width: 48px;
	background-color: #ede9f7;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
}

.smr-icon-tutoriais {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A695D0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='15' height='12' rx='2'/%3E%3Cpath d='M17 10l4.5-2.5v9L17 14'/%3E%3C/svg%3E");
}

.smr-icon-suporte {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A695D0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 1 18 0'/%3E%3Crect x='2' y='11' width='3' height='6' rx='1.5'/%3E%3Crect x='19' y='11' width='3' height='6' rx='1.5'/%3E%3C/svg%3E");
}

.smr-icon-documentacao {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A695D0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E");
}

.smr-icon-integracoes {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A695D0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

.smr-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.smr-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #222;
	line-height: 1.3;
}

.smr-desc {
	display: block;
	font-size: 12px;
	color: #888;
	line-height: 1.5;
	font-weight: 400;
	white-space: normal;
}

/* ── Botão "Criar conta grátis" no header ── */
.meloqa-btn-register .sc_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50px !important;
	padding: 0 28px !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: #7f67ba !important;
	color: #ffffff !important;
	border: none !important;
	transition: transform 0.2s ease, background-color 0.2s ease !important;
}
.meloqa-btn-register .sc_button:hover,
.meloqa-btn-register .sc_button:focus-visible {
	background: #FDA933 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

/* ── Botão "Contato" no header ── */
.meloqa-btn-contact .sc_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50px !important;
	padding: 0 28px !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: transparent !important;
	color: #FDA933 !important;
	border: 2px solid #FDA933 !important;
	box-shadow: none !important;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}
.meloqa-btn-contact .sc_button:hover,
.meloqa-btn-contact .sc_button:focus,
.meloqa-btn-contact .sc_button:focus-visible,
.meloqa-btn-contact .sc_button_bordered.color_style_link2:hover,
.meloqa-btn-contact .sc_button_bordered.color_style_link2:focus {
	background: #FDA933 !important;
	background-color: #FDA933 !important;
	border-color: #FDA933 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

/* ── Logo: garante visibilidade no header mobile ── */
.trx_addons_inline_109621425 img.logo_image,
.trx_addons_inline_1530311340 img.logo_image {
	max-height: 32px;
	width: auto;
}

/* ── Burger mobile (as 3 barrinhas) ── */
.sc_layouts_menu_mobile_button_modern_burger {
	position: relative;
	display: inline-block !important;
	vertical-align: middle;
}
.sc_layouts_menu_mobile_button_modern_burger .sc_layouts_item_link {
	position: relative;
	width: 30px;
	height: 28px;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}
.sc_layouts_menu_mobile_button_modern_burger .sc_layouts_item_icon {
	font-size: 2em;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 2px;
	border-radius: 4px;
	background-color: var(--theme-color-text_dark);
}
.sc_layouts_menu_mobile_button_modern_burger .sc_layouts_item_icon:before,
.sc_layouts_menu_mobile_button_modern_burger .sc_layouts_item_icon:after {
	font-family: inherit;
	content: '' !important;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	height: 2px;
	border-radius: 4px;
	background-color: var(--theme-color-text_dark);
}
.sc_layouts_menu_mobile_button_modern_burger .sc_layouts_item_icon:before {
	top: -7px;
	width: 30px;
}
.sc_layouts_menu_mobile_button_modern_burger .sc_layouts_item_icon:after {
	top: 7px;
	width: 20px;
	transition: width 0.3s ease-out;
}
.sc_layouts_menu_mobile_button_modern_burger:hover .sc_layouts_item_icon:after {
	width: 30px;
}

/* ── Mobile Burger Menu Overlay ── */
.menu_mobile .menu_mobile_inner {
	background-color: #16111ded !important;
}
.menu_mobile .menu_mobile_inner a,
.menu_mobile .menu_mobile_inner .menu_mobile_nav_area li:before {
	color: #ffffff !important;
}
.menu_mobile .menu_mobile_inner a:hover,
.menu_mobile .menu_mobile_inner .current-menu-ancestor > a,
.menu_mobile .menu_mobile_inner .current-menu-item > a {
	color: rgba(255, 255, 255, 0.7) !important;
}

.menu_mobile_cta_wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin-top: 4em !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.menu_mobile_cta_btn {
	display: inline-block !important;
	padding: 14px 24px !important;
	border-radius: 50px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-align: center !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	box-sizing: border-box !important;
	transition: opacity 0.2s ease !important;
}
.menu_mobile_cta_btn:hover {
	opacity: 0.85 !important;
	text-decoration: none !important;
}
.menu_mobile_cta_btn--primary {
	background: #b06aff !important;
	color: #fff !important;
	border: none !important;
}
.menu_mobile_cta_btn--secondary {
	background: #FDA933;
	color: #FFF !important;
	border: 1.5px solid #FDA933 !important;
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {
	/* Logo esquerda, burger direita */
	.elementor-element-0022b99 > .elementor-container {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.elementor-element-0022b99 .elementor-element-e17145d,
	.elementor-element-0022b99 .elementor-element-9a16312 {
		width: auto !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
	}
	.elementor-element-e17145d > .elementor-widget-wrap {
		padding: 0 !important;
		justify-content: flex-start !important;
	}

	/* Ocultar botão Contato, alinhar burger à direita */
	.elementor-element-a588e5b {
		display: none !important;
	}
	.elementor-element-9a16312 > .elementor-widget-wrap {
		padding: 0 !important;
		justify-content: flex-end !important;
	}

	/* Botão Contato: borda visível */
	.sc_button.sc_button_bordered {
		border: 1.5px solid currentColor !important;
		border-radius: 999px;
		padding: 6px 16px;
	}
}

/* ── Ocultar texto "Close" do botão fechar do burger ── */
.menu_button_close_text {
	display: none !important;
}

/* ── Ocultar widget flutuante quando footer está visível (mobile/tablet) ── */
@media (max-width: 1024px) {
	body.footer-in-view .meloqa-side-widget {
		opacity: 0 !important;
		pointer-events: none !important;
		transition: opacity 0.3s ease !important;
	}
}

/* ── Ocultar widget flutuante quando burger está aberto (tablet/mobile) ── */
@media (max-width: 1024px) {
	body.menu_mobile_opened .meloqa-side-widget {
		display: none !important;
	}
}

/* ── CTAs do burger mobile: cascata após todos os links ── */
@media (max-width: 767px) {
	.menu_mobile_cta_wrap .menu_mobile_cta_btn {
		opacity: 0;
		visibility: hidden;
	}
	.menu_mobile.opened .menu_mobile_cta_btn--primary {
		animation: fadeInAnim 0.5s ease forwards;
		animation-delay: 1.5s;
		visibility: visible;
	}
	.menu_mobile.opened .menu_mobile_cta_btn--secondary {
		animation: fadeInAnim 0.5s ease forwards;
		animation-delay: 1.9s;
		visibility: visible;
	}
}

/* ── Ocultar CTAs do burger no tablet/notebook (já existem no painel lateral direito) ── */
@media (min-width: 768px) and (max-width: 1279px) {
	.menu_mobile_cta_wrap {
		display: none !important;
	}
	.menu_mobile_header_wrap .sc_layouts_logo img {
		max-height: 36px !important;
		width: auto !important;
	}
}

/* ── Sticky header — desktop/laptop (≥ 1025px) ── */
@media (min-width: 1025px) {
	/* Sempre fixo: sem troca de position, só o background transiciona */
	header.top_panel {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999 !important;
		background-color: transparent !important;
		box-shadow: none;
		transition: background-color 0.4s ease, box-shadow 0.4s ease;
	}
	header.top_panel.is-sticky {
		background-color: #FAF9FD !important;
		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
	}
}

/* ── Tablet/notebook (821px–1024px) — hero spacing ── */
@media (min-width: 821px) and (max-width: 1024px) {
	.meloqa-top-banner {
		padding-top: 200px !important;
	}
}

/* ── iPad Air 5 (≤ 820px) — header mobile + hero spacing ── */
@media (max-width: 820px) {
	/* Ocultar header desktop, exibir header mobile */
	.elementor-element-33134ba { display: none !important; }
	.elementor-element-0022b99 { display: flex !important; }
	/* Ocultar burger duplicado no header mobile */
	.elementor-element-e883976 { display: none !important; }
	/* Ocultar botão Contato no header mobile */
	.elementor-element-a588e5b { display: none !important; }

	/* Logo esquerda, burger direita — container 100% sem padding interno */
	.elementor-element-0022b99 > .elementor-container {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.elementor-element-0022b99 .elementor-element-e17145d,
	.elementor-element-0022b99 .elementor-element-9a16312 {
		width: auto !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
	}
	.elementor-element-e17145d > .elementor-widget-wrap,
	.elementor-element-e17145d > .elementor-widget-wrap > .elementor-widget {
		padding: 0 !important;
		justify-content: flex-start !important;
	}
	.elementor-element-9a16312 > .elementor-widget-wrap {
		padding: 0 !important;
		justify-content: flex-end !important;
	}

	/* Hero: alinhar ao topo e aplicar padding */
	.meloqa-top-banner {
		justify-content: flex-start !important;
		padding: 20vw 4vw 0 !important;
	}
}

/* ── Mobile pequeno (≤ 480px) — padding lateral e hero ── */
@media (max-width: 480px) {
	.elementor-container,
	.elementor-column-gap-extended > .elementor-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.meloqa-top-banner {
		padding: 40vw 4vw 40px !important;
		min-height: auto !important;
	}
}

/* ── Linha hover do menu — reduzida para 1px ── */
.menu_hover_zoom_line > ul > li:not(.menu-collapse) > a:after {
	height: 1px !important;
}

