/*
Theme Name: Andromeda — SIA Consultores
Theme URI: https://siaconsultores.es
Template: andromeda
Author: DeeDevelopment
Author URI: https://deedevelopment.es
Description: Child theme de Andromeda para la web one-page de SIA Consultores (consultoría de accesibilidad integral), segunda dirección visual (DESIGN.md v2.2, petición sia-consulting, portada desde el PRE siaconsulting del NAS el 2026-11-07). Hereda la accesibilidad WCAG 2.2 AA del tema padre y aplica los tokens vía theme.json.
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andromeda-siaconsultoria
Tags: full-site-editing, accessibility-ready, child-theme, one-column
*/

/*
 * Estilos de la CARCASA del sitio (puente de tokens, foco, enlace de salto,
 * cabecera + lock-up de marca, bandas de sección, anclas, enlaces en texto y
 * pie). Cada sección de la portada tiene su propia hoja en
 * assets/css/sections/<seccion>.css (D-024): los tickets de sección no tocan
 * este archivo. El pie vive AQUÍ y no en una hoja de sección porque se pinta
 * en TODAS las páginas (la carcasa), mientras que las hojas de sección sólo se
 * encolan en la portada.
 *
 * Regla: NUNCA un literal de color ni de tamaño de marca aquí. Los valores
 * salen de theme.json: var(--wp--preset--*) y var(--wp--custom--*).
 *
 * Referencias: DESIGN.md v2.2 §5 (espaciado, radios, sombras, filetes),
 * §6 (contenedor, bandas, foco, cabecera sticky), §7.1 (cabecera + lock-up),
 * §7.2 (botones), §7.8 (pie), §7.9 (enlaces en texto), §12 (handoff).
 */

/* -------------------------------------------------------------------------
 * 1. Puente de tokens hacia el tema padre y Vulcano
 * ---------------------------------------------------------------------- */

/*
 * Andromeda fija en base.css --andromeda-wide-width: 93.75rem y lo usa para
 * acotar cabecera y pie; DESIGN.md §6 pide un contenedor de 80rem. Vulcano
 * emite --vulcano-focus-color con el terracota del padre; DESIGN.md §6 / §3-A3
 * lo cambia a la marca. Ambos se reconducen a los tokens del child.
 * `:root:root` (0,2,0) para ganar a los :root del padre y de Vulcano sea cual
 * sea el orden de impresión de sus hojas.
 */
:root:root {
	--andromeda-wide-width: var(--wp--custom--layout--wide);
	--andromeda-content-width: var(--wp--custom--layout--content);
	--vulcano-focus-color: var(--wp--custom--focus-color);
	--vulcano-focus-width: var(--wp--custom--focus-width);

	/*
	 * Anillo de foco de DOS bandas (DESIGN.md §6, A3): 2px inverso dentro +
	 * 3px marca fuera. Obligatorio sobre relleno marino o ámbar, donde un
	 * contorno marino sobre marino da 1.00:1 (tabla §3.2 fila 36).
	 */
	--sia-focus-ring: 0 0 0 var(--wp--custom--focus-inner-band) var(--wp--preset--color--inverse),
		0 0 0 calc(var(--wp--custom--focus-inner-band) + var(--wp--custom--focus-width)) var(--wp--preset--color--brand);

	/*
	 * Alias del padre que apuntan a slugs que la paleta v2 ya NO define
	 * (DESIGN.md §2 retira brand-strong). Sin esto el padre caería a su
	 * propio respaldo terracota en el CTA, el hover del menú y el subrayado
	 * de activo. Estados del menú según §7.1: hover = banda suave + texto;
	 * activo = subrayado de 3px del color del texto (forma + color).
	 */
	--andromeda-color-brand-strong: var(--wp--preset--color--brand-hover);
	--andromeda-header-menu-text: var(--wp--preset--color--text-soft);
	--andromeda-header-menu-hover-text: var(--wp--preset--color--text);
	--andromeda-header-menu-hover-bg: var(--wp--preset--color--surface-subtle);
	--andromeda-header-menu-active-text: var(--wp--preset--color--text);
	--andromeda-header-menu-active-bg: transparent;
	--andromeda-shadow-soft: var(--wp--preset--shadow--level-1);
}

