/* ==========================================================================
   Grupo MW7 — hub editorial Insights
   Tokens extraídos do design da home (dark + accent laranja).
   ========================================================================== */

:root {
	--mw7-bg: #0b0f14;
	--mw7-surface: #12161d;
	--mw7-surface-2: #171c24;
	--mw7-line: rgba(255, 255, 255, 0.09);
	--mw7-line-strong: rgba(255, 255, 255, 0.16);
	--mw7-text: #ffffff;
	--mw7-muted: #94969c;
	--mw7-muted-2: #b6b6b6;
	--mw7-accent: #ef6820;
	--mw7-accent-soft: #f38744;

	--mw7-shell: 1140px;
	--mw7-shell-narrow: 760px;
	--mw7-radius: 14px;
	--mw7-radius-sm: 999px;

	--mw7-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* 76px de conteúdo + 1px de borda. Usado para tirar o cabeçalho do fluxo
	   na home, onde o hero precisa da tela inteira. */
	--mw7-header-h: 77px;
}

body.mw7 {
	margin: 0;
	background: var(--mw7-bg);
	color: var(--mw7-text);
	font-family: var(--mw7-font);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.mw7 * {
	box-sizing: border-box;
}

body.mw7 a {
	color: inherit;
	text-decoration: none;
}

body.mw7 img {
	max-width: 100%;
	height: auto;
	display: block;
}

.mw7-skip {
	position: absolute;
	left: -9999px;
}

.mw7-skip:focus {
	left: 16px;
	top: 16px;
	z-index: 999;
	background: var(--mw7-accent);
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
}

.mw7-shell {
	width: 100%;
	max-width: var(--mw7-shell);
	margin-inline: auto;
	padding-inline: 20px;
}

.mw7-shell--narrow {
	max-width: var(--mw7-shell-narrow);
}

/* --------------------------------------------------------- Botões */

.mw7-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--mw7-radius-sm);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mw7-btn--primary {
	background: var(--mw7-accent);
	color: #fff;
}

.mw7-btn--primary:hover {
	background: var(--mw7-accent-soft);
}

.mw7-btn--ghost {
	border-color: var(--mw7-line-strong);
	color: var(--mw7-text);
}

.mw7-btn--ghost:hover {
	border-color: var(--mw7-accent);
	color: var(--mw7-accent);
}

/* --------------------------------------------------------- Header */

/* Sempre transparente, inclusive rolado: o painel escuro cortava a
   ambientação ao meio. A legibilidade vem do desfoque do que passa por
   baixo, não de uma faixa de cor. */

.mw7-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.28s ease, border-color 0.28s ease, backdrop-filter 0.28s ease;
}

.mw7-header.is-rolado {
	background: transparent;
	-webkit-backdrop-filter: saturate(135%) blur(16px);
	backdrop-filter: saturate(135%) blur(16px);
	border-bottom-color: transparent;
}

/* O painel do megamenu precisa de fundo mesmo com o header transparente. */
.mw7-nav__list > li.is-open ~ * {
	pointer-events: auto;
}

.mw7-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 76px;
}

/* Logo e CTA não encolhem: com oito itens de menu o nav espremia os dois,
   deixando o logo com 21px e quebrando o botão em duas linhas. */

.mw7-header__logo {
	flex: 0 0 auto;
}

.mw7-header__logo img {
	width: 132px;
	max-width: none;
	height: auto;
}


.mw7-nav {
	margin-left: auto;
	min-width: 0;
}

.mw7-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw7-nav-toggle,
.mw7-burger {
	display: none;
}

/* --------------------------------------------------------- Breadcrumb */

.mw7-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: 13px;
	color: var(--mw7-muted);
}

.mw7-breadcrumb li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--mw7-line-strong);
}

.mw7-breadcrumb a:hover {
	color: var(--mw7-accent);
}

/* --------------------------------------------------------- Hero do hub */

.mw7-hub-hero {
	padding: 56px 0 32px;
	border-bottom: 1px solid var(--mw7-line);
}

.mw7-hub-hero--compact {
	padding-bottom: 28px;
}

.mw7-hub-hero__title {
	margin: 0 0 18px;
	font-size: clamp(30px, 4.6vw, 50px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	max-width: 17ch;
}

.mw7-hub-hero--compact .mw7-hub-hero__title {
	font-size: clamp(26px, 3.6vw, 38px);
	max-width: 24ch;
}

.mw7-hub-hero__lead {
	max-width: 62ch;
	color: var(--mw7-muted-2);
	font-size: 17px;
}

.mw7-hub-hero__lead p {
	margin: 0 0 12px;
}

/* --------------------------------------------------------- Chips / categorias */

.mw7-chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--mw7-line-strong);
	border-radius: var(--mw7-radius-sm);
	font-size: 13px;
	font-weight: 500;
	color: var(--mw7-muted-2);
	transition: border-color 0.18s ease, color 0.18s ease;
}

a.mw7-chip:hover {
	border-color: var(--mw7-accent);
	color: var(--mw7-accent);
}

.mw7-chip--active {
	background: var(--mw7-accent);
	border-color: var(--mw7-accent);
	color: #fff;
}

.mw7-cat-nav {
	padding-top: 26px;
}

.mw7-cat-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------- Grade de cards */

.mw7-hub-body {
	padding: 34px 0 72px;
}

.mw7-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 26px;
}

.mw7-card {
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line);
	border-radius: var(--mw7-radius);
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.mw7-card:hover {
	border-color: var(--mw7-line-strong);
	transform: translateY(-3px);
}

.mw7-card__media {
	aspect-ratio: 16 / 9;
	background: var(--mw7-surface-2);
	overflow: hidden;
}

.mw7-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw7-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #171c24 0%, #0f1319 60%, rgba(239, 104, 32, 0.22) 100%);
}

.mw7-card__body {
	padding: 22px;
}

.mw7-card__title {
	margin: 14px 0 10px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.mw7-card:hover .mw7-card__title {
	color: var(--mw7-accent-soft);
}

.mw7-card__excerpt {
	margin: 0 0 16px;
	color: var(--mw7-muted);
	font-size: 15px;
	line-height: 1.6;
}

.mw7-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	font-size: 13px;
	color: var(--mw7-muted);
}

/* --------------------------------------------------------- Artigo */

.mw7-article__head {
	padding: 48px 0 0;
}

.mw7-article__title {
	margin: 16px 0 18px;
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.02em;
}

.mw7-article__standfirst {
	margin: 0 0 24px;
	color: var(--mw7-muted-2);
	font-size: 19px;
	line-height: 1.6;
}

.mw7-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--mw7-line);
	font-size: 14px;
	color: var(--mw7-muted);
}

.mw7-article__author a {
	color: var(--mw7-text);
	border-bottom: 1px solid var(--mw7-line-strong);
}

.mw7-article__author a:hover {
	color: var(--mw7-accent);
	border-color: var(--mw7-accent);
}

.mw7-article__cover {
	margin-top: 34px;
}

.mw7-article__cover img {
	width: 100%;
	border-radius: var(--mw7-radius);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mw7-article__content {
	padding: 40px 20px 8px;
	font-size: 18px;
	line-height: 1.75;
	color: #e7e8ea;
}

.mw7-article__content h2 {
	margin: 46px 0 16px;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--mw7-text);
}

.mw7-article__content h3 {
	margin: 34px 0 12px;
	font-size: 21px;
	font-weight: 600;
	color: var(--mw7-text);
}

.mw7-article__content p {
	margin: 0 0 22px;
}

.mw7-article__content ul,
.mw7-article__content ol {
	margin: 0 0 24px;
	padding-left: 22px;
}

.mw7-article__content li {
	margin-bottom: 10px;
}

.mw7-article__content li::marker {
	color: var(--mw7-accent);
}

.mw7-article__content a {
	color: var(--mw7-accent-soft);
	border-bottom: 1px solid rgba(243, 135, 68, 0.4);
}

.mw7-article__content a:hover {
	border-color: var(--mw7-accent-soft);
}

.mw7-article__content strong {
	color: #fff;
	font-weight: 600;
}

.mw7-article__content blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--mw7-accent);
	color: var(--mw7-muted-2);
	font-size: 19px;
}

.mw7-article__content table {
	width: 100%;
	margin: 0 0 28px;
	border-collapse: collapse;
	font-size: 15px;
	display: block;
	overflow-x: auto;
}

.mw7-article__content th,
.mw7-article__content td {
	padding: 12px 14px;
	border: 1px solid var(--mw7-line);
	text-align: left;
	vertical-align: top;
}

.mw7-article__content th {
	background: var(--mw7-surface-2);
	font-weight: 600;
	color: #fff;
}

/* Resposta direta — item 1 do padrão editorial */

.mw7-answer {
	margin: 0 0 32px;
	padding: 22px 24px;
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line);
	border-left: 3px solid var(--mw7-accent);
	border-radius: var(--mw7-radius);
}

.mw7-answer__label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mw7-accent);
}

.mw7-answer p:last-child {
	margin-bottom: 0;
}

/* CTA no meio do artigo */

