/**
 * Estilos del bloque `ipropanel/advantages-grid` (desktop + mobile).
 *
 * Verificado vía MCP contra Figma: 501:1013 (desktop) y 627:6310 (mobile),
 * con `get_design_context` sobre el nodo completo para colores/spacing
 * exactos (no se infiere de memoria). Fondo: degradado sólido
 * `dark-blue-gradient` (token ya declarado en theme.json para esta
 * sección, S0.3) + un segundo degradado de `neutral-black` a transparente
 * encima (solo vertical, no diagonal). Grid fijo de 8 tarjetas: 4×2
 * desktop, 2×4 mobile — gap resuelto con el token fluido `card-gap` sin
 * necesitar valores distintos por breakpoint. 2 tokens nuevos en
 * theme.json (`advantages-card-border` rgba(0,0,0,0.1),
 * `advantages-badge-bg` rgba(255,255,255,0.7)) — ningún alpha existente
 * coincidía (criterio sin excepciones de S2.7); el resto de la sección
 * (fondo de tarjeta, radios, sombra del badge, tipografía, gaps) reutiliza
 * tokens ya declarados desde S0.3 con comentarios que nombran esta
 * sección explícitamente.
 *
 * RD-08 (S16.2) le agrega padding-block inferior. El nodo NO lo respalda
 * y por eso queda registrado en `DECISIONES-PROVISIONALES.md` según V22:
 * `501:1013` declara `pt-[64px] px-[120px]` y ningún aire abajo — el
 * frame mide exacto pt-64 + contenido, y hasta ahora el espacio hacia la
 * siguiente sección lo aportaba solo el padding-top de esa sección
 * (S4.1: 96px de `featured-projects` en Home). El diseñador pide
 * «aumentar espaciado inferior» sin dar número, así que el valor no sale
 * del archivo sino de la escala del tema: `section-padding-block-sm`,
 * el mismo token que ya usa el borde superior de esta sección.
 */

.ipropanel-advantages-grid {
	background-color: var( --wp--preset--color--dark-blue-gradient );
	background-image: linear-gradient( to bottom, var( --wp--preset--color--neutral-black ) 0%, transparent 68.747% );
}

.ipropanel-advantages-grid__inner {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--section-padding-inline );
	padding-block: var( --wp--preset--spacing--section-padding-block-sm )
		var( --wp--preset--spacing--section-padding-block-sm );
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--heading-content-gap );
}

.ipropanel-advantages-grid__encabezado {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.ipropanel-advantages-grid__titulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-2 );
	font-weight: 700;
	/* 60px literal en ambos breakpoints, tal como mide Figma (501:1017/627:6314) */
	line-height: 60px;
	color: var( --wp--preset--color--neutral-white );
}

.ipropanel-advantages-grid__parrafo-intro {
	margin: 0;
	max-width: 672px;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-2-parrafo );
	font-weight: 400;
	line-height: 1.4;
	color: var( --wp--preset--color--neutral-white );
}

.ipropanel-advantages-grid__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --wp--preset--spacing--card-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Verificado vía MCP contra la card del frame de página (506:1266):
   fill `rgba(255,255,255,0.1)`, borde 0.8px en los 4 lados, padding 24.8
   y radius 16 — es decir, lo que ya había. El QA desktop pedía cambiar el
   fill a `#030813 20%` y dejar el borde solo arriba, pero ni el frame
   desktop ni el mobile lo respaldan (el propio QA mobile daba este fill
   por coincidente). Ver docs/QA-RECONCILIACION.md D-24/D-27/D-28. */
.ipropanel-advantages-grid__tarjeta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24.8px;
	background-color: var( --wp--custom--color--hover-light );
	border: 0.8px solid var( --wp--custom--color--advantages-card-border );
	border-radius: var( --wp--custom--border-radius--lg );
	backdrop-filter: var( --wp--custom--effect--glass-blur );
	transition: background-color var( --wp--custom--motion--duration-suave ) var( --wp--custom--motion--easing-suave );
}

