/* =================================================================
   INTERPLAY — BASE
   -----------------------------------------------------------------
   Reset ligero y estilos base del documento. Todo apoyado en los
   tokens de tokens.css. Aquí NO va maquetación de componentes:
   solo los cimientos comunes a todas las páginas.
   ================================================================= */

/* --- Reset moderno y mínimo --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

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

/* --- Documento --- */
body {
	font: var(--font-body);
	font-family: var(--font-sans);
	letter-spacing: var(--ls-default);
	color: var(--text-color);
	background-color: var(--bg-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Multimedia: que nunca desborde su contenedor --- */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --- Enlaces: heredan color por defecto; cada componente decide --- */
a {
	color: inherit;
	text-decoration: none;
}

/* --- Formularios: heredar tipografía --- */
input,
button,
textarea,
select {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* --- Iconos (SVG en línea de Phosphor) --- */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;   /* alinea el icono con la línea base del texto */
	flex: none;
}

/* --- Respeto a quien prefiere menos movimiento (accesibilidad) --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =================================================================
   UTILIDADES tipográficas
   -----------------------------------------------------------------
   Clases auxiliares para aplicar un rol tipográfico completo
   (familia + tamaño + interlineado + peso + tracking) de una vez.
   Las usaremos en las plantillas; el color lo pone cada contexto.
   ================================================================= */
.u-project-title     { font: var(--font-project-title);     letter-spacing: var(--ls-default); }
.u-project-subtitle  { font: var(--font-project-subtitle);  letter-spacing: var(--ls-default); }
.u-section-heading   { font: var(--font-section-heading);   letter-spacing: var(--ls-default); }
.u-highlight         { font: var(--font-highlight); }
.u-body              { font: var(--font-body); }
.u-meta-title        { font: var(--font-meta-title); }
.u-meta-value        { font: var(--font-meta-value); }
.u-pub-text          { font: var(--font-pub-text);          letter-spacing: var(--ls-default); }
.u-pub-link          { font: var(--font-pub-link);          letter-spacing: var(--ls-default); }

/* Contenedor centrado de ancho legible (para los textos de la ficha) */
.container {
	width: 100%;
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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