/*
 * Sección «compromisos» de la portada — hoja propia (D-024).
 * Propietario: T06. La enlaza functions.php (sia_enqueue_styles) sólo en la portada.
 * Ámbito: .sia-section--compromisos. Sólo tokens de la v2
 * (var(--wp--preset--*), var(--wp--custom--*)): ningún literal de color y
 * ningún slug de la v1 (chip-*, badge-*, secondary-strong, radius--base/lg).
 *
 * Referencias: DESIGN.md v2.3 §4 (escala), §5 (espaciado, radios, sombras,
 * filetes), §6 (colapso 4 → 2 → 1 sin tarjeta huérfana), §7.3 (tarjeta
 * ESTÁTICA: sin hover, sin cursor, sin <a>; «tarjeta estática SIN filete»),
 * §7.4 (chip de sección), §7.5 (mosaico de icono), §8 fila «Commitments»,
 * §8.1 ranuras 6-7, §9 (móvil).
 *
 * Contraste y bordes (v2.3, T12/D-039): las CUATRO tarjetas van SIN filete por
 * decisión del cliente — es la ÚNICA excepción registrada a la A6 («la sombra
 * no es un borde»), §3.3 A6 + fila 52 de §3.2:
 *  - el canto que queda es el relleno `surface-subtle` sobre la banda
 *    `surface` (1.11:1) más `shadow-level-1`, y la estructura la llevan los
 *    cuatro <h3> (esquema de encabezados), no un píxel;
 *  - la tarjeta NO es interactiva (sin <a>, sin control, sin hover): no es
 *    objetivo del SC 1.4.11;
 *  - en `forced-colors: active` ni el relleno ni la sombra se pintan, así que
 *    la tarjeta RECUPERA un `1px solid CanvasText` (obligatorio: es lo que
 *    conserva la intención de la A6 para quien la necesita);
 *  - el mosaico del icono y el chip de sección CONSERVAN su filete (el cliente
 *    nombró las tarjetas). La excepción no se extiende a ninguna otra tarjeta.
 * Texto sin cambios: título `text` 15.54 · cuerpo `text-soft` 8.43 · meta
 * `secondary` 5.82 · chip `text` 15.54 sobre banda suave.
 *
 * Selectores con clase doble (o con la cadena de la sección) donde hay que
 * ganar a los :where() del layout del núcleo o a la especificidad (0,2,0)/
 * (0,3,0) de las hojas de Vulcano.
 */

/* -------------------------------------------------------------------------
 * 1. Cabecera PARTIDA: antetítulo + h2 a la izquierda, chip a la derecha
 * ---------------------------------------------------------------------- */

/*
 * Tres hermanos planos colocados por rejilla: el chip ocupa la segunda
 * columna y las dos filas, alineado abajo con el h2 (como el recorte 03).
 * Se anula el margen entre bloques del layout «flow» del núcleo: aquí la
 * separación la da `gap`.
 */
.sia-section--compromisos .sia-compromisos__header.sia-compromisos__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--lg);
	align-items: end;
}

.sia-section--compromisos .sia-compromisos__header.sia-compromisos__header > * {
	margin-block: 0;
}

/* Antetítulo de 12px en versales (§4/§7.0: es un <p>, nunca un encabezado). */
.sia-section--compromisos .sia-compromisos__eyebrow.sia-compromisos__eyebrow {
	grid-column: 1;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* h2 de sección (§7.0). Tamaño/peso/interlineado vienen de theme.json. */
.sia-section--compromisos .sia-compromisos__title.sia-compromisos__title {
	grid-column: 1;
	color: var(--wp--preset--color--text);
}

/*
 * Chip de sección (§7.4): banda suave + texto `text` (15.54:1) + filete
 * decorativo, radio `xs`. Descriptivo, sin reclamo y sin color como único
 * portador de significado.
 */
.sia-section--compromisos .sia-compromisos__chip.sia-compromisos__chip {
	grid-row: 1 / span 2;
	grid-column: 2;
	align-self: end;
	justify-self: end;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface-subtle);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--xs);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.5;
}

/*
 * Por debajo de lg (1024px) la cabecera es UNA columna y el chip baja bajo el
 * h2 (§9). Se colapsa en el mismo punto que el 7/5 del hero y no en `md`:
 * entre 768 y 1023 la columna de texto que deja el chip obliga al h2 a partirse
 * en cuatro líneas, que es peor lectura que apilar el chip.
 */
@media (max-width: 63.9375rem) {

	.sia-section--compromisos .sia-compromisos__header.sia-compromisos__header {
		grid-template-columns: minmax(0, 1fr);
	}

	.sia-section--compromisos .sia-compromisos__chip.sia-compromisos__chip {
		grid-row: auto;
		grid-column: 1;
		justify-self: start;
		margin-block-start: var(--wp--preset--spacing--xs);
	}
}

/* -------------------------------------------------------------------------
 * 2. Rejilla: 4 → 2 (≥768) → 1 (<768), sin tarjeta huérfana
 * ---------------------------------------------------------------------- */

.sia-section--compromisos .sia-compromisos__grid.sia-compromisos__grid {
	gap: var(--wp--preset--spacing--md);
	margin-block-start: var(--wp--preset--spacing--xl);
}

