/*
 * Sección «contacto» de la portada — hoja propia (D-024).
 * Propietario: T09 (v2). La enlaza functions.php (sia_enqueue_styles) sólo en
 * la portada. Ámbito: .sia-section--contacto. Sólo tokens de la v2
 * (var(--wp--preset--*), var(--wp--custom--*)): nunca literales de color y
 * nunca los slugs del puente transitorio de style.css (brand-strong, chip-*,
 * badge-*, radius--*, shadow--overlay).
 *
 * DESIGN.md v2.2 §7.0 (encabezados), §7.2 (botón de envío), §7.3 (tarjetas
 * estáticas y paneles), §7.5 (mosaicos de icono), §7.7 (campos, selección y
 * errores), §7.9 (enlace en prosa), §8 fila «Contact», §9 (móvil).
 *
 * La banda de la sección la pone style.css (contacto = surface): aquí no se
 * repinta. Selectores con clase doble donde hay que ganar a los :where() del
 * layout del núcleo o a las hojas de Vulcano (LESSON 2026-08-04).
 */

/* -------------------------------------------------------------------------
 * 1. Cabecera de sección a todo el ancho (antetítulo + h2 + entradilla)
 * ---------------------------------------------------------------------- */

/* Antetítulo 14px = texto normal: marca sobre superficie 17.13:1. */
.sia-section--contacto .sia-contacto__eyebrow.sia-contacto__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sia-section--contacto .sia-contacto__title.sia-contacto__title {
	margin-block: var(--wp--preset--spacing--xs) 0;
	max-width: 24ch;
	color: var(--wp--preset--color--text);
}

/* Entradilla: text-soft sobre superficie 9.33:1; medida corta para la lectura. */
.sia-section--contacto .sia-contacto__intro.sia-contacto__intro {
	margin-block: var(--wp--preset--spacing--sm) 0;
	max-width: 58ch;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
 * 2. Rejilla 5/7 (DESIGN §8 fila «Contact», §9): canales + panel del
 *    formulario. Rejilla propia: vulcano/columns apila a 48rem y el contrato
 *    pide el colapso a 64rem (1024px), con la cabecera siempre arriba.
 * ---------------------------------------------------------------------- */

.sia-section--contacto .sia-contacto__grid.sia-contacto__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--lg);
	margin-block-start: var(--wp--preset--spacing--lg);
}

@media (min-width: 64rem) {

	.sia-section--contacto .sia-contacto__grid.sia-contacto__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

/*
 * El layout «flow» del núcleo separa a los hijos con margen superior; dentro
 * de una rejilla o de una columna flexible ese margen se SUMA al gap. Se
 * neutraliza aquí y cada pieza que necesita aire lo pide con su propia regla
 * (clase doble, que gana a esta).
 */
.sia-section--contacto .sia-contacto__grid > *,
.sia-section--contacto .sia-contacto__channels > *,
.sia-section--contacto .sia-contacto__panel > *,
.sia-section--contacto .sia-contacto__channel-body > * {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * 3. Canales de Atención Accesibles (columna izquierda)
 * ---------------------------------------------------------------------- */

.sia-section--contacto .sia-contacto__channels.sia-contacto__channels {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	min-width: 0;
}

.sia-section--contacto .sia-contacto__channels-title.sia-contacto__channels-title {
	margin: 0;
	color: var(--wp--preset--color--text);
}

/* text-soft sobre superficie 9.33:1. */
.sia-section--contacto .sia-contacto__channels-intro.sia-contacto__channels-intro {
	margin: 0;
	max-width: 46ch;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

.sia-section--contacto .sia-contacto__channel-list.sia-contacto__channel-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Tarjeta de canal: variante ESTÁTICA de §7.3 (b) — filete de 1px, sin hover,
 * sin cursor de puntero y sin enlace, porque todos los valores son datos
 * pendientes (D-015/B2). Texto sobre banda suave 15.54:1.
 */
.sia-section--contacto .sia-contacto__channel.sia-contacto__channel {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--sm);
	align-items: flex-start;
	margin: 0;
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--surface-subtle);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--level-1);
}

/*
 * Mosaico del icono (40px, §7.5): el glifo es decorativo y se pinta como
 * máscara en currentColor desde assets/icons (única fuente del trazado, igual
 * que en T06/T07). El envoltorio es un <span aria-hidden> vacío: nada gráfico
 * llega al árbol de accesibilidad. Glifo marca sobre mosaico blanco 17.13:1.
 */
