/*
 * Sección «pilares» (#servicios) de la portada — hoja propia (D-024).
 * Propietario: T07 (REQ-V04); variante OSCURA de la v2.3 por T12 (D-039,
 * DESIGN.md v2.3 §2, §3.1 filas 43-47, §3.2 filas 48-53, §3.3 A13, §5, §6,
 * §7.3–§7.5, §8 fila «Pillars», §9, §11 M11/M14, §12). La enlaza functions.php
 * (sia_enqueue_styles) sólo en la portada.
 * Ámbito: .sia-section--pilares. 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-*,
 * brand-strong, secondary-strong, radius--lg/base/xl): esta hoja ya no los usa.
 *
 * Especificidad: los estilos de layout del núcleo y de Vulcano van en :where()
 * o con una clase (0,1,0); aquí todo va con dos clases (0,2,0) o más para
 * ganarles sin !important (LESSON 2026-08-04). Las media queries no suman.
 *
 * BANDA OSCURA (v2.3 §8 fila «Pillars»): la sección es la ÚNICA banda oscura
 * de la página (§6) y va a sangre, así que el fondo se pinta sobre el propio
 * <section> (el mismo elemento que pinta style.css para las demás bandas) y no
 * sobre una caja interior. Dos marinos de profundidad: banda `brand` y tarjeta
 * `brand-raised` (§3.3 A13).
 *
 * Contraste (paleta v2.3, verificado sobre el render en T12; el fondo de todo
 * el texto de tarjeta es `brand-raised`, NUNCA la banda — §3.3 A13):
 *  - tarjeta `brand-raised` #132238: <h3> `inverse` 15.99 (fila 43) ·
 *    descripción, lista y marcadores `inverse-soft` 14.14 (fila 44) ·
 *    etiqueta «Pilar 01» + su glifo `on-brand-muted` 5.58 (fila 45),
 *    «Pilar 02» `inverse-soft` 14.14, «Pilar 03» `accent-on-dark` 9.39
 *    (fila 46) — 14 px = texto normal, umbral 4.5;
 *  - cabecera de sección: chip del antetítulo `accent-on-dark` sobre
 *    `brand-raised` 9.39 (fila 46) · <h2> `inverse` 17.13 (fila 16) ·
 *    entradilla `inverse-soft` 15.15 (fila 17), ambas sobre la banda `brand`;
 *  - franja de pie `brand` #0E1C2F: «Ámbito:» `inverse-soft` 15.15 (fila 17) ·
 *    «Referencia:» en la tinta de la tarjeta — `on-brand-muted` 5.98 (fila 18),
 *    `inverse-soft` 15.15, `accent-on-dark` 10.06 (fila 24);
 *  - cantos (no texto): relleno de tarjeta sobre banda 1.07 → NO es un borde
 *    (fila 48), de ahí que el filete `border-on-dark` sea OBLIGATORIO: 1.45
 *    sobre la tarjeta (fila 49) y 1.55 sobre la banda (fila 50), decorativo
 *    (A7) y nunca canto de control. La pista ≥3:1 la da la barra de acento de
 *    4 px en la tinta del dominio: 5.58 / 14.14 / 9.39 (fila 51);
 *  - `accent #B45309` NO se usa en oscuro: 3.18 sobre `brand-raised` (fila 47,
 *    enmienda de la A2). El ámbar de la banda es `accent-on-dark`;
 *  - la barra de acento y los marcadores de lista son decorativos y nunca la
 *    única pista: el dominio lo nombran el <h3> y la etiqueta «Pilar NN».
 *  - SIN baldosa de icono en la banda oscura (§7.5): glifo desnudo de 28 px en
 *    la tinta de la etiqueta. Una baldosa `brand` mediría 1.07 sobre la
 *    tarjeta y una invertida leería como sello (N10).
 */

/* -------------------------------------------------------------------------
 * Banda de sección (§6, §8 fila «Pillars», D-039)
 * ---------------------------------------------------------------------- */

