/**
 * Estilos base: reinicio moderado, tipografia y utilidades de composicion.
 *
 * Todo valor viene de tokens.css. Accesibilidad AA no es aspiracion sino
 * requisito: buena parte del publico de Mazaseg es gente mayor.
 */

@layer base {

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

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

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

		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	body {
		margin: 0;
		background: var(--color-white);
		color: var(--color-body);
		font-family: var(--font-body);

		/* Nunca por debajo de 16px. */
		font-size: var(--text-body);
		line-height: var(--leading-body);
		-webkit-font-smoothing: antialiased;
	}

	/* --- Titulares ----------------------------------------------------- */

	h1,
	h2,
	h3,
	h4 {
		margin: 0 0 var(--space-4);
		color: var(--color-ink);
		font-family: var(--font-heading);
		line-height: var(--leading-heading);
		text-wrap: balance;
	}

	h1 {
		font-size: var(--text-h1);
		font-weight: 700;
		line-height: var(--leading-tight);
	}

	h2 {
		font-size: var(--text-h2);
		font-weight: 700;
	}

	h3 {
		font-size: var(--text-h3);
		font-weight: 600;
	}

	h4 {
		font-size: var(--text-h4);
		font-weight: 600;
	}

	p {
		margin: 0 0 var(--space-4);
		text-wrap: pretty;
	}

	/* --- Enlaces ------------------------------------------------------- */

	a {
		color: var(--color-primary-500);
		text-underline-offset: 0.2em;
		transition: color var(--transition);
	}

	a:hover {
		color: var(--color-primary-700);
	}

	/* El foco siempre visible: requisito de accesibilidad, no decoracion. */
	:focus-visible {
		outline: 3px solid var(--color-accent-500);
		outline-offset: 2px;
	}

	/* --- Medios -------------------------------------------------------- */

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

	/* --- Listas de contenido ------------------------------------------- */

	ul,
	ol {
		margin: 0 0 var(--space-4);
		padding-inline-start: var(--space-6);
	}

	li + li {
		margin-block-start: var(--space-2);
	}

	/* --- Formularios --------------------------------------------------- */

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

	label {
		display: block;
		margin-block-end: var(--space-2);
		color: var(--color-ink);
		font-weight: 600;
	}

	/* --- Composicion --------------------------------------------------- */

	.contenedor {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.contenedor--estrecho {
		max-width: var(--content-max);
	}

	.seccion {
		padding-block: var(--section-y);
	}

	/* Superficie suave para alternar secciones.
	   No hay bandas saturadas a pantalla completa: el color estructura con
	   neutros, y el azul intenso se reserva para elementos. */
	.seccion--suave {
		background: var(--color-surface);
	}

	/* Ancho comodo de lectura: 60-75 caracteres. */
	.prosa {
		max-width: var(--content-max);
	}

	.prosa > p {
		font-size: var(--text-body-l);
	}

	.rejilla {
		display: grid;
		gap: var(--space-6);
	}

	@media (width >= 48rem) {

		.rejilla--2 {
			grid-template-columns: repeat(2, 1fr);
		}

		.rejilla--3 {
			grid-template-columns: repeat(3, 1fr);
		}

		.rejilla--4 {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* --- Utilidades tipograficas --------------------------------------- */

	.overline {
		display: block;
		margin-block-end: var(--space-2);
		color: var(--color-accent-700);
		font-size: var(--text-overline);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.entradilla {
		color: var(--color-body);
		font-size: var(--text-body-l);
	}

	.nota {
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	/* Visible solo para lectores de pantalla. */
	.solo-lectores {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}