.sia-section--contacto .sia-contacto__channel-icon.sia-contacto__channel-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	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--contacto .sia-contacto__channel-icon::before,
.sia-section--contacto .sia-contacto__compromiso-icon::before {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	content: "";
	background: currentcolor;
	mask: var(--sia-channel-icon) center / contain no-repeat;
}

.sia-section--contacto .sia-contacto__channel--correo {
	--sia-channel-icon: url("../../icons/contacto-mail.svg");
}

.sia-section--contacto .sia-contacto__channel--telefono {
	--sia-channel-icon: url("../../icons/contacto-phone-in-talk.svg");
}

.sia-section--contacto .sia-contacto__channel--lse {
	--sia-channel-icon: url("../../icons/contacto-sign-language.svg");
}

.sia-section--contacto .sia-contacto__channel-body.sia-contacto__channel-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xs);
	min-width: 0;
}

/*
 * h4 del canal (§7.0: los únicos h4 del sitio, colgando del h3 de canales).
 * El NOMBRE es el encabezado y el valor nunca lo es (B3). Texto sobre banda
 * suave 15.54:1.
 */
.sia-section--contacto .sia-contacto__channel-name.sia-contacto__channel-name {
	margin: 0;
	color: var(--wp--preset--color--text);
}

/* Valor en 16px (§7.3 M1): texto plano, no es un enlace mientras sea pendiente. */
.sia-section--contacto .sia-contacto__channel-value.sia-contacto__channel-value {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* Meta en 14px: text-soft sobre banda suave 8.43:1. */
.sia-section--contacto .sia-contacto__channel-meta.sia-contacto__channel-meta {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * 4. «Compromiso de Respuesta Técnica SIA» (AC-82.3): panel de cierre de la
 *    columna izquierda, sobre surface-tinted (texto 14.02:1). Es obligatorio
 *    y nunca lo sustituye la nota de confidencialidad (§8.1 #11, B1).
 * ---------------------------------------------------------------------- */

.sia-section--contacto .sia-contacto__compromiso.sia-contacto__compromiso {
	--sia-channel-icon: url("../../icons/contacto-check-circle.svg");
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--sm);
	align-items: flex-start;
	margin-block-start: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--surface-tinted);
	border-radius: var(--wp--custom--radius--md);
}

/* Mosaico marino, glifo inverso 17.13:1 (decorativo, ≥3:1 de sobra). */
.sia-section--contacto .sia-contacto__compromiso-icon.sia-contacto__compromiso-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--xs);
}

.sia-section--contacto .sia-contacto__compromiso-text.sia-contacto__compromiso-text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

.sia-section--contacto .sia-contacto__compromiso-text strong {
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * 5. Panel del formulario (columna derecha, §7.7): superficie + radio md +
 *    sombra de nivel 3. El filete lo separa de la banda, que también es
 *    superficie.
 * ---------------------------------------------------------------------- */

.sia-section--contacto .sia-contacto__panel.sia-contacto__panel {
	min-width: 0;
	padding: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--level-3);
}

.sia-section--contacto .sia-contacto__panel-title.sia-contacto__panel-title {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--text);
}

/* -------------------------------------------------------------------------
 * 6. Formulario (vulcano/form + vulcano/form-field, sin tocar el bloque)
 * ---------------------------------------------------------------------- */

/*
 * Las hojas de Vulcano pintan con sus propias variables. Mapearlas a los
 * tokens de la v2 es más fiable que pelear especificidad regla a regla: lo que
 * no se redeclara aquí abajo ya sale con el color correcto.
 */
.sia-section--contacto .sia-contacto__form.sia-contacto__form {
	--vulcano-color-text: var(--wp--preset--color--text);
	--vulcano-color-text-soft: var(--wp--preset--color--text-soft);
	--vulcano-color-surface: var(--wp--preset--color--surface);
	--vulcano-color-border: var(--wp--preset--color--border-strong);
	--vulcano-color-brand: var(--wp--preset--color--brand);
	--vulcano-color-brand-strong: var(--wp--preset--color--brand-hover);
	--vulcano-color-inverse: var(--wp--preset--color--inverse);
	--vulcano-color-accent: var(--wp--preset--color--error);
	--vulcano-radius-md: var(--wp--custom--radius--xs);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--text);
}

