/*
 apj : añadir estilos para el sidebar
 ---------------------------------------
*/
/* Layout solo para poblacion */
.poblacion-layout {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

/* Contenido */
.poblacion-layout .page-content {
	flex: 1 1 70%;
}

/* Sidebar */
.custom-sidebar {
	flex: 0 0 30%;
	position: sticky;
	top: 2rem;
	height: fit-content;
}

/* Interior del sidebar */
.custom-sidebar .sidebar-inner {
	background: #fafafa;
	padding: 1.5rem;
	border-radius: 6px;
}

/* Responsive */
@media (max-width: 1024px) {
	.poblacion-layout {
		flex-direction: column;
	}

	.custom-sidebar {
		position: relative;
		top: auto;
		width: 100%;
		flex: 0 0 100%;
	}
}

/*
 apj : imagen destacada con efecto parallax
 ------------------------------------------
*/
.hero-imagen-destacada {
	width: 100%;
	height: 460px;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	margin-bottom: 2rem;
	border-radius: 6px;
	overflow: hidden;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.10) 0%,
		rgba(0, 0, 0, 0.38) 100%
	);
}

/* En móvil el parallax fijo no funciona bien — se usa scroll normal */
@media (max-width: 768px) {
	.hero-imagen-destacada {
		height: 260px;
		background-attachment: scroll;
	}
}

/* Pie personalizado global */
.pie-personalizado {
	text-align: center;
	padding: 1.25rem 1rem;
	background: #0c0f12;
	color: #f0f5fb;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	margin-top: 3rem;
}

.pie-personalizado a {
	color: #fdc5c5;
	text-decoration: none;
	border-bottom: 1px solid rgba(253, 197, 197, 0.5);
}

.pie-personalizado a:hover {
	color: #fff;
	border-bottom-color: #fff;
}

.pie-corazon {
	color: #e63946;
	margin: 0 0.25rem;
	font-size: 1.5rem;
}