/* Hover = `Variant2` del componente de card (interacción *While
   hovering*, Smart animate / Ease in and out / 300 ms): fondo amarillo y
   título teal. Es una variante del sistema de diseño, no un adorno.
   `:active` cubre tablet/mobile (INTERACTIONS.md §4).

   Las tres reglas de esta card cambian JUNTAS —fondo, título y cuerpo— y por
   eso van agrupadas en un solo bloque por estado: separarlas por propiedad
   dejaría abierta la posibilidad de que una se quede atrás y el texto acabe
   sobre un fondo que no le corresponde (el cuerpo blanco sobre amarillo son
   los ~1.6:1 que documenta el comentario de más abajo).

   Guarda `@media ( hover: hover )` y reglas separadas por S11.1 — el porqué,
   en la forma canónica de `blocks/project-info/style.css`.

   El color del cuerpo: en reposo es blanco y sobre el amarillo del hover
   quedaría ilegible. La especificación de `Variant2` que reportó el QA solo
   menciona fondo y título, así que se aplica el color que el propio sistema ya
   usa para texto sobre `primary-yellow` (la sección de contacto, #030813).
   Queda como pregunta abierta para diseño en INTERACTIONS.md. */
@media ( hover: hover ) {
	.ipropanel-advantages-grid__tarjeta:hover {
		background-color: var( --wp--preset--color--primary-yellow );
	}

	.ipropanel-advantages-grid__tarjeta:hover .ipropanel-advantages-grid__tarjeta-titulo {
		color: var( --wp--preset--color--primary-light-blue );
	}

	.ipropanel-advantages-grid__tarjeta:hover .ipropanel-advantages-grid__tarjeta-texto {
		color: var( --wp--preset--color--near-black );
	}
}

.ipropanel-advantages-grid__tarjeta:active {
	background-color: var( --wp--preset--color--primary-yellow );
}

.ipropanel-advantages-grid__tarjeta:active .ipropanel-advantages-grid__tarjeta-titulo {
	color: var( --wp--preset--color--primary-light-blue );
}

.ipropanel-advantages-grid__tarjeta:active .ipropanel-advantages-grid__tarjeta-texto {
	color: var( --wp--preset--color--near-black );
}

.ipropanel-advantages-grid__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var( --wp--custom--border-radius--full );
	background-color: var( --wp--custom--color--advantages-badge-bg );
	box-shadow: var( --wp--preset--shadow--shadow-md );
	margin-bottom: 24px;
}

.ipropanel-advantages-grid__badge img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ipropanel-advantages-grid__tarjeta-titulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-3 );
	font-weight: 700;
	line-height: 1.75;
	color: var( --wp--preset--color--neutral-white );
	transition: color var( --wp--custom--motion--duration-suave ) var( --wp--custom--motion--easing-suave );
}

.ipropanel-advantages-grid__tarjeta-texto {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--body );
	font-weight: 400;
	line-height: 1.85;
	color: var( --wp--preset--color--neutral-white );
	transition: color var( --wp--custom--motion--duration-suave ) var( --wp--custom--motion--easing-suave );
}

@media ( max-width: 767px ) {
	.ipropanel-advantages-grid__grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	/* Mobile alinea el encabezado a la izquierda (x = 32, el mismo inset
	   de la sección), no centrado como desktop — hallazgo A-14. */
	.ipropanel-advantages-grid__encabezado {
		align-items: flex-start;
		text-align: left;
	}

	/* El `line-height: 60px` es del H2 desktop (501:1017). En mobile el
	   archivo baja la fuente a ~24 pero arrastró el mismo interlineado,
	   que `DESIGN-INVENTORY.md` §6 ya marcaba como descuido de diseño;
	   el frame mobile lee ~24/32 (hallazgo A-15). */
	.ipropanel-advantages-grid__titulo {
		line-height: 32px;
	}

	/* Las cuatro medidas que el frame de 414 cambia y que hasta S11.5a
	   heredaban el valor desktop. Leídas de `627:6310` y sus hijos:
	   la tarjeta baja el padding de 24,8 a 16,8 y el radio de 16 a 8
	   (`627:6320`), la bajada baja de 20 a 16 (`627:6317`) y el título de
	   tarjeta de 16 a 14 (`627:6325`). Ninguna se veía en desktop, que es
	   donde se auditó el bloque en S3.5. */
	.ipropanel-advantages-grid__parrafo-intro {
		font-size: 16px;
	}

	.ipropanel-advantages-grid__tarjeta {
		padding: 16.8px;
		border-radius: var( --wp--custom--border-radius--sm );
	}

	.ipropanel-advantages-grid__tarjeta-titulo {
		font-size: 14px;
	}
}