/**
 * Renewal — widget "rwl_transform" dentro do Elementor.
 * O wrapper .elementor-widget-container (flex, padding, max-width) alterava o
 * bloco formatting context do .transform-hero e degradava o overlay
 * .transform-hero__gradient em relação ao index.html estático.
 */

.elementor-widget-rwl_transform.elementor-widget {
	width: 100%;
	align-self: stretch;
}

.elementor-widget-rwl_transform > .elementor-widget-container {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.elementor-widget-rwl_transform .rwl-transform-widget.transform-section.section {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Hero: reforço explícito (home-page.css) — no Elementor, flex ancestors
 * (min-height: 0) ou ausência de cascade podem deixar o .transform-hero só com
 * a altura do texto; o fundo/gradiente cortam e os cards “vazam” para o branco.
 */
.elementor-widget-rwl_transform .transform-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: clamp(400px, 70vh, 760px);
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.elementor-widget-rwl_transform .transform-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.elementor-widget-rwl_transform .transform-hero__img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 70% 18%;
	display: block;
}

.elementor-widget-rwl_transform .transform-hero__gradient {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		#212933 0%,
		rgba(33, 41, 51, 0.9) 26%,
		rgba(33, 41, 51, 0.48) 52%,
		transparent 74%
	);
}

.elementor-widget-rwl_transform .transform-hero__inner {
	position: relative;
	z-index: 2;
}

.elementor-widget-rwl_transform .transform-cards-wrap {
	position: relative;
	z-index: 3;
}