/**
 * Estilos del bloque `ipropanel/sustainability-features` (desktop + mobile).
 *
 * Verificado vía MCP contra Figma: 476:671 (desktop) y 627:6267 (mobile).
 * Fondo con foto (`object-fit: cover`) + 2 degradados diagonales de
 * oscurecimiento reales del diseño + 2 franjas de desvanecido (arriba y
 * abajo) hacia `near-black` para continuidad visual con las secciones
 * vecinas (FAQ arriba, ventajas abajo) — mismo criterio de aproximación de
 * fondo con foto que `faq-accordion` (S3.3): el fondo real combina 2 fotos
 * superpuestas, aquí se usa una sola foto editable con los degradados
 * reales encima. Token nuevo `sustainability-scrim` (rgba(3,8,19,0.4))
 * agregado a theme.json para el segundo degradado — no coincide con ningún
 * alpha ya declarado (`overlay-scrim` es 0.6), mismo criterio sin
 * excepciones de S2.7. Breakpoint único del proyecto: 768px, desktop-first.
 */

.ipropanel-sustainability-features {
	position: relative;
	overflow: hidden;
}

.ipropanel-sustainability-features__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ipropanel-sustainability-features__overlay-1,
.ipropanel-sustainability-features__overlay-2,
.ipropanel-sustainability-features__fade-top,
.ipropanel-sustainability-features__fade-bottom {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ipropanel-sustainability-features__overlay-1 {
	mix-blend-mode: multiply;
	background: linear-gradient( -75deg, transparent 21%, var( --wp--preset--color--near-black ) 82% );
}

.ipropanel-sustainability-features__overlay-2 {
	background: linear-gradient( 206deg, transparent 41%, var( --wp--custom--color--sustainability-scrim ) 72% );
}

.ipropanel-sustainability-features__fade-top {
	inset: 0 0 auto 0;
	height: 147px;
	background: linear-gradient( to bottom, var( --wp--preset--color--near-black ), transparent );
}

.ipropanel-sustainability-features__fade-bottom {
	inset: auto 0 0 0;
	height: 152px;
	background: linear-gradient( to top, var( --wp--preset--color--near-black ), transparent );
}

.ipropanel-sustainability-features__inner {
	position: relative;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--section-padding-inline );
	padding-block: 64px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.ipropanel-sustainability-features__marca {
	flex-shrink: 0;
}

.ipropanel-sustainability-features__encabezado {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	/* 745, no 666: es el ancho del contenedor `476:676` que agrupa título y
	   subtítulo. Los 666 anteriores encerraban el título en menos de lo que
	   el nodo le da (`476:678` mide 705) y a 40px lo hacían envolver a dos
	   líneas — regresión destapada al recalibrar `heading-2` en DT.6, no
	   causada por ella: el título ya estaba apretado y solo le sobraban
	   2,4px de holgura. */
	max-width: 745px;
}

.ipropanel-sustainability-features__titulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-2 );
	/* `leading-[40px]` de `476:678`. Sin declararlo el navegador aplicaba
	   `normal` (~1,2), que daba 45px de alto contra los 40 del nodo — y con
	   la recalibración habría dado 49. Es el mismo patrón que el `60px`
	   literal de los títulos de Ventajas y Destacados. */
	line-height: 40px;
	font-weight: 400;
	color: var( --wp--preset--color--neutral-white );
}

.ipropanel-sustainability-features__titulo strong {
	font-weight: 700;
}

.ipropanel-sustainability-features__subtitulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	/* 18px sin preset equivalente (mismo criterio de excepción documentado
	   para el título del modal de contacto en S2.5/S2.7). */
	font-size: 18px;
	line-height: 1.625;
	color: var( --wp--preset--color--neutral-white );
}

/* RC-04 (S16.2, revisado en S16.2b). La clienta marcó con dos líneas rojas
   los huecos entre los tres bloques y pidió «que el bloque del medio esté
   más a la derecha para que los espacios sean iguales».
   Las columnas ya eran iguales; lo desigual era el aire que sobra al final
   del texto de cada una, y **depende del ancho**: a 1040 de contenido los
   dos huecos daban 34,9 y 30,3 —imperceptible, por eso medir a 1280 no lo
   delataba— y a 1200, que es el ancho desde el que ella revisó (≥1440),
   25 y 83,7.
   `space-between` + un tope igual por ítem lo resuelve por construcción: la
   fila llena el bloque, los tres bloques quedan equidistantes y los huecos
   dejan de depender de la ventana. Medido: 152,7 / 155,2 a 1040 y
   232,7 / 235,2 a 1200.
   **Diverge del nodo a propósito y está registrado en
   `DECISIONES-PROVISIONALES.md` según V22:** `476:681` acota la lista a
   775 px, que dejaría 265 px vacíos a la derecha a 1280 y 425 a 1440. La
   instrucción posterior del VP es que ocupe el ancho completo del bloque,
   como el acordeón de «¿Qué es IPROPANEL?».
   El `gap: 32` del nodo se conserva como **mínimo**: es el que aplica
   cuando no sobra espacio que repartir —a 768 px el contenido baja a 632 y
   los tres ítems se encogen por debajo del tope. */