/*
 * Interlineado de encabezados por nivel (DESIGN.md §4). theme.json ya declara
 * h1 1.15 / h2 1.2 / h3 1.3 / h4 1.4 en styles.elements, pero Andromeda
 * imprime DESPUÉS `h1…h6 { line-height: var(--andromeda-line-height-heading) }`
 * (misma especificidad) y todos los niveles salían al valor común. En vez de
 * pelear el orden con otra regla de line-height se le da a esa variable del
 * padre el valor de cada nivel en el propio elemento: la regla del padre la
 * resuelve ahí y gana sin subir especificidad, así que las hojas de sección
 * que fijan su propio interlineado siguen mandando. h2 conserva el token común
 * custom.typography.lineHeightHeading, que ya vale 1.2.
 */
h1 {
	--andromeda-line-height-heading: 1.15;
}

h3 {
	--andromeda-line-height-heading: 1.3;
}

h4 {
	--andromeda-line-height-heading: 1.4;
}

/*
 * SC 2.4.11 (Focus Not Obscured): la cabecera es sticky. header.js de Andromeda
 * mide su altura real en --andromeda-header-height; el padre ya emite esta
 * regla cuando el sticky está activo, aquí se declara también en el child para
 * que no dependa de un ajuste de base de datos (DESIGN.md §6 y §12: hacen falta
 * scroll-padding-top en :root Y scroll-margin-top en los destinos de ancla).
 */
html {
	scroll-padding-top: var(--andromeda-header-height, var(--wp--custom--header--fallback-height));
}

/*
 * Medida de lectura ≤70ch (DESIGN.md §4 M2): contentSize (48rem) es el
 * CONTENEDOR, no la medida. Se aplica a la prosa, no a títulos ni a las
 * cajas de maquetación (que las acotan las hojas de sección).
 */
.sia-main p,
.sia-footer p {
	max-width: var(--wp--custom--layout--measure);
}

/* -------------------------------------------------------------------------
 * 2. Foco visible (DESIGN.md §6; A3, A11, M5)
 * ---------------------------------------------------------------------- */

/*
 * Regla global: contorno de 3px en marca con 2px de separación. 13.32:1 en la
 * banda clara más oscura de la paleta. Nunca `outline: none` sin sustituto,
 * nunca un anillo con alfa.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	border-radius: inherit;
	outline: var(--wp--custom--focus-width) solid var(--wp--custom--focus-color);
	outline-offset: var(--wp--custom--focus-offset);
}

/*
 * Sobre relleno marino o ámbar y sobre cualquier superficie oscura el contorno
 * marino es invisible (1.00:1): anillo de DOS bandas. La banda interior blanca
 * es la que aporta el 3:1 (§3.2 filas 36-37). Se marca con una clase de
 * utilidad en el elemento o en un antecesor, y se aplica de serie a los
 * controles de relleno marino de la carcasa (CTA de cabecera, botones
 * primarios y enlace de salto).
 */
:where(.on-brand-surface, .on-accent-surface, .on-dark-surface):focus-visible,
:where(.on-brand-surface, .on-accent-surface, .on-dark-surface) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.site-header .site-header__action:focus-visible,
.sia-main .wp-element-button:focus-visible,
.sia-main button[type="submit"]:focus-visible {
	outline: 0;
	box-shadow: var(--sia-focus-ring);
}

/*
 * Colores forzados (alto contraste de Windows): los box-shadow no se pintan,
 * así que el anillo de dos bandas desaparecería. Se restituye un contorno
 * real del color del sistema (M5, A11).
 */
@media (forced-colors: active) {

	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
	:where(.on-brand-surface, .on-accent-surface, .on-dark-surface):focus-visible,
	:where(.on-brand-surface, .on-accent-surface, .on-dark-surface) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
	.site-header .site-header__action:focus-visible,
	.sia-main .wp-element-button:focus-visible,
	.sia-main button[type="submit"]:focus-visible,
	.skip-link.screen-reader-text:focus,
	.skip-link.screen-reader-text:focus-visible {
		box-shadow: none;
		outline: var(--wp--custom--focus-width) solid CanvasText;
		outline-offset: var(--wp--custom--focus-offset);
	}
}

/* -------------------------------------------------------------------------
 * 3. Enlace de salto (#wp-skip-link, lo emite el núcleo y apunta a <main>)
 * ---------------------------------------------------------------------- */

