/**
 * base.css — el suelo. Tipografía, ritmo y accesibilidad.
 *
 * Se encola DESPUÉS de Woodmart: a igual especificidad gana el último, y así
 * se le gana al tema padre sin un solo `!important`. (El plan original eran
 * capas de cascada; no funcionan aquí — el porqué está explicado en
 * `tokens.css`.)
 */


	*,
	*::before,
	*::after { box-sizing: border-box; }

	body.svh {
		background: var(--svh-fondo);
		color: var(--svh-texto);
		font-family: var(--svh-fuente-cuerpo);
		font-size: var(--svh-txt-cuerpo);
		line-height: var(--svh-alto-linea);
		-webkit-font-smoothing: antialiased;
	}

	/* ── POR QUÉ `:where()` EN TODO ESTE BLOQUE ────────────────────
	   `:where()` tiene especificidad CERO. Sin él, una regla de suelo
	   como `.svh a { color: … }` (0,1,1) le gana a un componente como
	   `.svh-boton--principal` (0,1,0) — y el botón sale morado sobre
	   morado, con el texto invisible. Pasó, se vio en la captura, y por
	   eso está esto aquí: el suelo NUNCA debe ganarle a un componente. */

	.svh :where(h1, h2, h3) {
		line-height: var(--svh-alto-linea-titulo);
		color: var(--svh-texto);
		text-wrap: balance;
	}

	.svh :where(h1) { font-size: var(--svh-txt-h1); font-weight: 700; }
	.svh :where(h2) { font-size: var(--svh-txt-titulo); font-weight: 600; }

	@media (max-width: 600px) {
		.svh :where(h1) { font-size: var(--svh-txt-h1-movil); }
	}

	.svh :where(a) {
		color: var(--svh-marca);
		text-underline-offset: 3px;
	}

	.svh :where(img) { max-width: 100%; height: auto; }

	/* ── ACCESIBILIDAD ─────────────────────────────────────────────
	   Criterio 2.4.11 (WCAG 2.2): el foco NO puede quedar tapado. La
	   cabecera fija de Woodmart lo tapaba, y por eso está el
	   `scroll-margin-top`: al llegar con el tabulador, el elemento se
	   coloca por debajo de la cabecera en vez de detrás. */
	.svh :focus-visible {
		outline: 3px solid var(--svh-foco);
		outline-offset: 2px;
		border-radius: var(--svh-radio-sm);
	}

	.svh [id] { scroll-margin-top: 6rem; }

	/* Nunca `outline: none`. Si hace falta quitarlo, se sustituye. */

	/* Criterio 2.5.8: destino táctil de 24×24 px como mínimo. Aquí caen
	   los 10 iconos de redes, que en la versión vieja eran de 16 px. */
	.svh :where(a, button, [role="button"]) {
		min-block-size: 24px;
		min-inline-size: 24px;
	}

	/* Único `!important` de todo el proyecto, y está justificado: si esto
	   no gana, el texto para lectores de pantalla se ve en pantalla. */
	.svh-solo-lectores {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.svh-solo-lectores:focus {
		position: static !important;
		width: auto; height: auto;
		clip-path: none;
	}

	/* Quien pide menos movimiento, recibe menos movimiento. */
	@media (prefers-reduced-motion: reduce) {
		.svh *,
		.svh *::before,
		.svh *::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}

	/* Saltar al contenido: lo primero que encuentra el tabulador. */
	.svh-saltar {
		position: absolute;
		inset-inline-start: var(--svh-espacio-4);
		inset-block-start: -100px;
		z-index: 999;
		padding: var(--svh-espacio-3) var(--svh-espacio-4);
		background: var(--svh-marca);
		color: var(--svh-marca-texto);
		border-radius: var(--svh-radio-md);
		transition: inset-block-start var(--svh-transicion);
	}

	.svh-saltar:focus { inset-block-start: var(--svh-espacio-4); }