/* Toda fila ocupa el ancho completo del panel salvo las dos excepciones de §7.7. */
.sia-section--contacto .sia-contacto__form > * {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
}

/*
 * Rejilla de DOS columnas a partir de 768px (§7.7, CSS del child: el bloque no
 * se modifica). Sólo los dos campos cortos del primer renglón se emparejan;
 * «Teléfono de Contacto», el grupo de casillas, el área de texto, la lista, el
 * consentimiento, el envío y el señuelo ocupan la fila entera. Se seleccionan
 * por el id real del control (:has) y no por posición: así el orden del DOM
 * sigue siendo el orden visual y de lectura, y añadir el resumen de errores
 * delante no descoloca nada.
 */
@media (min-width: 48rem) {

	.sia-section--contacto .sia-contacto__form.sia-contacto__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--sm);
	}

	.sia-section--contacto .sia-contacto__form > .vulcano-form-field:has(#vulcano-field-nombre-y-apellidos) {
		grid-column: 1 / 2;
	}

	.sia-section--contacto .sia-contacto__form > .vulcano-form-field:has(#vulcano-field-correo-electronico) {
		grid-column: 2 / -1;
	}
}

/* «Los campos marcados con * son obligatorios»: text-soft sobre superficie 9.33:1. */
.sia-section--contacto .sia-contacto__form .vulcano-form__required-note {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
}

/* Etiqueta real encima del control, 16px (§7.7 + ticket T09). */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__label,
.sia-section--contacto .sia-contacto__form legend.vulcano-form-field__label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--2-xs);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	line-height: 1.5;
}

.sia-section--contacto .sia-contacto__form .vulcano-form-field__help {
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}

/*
 * Controles (§7.7): 48px de alto, superficie, borde de control de 1,5px
 * (border-strong, 4.48:1), radio xs, valor en `text`. El marcador de posición
 * usa su token (#5C5F66, 6.39:1) y nunca sustituye a la etiqueta.
 */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__input {
	inline-size: 100%;
	min-height: 3rem;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--control);
	border-radius: var(--wp--custom--radius--xs);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

.sia-section--contacto .sia-contacto__form .vulcano-form-field__input::placeholder {
	color: var(--wp--preset--color--placeholder);
	opacity: 1;
}

.sia-section--contacto .sia-contacto__form textarea.vulcano-form-field__input {
	min-height: 9rem;
}

/* Hover: el borde sube a text-soft (9.33:1). */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__input:hover {
	border-color: var(--wp--preset--color--text-soft);
}

/*
 * Foco: borde de marca «de 2px» sin reflujo (el filete interior de 0,5px
 * engorda el borde sin cambiar la caja) más el anillo de §6.
 */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__input:focus-visible {
	border-color: var(--wp--preset--color--brand);
	outline: var(--wp--custom--focus-width) solid var(--wp--custom--focus-color);
	outline-offset: var(--wp--custom--focus-offset);
	box-shadow: inset 0 0 0 0.03125rem var(--wp--preset--color--brand);
}

/*
 * Lista «Canal de respuesta preferente:» (D-023: se conserva tal cual la v1).
 * Sigue siendo el <select> nativo (teclado y selector del sistema intactos)
 * con appearance:none para que la opción elegida pueda partir línea: la flecha
 * nativa obliga a una sola línea y recortaba el texto a 320/375px (D-107/D-109,
 * SC 1.4.10). La flecha se pinta con dos degradados en currentcolor (texto
 * sobre superficie 17.19:1, muy por encima del 3:1 de un gráfico).
 */
.sia-section--contacto .sia-contacto__form select.vulcano-form-field__input {
	appearance: none;
	block-size: auto;
	padding-inline-end: calc(var(--wp--preset--spacing--sm) * 2 + 0.75rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	background-image:
		linear-gradient(45deg, transparent 50%, currentcolor 50%),
		linear-gradient(135deg, currentcolor 50%, transparent 50%);
	background-repeat: no-repeat;
	background-position:
		right calc(var(--wp--preset--spacing--sm) + 0.375rem) center,
		right var(--wp--preset--spacing--sm) center;
	background-size: 0.375rem 0.375rem;
}

/*
 * Casillas: caja nativa de 24×24 (accent-color marca) dentro de un sobre de
 * ≥44px. El mosaico entero es área de activación de la etiqueta.
 */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__check {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	accent-color: var(--wp--preset--color--brand);
}

.sia-section--contacto .sia-contacto__areas .vulcano-form-field__options {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--wp--preset--spacing--xs);
}