.mw7-inline-cta {
	margin: 44px 0;
	padding: 30px;
	background: linear-gradient(135deg, var(--mw7-surface-2) 0%, rgba(239, 104, 32, 0.1) 100%);
	border: 1px solid var(--mw7-line-strong);
	border-radius: var(--mw7-radius);
}

.mw7-inline-cta__title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.mw7-inline-cta__text {
	margin: 0 0 20px;
	color: var(--mw7-muted-2);
	font-size: 16px;
}

/* FAQ */

.mw7-faq {
	margin: 48px 0 8px;
}

.mw7-faq__title {
	margin: 0 0 18px;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 700;
}

.mw7-faq__item {
	border: 1px solid var(--mw7-line);
	border-radius: var(--mw7-radius);
	margin-bottom: 12px;
	background: var(--mw7-surface);
}

.mw7-faq__item summary {
	padding: 18px 22px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.mw7-faq__item summary::-webkit-details-marker {
	display: none;
}

.mw7-faq__item summary::after {
	content: "+";
	float: right;
	color: var(--mw7-accent);
	font-size: 22px;
	line-height: 1;
}

.mw7-faq__item[open] summary::after {
	content: "\2212";
}

.mw7-faq__answer {
	padding: 0 22px 18px;
	color: var(--mw7-muted-2);
	font-size: 16px;
}

.mw7-faq__answer p:last-child {
	margin-bottom: 0;
}

/* Caixa de autoria */

.mw7-author-box {
	display: flex;
	gap: 20px;
	margin: 48px 0 0;
	padding: 26px;
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line);
	border-radius: var(--mw7-radius);
}

.mw7-author-box__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.mw7-author-box__name {
	margin: 0 0 2px;
	font-size: 18px;
	font-weight: 600;
}

.mw7-author-box__role {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--mw7-accent);
}

.mw7-author-box__bio {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--mw7-muted);
}

.mw7-author-box__link {
	font-size: 14px;
	color: var(--mw7-accent-soft);
	border-bottom: 1px solid rgba(243, 135, 68, 0.4);
}

/* Relacionados */

.mw7-related {
	padding: 64px 20px 72px;
}

.mw7-related__title {
	margin: 0 0 26px;
	font-size: clamp(22px, 2.8vw, 28px);
	font-weight: 700;
}

/* Paginação */

.mw7-hub-body .navigation.pagination {
	margin-top: 44px;
}

.mw7-hub-body .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.mw7-hub-body .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--mw7-line);
	border-radius: 10px;
	color: var(--mw7-muted-2);
	font-size: 15px;
}

.mw7-hub-body .page-numbers:hover {
	border-color: var(--mw7-accent);
	color: var(--mw7-accent);
}

.mw7-hub-body .page-numbers.current {
	background: var(--mw7-accent);
	border-color: var(--mw7-accent);
	color: #fff;
}

.mw7-empty {
	color: var(--mw7-muted);
	font-size: 17px;
}

/* Busca */

.mw7-search {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 18px 0 0;
}

.mw7-search input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line-strong);
	border-radius: var(--mw7-radius-sm);
	color: var(--mw7-text);
	font-family: inherit;
	font-size: 15px;
}

.mw7-search input[type="search"]:focus {
	outline: none;
	border-color: var(--mw7-accent);
}

.mw7-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.mw7-embed {
	position: relative;
	margin: 0 0 26px;
	aspect-ratio: 16 / 9;
}

.mw7-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--mw7-radius);
}

/* --------------------------------------------------------- Footer */

.mw7-footer {
	border-top: 1px solid var(--mw7-line);
	background: #090c10;
	padding: 56px 0 0;
}

.mw7-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 36px;
	padding-bottom: 42px;
}

.mw7-footer__tagline {
	margin: 16px 0 0;
	color: var(--mw7-accent);
	font-size: 15px;
	font-weight: 500;
}

.mw7-footer__title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mw7-muted);
}

.mw7-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw7-footer__col li {
	margin-bottom: 10px;
	font-size: 15px;
	color: var(--mw7-muted-2);
}

.mw7-footer__col a:hover {
	color: var(--mw7-accent);
}

.mw7-footer__legal {
	padding: 20px;
	border-top: 1px solid var(--mw7-line);
	font-size: 14px;
	color: var(--mw7-muted);
}

.mw7-footer__legal p {
	margin: 0;
}

/* --------------------------------------------------------- Mobile */

@media (max-width: 1024px) {
	.mw7-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 860px) {
	/* O CTA primario nao some no mobile: passa a viver dentro do menu aberto. */
	.mw7-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin-left: auto;
		cursor: pointer;
	}

	.mw7-burger span {
		display: block;
		height: 2px;
		background: var(--mw7-text);
		border-radius: 2px;
	}

	.mw7-nav {
		display: none;
		order: 3;
		width: 100%;
		margin: 0;
		padding-bottom: 18px;
	}

	.mw7-nav-toggle:checked ~ .mw7-nav {
		display: block;
	}

	.mw7-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.mw7-header__inner {
		flex-wrap: wrap;
	}

	.mw7-hub-hero {
		padding-top: 36px;
	}

	.mw7-article__content {
		font-size: 17px;
	}

	.mw7-author-box {
		flex-direction: column;
	}

	.mw7-footer__inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 520px) {
	.mw7-grid {
		grid-template-columns: 1fr;
	}

	.mw7-inline-cta {
		padding: 22px;
	}

	.mw7-search {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.mw7 * {
		transition: none !important;
	}
}

/* ==========================================================================
   Páginas comerciais
   O conteúdo é montado no Elementor; o estilo mora aqui para que a estrutura
   fique leve no editor e consistente entre todas as páginas.
   ========================================================================== */

.mw7-page__crumbs {
	padding-top: 28px;
}

.mw7-page__crumbs .mw7-breadcrumb ol {
	margin-bottom: 0;
}

/* Seções */

.mw7 .mw7-sec {
	padding: 64px 20px;
}

.mw7 .mw7-sec--tight {
	padding-top: 32px;
}

.mw7 .mw7-sec--alt {
	background: var(--mw7-surface);
	border-block: 1px solid var(--mw7-line);
}

/* Tipografia das seções */

.mw7 .mw7-eyebrow .elementor-heading-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mw7-accent);
}

.mw7 .mw7-h1 .elementor-heading-title {
	font-size: clamp(32px, 4.6vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--mw7-text);
	max-width: 20ch;
}

.mw7 .mw7-h2 .elementor-heading-title {
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--mw7-text);
	max-width: 24ch;
}

.mw7 .mw7-h3 .elementor-heading-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mw7-text);
}

.mw7 .mw7-lead {
	color: var(--mw7-muted-2);
	font-size: 19px;
	line-height: 1.6;
	max-width: 68ch;
}

.mw7 .mw7-body {
	color: var(--mw7-muted);
	font-size: 17px;
	line-height: 1.7;
	max-width: 72ch;
}

.mw7 .mw7-lead p:last-child,
.mw7 .mw7-body p:last-child {
	margin-bottom: 0;
}

.mw7 .mw7-body a,
.mw7 .mw7-lead a {
	color: var(--mw7-accent-soft);
	border-bottom: 1px solid rgba(243, 135, 68, 0.4);
}

.mw7 .mw7-body a:hover,
.mw7 .mw7-lead a:hover {
	border-color: var(--mw7-accent-soft);
}

/* Botões do Elementor herdam o botão do sistema */

.mw7 .mw7-btn-primary .elementor-button {
	background: var(--mw7-accent);
	color: #fff;
	border-radius: var(--mw7-radius-sm);
	padding: 14px 26px;
	font-family: var(--mw7-font);
	font-size: 15px;
	font-weight: 600;
}

.mw7 .mw7-btn-primary .elementor-button:hover {
	background: var(--mw7-accent-soft);
	color: #fff;
}

.mw7 .mw7-btn-ghost .elementor-button {
	background: transparent;
	color: var(--mw7-text);
	border: 1px solid var(--mw7-line-strong);
	border-radius: var(--mw7-radius-sm);
	padding: 13px 25px;
	font-family: var(--mw7-font);
	font-size: 15px;
	font-weight: 600;
}

.mw7 .mw7-btn-ghost .elementor-button:hover {
	border-color: var(--mw7-accent);
	color: var(--mw7-accent);
}

/* Listas de sintomas e de escopo */

.mw7 .mw7-list .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px 30px;
}

.mw7 .mw7-list .elementor-icon-list-item {
	align-items: flex-start;
	padding: 0;
}

.mw7 .mw7-list .elementor-icon-list-item::before {
	content: "";
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	margin-top: 10px;
	margin-right: 14px;
	border-radius: 50%;
	background: var(--mw7-accent);
}

.mw7 .mw7-list .elementor-icon-list-icon {
	display: none;
}

.mw7 .mw7-list .elementor-icon-list-text {
	color: var(--mw7-muted-2);
	font-size: 16px;
	line-height: 1.6;
	padding-left: 0;
}

/* Método em etapas numeradas */

.mw7 .mw7-steps .elementor-icon-list-items {
	counter-reset: mw7step;
	display: grid;
	gap: 4px;
}

