/* Sin fuentes externas ni CDN a propósito: una política de privacidad que se
   descarga de tres dominios ajenos para pintarse es una broma que no tiene
   gracia. Todo el estilo cabe aquí y la página funciona sin red. */

:root {
	--tinta: #0b1220;
	--papel: #f6f3ee;
	--naranja: #ff8c1a;
	--regolito: #b45c16;
	--apagado: #55606f;
	--linea: #d9d2c7;
}

@media (prefers-color-scheme: dark) {
	:root {
		--tinta: #e9e6e1;
		--papel: #0b1220;
		--apagado: #9aa4b2;
		--linea: #22304a;
	}
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
	background: var(--naranja);
	color: #0b1220;
	padding: 30px 20px 26px;
	/* El mismo horizonte del icono y del banner, en dos franjas. */
	border-bottom: 10px solid var(--regolito);
}

header .caja { max-width: 760px; margin: 0 auto; }

header h1 {
	margin: 0;
	font-size: 34px;
	letter-spacing: 0.02em;
}

header p {
	margin: 6px 0 0;
	color: #5a2f0a;
	font-size: 16px;
}

main {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 20px 60px;
}

h2 {
	margin: 34px 0 10px;
	font-size: 21px;
	line-height: 1.3;
	border-bottom: 1px solid var(--linea);
	padding-bottom: 6px;
}

h2:first-of-type { margin-top: 10px; }

p, li { margin: 10px 0; }

ul { padding-left: 22px; }

a { color: var(--regolito); }

@media (prefers-color-scheme: dark) { a { color: var(--naranja); } }

/* El resumen de arriba: lo que casi todo el mundo va a leer. */
.resumen {
	background: rgba(255, 140, 26, 0.12);
	border-left: 4px solid var(--naranja);
	padding: 14px 18px;
	border-radius: 4px;
}

.resumen ul { margin: 8px 0 0; }

.apagado { color: var(--apagado); font-size: 15px; }

.idiomas {
	margin: 0 0 18px;
	font-size: 15px;
}

footer {
	border-top: 1px solid var(--linea);
	margin-top: 40px;
	padding-top: 16px;
	color: var(--apagado);
	font-size: 14px;
}

/* Tablas: en un móvil una tabla ancha rompe la página, así que la suya es la
   que se desplaza y no el documento entero. */
.tabla { overflow-x: auto; }

table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
}

th, td {
	border: 1px solid var(--linea);
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

th { background: rgba(128, 128, 128, 0.12); }