.sia-section--contacto .sia-contacto__areas .vulcano-form-field__option {
	align-items: center;
	min-height: 2.75rem;
	padding-inline-start: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--surface-subtle);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--xs);
}

/* Texto sobre banda suave 15.54:1. */
.sia-section--contacto .sia-contacto__areas .vulcano-form-field__option-label {
	flex: 1 1 auto;
	padding-block: var(--wp--preset--spacing--xs);
	padding-inline-end: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: 1.5;
}

.sia-section--contacto .sia-contacto__areas .vulcano-form-field__option:hover {
	border-color: var(--wp--preset--color--text-soft);
}

/* Consentimiento: etiqueta de 16px/1.6, sin negrita (§7.7 fila 6). */
.sia-section--contacto .sia-contacto__form .vulcano-form-field--consent .vulcano-form-field__label {
	margin-block-end: 0;
	font-weight: 400;
	line-height: 1.6;
}

/*
 * Enlace en prosa dentro de la etiqueta (§7.9): marca 17.13:1 con subrayado
 * permanente de ≥1,5px; al pasar el ratón, brand-hover (9.48:1) y subrayado de
 * 3px. Nunca se pinta como botón.
 */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__link {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-decoration-thickness: 0.09375rem;
	text-underline-offset: 0.2em;
}

.sia-section--contacto .sia-contacto__form .vulcano-form-field__link:hover {
	color: var(--wp--preset--color--brand-hover);
	text-decoration-thickness: 0.1875rem;
}

/*
 * Errores (§7.7): el mensaje en línea va en `error` (6.46:1) con el icono y
 * las palabras que emite Vulcano, y el control errado sube a 2px de borde
 * `error`. Nunca sólo color.
 */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__error {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.5;
}

.sia-section--contacto .sia-contacto__form .vulcano-form-field__input[aria-invalid="true"] {
	border: 0.125rem solid var(--wp--preset--color--error);
}

.sia-section--contacto .sia-contacto__form .vulcano-form-field__check[aria-invalid="true"] {
	outline-color: var(--wp--preset--color--error);
}

/* El foco gana al contorno de error (mismo orden que Vulcano). */
.sia-section--contacto .sia-contacto__form .vulcano-form-field__check:focus-visible {
	outline-color: var(--wp--custom--focus-color);
}

/*
 * Resumen de errores en cabecera del formulario (§7.7): fondo error-bg con
 * texto error-strong (7.24:1), enlaces subrayados a cada campo. Lo enfoca
 * view.js tras la redirección PRG.
 */
.sia-section--contacto .sia-contacto__form .vulcano-form__errors {
	background: var(--wp--preset--color--error-bg);
	border: 0.1875rem solid var(--wp--preset--color--error-strong);
	border-radius: var(--wp--custom--radius--md);
}

.sia-section--contacto .sia-contacto__form .vulcano-form__errors-title {
	color: var(--wp--preset--color--error-strong);
	font-size: var(--wp--preset--font-size--s);
}

.sia-section--contacto .sia-contacto__form .vulcano-form__errors-list a {
	color: var(--wp--preset--color--error-strong);
	text-decoration: underline;
	text-decoration-thickness: 0.09375rem;
	text-underline-offset: 0.2em;
}

/* Cajas de estado tras el envío: borde + texto, nunca sólo color. */
.sia-section--contacto .sia-contacto__form .vulcano-form__status {
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.sia-section--contacto .sia-contacto__form .vulcano-form__status--success {
	background: var(--wp--preset--color--surface-subtle);
	border: 0.1875rem solid var(--wp--preset--color--secondary);
}

.sia-section--contacto .sia-contacto__form .vulcano-form__status--error {
	background: var(--wp--preset--color--error-bg);
	border: 0.1875rem solid var(--wp--preset--color--error-strong);
	color: var(--wp--preset--color--error-strong);
}

/*
 * Botón de envío (§7.2 fila 5): primario marino a todo el ancho, 48px, radio
 * xs, etiqueta blanca 17.13:1. Hover brand-hover (9.48:1) + sombra de nivel 2;
 * pulsado = mismo color con la sombra BAJANDO a nivel 1 (cambio de elevación,
 * sin transform: nada que respetar en prefers-reduced-motion).
 */
.sia-section--contacto .sia-contacto__form .vulcano-form__submit {
	inline-size: 100%;
	min-height: 3rem;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--xs);
	box-shadow: var(--wp--preset--shadow--level-1);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	line-height: 1.5;
}