/*
 * style.css pinta la alternancia de bandas sobre el propio <section>
 * .sia-section--<slug> con especificidad (0,1,0) a propósito, para que la hoja
 * de cada sección mande sobre su banda. Aquí se cambia `canvas` por `brand`
 * con clase doble (0,2,0): mismo elemento, así que la banda sigue yendo A
 * SANGRE (el <section> ocupa todo el ancho de .sia-main y sólo lleva
 * padding-inline del token `margin`), también en móvil (§9). Sus bordes son el
 * propio cambio de banda: no se dibuja ninguna línea divisoria.
 *
 * La TINTA de la banda se cambia junto con el fondo (D-V02): sin ella la
 * sección heredaba `text` #001D32 sobre `brand` #0E1C2F → 1.03:1, de modo que
 * cualquier nodo de texto añadido directamente a la banda (no a una tarjeta)
 * nacería invisible. El valor por defecto es el de la región «sobre superficie
 * oscura» (§6, §3.2 fila 53): `inverse-soft`, 15.15 sobre la banda y 14.14
 * sobre la tarjeta. Las reglas de abajo siguen fijando su color explícitamente
 * en cada nodo, así que esto es sólo la red de seguridad.
 */
.sia-section--pilares.sia-section--pilares {
	color: var(--wp--preset--color--inverse-soft);
	background: var(--wp--preset--color--brand);
}

/*
 * Toda la banda es una región «sobre superficie oscura» (§6, §3.2 fila 53):
 * un contorno marino sobre marino daría 1.00:1, así que lo que reciba el foco
 * aquí dentro usa el anillo de DOS bandas de style.css (2 px inverso dentro +
 * 3 px marca fuera; la banda blanca mide 15.99 sobre la tarjeta y 17.13 sobre
 * la banda). Hoy no hay nada operable en la sección (las tarjetas no son
 * interactivas, D-016): la regla está para que cualquier futuro control nazca
 * ya con el anillo correcto, sin tocar el marcado.
 *
 * Se EXCLUYE .sia-anchor: #enfoque-ia (la tarjeta del Pilar 3) recibe foco
 * PROGRAMÁTICO con tabindex="-1" desde la navegación y, al venir de una
 * pulsación de teclado, Chrome la hace coincidir con :focus-visible — sin la
 * exclusión, saltar al ancla dibujaría un anillo alrededor de TODA la tarjeta.
 * Por contrato ese destino va con outline: 0 y sin anillo (style.css §5).
 */
.sia-section--pilares :where(a, button, input, select, textarea, summary, [tabindex]):not(.sia-anchor):focus-visible {
	outline: 0;
	box-shadow: var(--sia-focus-ring);
}

@media (forced-colors: active) {

	/* Los box-shadow no se pintan: se restituye un contorno real (M5, A11). */
	.sia-section--pilares :where(a, button, input, select, textarea, summary, [tabindex]):not(.sia-anchor):focus-visible {
		box-shadow: none;
		outline: var(--wp--custom--focus-width) solid CanvasText;
		outline-offset: var(--wp--custom--focus-offset);
	}
}

/* -------------------------------------------------------------------------
 * Cabecera de sección (centrada, como la referencia 04)
 * ---------------------------------------------------------------------- */

.sia-section--pilares .sia-pilares__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
	text-align: center;
}

.sia-section--pilares .sia-pilares__header > * {
	margin: 0;
}

/*
 * Antetítulo (§7.0: nunca un encabezado) como CHIP sobre la banda oscura
 * (§7.4, D-039): relleno `brand-raised`, filete `border-on-dark` y radio
 * `pill` — el único `pill` de la página junto a la píldora del hero. Es una
 * ETIQUETA: sin icono, sin marca al lado y sin forma de sello (N10). 12 px en
 * versales = texto normal → `accent-on-dark` 9.39 sobre el relleno del chip.
 * La cabecera es un flex en columna centrado, así que el <p> se ajusta al
 * contenido; `max-inline-size` lo protege a 320 px.
 */
