/*
 * Sección «escenarios» de la portada — hoja propia (D-024).
 * Propietario: T08. La enlaza functions.php (sia_enqueue_styles) sólo en la portada.
 * Ámbito: .sia-section--escenarios. Sólo tokens de la v2 (var(--wp--preset--*),
 * var(--wp--custom--*)): ningún literal de color y ningún slug de la v1
 * (brand-strong, secondary-strong, chip-*, badge-*, radius--base/lg/xl,
 * shadow--overlay) — el puente transitorio de style.css ya no hace falta aquí.
 *
 * Referencias: DESIGN.md v2.2 §4 (escala: cuerpo 16px, meta 14px, etiqueta de
 * medio 12px en versales), §5 (espaciado, radios, sombras, filetes), §6
 * (3 → 1 por debajo de 1024), §7.3 (tarjeta ESTÁTICA: sin hover, sin cursor,
 * sin <a>), §7.4 (etiqueta de medio = banda SÓLIDA de marca + blanco),
 * §7.10 (medio 16:9, marcador decorativo, min-height:0), §8 fila «Scenarios»,
 * §8.1 ranura 10, §9 (móvil), §11 máscara M7 (ningún reclamo de volumen).
 *
 * Identidad de Pilar por TEXTO (etiqueta + línea de contexto) además del
 * color. Selectores con clase doble frente a los :where() del núcleo y a las
 * reglas de una sola clase de Vulcano.
 */

/* -------------------------------------------------------------------------
 * 1. Cabecera de sección
 * ---------------------------------------------------------------------- */

/*
 * La banda la pinta style.css (alternancia de §6 [D-039]): desde la corrección
 * D-V05 es `surface-subtle` #EDF4FF y no `surface` blanco — con escenarios y
 * contacto los dos en blanco no había costura entre las dos bandas. Aquí no se
 * repinta; sólo se recalculan los ratios del texto que va DIRECTO sobre la
 * banda (los de la tarjeta no cambian: la tarjeta sigue siendo `surface`).
 */

.sia-section--escenarios .sia-escenarios__header.sia-escenarios__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin-block-end: var(--wp--preset--spacing--xl);
}

.sia-section--escenarios .sia-escenarios__header > * {
	max-width: min(70ch, 100%);
	margin-block: 0;
}

/*
 * Antetítulo de 12px en versales (§4): texto NORMAL → 4.5:1 → `secondary`
 * sobre la banda `surface-subtle` da 5.82:1 (medido en el render; sobre
 * `surface` eran 6.44). Es un <p>, nunca un encabezado (§7.0).
 */
.sia-section--escenarios .sia-escenarios__eyebrow.sia-escenarios__eyebrow {
	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): `text` sobre la banda `surface-subtle` 15.54:1
 * (medido). Tamaño/peso/interlineado vienen de theme.json. */
.sia-section--escenarios .sia-escenarios__title.sia-escenarios__title {
	color: var(--wp--preset--color--text);
}

/* Entradilla: 16px con `text-soft` sobre `surface-subtle` (8.43:1, medido;
 * 9.33 sobre `surface`), medida ≤ 70ch. */
.sia-section--escenarios .sia-escenarios__intro.sia-escenarios__intro {
	margin-block-start: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * 2. Rejilla: 3 → 1 por debajo de 1024 (DESIGN.md §6/§9, M3)
 * ---------------------------------------------------------------------- */

.sia-section--escenarios .sia-escenarios__grid.sia-escenarios__grid {
	gap: var(--wp--preset--spacing--md);
}

/*
 * 63.9375rem = 1023px: a 1024 justos el contrato mantiene las tres columnas.
 * Vulcano sólo apila a 48rem, así que la regla es necesaria (y gana por
 * especificidad 0,3,0, no por orden).
 */
@media (max-width: 63.9375rem) {

	.sia-section--escenarios .wp-block-vulcano-columns.sia-escenarios__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 3. Tarjeta (DESIGN.md §7.3, variante ESTÁTICA)
 * ---------------------------------------------------------------------- */

/*
 * `surface` + `text` (17.19:1) se declaran como atributos del bloque (el
 * guardián de contraste de vulcano/container sólo acepta sus propios slugs).
 * Aquí: filete DECORATIVO + radio `md` + sombra de reposo de nivel 1, y
 * `overflow` para recortar el medio al radio.
 *
 * SIN estado hover (§7.3: la tarjeta no es interactiva — no hay enlace,
 * D-009/AC-70.4; una elevación al pasar el ratón sugeriría que se puede
 * pulsar).
 */
.sia-section--escenarios .sia-escenarios__card.sia-escenarios__card {
	flex-wrap: nowrap;
	overflow: hidden;
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--level-1);
}

/* -------------------------------------------------------------------------
 * 4. Medio 16:9 + etiqueta superpuesta (DESIGN.md §7.4 + §7.10)
 * ---------------------------------------------------------------------- */

/* 16:9 por el bloque; min-height:0 para que el ratio mande (LESSON 2026-08-13). */
.sia-section--escenarios .sia-escenarios__media.sia-escenarios__media {
	position: relative;
	flex: 0 0 auto;
	flex-wrap: nowrap;
}

/* Campo plano `surface-tinted` bajo el marcador decorativo (§7.10). */
.sia-section--escenarios .sia-escenarios__image .vulcano-image__media {
	min-height: 0;
	background: var(--wp--preset--color--surface-tinted);
}

/*
 * ETIQUETA del medio (content-v2.md §6): banda SÓLIDA de marca arriba a la
 * IZQUIERDA + texto inverso = 17.13:1, pase lo que pase con la fotografía
 * (nunca se apoya en la imagen, A5). 12px en versales = texto normal, por
 * encima del mínimo de 4.5:1. Radio `xs`. Sustituye al chip de la v1 dentro
 * de la tarjeta (D-019 X-4): la palabra aparece UNA vez por tarjeta.
 */
.sia-section--escenarios .sia-escenarios__tag.sia-escenarios__tag {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--sm);
	inset-inline-start: var(--wp--preset--spacing--sm);
	max-width: calc(100% - 2 * var(--wp--preset--spacing--sm));
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--xs);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 5. Cuerpo de la tarjeta: contexto, h3, texto y «Enfoque SIA»
 * ---------------------------------------------------------------------- */