.sia-section--contacto .sia-contacto__form .vulcano-form__submit:hover {
	background: var(--wp--preset--color--brand-hover);
	box-shadow: var(--wp--preset--shadow--level-2);
}

.sia-section--contacto .sia-contacto__form .vulcano-form__submit:active {
	background: var(--wp--preset--color--brand-hover);
	box-shadow: var(--wp--preset--shadow--level-1);
}

/*
 * Foco del envío: sobre relleno marino un contorno marino daría 1.00:1, así
 * que va el anillo de DOS bandas de §6 (--sia-focus-ring, definido en
 * style.css). Se declara aquí, con clase doble, porque la regla propia de
 * Vulcano (.wp-block-vulcano-form .vulcano-form__submit:focus-visible, 0,2,0)
 * gana a la global de la carcasa, que usa :where().
 */
.sia-section--contacto .sia-contacto__form.sia-contacto__form .vulcano-form__submit:focus-visible {
	outline: 0;
	box-shadow: var(--sia-focus-ring);
}

/* -------------------------------------------------------------------------
 * 7. Móvil y anchos intermedios (DESIGN §9)
 * ---------------------------------------------------------------------- */

@media (max-width: 48rem) {

	.sia-section--contacto .sia-contacto__panel.sia-contacto__panel {
		padding: var(--wp--preset--spacing--sm);
	}

	.sia-section--contacto .sia-contacto__channel.sia-contacto__channel,
	.sia-section--contacto .sia-contacto__compromiso.sia-contacto__compromiso {
		padding: var(--wp--preset--spacing--sm);
	}
}

@media (max-width: 22.5rem) {

	.sia-section--contacto .sia-contacto__channel.sia-contacto__channel,
	.sia-section--contacto .sia-contacto__compromiso.sia-contacto__compromiso {
		gap: var(--wp--preset--spacing--xs);
	}

	.sia-section--contacto .sia-contacto__channel-icon.sia-contacto__channel-icon,
	.sia-section--contacto .sia-contacto__compromiso-icon.sia-contacto__compromiso-icon {
		inline-size: 2rem;
		block-size: 2rem;
	}

	.sia-section--contacto .sia-contacto__channel-icon::before,
	.sia-section--contacto .sia-contacto__compromiso-icon::before {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}
}

/* -------------------------------------------------------------------------
 * 8. Colores forzados (alto contraste de Windows)
 * ---------------------------------------------------------------------- */

@media (forced-colors: active) {

	/* Los glifos de máscara toman el color del sistema. */
	.sia-section--contacto .sia-contacto__channel-icon::before,
	.sia-section--contacto .sia-contacto__compromiso-icon::before {
		background: CanvasText;
		forced-color-adjust: none;
	}

	/* Paneles y tarjetas: el fondo desaparece, el filete mantiene la forma. */
	.sia-section--contacto .sia-contacto__channel.sia-contacto__channel,
	.sia-section--contacto .sia-contacto__compromiso.sia-contacto__compromiso,
	.sia-section--contacto .sia-contacto__panel.sia-contacto__panel {
		border: 1px solid CanvasText;
	}

	/* El anillo de dos bandas es box-shadow y no se pinta: contorno real. */
	.sia-section--contacto .sia-contacto__form.sia-contacto__form .vulcano-form__submit:focus-visible {
		outline: var(--wp--custom--focus-width) solid Highlight;
		outline-offset: var(--wp--custom--focus-offset);
	}

	/*
	 * La flecha de la lista son degradados, que el modo forzado elimina: la
	 * lista se queda fuera del ajuste y toma los colores del sistema a mano.
	 */
	.sia-section--contacto .sia-contacto__form select.vulcano-form-field__input,
	.sia-section--contacto .sia-contacto__form select.vulcano-form-field__input:hover,
	.sia-section--contacto .sia-contacto__form select.vulcano-form-field__input[aria-invalid="true"] {
		color: FieldText;
		background-color: Field;
		border-color: FieldText;
		forced-color-adjust: none;
	}

	.sia-section--contacto .sia-contacto__form select.vulcano-form-field__input:focus-visible {
		border-color: Highlight;
		outline-color: Highlight;
	}
}