.mw7 .mw7-steps .elementor-icon-list-item {
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--mw7-line);
}

.mw7 .mw7-steps .elementor-icon-list-item:last-child {
	border-bottom: 0;
}

.mw7 .mw7-steps .elementor-icon-list-item::before {
	counter-increment: mw7step;
	content: counter(mw7step, decimal-leading-zero);
	flex: 0 0 auto;
	margin-right: 20px;
	color: var(--mw7-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	font-variant-numeric: tabular-nums;
}

.mw7 .mw7-steps .elementor-icon-list-icon {
	display: none;
}

.mw7 .mw7-steps .elementor-icon-list-text {
	color: var(--mw7-muted-2);
	font-size: 16px;
	line-height: 1.7;
	padding-left: 0;
}

/* Bloco de ressalva — "quando não faz sentido" */

.mw7 .mw7-note {
	padding: 26px 28px;
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line);
	border-left: 3px solid var(--mw7-accent);
	border-radius: var(--mw7-radius);
}

.mw7 .mw7-note .elementor-widget-container {
	color: var(--mw7-muted-2);
	font-size: 16px;
	line-height: 1.7;
}

/* Cartão de integração com o ecossistema */

.mw7 .mw7-panel {
	padding: 34px;
	background: linear-gradient(135deg, var(--mw7-surface-2) 0%, rgba(239, 104, 32, 0.08) 100%);
	border: 1px solid var(--mw7-line-strong);
	border-radius: var(--mw7-radius);
}

/* Grade de colunas internas */

.mw7 .mw7-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.mw7 .mw7-card-lite {
	padding: 26px;
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line);
	border-radius: var(--mw7-radius);
}

/* Tabelas dentro de text-editor do Elementor */

.mw7 .mw7-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	display: block;
	overflow-x: auto;
}

.mw7 .mw7-body th,
.mw7 .mw7-body td {
	padding: 12px 14px;
	border: 1px solid var(--mw7-line);
	text-align: left;
	vertical-align: top;
}

.mw7 .mw7-body th {
	background: var(--mw7-surface-2);
	color: #fff;
	font-weight: 600;
}

@media (max-width: 860px) {
	.mw7 .mw7-sec {
		padding: 44px 20px;
	}

	.mw7 .mw7-panel,
	.mw7 .mw7-note {
		padding: 22px;
	}

	.mw7 .mw7-lead {
		font-size: 17px;
	}
}

/* --------------------------------------------------------- Formulário (Elementor Pro)
   Sem isto o widget herda as cores padrão do kit — botão verde e label cinza
   claro sobre fundo escuro, com contraste insuficiente. */

.mw7 .mw7-form .elementor-field-group {
	margin-bottom: 6px;
}

.mw7 .mw7-form .elementor-field-label {
	color: var(--mw7-muted-2);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
}

.mw7 .mw7-form .elementor-field-group .elementor-field,
.mw7 .mw7-form .elementor-field-textual {
	background: var(--mw7-bg);
	border: 1px solid var(--mw7-line-strong);
	border-radius: 10px;
	color: var(--mw7-text);
	font-family: var(--mw7-font);
	font-size: 16px;
	padding: 13px 15px;
	min-height: 48px;
}

.mw7 .mw7-form textarea.elementor-field-textual {
	min-height: 120px;
	line-height: 1.6;
}

.mw7 .mw7-form .elementor-field-textual:focus {
	outline: none;
	border-color: var(--mw7-accent);
	box-shadow: 0 0 0 3px rgba(239, 104, 32, 0.18);
}

.mw7 .mw7-form .elementor-field-textual::placeholder {
	color: #6b7079;
}

.mw7 .mw7-form select.elementor-field-textual option {
	background: var(--mw7-bg);
	color: var(--mw7-text);
}

/* Aceite LGPD */

.mw7 .mw7-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
}

.mw7 .mw7-form .elementor-field-type-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--mw7-accent);
	flex-shrink: 0;
}

