/*
 * Sección «hero» de la portada — hoja propia (D-024).
 * Propietario: T06. La enlaza functions.php (sia_enqueue_styles) sólo en la portada.
 * Ámbito: .sia-section--hero. 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, chip-*, badge-*, radius--base/lg/xl, shadow--overlay) — el
 * puente transitorio de style.css ya no hace falta para esta sección.
 *
 * Referencias: DESIGN.md v2.2 §4 (escala tipográfica), §5 (espaciado, radios,
 * sombras, filetes), §6 (rejilla 7/5 y colapso bajo 1024, foco), §7.2
 * (botones), §7.3 (paneles), §7.4 (píldora de estado), §7.5 (glifos), §8 fila
 * «Hero», §8.1 ranuras 2-5, §9 (móvil), §10 (sin pulso).
 *
 * Selectores con clase doble (o con la cadena de la sección) donde hay que
 * ganar a los :where() del layout del núcleo o a la especificidad (0,2,0)/
 * (0,3,0) de las hojas de Vulcano; una media query no suma especificidad.
 */

/* -------------------------------------------------------------------------
 * 1. Rejilla 7/5 (DESIGN.md §6, N11)
 * ---------------------------------------------------------------------- */

/*
 * Separación de columnas `lg` (40px). La banda la pinta style.css (canvas):
 * aquí no se repinta para que la alternancia de bandas siga siendo de la
 * carcasa.
 */
.sia-section--hero .sia-hero__grid.sia-hero__grid {
	gap: var(--wp--preset--spacing--lg);
	align-items: start;
}

/*
 * POR DEBAJO de lg (1024px) el 7/5 pasa a una columna, conservando el orden
 * del DOM: texto primero, panel después (§9). 63.9375rem = 1023px: a 1024
 * justos el contrato mantiene las dos columnas. Vulcano sólo apila a 48rem.
 */
@media (max-width: 63.9375rem) {

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

/* Ritmo vertical de cada columna (píldora, h1, entradilla, CTA / panel). */
.sia-section--hero .sia-hero__grid > .wp-block-vulcano-column {
	gap: var(--wp--preset--spacing--md);
}

/* -------------------------------------------------------------------------
 * 2. Columna de texto: píldora de estado, h1, entradilla
 * ---------------------------------------------------------------------- */

/*
 * Píldora de estado (§7.4): tinte de aviso + texto `text` (14.02:1 medido) y
 * filete decorativo, radio `pill`. Es un <p>, nunca un encabezado (§7.0).
 * NO se pone en versales: §4 reserva las mayúsculas para los antetítulos de
 * 12px, la línea de marca y las etiquetas de medios; esta cadena (HE-1) lleva
 * su propia capitalización aprobada y se imprime tal cual.
 */
.sia-section--hero .sia-hero__pill.sia-hero__pill {
	display: inline-flex;
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	align-self: flex-start;
	max-inline-size: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	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--pill);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.5;
}

/* Punto decorativo. Sin animación de pulso (§10). */
.sia-section--hero .sia-hero__pill::before {
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	content: "";
	background: currentcolor;
	border-radius: var(--wp--custom--radius--full);
}

/* ÚNICO h1 de la página (§7.0). Tamaño/peso/interlineado vienen de theme.json. */
.sia-section--hero .sia-hero__title.sia-hero__title {
	margin: 0;
	color: var(--wp--preset--color--text);
}

/*
 * Palabras resaltadas: <mark> sin fondo amarillo del navegador. La señal NO
 * es cromática — es un subrayado grueso (4px) en ámbar, distinto del subrayado
 * fino de los enlaces en prosa (§7.9) y legible en escala de grises. El texto
 * conserva el color `text` (16.32:1 sobre lienzo); el trazo ámbar sobre lienzo
 * supera el 3:1 de elemento gráfico. Nunca dentro de un <a>.
 */
.sia-section--hero .sia-hero__title .sia-hero__highlight {
	color: inherit;
	background: transparent;
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-style: solid;
	text-decoration-thickness: 0.25rem;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.375rem;
}

/* Entradilla 18px, text-soft sobre lienzo (8.86:1). La medida ≤70ch la pone style.css. */
.sia-section--hero .sia-hero__intro.sia-hero__intro {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
}

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

/* -------------------------------------------------------------------------
 * 3. CTA #2 y #3 del inventario (DESIGN.md §7.2)
 * ---------------------------------------------------------------------- */