/*
 * Fondo de marca + etiqueta inversa (17.13:1) y subrayado inverso. Sobre
 * superficie oscura el anillo es el de DOS bandas (§6).
 */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand);
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	outline: 0;
	box-shadow: var(--sia-focus-ring);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--inverse);
	text-decoration-thickness: 0.125rem;
	text-underline-offset: 0.3em;
}

/*
 * Sólo se muestra con foco «visible» (teclado): tras decidir las cookies con el
 * ratón, el plugin de consentimiento deja el foco en el enlace de salto (AC-14.8)
 * y el núcleo lo desplegaba en pantalla (petición del cliente en PRE, D-155).
 * Con teclado (Tab, Enter sobre el diálogo) sigue apareciendo: SC 2.4.7 / 2.4.1.
 * Specificidad (0,4,0) > la regla inline del núcleo (0,3,0) con !important.
 */
.skip-link.screen-reader-text:focus:not(:focus-visible) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%);
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 4. Cabecera (andromeda/site-header-shell) + lock-up de marca
 *    DESIGN.md §7.1. Sin franja normativa (top_bar_enabled=false, D-155).
 * ---------------------------------------------------------------------- */

/*
 * Barra única de 80px (64px por debajo de lg). `surface` al 95% con desenfoque
 * detrás, filete inferior y sombra de nivel 1. La altura se reserva sola: el
 * padre usa `position: sticky` sobre la template-part (no `fixed`), así que el
 * documento ya guarda el hueco y no hay CLS.
 */
.site-header.site-header {
	background: color-mix(in sRGB, var(--wp--preset--color--surface) 95%, transparent);
	border-block-end: var(--wp--custom--border--hairline);
	box-shadow: var(--wp--preset--shadow--level-1);
	backdrop-filter: blur(0.5rem);
}

.site-header .site-header__inner {
	min-height: var(--wp--custom--header--height);
	gap: var(--wp--preset--spacing--sm);
	padding-block: var(--wp--preset--spacing--2-xs);
}

/* Lock-up: marca + wordmark (dentro del enlace) y bajada (hermana fuera). */
.site-header .sia-lockup {
	display: grid;
	row-gap: var(--wp--preset--spacing--2-xs);
	align-content: center;
}

.site-header .site-header__brand {
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	min-height: 2.75rem;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

/*
 * Marca gráfica: SVG en línea pintado con currentColor (DESIGN.md §7.1, A12),
 * decorativa (aria-hidden en el propio <svg>). 40px en la barra de 80px.
 * `flex: 0 0 auto` para que nunca se comprima ni deforme el lock-up.
 */
.sia-lockup__mark {
	flex: 0 0 auto;
	width: var(--sia-lockup-mark-size, 2.5rem);
	height: var(--sia-lockup-mark-size, 2.5rem);
	color: var(--wp--preset--color--brand);
}

.site-header .site-header__brand-copy {
	gap: 0;
}

/* Wordmark «SIA Consultores»: 18px / PJS 700, texto (17.19:1). Nunca parte. */
.site-header .site-header__brand-name {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--display-sans);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/*
 * Bajada «Servicios Integrados Accesibilidad»: 12px en versalitas, pizarra
 * (6.44:1 sobre superficie). Es texto normal a 12px, así que necesita 4.5:1.
 * OJO: WordPress pasa el slug «2xs» a kebab-case → --wp--preset--font-size--2-xs.
 */
.site-header .sia-lockup__tagline {
	margin: 0;
	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;
}

/* Reflow §7.1 N9: por debajo de 1200px el lock-up es marca + wordmark. */
@media (max-width: 74.9375rem) {

	.site-header .sia-lockup__tagline {
		display: none;
	}
}

/* Menú: 14px / Inter 600, text-soft (9.33:1); objetivo 44px, relleno 10/16. */
.site-header .site-header__menu a,
.site-header .site-header__menu .andromeda-header__submenu-toggle {
	min-height: 2.75rem;
	padding: 0.625rem var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--xs);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

/*
 * Activo/actual: subrayado de 3px (forma + color), no sólo color. El padre lo
 * pinta con box-shadow inset desde --andromeda-header-menu-active-text, que el
 * puente de tokens ya apunta al color del texto. En colores forzados los
 * box-shadow no se pintan: se restituye con un borde inferior real (A11).
 */
@media (forced-colors: active) {

	.site-header--menu-active-underline .site-header__menu > .current-menu-item > a {
		border-block-end: 0.1875rem solid CanvasText;
	}
}

/*
 * CTA «Solicitar Diagnóstico Inicial»: relleno marca + etiqueta inversa
 * (17.13:1), radio 2px, 44px de alto. Hover = brand-hover (9.48:1) + sombra de
 * nivel 2; pulsado = mismo color y la sombra BAJA a nivel 1 (cambio de
 * elevación, sin transform: inmune a prefers-reduced-motion, §7.2 m2).
 */
.site-header .site-header__action {
	min-height: 2.75rem;
	padding: 0.625rem var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand);
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	box-shadow: var(--wp--preset--shadow--level-1);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.site-header .site-header__action:hover {
	background: var(--wp--preset--color--brand-hover);
	box-shadow: var(--wp--preset--shadow--level-2);
}

.site-header .site-header__action:active {
	background: var(--wp--preset--color--brand-hover);
	box-shadow: var(--wp--preset--shadow--level-1);
}

/* Botón de menú (divulgación): 44px, filete de control. */
.site-header .site-header__menu-toggle {
	min-width: 2.75rem;
	min-height: 2.75rem;
	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);
}