.mw7 .mw7-form .elementor-field-type-acceptance label {
	color: var(--mw7-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* Botão de envio */

.mw7 .mw7-form .elementor-button[type="submit"] {
	background: var(--mw7-accent);
	color: #fff;
	border: 0;
	border-radius: var(--mw7-radius-sm);
	padding: 14px 28px;
	font-family: var(--mw7-font);
	font-size: 15px;
	font-weight: 600;
	min-height: 48px;
}

.mw7 .mw7-form .elementor-button[type="submit"]:hover {
	background: var(--mw7-accent-soft);
}

/* Mensagens de retorno */

.mw7 .mw7-form .elementor-message {
	font-size: 15px;
	line-height: 1.6;
	margin-top: 12px;
}

.mw7 .mw7-form .elementor-message-success {
	color: #75e0a7;
}

.mw7 .mw7-form .elementor-message-danger,
.mw7 .mw7-form .elementor-field-required .elementor-message {
	color: #f7b27a;
}

.mw7 .mw7-form .elementor-field-group.elementor-error .elementor-field-textual {
	border-color: #f7b27a;
}

/* ==========================================================================
   Home — hero centralizado e cards clicáveis.
   Mantém os mesmos tokens da one-page anterior: fundo escuro, accent laranja
   e o ícone do ecossistema acima do título.
   ========================================================================== */

.mw7 .mw7-sec--hero {
	padding-top: 76px;
	padding-bottom: 68px;
	/* Sem camada sólida: o fundo interativo fica atrás e precisa atravessar. */
	background: radial-gradient(900px 420px at 50% -8%, rgba(239, 104, 32, 0.16), transparent 70%);
	border-bottom: 1px solid var(--mw7-line);
}

.mw7 .mw7-hero-center {
	align-items: center;
	text-align: center;
}

.mw7 .mw7-hero-center__icon img {
	width: 96px;
	height: auto;
	margin-inline: auto;
}

.mw7 .mw7-hero-center .mw7-h1 .elementor-heading-title {
	max-width: 22ch;
	margin-inline: auto;
}

.mw7 .mw7-hero-center .mw7-lead {
	max-width: 64ch;
	margin-inline: auto;
}

.mw7 .mw7-hero-center .mw7-cta-row {
	justify-content: center;
}

/* Cards clicáveis */

.mw7 .mw7-card-lite {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.mw7 .mw7-card-lite:hover {
	border-color: var(--mw7-accent);
	transform: translateY(-3px);
}

.mw7 .mw7-card-lite .mw7-h3 .elementor-heading-title {
	font-size: 19px;
}

.mw7 .mw7-card-lite .mw7-body {
	font-size: 15px;
	line-height: 1.6;
}

.mw7 .mw7-card-lite__go {
	display: inline-block;
	margin-top: 2px;
	color: var(--mw7-accent-soft);
	font-weight: 600;
	font-size: 15px;
	border-bottom: 0;
}

.mw7 .mw7-card-lite__go::after {
	content: " →";
}

.mw7 .mw7-card-lite:hover .mw7-card-lite__go {
	color: var(--mw7-accent);
}

@media (max-width: 860px) {
	.mw7 .mw7-sec--hero {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.mw7 .mw7-hero-center__icon img {
		width: 72px;
	}
}

/* ==========================================================================
   Megamenu
   Os links viram caixas flex de altura fixa: antes o chevron inline deixava
   só os itens com filhos mais altos, e a barra saía desalinhada.
   ========================================================================== */

.mw7-header {
	position: sticky;
	top: 0;
}

.mw7-nav__list {
	align-items: stretch;
	gap: 4px;
}

.mw7-nav__list > li {
	position: static;
	display: flex;
	align-items: stretch;
}

.mw7-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--mw7-muted-2);
	transition: color 0.18s ease, background-color 0.18s ease;
}

.mw7-nav__list > li > .mw7-nav__link:hover,
.mw7-nav__list > li.is-open > .mw7-nav__link,
.mw7-nav__list > li.current-menu-item > .mw7-nav__link,
.mw7-nav__list > li.current-menu-ancestor > .mw7-nav__link {
	color: var(--mw7-text);
	background: rgba(255, 255, 255, 0.06);
}

.mw7-nav__chevron {
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.55;
	transition: transform 0.18s ease;
}

.mw7-nav__list > li.is-open .mw7-nav__chevron {
	transform: translateY(1px) rotate(-135deg);
	opacity: 1;
}

/* Painel */

.mw7-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 45;
	padding: 26px 0 30px;
	background: rgba(14, 18, 24, 0.98);
	backdrop-filter: saturate(140%) blur(12px);
	border-top: 1px solid var(--mw7-line);
	border-bottom: 1px solid var(--mw7-line);
	box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.mw7-nav__list > li.is-open > .mw7-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mw7-mega__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px 20px;
	list-style: none;
	/* compensa o padding do card para o texto alinhar com o logo do header */
	margin: 0 -14px;
	padding: 0;
}

.mw7-mega__list li {
	display: block;
}

.mw7-mega__list .mw7-nav__link {
	display: block;
	height: auto;
	padding: 13px 14px;
	border-radius: 12px;
	white-space: normal;
	border: 1px solid transparent;
}

.mw7-mega__list .mw7-nav__link:hover {
	background: var(--mw7-surface);
	border-color: var(--mw7-line-strong);
}

.mw7-mega__list .mw7-nav__label {
	display: block;
	color: var(--mw7-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.mw7-mega__list .mw7-nav__link:hover .mw7-nav__label {
	color: var(--mw7-accent-soft);
}

.mw7-nav__desc {
	display: block;
	margin-top: 5px;
	color: var(--mw7-muted);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
}

/* Espaço fica curto bem antes do breakpoint mobile: o nav aperta primeiro. */

@media (max-width: 1500px) {
	.mw7-header__inner {
		gap: 16px;
	}

	.mw7-nav__link {
		padding: 0 9px;
		font-size: 14.5px;
	}

	.mw7-nav__list {
		gap: 2px;
	}
}

@media (max-width: 1240px) {
	.mw7-nav__link {
		padding: 0 7px;
		font-size: 13.5px;
	}
}

@media (max-width: 860px) {
	.mw7-nav__list > li {
		display: block;
	}

	.mw7-nav__link {
		height: auto;
		padding: 10px 0;
		white-space: normal;
	}

	.mw7-nav__list > li > .mw7-nav__link:hover,
	.mw7-nav__list > li.is-open > .mw7-nav__link {
		background: transparent;
	}

	/* No mobile o painel é apenas uma lista recuada, sempre aberta. */
	.mw7-mega {
		position: static;
		padding: 0 0 6px 14px;
		margin-left: 2px;
		background: transparent;
		backdrop-filter: none;
		border: 0;
		border-left: 1px solid var(--mw7-line-strong);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mw7-mega .mw7-shell {
		padding-inline: 0;
	}

	.mw7-mega__list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mw7-mega__list .mw7-nav__link {
		padding: 9px 0;
	}

	.mw7-mega__list .mw7-nav__label {
		font-size: 15px;
	}

	.mw7-nav__desc {
		display: none;
	}

	.mw7-nav__chevron {
		display: none;
	}
}

/* ==========================================================================
   Home — hero largo, revelação em scroll e o ícone que viaja com a página
   ========================================================================== */

/* ---------------------------------------------------------------- hero
   Ocupa a tela inteira, com tipografia display e o ícone do ecossistema
   ancorando o lado direito. O cabeçalho é sticky e ocupa 77px do fluxo,
   por isso a altura desconta esse valor.
   ------------------------------------------------------------------- */

.mw7 .mw7-sec--hero {
	display: flex;
	align-items: center;
	min-height: calc(100svh - 77px);
	padding-top: 40px;
	padding-bottom: 28px;
	overflow: hidden;
}

.mw7 .mw7-sec--hero > .e-con-inner {
	max-width: 1320px !important;
	width: 100%;
}

.mw7 .mw7-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.62fr);
	gap: 40px 56px;
	align-items: center;
	width: 100%;
}

.mw7 .mw7-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.mw7 .mw7-hero__copy .mw7-h1 .elementor-heading-title {
	max-width: 24ch;
	font-size: clamp(36px, 4.1vw, 60px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.032em;
}

/* O ponto final ganha a cor da marca, como nas referências. */
.mw7 .mw7-hero__copy .mw7-h1 .elementor-heading-title::after {
	content: ".";
	color: var(--mw7-accent);
}

.mw7 .mw7-hero__copy .mw7-lead {
	max-width: 52ch;
	font-size: 18px;
	color: var(--mw7-muted-2);
}

.mw7 .mw7-hero__copy .mw7-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mw7 .mw7-hero__copy .mw7-eyebrow .elementor-heading-title::before {
	content: "";
	width: 44px;
	height: 1px;
	background: var(--mw7-accent);
}

/* Cartões de prova */

.mw7 .mw7-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

.mw7 .mw7-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 168px;
	padding: 16px 20px;
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line);
	border-radius: var(--mw7-radius);
}

.mw7 .mw7-stat__n {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

.mw7 .mw7-stat__l {
	font-size: 13px;
	line-height: 1.4;
	color: var(--mw7-muted);
}

/* Arte do hero */

.mw7 .mw7-hero__arte {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.mw7 .mw7-hero__arte::before {
	content: "";
	position: absolute;
	inset: -18% -10%;
	background: radial-gradient(closest-side, rgba(239, 104, 32, 0.22), transparent 72%);
	pointer-events: none;
}

.mw7 .mw7-hero-center__icon img {
	width: clamp(180px, 22vw, 320px);
	height: auto;
	position: relative;
}

/* Rodapé do hero: assinatura cultural + indicador de rolagem */

.mw7 .mw7-hero__base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--mw7-line);
}

.mw7 .mw7-hero__assinatura {
	color: var(--mw7-accent);
	font-size: 15px;
	font-weight: 500;
}

/* Afasta do widget de chat, que é fixo no canto inferior direito. */
@media (min-width: 1025px) {
	.mw7 .mw7-hero__base {
		padding-right: 116px;
	}
}

.mw7 .mw7-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mw7-muted);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mw7 .mw7-hero__scroll i {
	width: 1px;
	height: 34px;
	background: linear-gradient(var(--mw7-accent), transparent);
	animation: mw7-desce 2.2s ease-in-out infinite;
	transform-origin: top;
}