.sia-section--hero .sia-hero__actions.sia-hero__actions {
	gap: var(--wp--preset--spacing--sm);
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* 48px de alto, radio `xs`, etiqueta de 16px/600 (Inter sólo trae 400 y 600). */
.sia-section--hero .sia-hero__actions .vulcano-button__control {
	gap: var(--wp--preset--spacing--xs);
	min-height: 3rem;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--xs);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	line-height: 1.3;
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* Glifo decorativo del juego de §7.5 (máscara en currentColor): un ::before no se anuncia. */
.sia-section--hero .sia-hero__cta .vulcano-button__control::before {
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	content: "";
	background: currentcolor;
	mask: var(--sia-hero-cta-icon) center / contain no-repeat;
}

.sia-section--hero .sia-hero__cta--primary {
	--sia-hero-cta-icon: url("../../icons/hero-assignment-turned-in.svg");
}

/* «south»: el enlace lleva a una sección más abajo de la misma página. */
.sia-section--hero .sia-hero__cta--secondary {
	--sia-hero-cta-icon: url("../../icons/hero-south.svg");
}

/*
 * Primario: relleno marca + etiqueta inversa (17.13:1). Hover = brand-hover
 * (9.48:1 con blanco) + sombra de nivel 2; pulsado = misma tinta pero la
 * sombra BAJA a nivel 1 (cambio de elevación, sin transform: así sobrevive a
 * prefers-reduced-motion, §7.2 m2). Se anula el filter/translate de Vulcano.
 */
.sia-section--hero .sia-hero__actions .sia-hero__cta--primary .vulcano-button__control {
	color: var(--wp--preset--color--inverse);
	background: var(--wp--preset--color--brand);
	border: 0.0625rem solid var(--wp--preset--color--brand);
}

.sia-section--hero .sia-hero__actions .sia-hero__cta--primary .vulcano-button__control:hover {
	background: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
	box-shadow: var(--wp--preset--shadow--level-2);
	filter: none;
}

.sia-section--hero .sia-hero__actions .sia-hero__cta--primary .vulcano-button__control:active {
	background: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
	box-shadow: var(--wp--preset--shadow--level-1);
	transform: none;
	filter: none;
}

/*
 * Secundario (§7.2): banda suave + filete de control de 1.5px (4.05:1 de
 * contraste no textual) + etiqueta `text` (15.54:1). Hay que ganar al
 * `is-style-outline` de Vulcano, que pinta fondo transparente y toma el color
 * del token de fondo (aquí blanco): sin esta regla la etiqueta sería ilegible.
 */
.sia-section--hero .sia-hero__actions .sia-hero__cta--secondary.is-style-outline .vulcano-button__control {
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface-subtle);
	border: var(--wp--custom--border--control);
}

.sia-section--hero .sia-hero__actions .sia-hero__cta--secondary.is-style-outline .vulcano-button__control:hover {
	background: var(--wp--preset--color--surface-muted);
	border-color: var(--wp--preset--color--brand);
	filter: none;
}

.sia-section--hero .sia-hero__actions .sia-hero__cta--secondary.is-style-outline .vulcano-button__control:active {
	background: var(--wp--preset--color--surface-muted);
	border-width: 0.125rem;
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--level-1);
	transform: none;
	filter: none;
}

/*
 * Foco del CTA primario: sobre relleno marino un contorno marino da 1.00:1,
 * así que va el anillo de DOS bandas de §6 (--sia-focus-ring, definido en
 * style.css). Hay que declararlo aquí porque la regla de Vulcano
 * (.wp-block-vulcano-button .vulcano-button__control:focus-visible, 0,3,0)
 * gana a la global de la carcasa, que usa :where() (0,1,0).
 */
.sia-section--hero .sia-hero__actions .sia-hero__cta--primary .vulcano-button__control:focus-visible {
	outline: 0;
	box-shadow: var(--sia-focus-ring);
}

/* El secundario va sobre banda clara: contorno marino de 3px con 2px de aire. */
.sia-section--hero .sia-hero__actions .sia-hero__cta--secondary .vulcano-button__control:focus-visible {
	outline: var(--wp--custom--focus-width) solid var(--wp--custom--focus-color);
	outline-offset: var(--wp--custom--focus-offset);
}

@media (prefers-reduced-motion: reduce) {

	.sia-section--hero .sia-hero__actions .vulcano-button__control {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 4. Panel «Enfoque Consultor SIA» (DESIGN.md §7.3 + §8 fila Hero)
 * ---------------------------------------------------------------------- */

/*
 * Tarjeta de superficie con radio `md`, sombra de nivel 3 (reservada al panel
 * del hero y al del formulario) y barra superior marina de 4px, decorativa.
 * Relleno `lg` (40px). El fondo lo pinta el propio bloque con su token de
 * superficie; aquí se fija igualmente con el preset para no depender del
 * puente de Vulcano.
 */
.sia-section--hero .sia-hero__panel.sia-hero__panel {
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline);
	border-block-start: 0.25rem solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--level-3);
}

/* Antetítulo de 12px en versales (§4): `secondary` sobre superficie 6.44:1. */
.sia-section--hero .sia-hero__panel-eyebrow.sia-hero__panel-eyebrow {
	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;
}

/*
 * Título del panel: <p> ESTILADO, no encabezado (§7.0 — el hero no tiene h2 y
 * un h2 aquí rompería el esquema). La prominencia la da el cuerpo display a
 * tamaño `m` con peso 600.
 */