/*
 * Por debajo de lg (1024px) la navegación colapsa en el botón de divulgación
 * y el CTA baja al panel (DESIGN.md §7.1). El padre aplica estas reglas a
 * partir de 48rem (768px): aquí se adelantan a 64rem, que es el umbral del
 * contrato (a 1024px el lock-up + 4 enlaces + CTA no caben sin apretar los
 * objetivos a menos de 44px). Son las MISMAS reglas y clases del padre
 * (`.andromeda-js`, `.is-menu-open`): el comportamiento del botón, el Escape y
 * la devolución del foco siguen siendo los suyos, no se duplica JS.
 */
@media (max-width: 63.9375rem) {

	.site-header .site-header__inner {
		min-height: var(--wp--custom--header--height-mobile);
		align-items: center;
	}

	.sia-lockup__mark {
		--sia-lockup-mark-size: 2rem;
	}

	.andromeda-js .site-header__menu-toggle,
	.site-header.is-header-enhanced .site-header__menu-toggle {
		display: inline-flex;
		margin-inline-start: auto;
	}

	.andromeda-js .site-header__nav,
	.site-header.is-header-enhanced .site-header__nav {
		display: none;
		flex-basis: 100%;
		margin-inline-start: 0;
		order: 3;
	}

	.andromeda-js .site-header.is-menu-open .site-header__nav,
	.site-header.is-header-enhanced.is-menu-open .site-header__nav {
		display: block;
	}

	/*
	 * El panel abierto no puede pasar de la ventana (M4): se desplaza por
	 * dentro. El tope se resta SIEMPRE del token de la BARRA
	 * (--wp--custom--header--height-mobile, la misma altura que fija
	 * .site-header__inner unas reglas más arriba), NUNCA de
	 * --andromeda-header-height: esa variable la escribe el header.js del
	 * padre con la altura TOTAL de la cabecera, panel incluido, así que
	 * usarla aquí cerraba un bucle (panel → altura de la cabecera → tope →
	 * panel) que hacía parpadear el panel a ~30Hz y lo dejaba en 0px de alto
	 * en ventanas bajas, recortando el enlace con el foco (B1 iter1,
	 * SC 2.2.2/2.3.1/2.4.7/2.4.11).
	 *
	 * Bloqueo del scroll de la página detrás (§7.1 M4) sin JS: `:has()` en el
	 * <body>. Donde no esté soportado degrada al comportamiento anterior (la
	 * página sigue desplazándose; el panel no atrapa el foco, así que sigue
	 * siendo utilizable).
	 */
	.site-header.is-menu-open .site-header__nav {
		max-height: calc(100dvh - var(--wp--custom--header--height-mobile));
		overflow-y: auto;
	}

	body:has(.site-header.is-menu-open) {
		overflow: hidden;
	}

	.site-header .site-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--2-xs);
		padding-block-start: var(--wp--preset--spacing--xs);
		border-block-start: var(--wp--custom--border--hairline);
	}

	.site-header .site-header__menu a,
	.site-header .site-header__menu .andromeda-header__submenu-toggle,
	.site-header .site-header__action {
		width: 100%;
		justify-content: flex-start;
	}

	.site-header .site-header__action {
		flex-basis: 100%;
		order: 4;
		margin-inline-start: 0;
	}

	/*
	 * Móvil (DESIGN.md §9): marca + botón de menú; el CTA pasa al panel
	 * desplegado. Sólo con JS: sin JS el panel no existe y el CTA sigue
	 * visible. La condición es `html.andromeda-js` (lo pone un <script> en
	 * línea de Andromeda al principio del <head>, ANTES del primer pintado),
	 * la misma que usa el padre para ocultar el <nav>. Con
	 * `.is-header-enhanced` (header.js en DOMContentLoaded) el CTA se pintaba
	 * y luego se ocultaba: la cabecera encogía y la página saltaba (CLS 0.07
	 * medido a 320px en v1).
	 */
	.andromeda-js .site-header:not(.is-menu-open) .site-header__action {
		display: none;
	}
}