@keyframes mw7-desce {
	0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
	50%      { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 1024px) {
	.mw7 .mw7-hero__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	/* A mensagem vem primeiro; o ícone deixa de tomar a primeira tela inteira. */
	.mw7 .mw7-hero__arte {
		justify-content: flex-start;
	}

	.mw7 .mw7-hero-center__icon img {
		width: clamp(120px, 26vw, 200px);
	}
}

@media (max-width: 680px) {
	.mw7 .mw7-sec--hero {
		min-height: auto;
		padding-top: 30px;
		padding-bottom: 36px;
	}

	.mw7 .mw7-hero__copy .mw7-h1 .elementor-heading-title {
		font-size: clamp(32px, 9vw, 44px);
		max-width: 18ch;
	}

	.mw7 .mw7-stat {
		min-width: 0;
		flex: 1 1 140px;
	}

	.mw7 .mw7-hero__base {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.mw7 .mw7-hero__arte {
		justify-content: center;
	}

	.mw7 .mw7-hero-center__icon img {
		width: clamp(120px, 38vw, 170px);
	}

	.mw7-header__logo img {
		width: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw7 .mw7-hero__scroll i {
		animation: none;
	}
}

/* Ícone do hero: flutua de leve, como na versão anterior do site. */

@keyframes mw7-flutua {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

.mw7 .mw7-hero-center__icon img {
	animation: mw7-flutua 5s ease-in-out infinite;
	will-change: transform;
}

/* Clone decorativo que desce com o scroll, alternando os lados. */

/* ---------------------------------------------------- cubo em partículas
   O PNG original serve de fonte para as partículas e depois some. Ele
   permanece no HTML como conteúdo real, garantindo o LCP e o fallback
   quando o canvas não pode ser usado.
   ---------------------------------------------------------------------- */

/* O palco cobre a coluna de arte e centraliza o canvas sobre onde o PNG
   está: como elemento de tamanho zero ele se alinhava ao lado da imagem. */

.mw7 .mw7-hero__arte {
	position: relative;
}

.mw7-cubo {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Translate em vez de place-items: o canvas é maior que o palco, e item de
   grid maior que a área alinha ao início em vez de centralizar.
   O JS reescreve este transform a cada quadro para a flutuação — daí ele
   também carregar o -50%. */
.mw7-cubo canvas {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	will-change: transform;
	pointer-events: auto;
}

.mw7 .mw7-cubo__fonte {
	visibility: hidden;
}

/* Revelação ao rolar */

.mw7-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mw7-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mw7-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------ seção em duas colunas */

/* O grid vai no .e-con-inner, que é quem contém os widgets. O container externo
   é `e-con-full` e não tem `.e-con-inner` como filho direto — ele fica um nível
   abaixo, dentro do container boxed. Por isso o seletor é descendente. */

.mw7 .mw7-split .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 18px 56px;
	align-items: start;
	align-content: start;
}

.mw7 .mw7-split .e-con-inner > .mw7-eyebrow {
	grid-column: 1;
	grid-row: 1;
}

.mw7 .mw7-split .e-con-inner > .mw7-h2 {
	grid-column: 1;
	grid-row: 2;
}

.mw7 .mw7-split .e-con-inner > .mw7-body,
.mw7 .mw7-split .e-con-inner > .mw7-lead,
.mw7 .mw7-split .e-con-inner > .mw7-list {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.mw7 .mw7-split .mw7-h2 .elementor-heading-title {
	max-width: 15ch;
}

@media (max-width: 900px) {
	.mw7 .mw7-split .e-con-inner {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* Repete as mesmas classes da regra de desktop: com `> *` a especificidade
	   ficava menor e o grid-column: 2 sobrevivia, mantendo duas colunas. */
	.mw7 .mw7-split .e-con-inner > .mw7-eyebrow,
	.mw7 .mw7-split .e-con-inner > .mw7-h2,
	.mw7 .mw7-split .e-con-inner > .mw7-body,
	.mw7 .mw7-split .e-con-inner > .mw7-lead,
	.mw7 .mw7-split .e-con-inner > .mw7-list {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --------------------------------------------- sintomas em cartões */

.mw7 .mw7-sintomas .elementor-icon-list-items {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px;
}

.mw7 .mw7-sintomas .elementor-icon-list-item {
	padding: 18px 20px;
	background: var(--mw7-surface);
	border: 1px solid var(--mw7-line);
	border-radius: var(--mw7-radius);
	align-items: flex-start;
}

.mw7 .mw7-sintomas .elementor-icon-list-item::before {
	margin-top: 9px;
}

.mw7 .mw7-sintomas .elementor-icon-list-text {
	font-size: 15.5px;
}

/* --------------------------------- método: lista vertical com círculos */

.mw7 .mw7-steps-v {
	counter-reset: mw7v;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 900px;
}

.mw7 .mw7-steps-v li {
	position: relative;
	counter-increment: mw7v;
	padding: 0 0 30px 78px;
	margin: 0;
}

.mw7 .mw7-steps-v li::before {
	content: counter(mw7v, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--mw7-line-strong);
	background: var(--mw7-surface);
	color: var(--mw7-accent);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* linha que liga os círculos */
.mw7 .mw7-steps-v li::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 52px;
	bottom: 8px;
	width: 1px;
	background: linear-gradient(var(--mw7-line-strong), transparent);
}

.mw7 .mw7-steps-v li:last-child {
	padding-bottom: 0;
}

.mw7 .mw7-steps-v li:last-child::after {
	display: none;
}

.mw7 .mw7-steps-v li:hover::before {
	border-color: var(--mw7-accent);
	background: rgba(239, 104, 32, 0.12);
}

.mw7 .mw7-steps-v strong {
	display: block;
	margin-bottom: 5px;
	color: #fff;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.mw7 .mw7-steps-v li {
	color: var(--mw7-muted-2);
	font-size: 16px;
	line-height: 1.65;
}

/* cada passo entra conforme a rolagem */
.mw7 .mw7-steps-v li {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.mw7 .mw7-reveal.is-in .mw7-steps-v li {
	opacity: 1;
	transform: none;
}

.mw7 .mw7-reveal.is-in .mw7-steps-v li:nth-child(1) { transition-delay: 0.00s; }
.mw7 .mw7-reveal.is-in .mw7-steps-v li:nth-child(2) { transition-delay: 0.08s; }
.mw7 .mw7-reveal.is-in .mw7-steps-v li:nth-child(3) { transition-delay: 0.16s; }
.mw7 .mw7-reveal.is-in .mw7-steps-v li:nth-child(4) { transition-delay: 0.24s; }
.mw7 .mw7-reveal.is-in .mw7-steps-v li:nth-child(5) { transition-delay: 0.32s; }
.mw7 .mw7-reveal.is-in .mw7-steps-v li:nth-child(6) { transition-delay: 0.40s; }
.mw7 .mw7-reveal.is-in .mw7-steps-v li:nth-child(7) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
	.mw7 .mw7-steps-v li {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 600px) {
	.mw7 .mw7-steps-v li {
		padding-left: 62px;
		padding-bottom: 26px;
	}

	.mw7 .mw7-steps-v li::before {
		width: 44px;
		height: 44px;
		font-size: 14px;
	}

	.mw7 .mw7-steps-v li::after {
		left: 22px;
		top: 44px;
	}
}

/* ------------------------------------------------ ícones nos cards */

.mw7 .mw7-card-lite__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 4px;
	border-radius: 12px;
	background: rgba(239, 104, 32, 0.12);
	border: 1px solid rgba(239, 104, 32, 0.28);
	color: var(--mw7-accent);
}

.mw7 .mw7-card-lite__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.mw7 .mw7-card-lite:hover .mw7-card-lite__icon {
	background: rgba(239, 104, 32, 0.2);
	border-color: var(--mw7-accent);
}

/* ------------------------------------------- cards de marca (4 por linha) */

.mw7 .mw7-brands {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.mw7 .mw7-brands > .mw7-card-lite {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mw7 .mw7-brand__logo {
	display: flex;
	align-items: center;
	height: 46px;
}

.mw7 .mw7-brand__logo img {
	max-height: 38px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.mw7 .mw7-card-lite:hover .mw7-brand__logo img {
	opacity: 1;
}

@media (max-width: 1000px) {
	.mw7 .mw7-brands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.mw7 .mw7-brands {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Abertura da home
   O símbolo flutua enquanto a página carrega; ao terminar, a cena avança
   para dentro dele e o hero abre atrás.
   ========================================================================== */

.mw7-intro {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	/* Emergência: se o JS não rodar, a tela sai sozinha e o site não trava. */
	animation: mw7-intro-emergencia 0s linear 6s forwards;
}

/* O fundo vive em duas metades: é o que permite a tela se abrir. */

.mw7-intro__cortina {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.2%;
	background:
		radial-gradient(760px 700px at 50% var(--foco), rgba(239, 104, 32, 0.14), transparent 70%),
		#07090c;
	transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

.mw7-intro__cortina--cima {
	top: 0;
	--foco: 92%;
}

.mw7-intro__cortina--baixo {
	bottom: 0;
	--foco: 8%;
}

@keyframes mw7-intro-emergencia {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.mw7-intro__marca img {
	width: clamp(96px, 13vw, 168px);
	height: auto;
	animation: mw7-intro-flutua 2.6s ease-in-out infinite;
}

@keyframes mw7-intro-flutua {
	0%, 100% { transform: translateY(-13px); }
	50%      { transform: translateY(13px); }
}

/* Linha de progresso: indica que algo está acontecendo, sem número inventado. */

.mw7-intro__barra {
	position: relative;
	display: block;
	width: 148px;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 2px;
}

.mw7-intro__barra i {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(90deg, transparent, var(--mw7-accent), transparent);
	transform: translateX(-100%);
	animation: mw7-intro-barra 1.15s ease-in-out infinite;
}

@keyframes mw7-intro-barra {
	to { transform: translateX(100%); }
}

/* Saída: o logo some primeiro, depois a tela se abre */

.mw7-intro.is-saindo {
	animation: none;
	pointer-events: none;
}

.mw7-intro.is-saindo .mw7-intro__marca img,
.mw7-intro.is-saindo .mw7-intro__barra {
	animation: none;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.mw7-intro.is-saindo .mw7-intro__cortina--cima {
	transform: translateY(-100%);
	transition-delay: 0.34s;
}

.mw7-intro.is-saindo .mw7-intro__cortina--baixo {
	transform: translateY(100%);
	transition-delay: 0.34s;
}

/* O chat do Leadster usa o z-index máximo possível, então não há como passar
   por cima dele: some durante a abertura e volta assim que a cena abre. A regra
   depende da classe que o JS adiciona — se o script falhar, o chat nunca é
   escondido. */

html.mw7-carregando .nld-chatbot {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.nld-chatbot {
	transition: opacity 0.45s ease 0.35s;
}

/* Enquanto a abertura está no ar, a página não rola por baixo dela. */

html.mw7-carregando,
html.mw7-carregando body {
	overflow: hidden;
}

/* O hero entra junto com a abertura da cena.
   O estado oculto depende de `mw7-com-intro`, que só existe quando o script da
   abertura realmente rodou. Sem JS, o hero nunca fica invisível. */

html.mw7-com-intro .mw7-sec--hero .mw7-hero__copy > *,
html.mw7-com-intro .mw7-sec--hero .mw7-hero__base {
	opacity: 0;
	transform: translateY(26px);
}

html.mw7-com-intro.mw7-aberto .mw7-sec--hero .mw7-hero__copy > *,
html.mw7-com-intro.mw7-aberto .mw7-sec--hero .mw7-hero__base {
	opacity: 1;
	transform: none;
	transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.mw7-aberto .mw7-sec--hero .mw7-hero__copy > *:nth-child(1) { transition-delay: 0.10s; }
html.mw7-aberto .mw7-sec--hero .mw7-hero__copy > *:nth-child(2) { transition-delay: 0.18s; }
html.mw7-aberto .mw7-sec--hero .mw7-hero__copy > *:nth-child(3) { transition-delay: 0.26s; }
html.mw7-aberto .mw7-sec--hero .mw7-hero__copy > *:nth-child(4) { transition-delay: 0.34s; }
html.mw7-aberto .mw7-sec--hero .mw7-hero__copy > *:nth-child(5) { transition-delay: 0.42s; }
html.mw7-aberto .mw7-sec--hero .mw7-hero__base { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
	.mw7-intro,
	.mw7-intro__marca img,
	.mw7-intro__barra i {
		animation: none;
	}

	html.mw7-com-intro .mw7-sec--hero .mw7-hero__copy > *,
	html.mw7-com-intro .mw7-sec--hero .mw7-hero__base {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------ campo de partículas do hero */

.mw7-ambiente {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* O conteúdo do hero fica acima da poeira. */
.mw7 .mw7-sec--hero > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------ fundo interativo

   Camada presa à viewport, atrás de tudo. As seções `--alt` são opacas e a
   escondem de propósito: o efeito respira nos intervalos em vez de brigar
   com o conteúdo o tempo todo.
   --------------------------------------------------------------------- */

.mw7-fundo {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Sem isto o conteúdo em fluxo pinta por baixo da camada posicionada. */
body.mw7 .mw7-main,
body.mw7 .mw7-footer {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------ hero de tela cheia

   O cabeçalho sai do fluxo (continua grudado no topo, sobreposto), então o
   hero recebe a altura inteira da tela e recupera por dentro, em padding, o
   espaço que o menu ocupa.
   --------------------------------------------------------------------- */

/* A partir de 861px o cabeçalho para de quebrar em duas linhas e sua altura
   volta a ser previsível — é a menor largura em que dá para sobrepô-lo. */

@media (min-width: 861px) {
	body.mw7.home .mw7-main {
		margin-top: calc(var(--mw7-header-h) * -1);
	}

	body.mw7.home .mw7-sec--hero {
		min-height: 100svh;
		padding-top: calc(40px + var(--mw7-header-h));
	}
}

/* Num notebook de 768px o conteúdo passava de 880px e a tela cheia virava
   rolagem logo no primeiro gesto. Aqui o ritmo vertical encolhe junto com a
   altura disponível, e o título passa a ser limitado também pela altura —
   não só pela largura. */

@media (min-width: 861px) and (max-height: 880px) {
	body.mw7.home .mw7-sec--hero {
		padding-top: calc(14px + var(--mw7-header-h));
		padding-bottom: 16px;
	}

	body.mw7.home .mw7-hero__copy {
		gap: 15px;
	}

	body.mw7.home .mw7-hero__copy .mw7-h1 .elementor-heading-title {
		font-size: clamp(32px, min(4.1vw, 6.1vh), 60px);
	}

	body.mw7.home .mw7-hero__base {
		margin-top: 12px;
		padding-top: 14px;
	}
}

/* ==========================================================================
   Coreografia com GSAP

   Enquanto o GSAP estiver no comando, as revelações em CSS saem de cena. A
   classe `mw7-gsap` só entra quando a biblioteca confirma presença, então uma
   falha de rede devolve tudo para o CSS em vez de deixar conteúdo invisível.
   ========================================================================== */

html.mw7-gsap .mw7-reveal,
html.mw7-gsap .mw7-reveal .mw7-steps-v li,
html.mw7-gsap .mw7-sec--hero .mw7-hero__copy > *,
html.mw7-gsap .mw7-sec--hero .mw7-hero__base {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Os widgets do Elementor vêm com `transition: transform 0.4s`. Numa
   animação presa à rolagem isso é veneno: o GSAP escreve um transform novo a
   cada quadro e a transição persegue o valor com quatro décimos de atraso, o
   que faz o movimento parecer solto do scroll em vez de controlado por ele. */
html.mw7-gsap .mw7-cena .mw7-h2,
html.mw7-gsap .mw7-cena .e-con-inner > *,
html.mw7-gsap .mw7-cena .e-con-inner li,
html.mw7-gsap .mw7-capa .e-con-inner,
html.mw7-gsap .mw7-capa .e-con-inner > * {
	transition: none;
}

/* O ponto final da manchete passa a ser um elemento de verdade, para entrar
   no mesmo ritmo das outras letras. */
html.mw7-gsap .mw7 .mw7-hero__copy .mw7-h1 .elementor-heading-title::after {
	content: none;
}

.mw7-ponto {
	color: var(--mw7-accent);
}

/* Cada palavra é uma máscara: as letras sobem de trás de uma linha em vez de
   simplesmente aparecerem. O recuo compensado abre espaço para acentos e
   descidas (ç, g, ê) sem deslocar o texto. */
.mw7-pal {
	display: inline-block;
	overflow: hidden;
	padding: 0.2em 0.04em 0.26em;
	margin: -0.2em -0.04em -0.26em;
}

.mw7-let {
	display: inline-block;
	transform-origin: 50% 100%;
	will-change: transform, opacity;
}

/* ==========================================================================
   Empilhamento de seções

   A segunda seção não empurra o hero para cima: ela sobe por cima dele. O
   hero fica preso no topo e vai sendo coberto, o que dá sensação de camadas
   em vez de uma esteira de conteúdo.

   Só entra quando o JS marca a seção — sem ele, ou com movimento reduzido, a
   página rola normalmente. Abaixo de 1025px também não vale: em tela estreita
   a seção empilhada some com o conteúdo do hero cedo demais.
   ========================================================================== */

@media (min-width: 1025px) {
	html.mw7-empilha body.mw7.home .mw7-sec--hero {
		position: sticky;
		top: 0;
	}

	/* A capa é mais alta que a tela; o miolo dela fica preso no topo. A
	   diferença entre as duas alturas é exatamente o trecho em que a seção
	   permanece travada em tela cheia enquanto a página rola.

	   Feito em CSS de propósito: o `pin` do ScrollTrigger media a posição
	   errada convivendo com o hero em `sticky`. */
	html.mw7-empilha body.mw7.home .mw7-capa {
		position: relative;
		z-index: 2;
		display: block;
		min-height: 185svh;
		padding-top: 0;
		padding-bottom: 0;
	}

	html.mw7-empilha body.mw7.home .mw7-capa > .e-con {
		position: sticky;
		top: 0;
		min-height: 100svh;
	}

	/* Centrar é trabalho do `align-content` da grade, não de `align-items` no
	   pai: o container do Elementor é flex em **coluna**, então `align-items`
	   ali alinha na horizontal. A grade estica para a altura toda e é dentro
	   dela que as linhas precisam ser centradas. */
	html.mw7-empilha body.mw7.home .mw7-capa .e-con-inner {
		align-content: center;
	}

	/* Texto todo à direita: a coluna da esquerda fica livre para o símbolo
	   que desce flutuando por cima da seção.

	   O `grid-row: auto` não é enfeite. O `.mw7-split` distribui os blocos em
	   linhas fixas (olho na 1, título na 2, corpo ocupando 1 e 2). Trocar só a
	   coluna empilhava os três na mesma linha, um por cima do outro. Soltando
	   a linha, eles voltam a se colocar em sequência. */
	html.mw7-empilha body.mw7.home .mw7-capa .e-con-inner > * {
		grid-column: 2;
		grid-row: auto;
	}

	/* Coberto o hero, ele volta ao fluxo — as seções seguintes são
	   transparentes e o deixariam à mostra por baixo delas. */
	html.mw7-empilha.mw7-hero-solto body.mw7.home .mw7-sec--hero {
		position: relative;
	}

	/* ------------------------------------------------------------- a cena

	   A terceira seção reaproveita o mesmo travamento da capa e, de
	   propósito, **o mesmo fundo**. Assim o que se vê não é uma seção nova
	   entrando: é o conteúdo trocando sobre um fundo que fica parado.
	   -------------------------------------------------------------------- */

	html.mw7-empilha body.mw7.home .mw7-cena {
		position: relative;
		z-index: 3;
		display: block;
		/* Seis tópicos se revezando pedem espaço de rolagem: a diferença
		   entre esta altura e os 100svh travados é o percurso inteiro da
		   cena — mergulho, clarão e os tópicos um a um. */
		min-height: 640svh;
		padding-top: 0;
		padding-bottom: 0;
		background-color: var(--mw7-surface);
	}

	html.mw7-empilha body.mw7.home .mw7-cena > .e-con {
		position: sticky;
		top: 0;
		min-height: 100svh;

		/* No fim da cena o miolo cresce vinte e tantas vezes. Sem recorte isso
		   viraria barra de rolagem horizontal. */
		overflow: hidden;
	}

	/* O container do Elementor é flex em coluna: centrar na vertical é
	   `justify-content`, não `align-items`. */
	html.mw7-empilha body.mw7.home .mw7-cena .e-con-inner {
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
		z-index: 1;

		/* Respiro para o cabeçalho, que fica fixo por cima. Sem isso o
		   conteúdo encosta no menu quando a seção trava. */
		padding-top: calc(var(--mw7-header-h) + 28px);
		padding-bottom: 48px;
	}

	/* ------------------------------------------------------- a virada clara

	   Passado o mergulho, a seção fica branca e os cards nascem nela. A troca
	   de cores acontece com o clarão cobrindo a tela inteira, então pode ser
	   seca — ninguém vê o instante em que o escuro vira claro.

	   O painel branco mora dentro da própria seção, atrás do conteúdo. Não dá
	   para reaproveitar o clarão fixo: ele vive no `body`, e nenhum filho da
	   seção conseguiria pintar por cima dele. */

	/* Sangra até as bordas da tela. A seção e o container têm recuo lateral;
	   preso a `inset: 0` o painel parava antes e sobravam duas faixas escuras
	   nas laterais. */
	html.mw7-empilha body.mw7.home .mw7-cena__branco {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		z-index: 0;
		background: #ffffff;
		opacity: 0;
		pointer-events: none;
	}

	html.mw7-empilha body.mw7.home .mw7-cena.is-claro .mw7-cena__branco {
		opacity: 1;
	}

	html.mw7-empilha body.mw7.home .mw7-cena.is-claro .mw7-body {
		color: #4a5059;
	}

	html.mw7-empilha body.mw7.home .mw7-cena.is-claro .mw7-sintomas .elementor-icon-list-item {
		background: #f3f4f6;
		border-color: rgba(11, 15, 20, 0.1);
	}

	html.mw7-empilha body.mw7.home .mw7-cena.is-claro .mw7-sintomas .elementor-icon-list-text {
		color: #1b2027;
	}

	/* O título tem duas vozes: a afirmação vai grande e esticada na altura; a
	   continuação depois do travessão volta a ser escrita normal.

	   Os tamanhos aqui são os da **segunda** fase, quando o resto do conteúdo
	   divide a tela. O aumento da primeira fase é um `scale` uniforme no GSAP,
	   aplicado ao título inteiro: mexer no `font-size` mudaria a altura do
	   bloco e o conteúdo estouraria os 100svh ao entrar, e escalar as duas
	   partes em proporções diferentes faria a de cima invadir a de baixo. */
	/* O título sai do fluxo e vira uma camada sobre o palco. Assim ele pode
	   ser mais largo que o container, atravessar para a esquerda sem empurrar
	   nada, e o resto do conteúdo se centraliza sozinho quando ele vai embora
	   — sem precisar compensar a altura que ele deixaria vazia. */
	html.mw7-empilha body.mw7.home .mw7-cena .e-con-inner {
		position: relative;
	}

	html.mw7-empilha body.mw7.home .mw7-cena .mw7-h2 {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0;
		pointer-events: none;
	}

	html.mw7-empilha body.mw7.home .mw7-cena .mw7-h2 .elementor-heading-title {
		max-width: none;
		transform-origin: 50% 50%;
	}

	html.mw7-empilha body.mw7.home .mw7-cena .mw7-cena__forte {
		display: block;

		/* Uma linha só. O tamanho vem da largura da tela, não de um valor
		   fixo: medido, a frase ocupa 14,6× o tamanho da fonte, então 6vw a
		   deixa em ~87% da tela em qualquer largura. */
		white-space: nowrap;
		font-size: clamp(26px, 6vw, 88px);
		font-weight: 800;
		line-height: 0.94;
		letter-spacing: -0.035em;

		/* O esticado na altura. O `padding` compensa o que a escala transborda
		   da caixa de layout. */
		transform: scaleY(1.26);
		transform-origin: 50% 50%;
		padding-block: 0.14em;
	}

	html.mw7-empilha body.mw7.home .mw7-cena .mw7-cena__resto {
		display: block;
		font-size: clamp(16px, 1.45vw, 21px);
		font-weight: 500;
		line-height: 1.45;
		letter-spacing: 0;
		color: var(--mw7-muted-2);
		max-width: 46ch;
		margin: 0.9em auto 0;
	}
}

/* ==========================================================================
   Ruído de TV numa palavra

   Duas cópias da palavra em ciano e magenta, recortadas em fatias que saltam
   de posição — é o desalinhamento de canal de um sinal ruim. Os saltos usam
   `steps(1)` de propósito: interpolação suave viraria um borrão colorido, não
   uma falha.

   O laço é quase todo silêncio. Ruído contínuo cansa em três segundos; o que
   convence é a falha rara e curta.
   ========================================================================== */

.mw7-glitch {
	position: relative;
	display: inline-block;
}

.mw7-glitch::before,
.mw7-glitch::after {
	content: attr(data-texto);
	position: absolute;
	inset: 0;
	pointer-events: none;
	clip-path: inset(100% 0 0 0);
}

.mw7-glitch::before {
	color: #4be0ff;
}

.mw7-glitch::after {
	color: #ff3b6b;
}

html.mw7-gsap .mw7-glitch.is-ruido {
	animation: mw7-fatia 4.6s steps(1) infinite;
}

html.mw7-gsap .mw7-glitch.is-ruido::before {
	animation: mw7-canal-a 4.6s steps(1) infinite;
}

html.mw7-gsap .mw7-glitch.is-ruido::after {
	animation: mw7-canal-b 4.6s steps(1) infinite;
}

@keyframes mw7-fatia {
	0%, 100% { transform: translateX(0); opacity: 1; color: #ffffff; }
	1% { transform: translateX(0.03em); opacity: 0.7; }
	2% { transform: translateX(-0.024em); opacity: 1; }
	3% { transform: translateX(0.016em); opacity: 0.85; }
	4% { transform: translateX(0); opacity: 1; }

	/* O estalo do meio é o mais forte: a palavra inteira vira laranja. */
	39% { transform: translateX(-0.03em); color: #ff7a2e; opacity: 0.92; }
	40% { transform: translateX(0.022em); color: #ffffff; }
	41% { transform: translateX(-0.014em); color: #ff7a2e; opacity: 1; }
	42% { transform: translateX(0); color: #ffffff; }

	73% { transform: translateX(0.018em); opacity: 0.82; }
	75% { transform: translateX(0); opacity: 1; }
}

@keyframes mw7-canal-a {
	0%, 100% { clip-path: inset(100% 0 0 0); transform: translateX(-0.05em); color: #4be0ff; }
	1% { clip-path: inset(14% 0 66% 0); transform: translateX(-0.11em); }
	2% { clip-path: inset(44% 0 38% 0); transform: translateX(0.08em); }
	3% { clip-path: inset(4% 0 84% 0); transform: translateX(-0.06em); }
	4% { clip-path: inset(100% 0 0 0); }

	38% { color: #ff7a2e; }
	39% { clip-path: inset(28% 0 50% 0); transform: translateX(0.14em); }
	40% { clip-path: inset(6% 0 78% 0); transform: translateX(-0.11em); }
	41% { clip-path: inset(58% 0 24% 0); transform: translateX(0.08em); }
	42% { clip-path: inset(100% 0 0 0); }

	72% { color: #ff3b6b; }
	73% { clip-path: inset(50% 0 30% 0); transform: translateX(-0.09em); }
	74% { clip-path: inset(18% 0 68% 0); transform: translateX(0.06em); }
	75% { clip-path: inset(100% 0 0 0); }
	76% { color: #4be0ff; }
}

@keyframes mw7-canal-b {
	0%, 100% { clip-path: inset(100% 0 0 0); transform: translateX(0.05em); color: #ff3b6b; }
	1% { clip-path: inset(60% 0 20% 0); transform: translateX(0.1em); }
	2% { clip-path: inset(22% 0 60% 0); transform: translateX(-0.075em); }
	3% { clip-path: inset(74% 0 8% 0); transform: translateX(0.06em); }
	4% { clip-path: inset(100% 0 0 0); }

	38% { color: #4be0ff; }
	39% { clip-path: inset(62% 0 16% 0); transform: translateX(-0.13em); }
	40% { clip-path: inset(34% 0 46% 0); transform: translateX(0.1em); }
	41% { clip-path: inset(10% 0 74% 0); transform: translateX(-0.07em); }
	42% { clip-path: inset(100% 0 0 0); }

	72% { color: #ff7a2e; }
	73% { clip-path: inset(20% 0 62% 0); transform: translateX(0.085em); }
	74% { clip-path: inset(56% 0 26% 0); transform: translateX(-0.055em); }
	75% { clip-path: inset(100% 0 0 0); }
	76% { color: #ff3b6b; }
}

@media (prefers-reduced-motion: reduce) {
	html.mw7-gsap .mw7-glitch.is-ruido,
	html.mw7-gsap .mw7-glitch.is-ruido::before,
	html.mw7-gsap .mw7-glitch.is-ruido::after {
		animation: none;
	}
}

/* Volta ao empilhamento: o ruído acima precisava ficar fora da media
   query, porque vale em qualquer largura. */

@media (min-width: 1025px) {

	html.mw7-empilha body.mw7.home .mw7-cena .mw7-body,
	html.mw7-empilha body.mw7.home .mw7-cena .mw7-list {
		max-width: 780px;
		margin-inline: auto;
	}
}

/* O símbolo sai do fluxo do hero e passa a flutuar sobre as seções. Fica
   abaixo do cabeçalho (z-index 40) e acima das seções (z-index 2). */
.mw7-cubo--solto {
	position: fixed;
	z-index: 30;
}

/* ==========================================================================
   Mergulho numa letra

   A passagem da cena para a seção seguinte não é um deslize: a página entra
   pelo meio de uma letra até o branco tomar a tela, e a próxima seção nasce
   desse branco.

   Quem cresce é o miolo inteiro, com a origem da escala no centro da letra —
   é isso que dá a sensação de mergulhar nela. Ampliar só o glifo não cobriria
   a tela: o traço de uma letra de 17px, mesmo cem vezes maior, não fecha os
   900px de altura. E o clarão branco entra antes do fim para cobrir a
   rasterização grosseira que qualquer texto ganha nessa escala.
   ========================================================================== */

.mw7-zoom {
	display: inline-block;
}

.mw7-clarao {
	position: fixed;
	inset: 0;
	z-index: 35;
	background: #ffffff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ==========================================================================
   Cabeçalho sobre a seção clara

   O cabeçalho é transparente e o menu é branco. Sobre a seção branca ele
   simplesmente sumia — logo e links invisíveis. Enquanto a seção clara estiver
   ocupando a tela, tudo vira escuro.

   O logo é imagem monocromática branca, então `invert(1)` resolve sem
   precisar de um segundo arquivo.
   ========================================================================== */

html.mw7-claro .mw7-header__logo img {
	filter: invert(1);
}

html.mw7-claro .mw7-nav__link {
	color: #454b54;
}

html.mw7-claro .mw7-nav__list > li > .mw7-nav__link:hover,
html.mw7-claro .mw7-nav__list > li.is-open > .mw7-nav__link,
html.mw7-claro .mw7-nav__list > li.current-menu-item > .mw7-nav__link,
html.mw7-claro .mw7-nav__list > li.current-menu-ancestor > .mw7-nav__link {
	color: #0b0f14;
	background: rgba(11, 15, 20, 0.07);
}

/* O megamenu tem painel escuro próprio: dentro dele o menu continua claro. */
html.mw7-claro .mw7-mega__list .mw7-nav__link {
	color: var(--mw7-muted-2);
}

html.mw7-claro .mw7-header.is-rolado {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ==========================================================================
   Ícones dos sintomas

   Cada item da lista ganha um ícone do próprio assunto no lugar do ponto.
   Seis frases sobre seis problemas diferentes mereciam seis sinais
   diferentes — o ponto repetido não dizia nada.
   ========================================================================== */

.mw7 .mw7-sintomas.tem-icone .elementor-icon-list-item::before {
	display: none;
}

.mw7 .mw7-icone {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
    margin-right: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(239, 104, 32, 0.12);
	color: var(--mw7-accent);
}

.mw7 .mw7-icone svg {
	width: 19px;
	height: 19px;
	display: block;
}

html.mw7-empilha body.mw7.home .mw7-cena.is-claro .mw7-icone {
	background: rgba(239, 104, 32, 0.14);
}

/* ==========================================================================
   Entrada de seção com painel

   Referência do cliente: stanzza.design. Um painel nasce como um cartão
   pequeno no meio da tela e se abre até sangrar de ponta a ponta conforme a
   seção sobe. O texto entra depois, já com o painel aberto.

   A abertura é `clip-path`, não largura e altura: o espaço fica reservado
   desde o começo, então nada empurra o conteúdo de baixo enquanto o painel
   cresce — e não há um único recálculo de layout no meio da rolagem.
   ========================================================================== */

.mw7-entrada {
	position: relative;
	width: 100vw;
	margin: 0 0 clamp(28px, 4vw, 56px) calc(50% - 50vw);
	height: clamp(260px, 46svh, 480px);
	overflow: hidden;
	background: var(--mw7-surface-2);

	/* Estado fechado: um cartão no meio.

	   O recorte é composto por variáveis em vez de escrito de uma vez porque
	   o navegador encurta `inset(28% 33% 28% 33%)` para dois valores no estilo
	   computado — e o GSAP, lendo dois de um lado e quatro do outro, casava os
	   números fora de ordem e abria o cartão ancorado num canto. Animando as
	   variáveis, a simetria é garantida por construção. */
	--recorte-y: 28%;
	--recorte-x: 33%;
	--recorte-r: 18px;
	clip-path: inset(var(--recorte-y) var(--recorte-x) round var(--recorte-r));
}

.mw7-entrada img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

/* Um véu para o preto e branco não brigar com o laranja da marca. */
.mw7-entrada::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(11, 15, 20, 0.15), rgba(11, 15, 20, 0.6)),
		radial-gradient(70% 120% at 50% 0%, rgba(239, 104, 32, 0.18), transparent 70%);
	pointer-events: none;
}

/* Sem JS o painel não faz sentido fechado: abre de vez. */
html:not(.mw7-gsap) .mw7-entrada {
	clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
	.mw7-entrada {
		clip-path: none;
	}
}

/* ==========================================================================
   Tópicos que se revezam

   A lista de sintomas deixa de ser uma grade de cartões e vira um tópico por
   vez: desenho à esquerda, texto à direita. A rolagem troca um pelo outro e
   desfaz o caminho ao voltar.

   Os seis ficam empilhados no mesmo lugar, em posição absoluta, com só um
   visível. Por isso o palco precisa de altura própria — sem ela, elementos
   fora do fluxo não reservam espaço e a seção colapsaria.
   ========================================================================== */

.mw7-topicos {
	position: relative;
	width: 100%;
	min-height: clamp(280px, 36svh, 360px);
}

.mw7-topico {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 54px;
	align-items: center;
	text-align: left;
}

.mw7-topico__arte {
	margin: 0;
}

.mw7-topico__arte svg {
	display: block;
	width: 100%;
	height: auto;
}

.mw7-topico__n {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--mw7-accent);
	margin-bottom: 14px;
}

.mw7-topico__titulo {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.3vw, 33px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--mw7-text);
}

.mw7-topico__contra {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--mw7-muted);
	max-width: 46ch;
}

/* Na seção clara o texto vira escuro, como o resto dela. */
html.mw7-empilha body.mw7.home .mw7-cena.is-claro .mw7-topico__titulo {
	color: #0f1319;
}

html.mw7-empilha body.mw7.home .mw7-cena.is-claro .mw7-topico__contra {
	color: #4a5059;
}

/* A lista original fica para quem não tem JS ou pediu menos movimento. */
.mw7-sintomas.tem-topicos {
	display: none;
}

@media (max-width: 860px) {
	.mw7-topico {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* ==========================================================================
   Movimento dos diagramas

   Cada tópico ganha vida em vez de ser uma figura parada. Não são GIFs: os
   desenhos já são vetor, então animar é mudar atributo — nítido em qualquer
   tela, alguns bytes, e o movimento diz a mesma coisa que o desenho.

   Só o tópico em cena anima. As regras vivem sob `.is-ativo` justamente para
   que os outros cinco não fiquem consumindo quadro escondidos.
   ========================================================================== */

.mw7-topico__arte .d-pulso,
.mw7-topico__arte .d-cai,
.mw7-topico__arte .d-escapa,
.mw7-topico__arte .d-fala,
.mw7-topico__arte .d-cresce {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.mw7-topico__arte .d-cresce {
	transform-origin: 50% 100%;
}

.mw7-topico.is-ativo .d-fluxo {
	animation: mw7-d-fluxo 1.9s linear infinite;
}

.mw7-topico.is-ativo .d-pulso {
	animation: mw7-d-pulso 2.6s ease-in-out infinite;
}

.mw7-topico.is-ativo .d-cai {
	animation: mw7-d-cai 2.8s ease-in infinite;
}

.mw7-topico.is-ativo .d-escapa {
	animation: mw7-d-escapa 2.8s ease-out infinite;
}

/* A volta que não acontece: pisca e falha, em vez de fluir. */
.mw7-topico.is-ativo .d-trava {
	animation: mw7-d-trava 2.4s steps(1) infinite;
}

.mw7-topico.is-ativo .d-fala {
	animation: mw7-d-fala 2.9s ease-in-out infinite;
}

.mw7-topico.is-ativo .d-cresce {
	animation: mw7-d-cresce 3s ease-in-out infinite;
}

.mw7-topico.is-ativo .d-sobe {
	animation: mw7-d-sobe 2.2s linear infinite;
}

@keyframes mw7-d-fluxo {
	to { stroke-dashoffset: -48; }
}

@keyframes mw7-d-pulso {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.14); opacity: 0.8; }
}

@keyframes mw7-d-cai {
	0% { transform: translateY(-12px); opacity: 0; }
	16% { opacity: 1; }
	68% { transform: translateY(28px); opacity: 1; }
	100% { transform: translateY(44px); opacity: 0; }
}

@keyframes mw7-d-escapa {
	0% { transform: translate(0, 0); opacity: 0; }
	22% { opacity: 0.9; }
	100% { transform: translate(var(--fuga, 16px), 26px); opacity: 0; }
}

@keyframes mw7-d-trava {
	0%, 58%, 100% { opacity: 1; }
	64% { opacity: 0.16; }
	70% { opacity: 1; }
	78% { opacity: 0.28; }
	84% { opacity: 1; }
}

@keyframes mw7-d-fala {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes mw7-d-cresce {
	0% { transform: scaleY(0.42); }
	52%, 100% { transform: scaleY(1); }
}

@keyframes mw7-d-sobe {
	to { stroke-dashoffset: -32; }
}

@media (prefers-reduced-motion: reduce) {
	.mw7-topico.is-ativo .d-fluxo,
	.mw7-topico.is-ativo .d-pulso,
	.mw7-topico.is-ativo .d-cai,
	.mw7-topico.is-ativo .d-escapa,
	.mw7-topico.is-ativo .d-trava,
	.mw7-topico.is-ativo .d-fala,
	.mw7-topico.is-ativo .d-cresce,
	.mw7-topico.is-ativo .d-sobe {
		animation: none;
	}
}