/*
 * main.css — base provisional.
 *
 * OJO: aquí NO hay decisiones de diseño todavía. Tipografías, paleta y
 * personalidad visual dependen del bloque PENDIENTE de CONTEXT.md (marca
 * "Mónica Vázquez" vs "Escuela de Flamenco Online", protagonismo del método
 * "¡Olé tú!"). Esto es solo lo mínimo para que el HTML se lea mientras se
 * construye la estructura: fuentes del sistema y grises neutros.
 */

/* -------------------------------------------------- Reset y base */

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

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #1c1a19;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}

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

a {
	color: #8a1c2b;
}

h1,
h2,
h3 {
	line-height: 1.2;
	text-wrap: balance;
}

/* -------------------------------------------------- Layout */

.contenedor {
	width: min(100% - 2.5rem, 68rem);
	margin-inline: auto;
}

.contenido {
	padding-block: 2.5rem 4rem;
}

/* -------------------------------------------------- Accesibilidad */

.salto-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: 0.75rem 1rem;
	background: #1c1a19;
	color: #fff;
	z-index: 100;
}

.salto-al-contenido:focus {
	left: 0;
}

/* -------------------------------------------------- Aviso de versión de desarrollo */

.aviso-construccion {
	margin: 0;
	padding: 0.5rem 1rem;
	text-align: center;
	font-size: 0.875rem;
	color: #5b4636;
	background: #f4ead9;
	border-bottom: 1px solid #e6d5b8;
}

/* -------------------------------------------------- Cabecera y pie */

.cabecera,
.pie {
	border-color: #e6e1dd;
	border-style: solid;
}

.cabecera {
	border-width: 0 0 1px;
}

.pie {
	border-width: 1px 0 0;
	margin-top: 4rem;
	padding-block: 2rem;
	font-size: 0.9375rem;
	color: #5b5450;
}

.cabecera__interior,
.pie__interior {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
}

.cabecera__interior {
	padding-block: 1.25rem;
}

.cabecera__marca {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.cabecera__marca a,
.pie a {
	color: inherit;
	text-decoration: none;
}

.cabecera__marca a:hover,
.pie a:hover {
	text-decoration: underline;
}

.navegacion__lista,
.pie__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pie__legal,
.pie__credito {
	margin: 0;
}

/* -------------------------------------------------- Entradas */

.entrada + .entrada {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid #e6e1dd;
}

.entrada__titulo {
	margin-block: 0 0.5rem;
}

.entrada__titulo a {
	text-decoration: none;
}

.entrada__titulo a:hover {
	text-decoration: underline;
}