.sia-section--hero .sia-hero__panel-title.sia-hero__panel-title {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	line-height: 1.4;
}

/* Cuerpo de tarjeta a 16px (M1): text-soft sobre superficie 9.33:1. */
.sia-section--hero .sia-hero__panel-body.sia-hero__panel-body {
	margin: 0;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * 5. Barra de fases (§8.1 ranura 3; construcción de CSS del child, §12 m10)
 * ---------------------------------------------------------------------- */

/*
 * Las cuatro etiquetas son las de la Metodología (content.md M-2) carácter a
 * carácter y NOMBRAN las fases en orden: son texto real dentro de una lista
 * ORDENADA (<ol>), no adorno. Lo decorativo es el segmento de color sobre cada
 * etiqueta, que se pinta con ::before y por eso no entra en el árbol de
 * accesibilidad (no hace falta aria-hidden en ningún elemento).
 * Se quita la viñeta/numeración visual: el orden ya lo da la lectura de
 * izquierda a derecha y la numeración duplicaría la etiqueta.
 */
.sia-section--hero .sia-hero__phases.sia-hero__phases {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

.sia-section--hero .sia-hero__phases > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xs);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
	hyphens: auto;
}

/* Segmento decorativo de 4px; el dominio también está dicho en palabras. */
.sia-section--hero .sia-hero__phases > li::before {
	block-size: 0.25rem;
	content: "";
	background: var(--sia-hero-phase-color, var(--wp--preset--color--border));
	border-radius: var(--wp--custom--radius--xs);
}

.sia-section--hero .sia-hero__phases > li:nth-child(1) {
	--sia-hero-phase-color: var(--wp--preset--color--brand);
}

.sia-section--hero .sia-hero__phases > li:nth-child(2) {
	--sia-hero-phase-color: var(--wp--preset--color--secondary);
}

.sia-section--hero .sia-hero__phases > li:nth-child(3) {
	--sia-hero-phase-color: var(--wp--preset--color--accent);
}

/*
 * Por debajo de 30rem (480px) las cuatro fases pasan a 2×2: nunca a 3+1.
 * El hueco entre filas sube a `sm` para que el segmento de la segunda fila no
 * se pegue a la etiqueta de la primera.
 */
@media (max-width: 30rem) {

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

/* -------------------------------------------------------------------------
 * 6. Nota de imparcialidad embutida (HE-5 verbatim, §8.1 ranura 4)
 * ---------------------------------------------------------------------- */

/*
 * Se imprime UNA sola vez en toda la página (D-019 X-2). Tinte intenso con
 * texto `text` (13.32:1) y glifo decorativo de verificación. Cuerpo a 16px
 * (M1): es prosa, no una fila de metadatos.
 */
.sia-section--hero .sia-hero__note.sia-hero__note {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--sm);
	padding-inline-start: calc(var(--wp--preset--spacing--sm) + var(--wp--preset--spacing--md));
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface-tinted-strong);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

.sia-section--hero .sia-hero__note::before {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--sm);
	inset-inline-start: var(--wp--preset--spacing--sm);
	inline-size: 1.25rem;
	block-size: 1.25rem;
	content: "";
	color: var(--wp--preset--color--brand);
	background: currentcolor;
	mask: url("../../icons/hero-check-circle.svg") center / contain no-repeat;
}

.sia-section--hero .sia-hero__note strong {
	font-weight: 600;
}

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

@media (max-width: 47.9375rem) {

	/* Relleno de panel 16px en móvil (§7.3). */
	.sia-section--hero .sia-hero__panel.sia-hero__panel {
		padding: var(--wp--preset--spacing--sm);
	}

	/* CTA apilados a ancho completo (§9). */
	.sia-section--hero .sia-hero__actions .wp-block-vulcano-button,
	.sia-section--hero .sia-hero__actions .vulcano-button__control {
		inline-size: 100%;
	}
}

/*
 * Colores forzados: los glifos son fondos enmascarados y el navegador anularía
 * su color; se pintan con el color de sistema. El anillo de dos bandas del CTA
 * primario es un box-shadow, que tampoco se pinta: se restituye un contorno
 * real (M5, A11).
 */
@media (forced-colors: active) {

	.sia-section--hero .sia-hero__pill::before,
	.sia-section--hero .sia-hero__note::before {
		background: CanvasText;
		forced-color-adjust: none;
	}

	.sia-section--hero .sia-hero__cta .vulcano-button__control::before {
		background: LinkText;
		forced-color-adjust: none;
	}

	.sia-section--hero .sia-hero__actions .sia-hero__cta--primary .vulcano-button__control:focus-visible {
		box-shadow: none;
		outline: var(--wp--custom--focus-width) solid CanvasText;
		outline-offset: var(--wp--custom--focus-offset);
	}
}