.sia-section--pilares .sia-pilares__eyebrow {
	display: inline-flex;
	align-items: center;
	max-inline-size: 100%;
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--accent-on-dark);
	background: var(--wp--preset--color--brand-raised);
	border: var(--wp--custom--border--hairline-dark);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-transform: uppercase;
}

/*
 * h2 de sección sobre la banda `brand`: `inverse` 17.13 (fila 16). Tamaño,
 * peso e interlineado siguen viniendo de theme.json; aquí sólo el color, con
 * dos clases para ganar al `:root :where(h2)` de los estilos globales.
 */
.sia-section--pilares .sia-pilares__header.sia-pilares__header h2 {
	color: var(--wp--preset--color--inverse);
}

/* Entradilla sobre la banda: `inverse-soft` 15.15 (fila 17). */
.sia-section--pilares .sia-pilares__intro {
	max-width: var(--wp--custom--layout--measure);
	color: var(--wp--preset--color--inverse-soft);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
 * Rejilla (vulcano/columns): 3 → 1 columna por debajo de 1024 px (§6, §9).
 * Vulcano apila por defecto a 48rem; aquí manda el contrato de la v2.
 * ---------------------------------------------------------------------- */

.sia-section--pilares .sia-pilares__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--md);
	margin-block: var(--wp--preset--spacing--xl) 0;
}

@media (min-width: 64rem) {

	.sia-section--pilares .sia-pilares__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Tarjeta de Pilar (vulcano/container, no interactiva — D-016)
 *
 * Las TRES son idénticas (§7.3 M7): mismo fondo, filete, sombra y relleno.
 * Lo único que cambia por dominio es la barra de acento de 4 px y la tinta de
 * la etiqueta «Pilar NN» (glifo y «Referencia:» incluidos), ambos redundantes
 * con las palabras de la tarjeta. El Pilar 2 NO lleva relleno propio ni anillo
 * (M7/M11): el `#162740` + `ring-primary-fixed/40` del export se descartan.
 *
 * Tinta por dominio en la banda oscura (§7.3 tabla, §7.4): 01 `on-brand-muted`
 * 5.58 · 02 `inverse-soft` 14.14 · 03 `accent-on-dark` 9.39. La tinta de
 * «Referencia:» coincide ahora con la de la etiqueta en las tres tarjetas
 * (§7.4: «línea 2 en la tinta de la etiqueta»); se conserva la variable propia
 * --sia-pilares-ref-ink porque la franja va sobre `brand` y no sobre la
 * tarjeta, así que sus ratios son los de las filas 18/17/24, no los de 44-46.
 * ---------------------------------------------------------------------- */

.sia-section--pilares .sia-pilares__card--fisica {
	--sia-pilares-accent: var(--wp--preset--color--on-brand-muted);
	--sia-pilares-ink: var(--wp--preset--color--on-brand-muted);
	--sia-pilares-ref-ink: var(--wp--preset--color--on-brand-muted);
}

.sia-section--pilares .sia-pilares__card--digital {
	--sia-pilares-accent: var(--wp--preset--color--inverse-soft);
	--sia-pilares-ink: var(--wp--preset--color--inverse-soft);
	--sia-pilares-ref-ink: var(--wp--preset--color--inverse-soft);
}

.sia-section--pilares .sia-pilares__card--ia {
	--sia-pilares-accent: var(--wp--preset--color--accent-on-dark);
	--sia-pilares-ink: var(--wp--preset--color--accent-on-dark);
	--sia-pilares-ref-ink: var(--wp--preset--color--accent-on-dark);
}

.sia-section--pilares .sia-pilares__card {
	--sia-pilares-pad: var(--wp--preset--spacing--sm);

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--sm);
	min-width: 0;
	height: 100%;
	padding: var(--sia-pilares-pad);
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand-raised);
	border: var(--wp--custom--border--hairline-dark);
	border-block-start: 0.25rem solid var(--sia-pilares-accent);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--level-1);
	overflow-wrap: break-word;
}

