.page {
	.operations-top {
		background: linear-gradient(
			0deg,
			var(--smx-color-background-light) 0%,
			var(--smx-color-primary-tint) 100%
		);
		.brain-image {
			position: relative;
			height: 56vh;
			min-height: 550px;
			display: flex;
			flex-direction: column;
			justify-content: end;

			.layer {
				position: absolute;
				bottom: 0;
				text-align: center;
				transition: transform 0.1s linear;
				will-change: transform;
				img {
					margin: 0 auto;
					width: 79%;
				}
			}
			.layer:nth-child(2) {
				bottom: 20%;
				z-index: 1;
			}
			.layer:nth-child(3) {
				bottom: 28%;
				z-index: 2;
			}
			.layer:nth-child(4) {
				bottom: 36%;
				z-index: 3;
			}

			.layer:nth-child(1) {
				bottom: 42%;
				z-index: 4;
			}
		}

		.wp-block-group {
			h3 {
				margin: 0;
				font-size: var(--font-size-lg);
			}
			h2 {
				font-size: var(--font-title-sm);
				font-weight: bold;
				margin: 0;
				border-bottom: 1.5px solid var(--smx-color-primary);
				b,
				strong {
					font-weight: bold;
					color: var(--smx-color-primary);
				}
			}

			h4 {
				font-size: var(--font-size-base);
				font-weight: normal;
				margin: 0;
				margin-top: var(--space-sm);
			}

			p {
				margin: var(--space-sm) 0;
				font-size: var(--font-text);
				line-height: 1.2;
			}
		}

		.container-sec {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-lg);
			padding-bottom: var(--space-xl);

			h3.wp-block-heading {
				color: var(--smx-color-text-bold);
			}

			p {
				font-size: var(--font-size-base);
			}

			.card {
				background: var(--smx-color-white);
				padding: var(--space-lg);
				border-radius: var(--border-radius-lg);
				grid-template-columns: auto 1fr;
				gap: var(--space-md);

				img {
					width: 4rem;
					height: auto;
					margin: 0 auto;
				}
			}
		}
	}

	.operation-global {
		padding: var(--space-xl) 0;
		border-top: 1.4px rgba(var(--smx-color-background-dark-rgb), 0.1) solid;

		.container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-lg);

			h2 {
				font-size: var(--font-title-md);
				font-weight: bold;
				b,
				strong {
					font-weight: bold;
					color: var(--smx-color-primary);
				}
			}

			p,
			h3 {
				font-size: var(--font-text);
			}

			.wp-block-button__link {
				background: linear-gradient(
					to bottom,
					var(--smx-color-primary) 0%,
					var(--smx-color-primary-contrast) 100%
				);
				box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.16);
				font-weight: 400;
			}
		}
	}

	.intelligent-stages {
		.card {
			background: var(--smx-color-white);
			padding: var(--space-lg);
			padding-right: var(--space-lg);
			border-radius: var(--border-radius-lg);
			grid-template-columns: auto 1fr;
			gap: var(--space-md);

			img {
				max-width: 8rem;
				height: auto;
				margin: 0 auto;
			}

			h4 {
				margin: 0;
				font-size: var(--font-size-base);
				font-weight: normal;
			}

			h3 {
				font-size: var(--font-size-lg);
				margin: 0;
			}

			p {
				font-size: var(--font-text);
				margin-top: 0;
			}
		}
	}

	.intelligente-evolution {
		background: var(--smx-color-white);

		.container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-md);
			margin-top: 0;

			.is-layout-flow {
				padding: var(--space-lg) 0;
			}

			h2 {
				font-size: var(--font-title-sm);
				font-weight: bold;
				color: var(--smx-color-text-bold);
				b,
				strong {
					font-weight: bold;
					color: var(--smx-color-primary);
				}
			}

			h3 {
				font-size: var(--font-title-sm);
				font-weight: bold;
				color: var(--smx-color-primary);
			}
		}

		.wp-block-button__link {
			background: linear-gradient(
				to bottom,
				var(--smx-color-primary) 0%,
				var(--smx-color-primary-contrast) 100%
			);
			box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.16);
			font-weight: 400;
		}
	}

	.evolution-model {
		margin-top: var(--space-md);
		gap: var(--space-sm);
		align-items: end;
		flex-direction: column;
		justify-content: end;
		min-height: 12rem;
		padding: var(--space-md) 0;

		@media (max-width: 768px) {
			flex-direction: column;
			display: flex;
			align-items: start;
		}

		.wp-block-group {
			background: var(--smx-color-primary);
			padding: var(--space-md);
			border-radius: var(--border-radius-lg);

			h5 {
				margin: 0;
				border-bottom: 1px solid rgba(var(--smx-color-primary-tint-rgb), 0.8);
				font-size: var(--font-size-base);
				margin-bottom: var(--space-sm);
				padding-bottom: var(--space-sm);
			}

			p {
				height: auto;
				background: transparent;
				font-size: var(--font-text);
				margin-top: 0;
			}

			&:nth-child(1) {
				background: #cc008c !important;
				height: 72%;
			}
			&:nth-child(2) {
				height: 86%;

				background: #bd00cc !important;
			}
			&:nth-child(3) {
				height: 100%;
				background: #bb38fe !important;
			}
			&:nth-child(4) {
				height: 112%;
				background: var(--smx-color-primary) !important;
			}
		}
	}

	/**ANIM support**/
	.evolution-model .wp-block-group {
		opacity: 0;
		transform-origin: bottom;
		transform: scaleY(0);
		transition:
			transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.4s;
	}

	/* Mobile*/
	@media (max-width: 768px) {
		.evolution-model .wp-block-group {
			transform-origin: left;
			transform: scaleX(0);
		}
	}

	/* Active */
	.evolution-model.is-visible .wp-block-group {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 768px) {
	.page {
		.operations-top {
			padding-top: var(--space-xxl);
			.container.is-layout-flex {
				flex-direction: column;
			}

			.brain-image {
				height: auto;
				min-height: auto;
				padding: var(--space-xl) 0;
				padding-top: var(--space-xxl);

				.layer:nth-child(2) {
					bottom: 26%;
					z-index: 1;
				}
				.layer:nth-child(3) {
					bottom: 27%;
					z-index: 2;
				}
				.layer:nth-child(4) {
					bottom: 28%;
					z-index: 3;
				}

				.layer:nth-child(1) {
					bottom: 50%;
					z-index: 4;
				}
			}

			.container-sec {
				grid-template-columns: 1fr;
			}
		}

		.operation-global {
			.container {
				grid-template-columns: 1fr;
			}
		}

		.intelligente-evolution {
			.container {
				grid-template-columns: 1fr;
			}

			.intelligente-evolution-top {
				flex-direction: column-reverse;
				display: flex;
			}
		}
	}
}