/**
 * @layer reset — normalización mínima, sin opiniones de diseño.
 * @layer base  — tipografía, color y comportamiento por defecto del documento.
 *
 * View Transitions entre páginas (§ movimiento, fila #10): declarado a nivel
 * de documento, fuera de cualquier @layer (igual que @property/@keyframes en
 * el resto del tema). `navigation: auto` habilita el cross-fade nativo entre
 * navegaciones del mismo origen sin JS, sin nombrar elementos compartidos:
 * el header cambia de fondo entre el home (transparente) y el resto de las
 * páginas (sólido), así que darle su propio view-transition-name generaría
 * un morph inconsistente entre dos estados visuales distintos — se deja el
 * cross-fade de raíz, que cubre toda la página por igual.
 */

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: 1ms !important;
	}
}

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

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
		margin: 0;
	}

	ul[class], ol[class] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	img, picture, svg, video {
		display: block;
		max-width: 100%;
	}

	input, button, textarea, select {
		font: inherit;
		color: inherit;
	}

	button {
		background: none;
		border: 0;
		cursor: pointer;
	}

	a {
		color: inherit;
	}

	table {
		border-collapse: collapse;
	}
}

@layer base {
	html {
		color-scheme: light;
	}

	body {
		font-family: var(--font-body);
		font-size: var(--text-base);
		line-height: var(--leading-body);
		color: var(--c-ink-700);
		background: var(--c-white);
	}

	h1, h2, h3, h4 {
		font-family: var(--font-display);
		line-height: var(--leading-display);
		color: var(--c-ink-900);
		font-weight: 500;
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
		max-width: var(--measure-max);
	}

	blockquote {
		font-family: var(--font-display);
		font-style: italic;
		hanging-punctuation: first;
	}

	a {
		text-decoration-thickness: 1px;
		text-underline-offset: .15em;
	}

	/* Foco visible en todo el sitio: nunca outline: none sin reemplazo. */
	:focus-visible {
		outline: 2px solid var(--c-focus);
		outline-offset: 2px;
	}

	/* Salto de contenido, primer elemento enfocable de cada página. */
	/* color con !important: ver la nota en components/buttons.css. */
	.saltar-al-contenido {
		position: absolute;
		left: var(--space-4);
		top: -100%;
		z-index: 100;
		padding: var(--space-2) var(--space-4);
		background: var(--c-ink-900);
		color: var(--c-white) !important;
		text-decoration: none !important;
		transition: top var(--dur-2) var(--ease-glide);
	}

	.saltar-al-contenido:focus-visible {
		top: var(--space-4);
	}

	.solo-lectores-pantalla {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}