/*
 * Base del tema.
 *
 * Esto es cimiento, no diseno: tipografia fluida, ritmo vertical y las
 * variables sobre las que se construira el aspecto de Unico y Singular. Los
 * valores estan a proposito en gris neutro para que se note enseguida lo que
 * falta por decidir y no se cuele un color de relleno en produccion.
 *
 * Todo el color va por variable. Cuando llegue el diseno se cambian aqui y el
 * resto de la hoja no se toca.
 */

:root {
	--tinta:        #16161a;
	--tinta-suave:  #5b5b66;
	--fondo:        #ffffff;
	--fondo-suave:  #f4f4f2;
	--acento:       #16161a;
	--linea:        #e2e2de;

	--tipo-texto:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tipo-titulo: var(--tipo-texto);

	/* Escala fluida: el texto crece con la ventana entre 360 y 1400 px, sin
	   saltos por consulta de medios. clamp() ahorra tres @media por tamano. */
	--paso-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
	--paso-1: clamp(1.25rem, 1.14rem + 0.53vw, 1.5rem);
	--paso-2: clamp(1.6rem, 1.35rem + 1.10vw, 2.25rem);
	--paso-3: clamp(2rem, 1.52rem + 2.13vw, 3.25rem);

	--hueco:  clamp(1rem, 0.6rem + 1.8vw, 2rem);
	--ancho:  72rem;
	--medida: 38rem;   /* Ancho maximo de un parrafo: ~70 caracteres. */
}

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

body {
	margin: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-family: var(--tipo-texto);
	font-size: var(--paso-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--tipo-titulo);
	line-height: 1.15;
	text-wrap: balance;   /* Evita el titular con una palabra suelta abajo. */
	margin: 0 0 0.4em;
}

h1 { font-size: var(--paso-3); }
h2 { font-size: var(--paso-2); }
h3 { font-size: var(--paso-1); }

p, li { max-width: var(--medida); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

/* El foco del teclado. No se quita nunca: es la unica pista de donde estas si
   navegas sin raton. Se dibuja fuera del borde para que no lo tape nada. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Salto al contenido: escondido hasta que el teclado llega a el. */
.saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--fondo);
	padding: 0.75rem 1rem;
	z-index: 100;
}
.saltar:focus { left: 0; }

.cabecera,
.contenido,
.pie {
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--hueco);
}

.cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hueco);
	padding-block: var(--hueco);
}

.cabecera__titulo { font-size: var(--paso-1); text-decoration: none; }

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; }

.contenido { padding-block: var(--hueco) calc(var(--hueco) * 2); }

.listado {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--hueco);
}

.tarjeta { display: flex; flex-direction: column; gap: 0.75rem; }
.tarjeta__titulo { font-size: var(--paso-1); margin: 0; }
.tarjeta__fecha,
.entrada__fecha { color: var(--tinta-suave); font-size: 0.875em; margin: 0; }

.pie {
	border-top: 1px solid var(--linea);
	padding-block: var(--hueco);
	color: var(--tinta-suave);
}

/* Respeta a quien ha pedido menos movimiento en el sistema. Va al final para
   que gane sobre cualquier animacion que se anada mas arriba. */
@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;
	}
}