/* Por debajo de 400px el lock-up es sólo marca + wordmark (N9). */
@media (max-width: 24.9375rem) {

	.site-header .sia-lockup__tagline {
		display: none;
	}
}

/*
 * Ventanas BAJAS (zoom 400% de 1280 → ~320×225 CSS px, móvil apaisado): una
 * cabecera sticky taparía casi toda la ventana (SC 1.4.10 / 2.4.11). Ahí la
 * cabecera deja de ser sticky y no se reserva scroll-padding.
 * La condición es SÓLO de altura (DESIGN.md §6 N2): nunca unida por coma a una
 * de anchura, porque la coma es un OR y desactivaría el sticky en cualquier
 * móvil en vertical.
 * `html:root` (0,1,1) gana al html{scroll-padding-top} que Andromeda imprime
 * al final del <head>.
 */
@media (max-height: 26rem) {

	.wp-site-blocks > .wp-block-template-part:has(> .site-header--sticky),
	.wp-site-blocks > .wp-block-template-part.andromeda-sticky-part,
	.site-header.site-header--sticky {
		position: static;
	}

	html:root {
		scroll-padding-top: 0;
	}

	.sia-section.sia-section,
	.sia-anchor.sia-anchor {
		scroll-margin-top: 0;
	}

	/*
	 * Aquí la cabecera es estática y el que se desplaza es el DOCUMENTO: el
	 * panel no lleva tope ni scroll propio (con él, a 320x225 su propia caja
	 * recortaba el enlace con el foco, B1) y el scroll de la página no se
	 * bloquea, porque es la única forma de alcanzar el final del panel.
	 */
	.site-header.is-menu-open .site-header__nav {
		max-height: none;
		overflow-y: visible;
	}

	body:has(.site-header.is-menu-open) {
		overflow: visible;
	}
}

/* -------------------------------------------------------------------------
 * 5. Portada: contenedor principal, bandas de sección y anclas
 * ---------------------------------------------------------------------- */

/*
 * Las secciones son bandas a sangre: sin el blockGap del layout «flow» de
 * post-content entre ellas. Selector con clase doble para ganar a los
 * :where() del layout del núcleo (LESSON 2026-08-04).
 */
.sia-main .sia-section.sia-section {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--section);
	padding-inline: var(--wp--custom--layout--margin);
}

/*
 * Alternancia de bandas (DESIGN.md §6 [D-039]): hero canvas · compromisos
 * surface · pilares canvas→`brand` (la banda oscura la pinta pilares.css sobre
 * el mismo <section>, D-039) · metodología surface-subtle · analizador canvas ·
 * escenarios surface-subtle · contacto surface. Es la jerarquía macro y
 * sobrevive en móvil porque las bandas van a sangre. Especificidad baja (0,1,0)
 * a propósito: la hoja de cada sección (T06–T09) manda sobre su propia banda.
 *
 * `escenarios` pasa de `surface` a `surface-subtle` (D-V05 = F-1 del qa-tester):
 * con las dos bandas en blanco #FFFFFF, sin hueco y sin filete, la costura
 * escenarios/contacto daba 192 px de blanco indiferenciado y una tirada blanca
 * de 3 099 px, es decir ninguna de las dos leía como sección propia. Con el
 * tinte, ninguna banda contigua comparte relleno y las tarjetas de escenario
 * siguen siendo `surface` blancas con su filete `hairline` + `radius.md` +
 * `level-1`, así que ganan canto real sobre el tinte en lugar de perderlo.
 */