@media (min-width: 48rem) {

	/*
	 * Relleno `md` (24 px) y no `lg`: es la geometría que mide el propio
	 * contrato para la franja de pie (§7.4 N6 cuenta «≈341 px útiles» en una
	 * tarjeta de ≈389 px, es decir 24 px por lado). Con 40 px la designación
	 * del Pilar 03 partía en dos líneas a 1280 y desalineaba su franja
	 * respecto a las otras dos tarjetas, que deben verse idénticas (§7.3 M7).
	 */
	.sia-section--pilares .sia-pilares__card {
		--sia-pilares-pad: var(--wp--preset--spacing--md);

		gap: var(--wp--preset--spacing--md);
	}
}

.sia-section--pilares .sia-pilares__card > * {
	margin: 0;
}

/*
 * Sin estado hover: la tarjeta no es interactiva (D-016) y un realce al pasar
 * el ratón sugeriría que se puede pulsar (§7.3, afordancia (b)).
 */

/* Cabecera de tarjeta: etiqueta a la izquierda, baldosa del glifo a la derecha. */
.sia-section--pilares .sia-pilares__card-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
	justify-content: space-between;
}

.sia-section--pilares .sia-pilares__card-head > * {
	margin: 0;
}

/*
 * Etiqueta «Pilar NN» (§7.4): mono 14 px, NUNCA un encabezado (§7.0). Sobre la
 * tarjeta `brand-raised`: 5.58 / 14.14 / 9.39 (filas 45/44/46).
 */
.sia-section--pilares .sia-pilares__label {
	color: var(--sia-pilares-ink);
	font-family: var(--wp--preset--font-family--mono-data);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

/*
 * Glifo de cabecera de tarjeta (§7.5, D-039): en la banda oscura NO hay
 * baldosa — glifo DESNUDO de 28 px en la tinta de la etiqueta, así que mide lo
 * mismo que ella (5.58 / 14.14 / 9.39). Ni relleno ni recuadro: una baldosa
 * `brand` sobre `brand-raised` daría 1.07 (fila 48) y una invertida de 48 px
 * pesaría más que el <h3> y leería como sello/insignia (N10). El SVG en línea
 * pinta en currentColor, así que sobrevive a los colores forzados.
 */
.sia-section--pilares .sia-pilares__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	color: var(--sia-pilares-ink);
}

.sia-section--pilares .sia-pilares__icon svg {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
}

/*
 * <h3> de tarjeta: escalón `m` (20 px a 1280, 18 px a 375), NO `l` (D-V01,
 * §4 [D-039]: «el h3 del pilar se queda en `m`»). Con `l` medía 28 px, pesaba
 * más que el <h2> de 40 px de su propia sección y desmentía los títulos de 20
 * px de las tarjetas de compromisos, que son del mismo rango. Peso 600 y
 * `inverse` (15.99 sobre la tarjeta) sin cambio.
 */
