/*
 * Sección «metodologia» (#metodologia) de la portada — hoja propia (D-024).
 * Propietario: T07 (REQ-V05, DESIGN.md v2.2 §7.6, §8 fila «Methodology», §9,
 * §11 M6). La enlaza functions.php (sia_enqueue_styles) sólo en la portada.
 * Ámbito: .sia-section--metodologia. SÓLO tokens v2 (var(--wp--preset--*),
 * var(--wp--custom--*)): ningún literal de color y ninguno de los slugs v1 que
 * el puente transitorio de style.css aún resuelve (chip-*, badge-*,
 * secondary-strong, radius--base/lg).
 *
 * Reutiliza andromeda/process-timeline-section: el <ol> lleva .dd-timeline. Su
 * piel la pinta el padre para banda oscura (texto inverso, fondo con alfa);
 * aquí la banda es clara, así que se reescribe entera. La rejilla también: la
 * del padre pasa a 1 columna a 42rem y el contrato pide 768 px (§6/§9).
 *
 * Especificidad: dos clases (0,2,0) o más, para ganar a .dd-timeline > *
 * (0,1,0), .dd-timeline p / h3 (0,1,1) y a los :where() del núcleo.
 *
 * Contraste (paleta v2, verificado sobre el render en T07):
 *  - banda `surface-subtle`: antetítulo/intro `text-soft` 7.98, h2 `text` 15.54;
 *  - tarjeta de fase `surface`: número `secondary` 6.44 (28 px), etiqueta
 *    `secondary` 6.44 (12 px = texto normal), título `text` 17.19, cuerpo
 *    `text-soft` 9.16, «Entregable:» `text-soft` 9.16 (14 px);
 *  - aviso sobre `surface-tinted`: cuerpo `text` 14.02; baldosa `brand` con
 *    glifo `inverse` 17.13.
 */

/* -------------------------------------------------------------------------
 * Cabecera de sección (alineada a la izquierda, como la referencia 05)
 * ---------------------------------------------------------------------- */

.sia-section--metodologia .sia-metodologia__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	align-items: flex-start;
}

.sia-section--metodologia .sia-metodologia__header > * {
	margin: 0;
}

/* Antetítulo (§7.0: nunca un encabezado) — texto plano, sin píldora ni glifo. */
.sia-section--metodologia .sia-metodologia__eyebrow {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sia-section--metodologia .sia-metodologia__intro {
	max-width: var(--wp--custom--layout--measure);
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
}

.sia-section--metodologia .sia-metodologia__intro strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Las cuatro fases: <ol> (.dd-timeline) > <li>
 * 4 columnas ≥ 1024 · 2 entre 768 y 1023 · 1 por debajo (§6, §9). Cuatro
 * tarjetas nunca dejan huérfana una fila en ninguno de los tres repartos.
 * ---------------------------------------------------------------------- */

.sia-section--metodologia .sia-metodologia__stages {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--md);
	padding: 0;
	margin-block: var(--wp--preset--spacing--xl) 0;
	list-style: none;
}

@media (min-width: 48rem) {

	.sia-section--metodologia .sia-metodologia__stages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	.sia-section--metodologia .sia-metodologia__stages {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sia-section--metodologia .sia-metodologia__stage {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	min-width: 0;
	height: 100%;
	padding: var(--wp--preset--spacing--sm);
	margin: 0;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--level-1);
	overflow-wrap: break-word;
}

@media (min-width: 48rem) {

	.sia-section--metodologia .sia-metodologia__stage {
		padding: var(--wp--preset--spacing--md);
	}
}

.sia-section--metodologia .sia-metodologia__stage > * {
	margin: 0;
}

/*
 * Cabecera de fase: número a la izquierda y glifo decorativo a la derecha. El
 * glifo es una máscara sobre el ::after (sin contenido, sin elemento vacío en
 * el árbol de accesibilidad): el orden lo da el <ol> y el número, que es texto
 * real (AC-50.3).
 */
.sia-section--metodologia .sia-metodologia__stage-head {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--2-xs);
}

.sia-section--metodologia .sia-metodologia__stage-head::after {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--secondary);
	content: "";
}

