/*
 * Sección «analizador» de la portada — hoja propia (D-024).
 * Propietario: T08. La enlaza functions.php (sia_enqueue_styles) sólo en la portada.
 * Ámbito: .sia-section--analizador. 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 y medida ≤ 70ch), §5
 * (espaciado, radios, sombras, filetes), §6 (foco), §7.2 (botón primario,
 * CTA n.º 4 del inventario), §7.3 (panel), §8 fila «Analyser entry point»,
 * §9 (móvil: relleno de panel 16px), §10 (movimiento), §11 máscara M1 (la
 * calculadora entera queda fuera: aquí sólo hay la llamada a la acción).
 *
 * 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. Panel centrado (DESIGN.md §7.3 + §8)
 * ---------------------------------------------------------------------- */

/*
 * La banda `canvas` la pinta style.css (alternancia de §6): aquí no se
 * repinta, para que la jerarquía macro siga siendo de la carcasa.
 *
 * Panel: `surface` + `text` (17.19:1, declarados como atributos del bloque
 * porque el guardián de contraste de vulcano/container sólo acepta sus
 * propios slugs) + filete DECORATIVO + radio `md` + sombra de NIVEL 2 (m1:
 * el nivel 3 queda reservado al panel del formulario y al del hero).
 * Relleno `lg` (40px) de panel; centrado en el ancho de contenido.
 */
.sia-section--analizador .sia-analizador__panel.sia-analizador__panel {
	gap: var(--wp--preset--spacing--sm);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--lg);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--level-2);
}

/* -------------------------------------------------------------------------
 * 2. Antetítulo, h2 y párrafo (A-1…A-3 verbatim)
 * ---------------------------------------------------------------------- */

/*
 * Antetítulo de 12px en versales (§4): es texto NORMAL, así que necesita
 * 4.5:1 → `secondary` sobre `surface` da 6.44:1. Es un <p>, nunca un
 * encabezado (§7.0).
 */
.sia-section--analizador .sia-analizador__eyebrow.sia-analizador__eyebrow {
	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;
}

/* h2 de sección (§7.0). Tamaño/peso/interlineado vienen de theme.json. */
.sia-section--analizador .sia-analizador__title.sia-analizador__title {
	color: var(--wp--preset--color--text);
	text-wrap: balance;
}

/*
 * Párrafo A-3: cuerpo `lead` (18px) con `text-soft` sobre `surface` (9.33:1)
 * y medida ≤ 70ch (§4 M2); centrado dentro del panel.
 */
.sia-section--analizador .sia-analizador__intro.sia-analizador__intro {
	max-width: min(70ch, 100%);
	margin-inline: auto;
	color: var(--wp--preset--color--text-soft);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
 * 3. CTA n.º 4 del inventario (DESIGN.md §7.2)
 * ---------------------------------------------------------------------- */

/*
 * 48px de alto, radio `xs`, etiqueta de 16px/600 (Inter sólo trae 400 y 600).
 * Relleno marca + etiqueta inversa = 17.13:1. El área táctil supera de sobra
 * los 24px de destino (SC 2.5.8).
 */
.sia-section--analizador .sia-analizador__cta.sia-analizador__cta {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.sia-section--analizador .sia-analizador__cta.sia-analizador__cta .vulcano-button__control {
	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: 0.0625rem solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--xs);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/*
 * 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--analizador .sia-analizador__cta.sia-analizador__cta .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);
	transform: none;
	filter: none;
}

.sia-section--analizador .sia-analizador__cta.sia-analizador__cta .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;
}

/*
 * Foco: 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--analizador .sia-analizador__cta.sia-analizador__cta .vulcano-button__control:focus-visible {
	outline: 0;
	box-shadow: var(--sia-focus-ring);
}

/* -------------------------------------------------------------------------
 * 4. Móvil (DESIGN.md §9), movimiento reducido y colores forzados
 * ---------------------------------------------------------------------- */

@media (max-width: 47.9375rem) {

	/* Relleno de panel 16px (§9) y botón a todo el ancho. */
	.sia-section--analizador .sia-analizador__panel.sia-analizador__panel {
		padding: var(--wp--preset--spacing--sm);
	}

	.sia-section--analizador .sia-analizador__cta.sia-analizador__cta,
	.sia-section--analizador .sia-analizador__cta.sia-analizador__cta .vulcano-button__control {
		inline-size: 100%;
	}
}

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

	.sia-section--analizador .sia-analizador__cta.sia-analizador__cta .vulcano-button__control {
		transition: none;
	}
}

/*
 * Colores forzados: el anillo de dos bandas es un box-shadow, que el modo no
 * pinta; se restituye un contorno real (A11).
 */
@media (forced-colors: active) {

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