.sia-section--pilares .sia-pilares__title.sia-pilares__title {
	color: var(--wp--preset--color--inverse);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Cuerpo de tarjeta: 16 px (§4 M1), medida ≤ 70ch. `inverse-soft` 14.14. */
.sia-section--pilares .sia-pilares__desc {
	max-width: var(--wp--custom--layout--measure);
	color: var(--wp--preset--color--inverse-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Lista de verificación (vulcano/icon-list): <ul>/<li> reales, marcador
 * aria-hidden. Se sustituye la máscara «check» por el glifo de cada ítem.
 * Texto y marcadores en `inverse-soft` (14.14, fila 44) y el marcador es el
 * MISMO en las tres tarjetas (§7.3): no codifica el dominio.
 * ---------------------------------------------------------------------- */

.sia-section--pilares .sia-pilares__list {
	--vulcano-icon-list-color: var(--wp--preset--color--inverse-soft);

	color: var(--wp--preset--color--inverse-soft);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

.sia-section--pilares .sia-pilares__list .vulcano-icon-list-item {
	gap: var(--wp--preset--spacing--sm);
}

/*
 * Marcador de 18 px (§7.3 «check_circle, 18 px, decorativo» — D-V06; medía 20).
 * El desplazamiento superior se recalcula al bajar de 20 a 18 px para que el
 * marcador siga centrado en la PRIMERA línea de texto (16 px / 1.6): 3 px + 9
 * px de medio marcador = 12 px, el centro MEDIDO de la primera línea en el
 * render (con 20 px eran 3 + 10 = 13 px, 1 px por debajo).
 */
.sia-section--pilares .sia-pilares__list .vulcano-icon-list-item__icon {
	width: 1.125rem;
	height: 1.125rem;
	margin-block-start: 0.1875rem;
}

.sia-section--pilares .sia-pilares__list strong {
	font-weight: 600;
}

.sia-section--pilares .sia-pilares__mark--alt-route .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-alt-route.svg"); }
.sia-section--pilares .sia-pilares__mark--blind .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-blind.svg"); }
.sia-section--pilares .sia-pilares__mark--hearing .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-hearing.svg"); }
.sia-section--pilares .sia-pilares__mark--door-front .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-door-front.svg"); }
.sia-section--pilares .sia-pilares__mark--verified .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-verified.svg"); }
.sia-section--pilares .sia-pilares__mark--keyboard .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-keyboard.svg"); }
.sia-section--pilares .sia-pilares__mark--code .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-code.svg"); }
.sia-section--pilares .sia-pilares__mark--description .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-description.svg"); }
.sia-section--pilares .sia-pilares__mark--account-tree .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-account-tree.svg"); }
.sia-section--pilares .sia-pilares__mark--chat-bubble .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-chat-bubble.svg"); }
.sia-section--pilares .sia-pilares__mark--psychology-alt .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-psychology-alt.svg"); }
.sia-section--pilares .sia-pilares__mark--policy .vulcano-icon-list-item__icon { mask-image: url("../../icons/pilares-policy.svg"); }

/* -------------------------------------------------------------------------
 * Franja de pie (§7.4 N6, §11 M14): pila de DOS líneas en todos los anchos
 * («Ámbito: …» / «Referencia: …»), sobre surface-subtle y con filete superior.
 *
 * La biblioteca no tiene una franja a sangre dentro de una tarjeta (§12): se
 * resuelve con CSS del child dentro del vulcano/container, sacando la franja
 * del relleno con márgenes negativos del MISMO token que ese relleno. Es una
 * etiqueta de ámbito: sin forma de insignia, sin recuadro, sin icono de
 * verificación y sin la marca al lado (N10).
 *
 * En la banda oscura (D-039) la franja es `brand` con filete superior
 * `border-on-dark` (1.55, fila 50): el `bg-black/25` del export sobre
 * `#132238` calcula ≈`#0E1A2A`, es decir el marino de marca, así que el token
 * es `brand` y no un alfa nuevo (§7.4).
 * ---------------------------------------------------------------------- */

.sia-section--pilares .sia-pilares__strip {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--sm) var(--sia-pilares-pad);
	margin-block-start: auto;
	margin-block-end: calc(-1 * var(--sia-pilares-pad));
	margin-inline: calc(-1 * var(--sia-pilares-pad));
	background: var(--wp--preset--color--brand);
	border-block-start: var(--wp--custom--border--hairline-dark);
}

.sia-section--pilares .sia-pilares__strip > * {
	margin: 0;
}

/* Línea 1 de la franja, sobre `brand`: `inverse-soft` 15.15 (fila 17). */
.sia-section--pilares .sia-pilares__scope {
	color: var(--wp--preset--color--inverse-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
}

/*
 * Línea 2, mono, en la tinta de la tarjeta sobre `brand`: `on-brand-muted`
 * 5.98 (fila 18) · `inverse-soft` 15.15 (fila 17) · `accent-on-dark` 10.06
 * (fila 24). Nunca una declaración de conformidad (m8).
 */
.sia-section--pilares .sia-pilares__ref {
	color: var(--sia-pilares-ref-ink);
	font-family: var(--wp--preset--font-family--mono-data);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
}