/* Crece para que la línea «Enfoque SIA» quede al pie en todas las tarjetas. */
.sia-section--escenarios .sia-escenarios__body.sia-escenarios__body {
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--xs);
}

.sia-section--escenarios .sia-escenarios__body > * {
	margin-block: 0;
}

/* Contexto (content.md E-3): 14px/600 = texto normal → 4.5:1 con el color del Pilar. */
.sia-section--escenarios .sia-escenarios__context.sia-escenarios__context {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.5;
}

/* h3 de tarjeta = headline-sm (token `m`, 18→20px, PJS 600). */
.sia-section--escenarios .sia-escenarios__card-title.sia-escenarios__card-title {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	line-height: 1.4;
}

/* Cuerpo de tarjeta: 16px (§4 M1, nunca 14px) + `text-soft` sobre `surface` (9.33:1). */
.sia-section--escenarios .sia-escenarios__text.sia-escenarios__text {
	max-width: min(70ch, 100%);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/*
 * «Enfoque SIA: …» al pie, separado por un filete decorativo. Meta de 14px
 * (§4: `xs` está reservado a las líneas de meta). Etiqueta y valor siempre
 * apilados: en una fila los valores largos partían en unas tarjetas y no en
 * otras (medido a 1280 en la v1: 2 de 3 partían).
 */
.sia-section--escenarios .sia-escenarios__meta.sia-escenarios__meta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xs);
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--sm);
	border-block-start: var(--wp--custom--border--hairline);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	line-height: 1.5;
}

.sia-section--escenarios .sia-escenarios__meta strong {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 6. Identidad de Pilar (pares AA de DESIGN.md §3/§7.4; el color nunca es el
 *    único portador: el Pilar va escrito en la etiqueta y en el contexto)
 * ---------------------------------------------------------------------- */

/* Pilar 01 · Física: `secondary` sobre `surface` = 6.44:1. */
.sia-escenarios__card--fisica .sia-escenarios__context.sia-escenarios__context,
.sia-escenarios__card--fisica .sia-escenarios__meta strong {
	color: var(--wp--preset--color--secondary);
}

/* Pilar 02 · Digital: `brand` sobre `surface` = 17.13:1. */
.sia-escenarios__card--digital .sia-escenarios__context.sia-escenarios__context,
.sia-escenarios__card--digital .sia-escenarios__meta strong {
	color: var(--wp--preset--color--brand);
}

/* Pilar 03 · Procesos e IA: `accent-strong` sobre `surface` = 7.09:1. */
.sia-escenarios__card--procesos-ia .sia-escenarios__context.sia-escenarios__context,
.sia-escenarios__card--procesos-ia .sia-escenarios__meta strong {
	color: var(--wp--preset--color--accent-strong);
}

/* -------------------------------------------------------------------------
 * 7. Móvil (DESIGN.md §9)
 * ---------------------------------------------------------------------- */

@media (max-width: 47.9375rem) {

	.sia-section--escenarios .sia-escenarios__header.sia-escenarios__header {
		margin-block-end: var(--wp--preset--spacing--lg);
	}

	.sia-section--escenarios .sia-escenarios__grid.sia-escenarios__grid {
		gap: var(--wp--preset--spacing--sm);
	}

	/* Relleno de tarjeta 16px (§7.3/§9). */
	.sia-section--escenarios .sia-escenarios__body.sia-escenarios__body {
		padding: var(--wp--preset--spacing--sm);
	}
}