/*
 * Tableta = 768–1023px (§6: las rejillas de 4 colapsan a 2 en `md` y a 1 por
 * debajo). Vulcano apila con `max-width: 48rem`, que INCLUYE 768px: el 2×2
 * empieza en 48rem justo y gana por especificidad (0,3,0 frente a 0,2,0), no
 * por orden. 4 y 2 dividen a 4: ninguna fila termina con una sola tarjeta.
 * `grid-auto-rows: 1fr` iguala también las dos filas; en un grid de alto
 * automático 1fr crece con el contenido, así que no recorta con el espaciado
 * de texto del SC 1.4.12.
 */
@media (min-width: 48rem) and (max-width: 63.9375rem) {

	.sia-section--compromisos .wp-block-vulcano-columns.sia-compromisos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * 3. Tarjeta estática (vulcano/container + icon-box)
 * ---------------------------------------------------------------------- */

/*
 * Banda suave + sombra de nivel 1 y radio `sm`, SIN filete (§7.3 «tarjeta
 * estática sin filete», D-039): `border: 0` explícito para que el ancho
 * calculado sea 0 a 1280/768/375/320 y no quede a merced de la cascada del
 * contenedor de Vulcano. El canto es el tinte sobre la banda blanca más la
 * sombra; el filete vuelve en colores forzados (bloque final de esta hoja).
 * `fillHeight` del bloque estira la tarjeta a la columna, y la columna a la
 * más alta de la fila: misma altura sin alturas fijas. Sin hover, sin cursor
 * y sin enlace: es la variante ESTÁTICA (no hay destino que ofrecer).
 */
.sia-section--compromisos .sia-compromisos__card.sia-compromisos__card {
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface-subtle);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--level-1);
}

/* El relleno lo pone la tarjeta; el icon-box sólo aporta el ritmo interno. */
.sia-section--compromisos .sia-compromisos__box.sia-compromisos__box {
	gap: var(--wp--preset--spacing--sm);
	padding: 0;
}

/*
 * Mosaico de icono (§7.5): 48px, radio `xs`, relleno `surface` y glifo de
 * marca (17.13:1 sobre blanco). El glifo del catálogo de Vulcano se oculta y
 * se pinta el Material Symbol del diseño como máscara en currentColor, dentro
 * del mismo envoltorio aria-hidden del bloque. Filete decorativo para separar
 * el mosaico blanco de la tarjeta en banda suave.
 */
.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--xs);
}

.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__icon svg {
	display: none;
}

.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__icon::before {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	content: "";
	background: currentcolor;
	mask: var(--sia-commit-icon) center / contain no-repeat;
}

.sia-section--compromisos .sia-compromisos__card--verificado {
	--sia-commit-icon: url("../../icons/compromisos-verified.svg");
}

.sia-section--compromisos .sia-compromisos__card--diagnostico {
	--sia-commit-icon: url("../../icons/compromisos-balance.svg");
}

.sia-section--compromisos .sia-compromisos__card--acompanamiento {
	--sia-commit-icon: url("../../icons/compromisos-build.svg");
}

.sia-section--compromisos .sia-compromisos__card--codiseno {
	--sia-commit-icon: url("../../icons/compromisos-psychology.svg");
}

/*
 * h3 de tarjeta bajo el h2 de la sección (§7.0). Tamaño `m` (20px en
 * escritorio): el `l` de theme.json es la medida de un titular de sección y
 * desbordaría una tarjeta a 4 columnas. `text` sobre banda suave = 15.54:1.
 */
.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__title {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Cuerpo de tarjeta a 16px (M1): text-soft sobre banda suave 8.44:1. */
.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__text {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/*
 * Etiqueta meta inferior (content-v2.md §3.2): 14px `secondary` sobre banda
 * suave (5.82:1). NO es un enlace y no lleva «→»: las cuatro filas-enlace del
 * export son una falsa afordancia y están enmascaradas (M5, A8).
 * `margin-block-start: auto` la pega al fondo de la tarjeta, así que las
 * cuatro quedan a la misma altura aunque los cuerpos midan distinto.
 * Alto ≥24px (m3), aunque no sea un objetivo interactivo.
 */
.sia-section--compromisos .sia-compromisos__meta.sia-compromisos__meta {
	display: flex;
	align-items: center;
	min-block-size: 1.5rem;
	margin-block-start: auto;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * 4. Móvil (DESIGN.md §9) y modos forzados
 * ---------------------------------------------------------------------- */

@media (max-width: 47.9375rem) {

	/* Relleno de tarjeta 16px y mosaico de 40px en móvil (§9). */
	.sia-section--compromisos .sia-compromisos__card.sia-compromisos__card {
		padding: var(--wp--preset--spacing--sm);
	}

	.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__icon {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}

	.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__icon::before {
		inline-size: 1.375rem;
		block-size: 1.375rem;
	}
}

@media (forced-colors: active) {

	/*
	 * Respaldo OBLIGATORIO de la excepción a la A6 (§3.3 A6, §3.2 fila 52): en
	 * colores forzados no se pintan ni el relleno `surface-subtle` ni la
	 * sombra, así que sin esto la tarjeta se disolvería en la banda. Recupera
	 * un borde real del color del sistema (1 px, como cualquier otra tarjeta).
	 */
	.sia-section--compromisos .sia-compromisos__card.sia-compromisos__card {
		border: 1px solid CanvasText;
	}

	.sia-section--compromisos .sia-compromisos__card .vulcano-icon-box__icon::before {
		background: CanvasText;
		forced-color-adjust: none;
	}
}