/*
 * Banner de Sostenibilidad: foto de fondo con degradado oscuro.
 *
 *   Contenedor sección   → sustain-hero
 *     Imagen (fondo)     → sustain-hero__photo
 *     Contenedor texto   → sustain-hero__copy
 *       Título (H1)      → sustain-hero__title   (el punto final va en <span>: se pinta rojo)
 *       Texto            → sustain-hero__lead
 *
 * Para cambiar la foto: widget Imagen → elegir otra de la biblioteca.
 */

.sustain-hero {
	--row-gap: 22px;

	position: relative;
	isolation: isolate;
	display: flex;
	justify-content: flex-end; /* en columna, esto alinea el texto abajo */
	min-height: 520px;
	padding: 48px var(--wrap-gutter);
	background: #1D1513;
	color: #fff;
}

/* Degradado sobre la foto: más oscuro abajo en móvil, a la izquierda en escritorio. */
.sustain-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(24, 15, 12, .9) 0%, rgba(24, 15, 12, .6) 55%, rgba(24, 15, 12, .25) 100%);
}

/* La foto llena el banner. Se apunta al <img> interno del widget Imagen. */
.sustain-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}
.sustain-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% center;
}

.sustain-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	max-width: 100%;
}

/* Elementor pinta el título con su propio color; aquí se fuerza al blanco del banner. */
.sustain-hero__title .elementor-heading-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(34px, 4.5vw, 64px);
	letter-spacing: -.05em;
	line-height: 1;
	color: #fff;
}
.sustain-hero__title span { color: var(--color-brand-red); }

.sustain-hero__lead {
	max-width: 32em;
	font-size: clamp(16px, 1.3vw, 19px);
	color: rgba(255, 255, 255, .9);
}
.sustain-hero__lead p { margin: 0; }

@media (min-width: 768px) {
	.sustain-hero { justify-content: center; min-height: clamp(480px, 38vw, 560px); padding-block: 56px; }
	.sustain-hero::before {
		background: linear-gradient(90deg, rgba(24, 15, 12, .84) 0%, rgba(24, 15, 12, .58) 40%, rgba(24, 15, 12, .1) 75%, rgba(24, 15, 12, 0) 100%);
	}
	.sustain-hero__photo img { object-position: 0% 42%; }
}