/*
 * Nuestro enfoque: título centrado y 5 pasos "del campo a tu mesa" unidos por una línea.
 *
 *   Contenedor sección   → sustain-approach
 *     Contenedor cabecera→ sustain-approach__head
 *       Texto corto      → eyebrow sustain-approach__eyebrow
 *       Título           → sustain-approach__title   (lo resaltado va en <span>: se subraya en verde)
 *       Texto            → sustain-approach__text
 *     Contenedor pasos   → sustain-steps anim       (la línea se dibuja al entrar en pantalla)
 *       Contenedor paso  → sustain-steps__item
 *         Texto (número) → sustain-steps__num
 *         Ícono          → sustain-steps__icon anim anim--zoom-in anim--d1..d5
 *         Contenedor tarjeta → sustain-steps__card anim anim--fade-up anim--d1..d5
 *           Título       → sustain-steps__title
 *           Texto        → sustain-steps__text
 *           Texto (etiqueta) → sustain-steps__tag
 */

.sustain-approach {
	display: block;
	overflow: hidden;
	padding: clamp(56px, 6.5vw, 96px) var(--wrap-gutter) clamp(36px, 4.5vw, 64px);
}

.sustain-approach__head {
	--row-gap: 0px;

	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 980px;
	margin: 0 auto clamp(40px, 5vw, 72px);
	text-align: center;
}

.sustain-approach__eyebrow { align-self: center; }

.sustain-approach__title { padding: 16px 0 18px; }
.sustain-approach__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(34px, 4.6vw, 68px);
	letter-spacing: -.045em;
	line-height: 1.02;
	color: var(--color-ink);
}
/* Resaltado verde que se dibuja cuando el título entra en pantalla (clase is-in de anim.js). */
.sustain-approach__title span {
	color: var(--color-brand-green);
	background: linear-gradient(transparent 62%, rgba(8, 122, 61, .22) 62%) 0 0 / 0 100% no-repeat;
	transition: background-size 1.2s .5s var(--ease-out);
}
.sustain-approach__title.is-in span { background-size: 100% 100%; }

.sustain-approach__text {
	max-width: 36em;
	font-size: clamp(17px, 1.4vw, 19px);
	color: var(--color-muted);
}
.sustain-approach__text p { margin: 0; }

/* ---- Pasos ---- */
.sustain-steps {
	--row-gap: 18px;
	--column-gap: clamp(10px, 1.4vw, 20px);

	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 8px 0 0 4px;
}

/* Línea gris (::before) y línea verde que se dibuja (::after). En móvil es vertical. */
.sustain-steps::before,
.sustain-steps::after {
	content: "";
	position: absolute;
	left: 41px;
	top: 20px;
	bottom: 20px;
	width: 3px;
	border-radius: 3px;
}
.sustain-steps::before { background: var(--color-line); }
.sustain-steps::after {
	background: linear-gradient(180deg, var(--color-brand-green), #7CC49A);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 2.2s var(--ease-out);
}
.sustain-steps.is-in::after { transform: none; }

.sustain-steps__item {
	--row-gap: 14px;
	--column-gap: 18px;

	--flex-direction: row; /* Elementor fija la dirección con esta variable */

	position: relative;
	display: flex;
	flex-direction: row !important; /* Elementor fuerza columna en sus contenedores */
	flex-wrap: nowrap !important;
	align-items: flex-start;
	text-align: left;
}

.sustain-steps__num { display: none; }

/* Círculo con ícono: el estilo va en el wrapper del widget Ícono. */
.sustain-steps__icon {
	position: relative;
	z-index: 1;
	flex: none;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--color-brand-green);
	color: var(--color-brand-green);
	transition: background .3s, color .3s;
}
/* Se apunta al ícono interno del widget (<i> o <svg> según la versión de Elementor). */
.sustain-steps__icon .elementor-icon { display: grid; place-items: center; font-size: 30px; line-height: 1; color: inherit; }
.sustain-steps__icon .elementor-icon svg { width: 1em; height: 1em; fill: currentColor; }
.sustain-steps__icon:hover { background: var(--color-brand-green); color: #fff; }

.sustain-steps__card {
	--row-gap: 6px;

	flex: 1 1 0;
	width: auto !important; /* Elementor da 100% de ancho a los contenedores hijos */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: var(--card-drop, 0);
	padding: 18px 18px 20px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 22px;
}
.sustain-steps__card:hover { border-color: var(--color-brand-green); box-shadow: 0 14px 32px rgba(8, 122, 61, .12); }

.sustain-steps__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(18px, 1.5vw, 21px);
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--color-ink);
}
.sustain-steps__text { font-size: 15px; line-height: 1.45; color: var(--color-muted); }
.sustain-steps__text p { margin: 0; }

.sustain-steps__tag { padding-top: 6px; }
.sustain-steps__tag p {
	display: inline-block;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--color-green-soft);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--color-brand-green);
}

@media (min-width: 1025px) {
	.sustain-steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding: 8px 0 0;
	}
	.sustain-steps::before,
	.sustain-steps::after {
		left: 10%;
		right: 10%;
		top: 44px;
		bottom: auto;
		width: auto;
		height: 3px;
	}
	.sustain-steps::after { background: linear-gradient(90deg, var(--color-brand-green), #7CC49A); transform: scaleX(0); transform-origin: left; }
	.sustain-steps.is-in::after { transform: none; }

	.sustain-steps__item { --flex-direction: column; flex-direction: column !important; align-items: center; text-align: center; }
	.sustain-steps__num {
		display: block;
		position: absolute;
		top: -2px;
		left: 50%;
		margin-left: 26px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		color: var(--color-muted);
	}
	.sustain-steps__num p { margin: 0; }
	.sustain-steps__icon { margin-top: 6px; }
	.sustain-steps__card { align-items: center; align-self: stretch; flex: none; width: 100% !important; }
	/* Las tarjetas pares bajan para dar ritmo a la fila. */
	.sustain-steps__item:nth-child(even) { --card-drop: 34px; }
}