.ipropanel-sustainability-features__features {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

/* `min-width: 0` + `overflow-wrap` para que una palabra sin puntos de
   corte no imponga su ancho mínimo al ítem: sin esto, un texto del CMS
   con una palabra larga —una URL, por ejemplo— ensancha su columna y
   empuja la tercera a una segunda fila. Medido con 54 caracteres sin
   espacios: 2 filas antes, 1 después. El nodo declara `word-break:
   break-word` en los tres textos (`476:691`, `476:701`, `476:711`), así
   que esto no inventa comportamiento, lo aplica. */
.ipropanel-sustainability-features__feature-titulo,
.ipropanel-sustainability-features__feature-texto {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Tope igual para los tres, y el valor sale del nodo: 262 es el ancho que
   `476:702` le da al tercer ítem, el mayor de los tres (200 / 241 / 262).
   No se copian los tres anchos distintos —son el ancho que ocupó el texto
   de la maqueta y no sobreviven a datos del CMS, mismo criterio que V17—,
   pero sí el mayor, que es el que garantiza que ningún texto del diseño
   necesite más línea de la que necesitaba en el archivo. Efecto lateral
   verificado: a 262 el título inglés «Support for certifications» vuelve a
   entrar en una línea, cosa que a 237 no pasaba. */
.ipropanel-sustainability-features__feature {
	display: flex;
	flex: 0 1 262px;
	max-width: 262px;
	/* Ver la nota de `overflow-wrap` más abajo: sin `min-width: 0` el
	   tamaño mínimo automático de un ítem flex es su `min-content`. */
	min-width: 0;
	gap: 12px;
	align-items: flex-start;
}

.ipropanel-sustainability-features__feature-badge {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 4px;
	border-radius: var( --wp--custom--border-radius--full );
	background-color: var( --wp--preset--color--primary-yellow );
}

/* `min-width: 0` también acá, y hace falta de verdad desde que el ítem
   lleva tope de ancho (S16.2b): `overflow-wrap: break-word` parte la
   palabra al pintar pero NO reduce el `min-content` de la caja, así que
   este hijo flex conservaba el ancho mínimo de la palabra más larga y se
   salía del `max-width: 262px` de su `<li>`. Medido con una URL de 78
   caracteres: el texto se pintaba 246 px fuera de su columna. Antes no se
   veía porque el `<li>` no tenía tope y simplemente crecía. */
.ipropanel-sustainability-features__feature-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ipropanel-sustainability-features__feature-titulo {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	font-weight: 600;
	line-height: 1.5;
	color: var( --wp--preset--color--neutral-white );
}

.ipropanel-sustainability-features__feature-texto {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	line-height: 1.5;
	color: var( --wp--preset--color--neutral-white );
}

@media ( max-width: 767px ) {
	.ipropanel-sustainability-features__inner {
		padding-block: 48px;
	}

	.ipropanel-sustainability-features__fade-bottom {
		height: 204px;
	}

	.ipropanel-sustainability-features__encabezado {
		max-width: 100%;
	}

	/* El `leading-[40px]` es SOLO de desktop: el título mobile `627:6275`
	   declara `leading-[normal]` a 24px. Aplicarlo a los dos breakpoints
	   habría sumado 22px al alto del título en Home mobile — se detectó
	   leyendo el nodo mobile, no midiendo. */
	.ipropanel-sustainability-features__titulo {
		line-height: normal;
	}

	.ipropanel-sustainability-features__features {
		flex-direction: column;
	}

	/* RC-04 es un hallazgo de desktop: el gap de 32 y el `max-width` de
	   775 salen del nodo desktop `476:681`. En mobile la lista es una
	   columna de ancho completo —el `max-width` no llega a morder— y el
	   gap vuelve a ser el separador vertical de 16 que ya tenía, porque
	   el nodo mobile `627:6267` no se consultó para este punto. */
	.ipropanel-sustainability-features__features {
		gap: 16px;
	}

	.ipropanel-sustainability-features__feature {
		flex-basis: auto;
		/* Anula el tope de 262 del desktop: en mobile la fila es una columna
		   y cada feature ocupa los 350 del contenido. */
		max-width: none;
		width: 100%;
	}
}