.sia-section--hero,
.sia-section--pilares,
.sia-section--analizador {
	background: var(--wp--preset--color--canvas);
}

.sia-section--compromisos,
.sia-section--contacto {
	background: var(--wp--preset--color--surface);
}

.sia-section--metodologia,
.sia-section--escenarios {
	background: var(--wp--preset--color--surface-subtle);
}

/*
 * Destino de ancla (REQ-01 AC-01.3, DESIGN.md §6/§12): scroll-margin-top
 * = altura MEDIDA de la cabecera sticky, además del scroll-padding-top de
 * <html>. Sustituye al :target{scroll-margin-top:6rem} fijo del padre.
 * Nota: margin y padding se SUMAN en el salto a ancla (queda un hueco ≈ altura
 * de cabecera sobre la sección); es lo que pide el contrato y nunca oculta el
 * encabezado.
 */
.sia-section,
.sia-anchor {
	scroll-margin-top: var(--andromeda-header-height, var(--wp--custom--header--fallback-height));
}

/*
 * El destino recibe foco programático (anchor-focus.js): es un contenedor no
 * operable. La cabecera recibe el foco tras la decisión de cookies (D-156).
 */
.sia-section[tabindex="-1"]:focus,
.sia-anchor[tabindex="-1"]:focus,
.site-header[tabindex="-1"]:focus {
	outline: 0;
}

/* -------------------------------------------------------------------------
 * 6. Enlaces en texto (DESIGN.md §7.9 M10)
 * ---------------------------------------------------------------------- */

/*
 * Marca (17.13:1 sobre superficie, 15.49 en la banda C) con subrayado
 * permanente de ≥1.5px: con prosa en `text` el color solo no distingue el
 * enlace (SC 1.4.1). Hover = brand-hover (9.48:1) y el subrayado engorda a 3px.
 * Visitado sin cambio. Los botones nunca se pintan como enlace de texto ni al
 * contrario (§7.9).
 */
.sia-main :is(p, li, dd, dt, figcaption) a:not(.wp-element-button),
.sia-footer :is(p, li) a:not(.wp-element-button) {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-decoration-thickness: 0.09375rem;
	text-underline-offset: 0.2em;
}

.sia-main :is(p, li, dd, dt, figcaption) a:not(.wp-element-button):hover,
.sia-footer :is(p, li) a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--brand-hover);
	text-decoration-thickness: 0.1875rem;
}

/* -------------------------------------------------------------------------
 * 7. Pie (patrón sia-footer, composición de andromeda/footer-columnas)
 *    DESIGN.md §7.8 + §7.0 (títulos de columna h2, canales en <p>/<span>).
 * ---------------------------------------------------------------------- */

/*
 * Pie CLARO (superficie + texto) con filete superior. No se usa la clase
 * .dd-footer del patrón del padre, que pinta un pie oscuro. Clase doble para
 * ganar a los :where() del layout del núcleo.
 */
.sia-footer.sia-footer {
	padding-block: var(--wp--preset--spacing--section) var(--wp--preset--spacing--lg);
	padding-inline: var(--wp--custom--layout--margin);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface);
	border-block-start: var(--wp--custom--border--hairline);
}

.sia-footer.sia-footer p,
.sia-footer.sia-footer span,
.sia-footer.sia-footer li {
	color: var(--wp--preset--color--text-soft);
}

.sia-footer .sia-footer__grid {
	gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--gutter);
}

/* Lock-up del pie (NN2, D-022): texto plano, sin enlace; marca de 32px. */
.sia-footer .sia-lockup {
	display: grid;
	row-gap: var(--wp--preset--spacing--2-xs);
}

.sia-footer .sia-lockup__brand {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	margin: 0;
}

.sia-footer .sia-lockup__mark {
	--sia-lockup-mark-size: 2rem;
}

.sia-footer .sia-lockup__wordmark.sia-lockup__wordmark {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--display-sans);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.sia-footer .sia-lockup__tagline.sia-lockup__tagline {
	margin: 0;
	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;
}

/*
 * Columna 4 («Rol de Consultoría») en panel sobre banda suave (§8 B5):
 * texto 15.54:1, filete decorativo + radio de tarjeta pequeña.
 */
.sia-footer .sia-footer__panel {
	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);
}

.sia-footer .sia-footer__panel > :first-child {
	margin-block-start: 0;
}

