/* Reset breve */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	font-family: system-ui, -apple-system, segoe UI, Roboto, Arial, sans-serif;
	color: #24323f;
	background: #f5f8fa;
	line-height: 1.7;
}

/* Imagen hero */
.hero {
	position: relative;
	min-height: 280px;
	background: url("../img/photo-bg.jpg") center/cover no-repeat;
	display: grid;
	place-items: center;
	text-align: center;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: 
		linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
		radial-gradient(70% 60% at 50% 35%, rgba(0, 0, 0, .35), transparent);

}

.hero__content{
	position: relative;
	z-index: 1;
	padding: 24px;
}

.hero h1 {
	color: #fff;
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 800;
	letter-spacing: .5px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
}

.hero p {
	margin-top: 8px;
	color: #ffeb6e;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	font-style: italic;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

/* Barra de navegación */

.topnav {
	background: #0f4c81;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.topnav ul {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	max-width: 1160px;
	margin: 0 auto;
	padding: 10px 16px;
}

.topnav a {
	color: #e9f2fb;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 8px;
	font-weight: 600;
}

.topnav a:hover, 
.topnav a:focus {
	background: rgba(0, 0, 0, .14);
}

/* Layout de section y aaside */
.layout {
	max-width: 1160px;
	margin: 28px auto 40px;
	padding: 0 16px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;

}

/* Dos columnas en pantallas medianas */

@media (min-width: 900px) {
	.layout {
		grid-template-columns: minmax(0, 2fr) 1fr;
		align-items: start;
	}
}

/* Section y articles */
.content h2 {
	text-align: center;
	color: #0f4c81;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	margin-bottom: 18px;
}

.card {
	background: #FFF;
	border-radius: 14px;
	padding: clamp(18px, 2.5vw, 24px);
	margin-bottom: 18px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
	max-width: 780px;
}

.card h3 {
	color: #0a3a63;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	margin-bottom: 8px;
}

.card p {
	color: #394b59;
	font-size: clamp(1rem, 1.6vw, 1.1rem);
	line-height: 1.85;
}

/* Aside */
.sidebar {
	background: #b8cf6;
	border-radius: 14px;
	padding: clamp(18px, 2.5vw, 24px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.sidebar h2 {
	color: #0a3a63;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	margin-bottom: 12px;
}

.sidebar ul {
	list-style: square inside;
}

.sidebar li {
	margin: 10px 0;
	font-size: clamp(1.5rem, 1.6vw, 1.1rem);
	color: #284657;
}

/* Footer */
.site-footer {
	background: #0f4c81;
	color: #e9f2fb;
	text-align: center;
	padding: 18px 12px;
	font-size: .98rem;
}