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

body {
	margin: 0;
	background: #fbf9f6;
	color: #241f1c;
	font: 16px/1.68 Arial, "Helvetica Neue", Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

a { color: #9a3a12; }
a:hover { color: #b04c17; }

.envoltorio { max-width: 1120px; margin: 0 auto; padding: 0 26px; }

/* --- cabecera --- */

.cabecera {
	background: #2a0e10;
	color: #f6efe6;
}
.cabecera .envoltorio { padding-top: 24px; padding-bottom: 20px; }
.cabecera p { margin: 12px 0 0; color: #d8c9b6; font-size: 14px; letter-spacing: .04em; max-width: 46ch; }
.cabecera img { display: block; }

.marca { display: flex; align-items: center; justify-content: space-between; gap: 26px; }

.sol {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: url("img/sol.jpg") no-repeat -33px -10px;
	background-size: 244px 123px;
}

.menu { margin-top: 22px; }
.menu a {
	color: #e8a33d;
	text-decoration: none;
	font-size: 14px;
	margin-right: 26px;
	display: inline-block;
	padding: 3px 0;
}
.menu a:hover { color: #fff; text-decoration: underline; }

/* --- rejilla de dos columnas, igual en todas las secciones --- */

.fila {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 10px 46px;
	padding: 46px 0;
	border-top: 1px solid #d9cec0;
}
.fila:first-of-type { border-top: 0; }
.fila > h2, .fila > h1 { margin: 0; }
.fila > div > :first-child { margin-top: 0; }
.fila > div > :last-child { margin-bottom: 0; }

h1 {
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 18px;
	letter-spacing: -.01em;
}
h2 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: #6d2a12;
}
h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }

p { margin: 0 0 16px; }
.entrada { font-size: 18px; line-height: 1.62; }

figure { margin: 26px 0 0; }
figure img { display: block; max-width: 100%; }
figcaption { font-size: 13px; color: #6f665e; margin-top: 9px; }

ul { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 7px; }

.claro { background: #f4efe7; }
.claro .fila { border-top: 0; }

/* --- indice y destacados (notas) --- */

.indice {
	background: #f4efe7;
	padding: 18px 22px 20px;
	margin: 26px 0 30px;
	font-size: 15px;
}
.indice p { margin: 0 0 10px; font-weight: 700; }
.indice ul { margin: 0; padding-left: 20px; }
.indice li { margin-bottom: 5px; }
.indice a { text-decoration: none; }
.indice a:hover { text-decoration: underline; }

.destacado {
	background: #f4efe7;
	padding: 16px 20px;
	margin: 24px 0;
	font-size: 17px;
	line-height: 1.55;
	max-width: none;
}

/* --- tabla y lista numerada (nota) --- */

.tabla-envuelta { overflow-x: auto; margin: 24px 0 10px; }

table {
	border-collapse: collapse;
	width: 100%;
	min-width: 520px;
	font-size: 15px;
}
caption {
	text-align: left;
	font-size: 13px;
	color: #6f665e;
	padding-bottom: 10px;
}
th, td {
	text-align: left;
	vertical-align: top;
	padding: 9px 14px 9px 0;
	border-bottom: 1px solid #e6ded2;
}
thead th {
	font-weight: 700;
	border-bottom: 1px solid #b9a894;
	white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

ol { margin: 0 0 16px; padding-left: 22px; }
ol li { margin-bottom: 11px; padding-left: 4px; }
ol li::marker { color: #6d2a12; font-weight: 700; }

/* --- preguntas --- */

.pregunta { margin-bottom: 22px; }
.pregunta:last-child { margin-bottom: 0; }
.pregunta h3 { color: #241f1c; }
.pregunta p { margin-bottom: 0; }

.notas { font-size: 15px; }
.notas b { font-weight: 700; }

.fila p, .fila li { max-width: 44em; }

a:focus-visible,
.menu a:focus-visible {
	outline: 2px solid #9a3a12;
	outline-offset: 2px;
}
.menu a:focus-visible { outline-color: #e8a33d; }

/* --- pie --- */

.pie {
	background: #2a0e10;
	color: #cdbba7;
	font-size: 14px;
	margin-top: 8px;
}
.pie .envoltorio { padding-top: 24px; padding-bottom: 26px; }
.pie a { color: #e8a33d; }
.pie p { margin: 0 0 7px; }
.pie p:last-child { margin-bottom: 0; }

/* --- 404 --- */

.aviso { padding: 70px 0 84px; }
.aviso h1 { margin-bottom: 14px; }
.aviso ul { margin-top: 18px; }

@media (max-width: 780px) {
	.sol { display: none; }
	.fila { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 34px 0; }
	.fila p, .fila li { max-width: none; }
	figure.ancha { overflow-x: auto; }
	figure.ancha img { width: 720px; max-width: none; }
	h1 { font-size: 26px; }
	.entrada { font-size: 17px; }
	.menu a { margin-right: 18px; }
}