/* Títulos de columna: son h2 (§7.0) con el tamaño «m» / PJS 600 de §7.8. */
.sia-footer .sia-footer__title.sia-footer__title {
	margin-block: 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

.sia-footer .sia-footer__col > * {
	margin-block-start: 0;
}

.sia-footer .sia-footer__col > * + * {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/*
 * Canales de «Atención Inclusiva»: el nombre es un <p>/<span> en 14px/600 y
 * debajo su valor o [PENDIENTE] (§7.0 N3: NO son encabezados).
 */
.sia-footer .sia-footer__channels {
	display: grid;
	row-gap: var(--wp--preset--spacing--sm);
}

.sia-footer .sia-footer__channel {
	display: grid;
	row-gap: var(--wp--preset--spacing--2-xs);
}

/*
 * Los grupos del lock-up y de los canales se espacian con `row-gap` propio:
 * se anula el margen de flujo que el layout del núcleo inyecta entre hermanos
 * (blockGap), que si no se sumaría al hueco de la rejilla.
 */
.sia-footer .sia-lockup > *,
.sia-footer .sia-footer__channels > *,
.sia-footer .sia-footer__channel > * {
	margin-block: 0;
}

.sia-footer .sia-footer__channel-name.sia-footer__channel-name {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

.sia-footer .sia-footer__channel-value.sia-footer__channel-value {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * Enlaces del pie: text-soft (9.33:1) SUBRAYADOS; hover = texto + subrayado
 * más grueso. El núcleo pone `color: inherit` a los enlaces de core/navigation
 * con (0,3,0), que gana a `.sia-footer a`: de ahí el selector (0,4,0).
 */
.sia-footer .sia-footer__nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
.sia-footer .sia-footer__legal a {
	color: var(--wp--preset--color--text-soft);
	text-decoration-line: underline;
	text-underline-offset: 0.2em;
}

.sia-footer .sia-footer__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.sia-footer .sia-footer__legal a:hover {
	color: var(--wp--preset--color--text);
	text-decoration-thickness: 0.1875rem;
}

/*
 * Filas de enlace: ≥24px de alto y ≥24px entre centros en cualquier anchura;
 * 44px en pantallas táctiles (DESIGN.md §6/§7.8 m3, SC 2.5.8).
 */
.sia-footer .wp-block-navigation-item__content,
.sia-footer .sia-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	padding-block: var(--wp--preset--spacing--2-xs);
}

@media (pointer: coarse) {

	.sia-footer .wp-block-navigation-item__content,
	.sia-footer .sia-footer__legal a {
		min-height: 2.75rem;
	}
}

.sia-footer .sia-footer__nav.sia-footer__nav,
.sia-footer .sia-footer__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--2-xs);
}

/* Barra inferior: filete arriba, copyright a la izquierda, legales a la derecha. */
.sia-footer .sia-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
	align-items: center;
	justify-content: space-between;
	margin-block-start: var(--wp--preset--spacing--lg);
	padding-block-start: var(--wp--preset--spacing--md);
	border-block-start: var(--wp--custom--border--hairline);
	font-size: var(--wp--preset--font-size--xs);
}

.sia-footer .sia-footer__copyright {
	max-width: var(--wp--custom--layout--measure);
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

.sia-footer .sia-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--md);
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * «Preferencias de cookies» es un CONTROL real del plugin de consentimiento
 * ([acc_cookie_settings]), no un enlace: se le da el mismo aspecto que a los
 * enlaces legales de la barra (§7.8 m12) y el anillo de foco de §6 por la
 * regla global.
 */
.sia-footer .sia-footer__legal .acc-settings-button,
.sia-footer .sia-footer__legal button {
	min-height: 1.5rem;
	padding: var(--wp--preset--spacing--2-xs) 0;
	color: var(--wp--preset--color--text-soft);
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.sia-footer .sia-footer__legal .acc-settings-button:hover,
.sia-footer .sia-footer__legal button:hover {
	color: var(--wp--preset--color--text);
	text-decoration-thickness: 0.1875rem;
}

@media (pointer: coarse) {

	.sia-footer .sia-footer__legal .acc-settings-button,
	.sia-footer .sia-footer__legal button {
		min-height: 2.75rem;
	}
}

.sia-footer .sia-footer__list {
	padding: 0;
	margin: 0;
	list-style: none;
}