.sia-section--metodologia .sia-metodologia__stage--1 .sia-metodologia__stage-head::after {
	mask: url("../../icons/metodologia-find-in-page.svg") center / contain no-repeat;
}

.sia-section--metodologia .sia-metodologia__stage--2 .sia-metodologia__stage-head::after {
	mask: url("../../icons/metodologia-assignment-turned-in.svg") center / contain no-repeat;
}

.sia-section--metodologia .sia-metodologia__stage--3 .sia-metodologia__stage-head::after {
	mask: url("../../icons/metodologia-architecture.svg") center / contain no-repeat;
}

.sia-section--metodologia .sia-metodologia__stage--4 .sia-metodologia__stage-head::after {
	mask: url("../../icons/metodologia-check-circle.svg") center / contain no-repeat;
}

/* Número de fase: texto real, mono 28 px (§7.6). */
.sia-section--metodologia .sia-metodologia__stage .sia-metodologia__number {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--mono-data);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* Etiqueta de fase (M-2): micro-etiqueta, nunca un encabezado (§7.0). */
.sia-section--metodologia .sia-metodologia__stage .sia-metodologia__tag {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sia-section--metodologia .sia-metodologia__stage .sia-metodologia__stage-title {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

/* Cuerpo de tarjeta: 16 px (§4 M1). */
.sia-section--metodologia .sia-metodologia__stage .sia-metodologia__stage-text {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/*
 * «Entregable: …» (content-v2.md §5): línea meta de 14 px anclada al fondo de
 * la tarjeta, para que las cuatro conserven altura y línea de base. Si una
 * línea se retirara, la tarjeta se queda sin ella (§8.1 slot #9) y el relleno
 * inferior no cambia.
 */
.sia-section--metodologia .sia-metodologia__stage .sia-metodologia__deliverable {
	padding-block-start: var(--wp--preset--spacing--sm);
	margin-block-start: auto;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Aviso de Transparencia (vulcano/alert «info», estático y sin enlace — D-017)
 *
 * §7.6: composición de DOS columnas — baldosa de icono a la izquierda, cuerpo
 * a la derecha acotado a 65ch — que se apila por debajo de 768 px con la
 * baldosa encima. Fondo `surface-tinted`, sin encabezado y sin chip. Los
 * colores fijos del bloque (pares azul/ámbar propios) se reconducen a tokens.
 * ---------------------------------------------------------------------- */

.sia-section--metodologia .sia-metodologia__note {
	margin-block: var(--wp--preset--spacing--xl) 0;
}

.sia-section--metodologia .sia-metodologia__note .wp-block-vulcano-alert {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--sm);
	align-items: start;
	padding: var(--wp--preset--spacing--sm);
	margin: 0;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface-tinted);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--md);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

@media (min-width: 48rem) {

	.sia-section--metodologia .sia-metodologia__note .wp-block-vulcano-alert {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--wp--preset--spacing--md);
		padding: var(--wp--preset--spacing--lg);
	}
}

/* Baldosa navy de 48 px con el glifo blanco (§7.5). */
.sia-section--metodologia .sia-metodologia__note .vulcano-alert__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0;
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--xs);
}

.sia-section--metodologia .sia-metodologia__note .vulcano-alert__icon svg {
	display: block;
	width: 1.625rem;
	height: 1.625rem;
}

.sia-section--metodologia .sia-metodologia__note .vulcano-alert__body {
	display: block;
	max-width: 65ch;
}

/*
 * El aviso NO tiene título (§7.6 N4): el bloque imprime su etiqueta de
 * variante y aquí se deja sólo para lectores de pantalla, de modo que el tipo
 * de aviso no dependa del color (SC 1.4.1) sin añadir un título a la
 * composición. Técnica estándar: fuera del flujo, 1 px, sin display:none.
 */
.sia-section--metodologia .sia-metodologia__note .vulcano-alert__title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sia-section--metodologia .sia-metodologia__note .vulcano-alert__content {
	color: var(--wp--preset--color--text);
}

.sia-section--metodologia .sia-metodologia__note .vulcano-alert__content strong {
	font-weight: 700;
}