/**
 * Listagem do blog (/blog e páginas de categoria): etapa 3 do redesign.
 *
 * Tela: design_handoff_morro_guia/telas/Blog Morro Guia.dc.html (desktop) e o bloco BLOG de
 * Mobile Telas Morro Guia.dc.html. Fonte Inter, cores do manual. Classes mg-* porque o Tailwind do
 * site é pré-compilado. Carregado só nessas telas (GCEP_Blog_Listagem::tela_atual()).
 *
 * Contraste: cinza de metadado #52678a; etiqueta azul em fundo claro #0d4fa8 (o #1266d6 fica
 * abaixo de 4,5:1 sobre #eaf2fd); número dos mais lidos a partir do 4º em #52678a (o #8fa1bb do
 * protótipo fica em 2,6:1 com texto branco).
 *
 * @package GuiaWP
 * @since 2.5.450 - Valoar - 2026-09-14
 */

.mg-blog {
	font-family: Inter, system-ui, sans-serif;
	color: #33496b;
	background: #f6f8fb;
	padding-bottom: 40px;
}

/* A migalha acompanha a largura da casca nesta tela (no header ela para em 1280px). */
body.mg-blog-lista .gcep-migalha { max-width: 1440px; padding: 12px 16px; }
@media (min-width: 768px) { body.mg-blog-lista .gcep-migalha { padding-inline: 24px; } }
@media (min-width: 1440px) { body.mg-blog-lista .gcep-migalha { padding-inline: 44px; } }

/* ── Herói ──────────────────────────────────────────────────────────────── */

.mg-bhero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	/* T2 (correção da auditoria, etapa 5): fundo liso, sem degradê decorativo. O véu sobre a foto fica. */
	background: var(--mg-marinho, #0d2b5c);
}
.mg-bhero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mg-bhero--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 20, 36, .7), rgba(8, 20, 36, .86));
}
.mg-bhero__in { padding-block: 24px 22px; }

.mg-bhero__marca {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 13px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}
.mg-bhero__marca svg { width: 14px; height: 14px; flex: none; fill: #fff; }

.mg-bhero__h1 {
	margin: 0 0 12px;
	max-width: 660px;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.025em;
	color: #fff;
	text-wrap: balance;
}
.mg-bhero__lead { margin: 0 0 16px; max-width: 580px; font-size: 14px; font-weight: 500; line-height: 1.6; color: #e4edf6; }
.mg-bhero__lead p { margin: 0; }

@media (min-width: 768px) {
	.mg-bhero--foto::before {
		background: linear-gradient(90deg, rgba(8, 20, 36, .9) 0%, rgba(8, 20, 36, .66) 50%, rgba(8, 20, 36, .2) 100%);
	}
	.mg-bhero__in { padding-block: 36px; }
	.mg-bhero__marca { font-size: 11.5px; letter-spacing: .16em; margin-bottom: 16px; }
	.mg-bhero__h1 { font-size: 34px; line-height: 1.18; margin-bottom: 14px; }
	.mg-bhero__lead { font-size: 15px; margin-bottom: 20px; }
}
@media (min-width: 1024px) {
	.mg-bhero__h1 { font-size: 40px; }
}

/* Busca (herói e lateral). */
.mg-bbusca { display: flex; gap: 8px; max-width: 580px; }
.mg-bbusca__campo-w { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.mg-bbusca__campo-w svg {
	position: absolute;
	left: 14px;
	top: 50%;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	fill: none;
	stroke: #1266d6;
	stroke-width: 2.2;
	pointer-events: none;
}
.mg-bbusca__campo {
	width: 100%;
	min-width: 0;
	height: 48px;
	padding: 0 12px 0 40px;
	border: 1px solid #d6e3f5;
	border-radius: 10px;
	background: #fff;
	font: 500 15px/1 Inter, system-ui, sans-serif;
	color: #0d2b5c;
}
.mg-bbusca__campo::placeholder { color: #52678a; opacity: 1; }
.mg-bbusca__campo:focus { outline: 2px solid #1266d6; outline-offset: 0; border-color: transparent; }
.mg-bbusca__botao {
	flex: none;
	height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: #1266d6;
	color: #fff;
	font: 700 14px/1 Inter, system-ui, sans-serif;
	cursor: pointer;
}
.mg-bbusca__botao:hover { background: #0d47a6; }
.mg-bbusca--hero .mg-bbusca__campo:focus { outline: 3px solid #fff; outline-offset: 1px; }
.mg-bbusca--hero .mg-bbusca__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mg-bbusca--lado { max-width: none; }
.mg-bbusca--lado .mg-bbusca__campo { background: #f6f9fd; border-color: #e1e8f2; font-size: 14px; }
.mg-bbusca--lado .mg-bbusca__botao:focus-visible { outline: 2px solid #0d2b5c; outline-offset: 2px; }

/* ── Chips de categoria ─────────────────────────────────────────────────── */

.mg-bchips { padding-top: 14px; }
.mg-bchips ul {
	display: flex;
	gap: 8px;
	margin: 0 -16px;
	padding: 4px 16px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: 16px;
}
.mg-bchips ul::-webkit-scrollbar { display: none; }
.mg-bchips li { flex: none; }
.mg-bchips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #e1e8f2;
	border-radius: 99px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #33496b;
	white-space: nowrap;
	text-decoration: none;
}
.mg-bchips a:hover { border-color: var(--mg-borda-hover, #b9cfee); color: #0d2b5c; }
.mg-bchips a:active { background: var(--mg-ativo-fundo, #e4eefc); }
.mg-bchips a[aria-current="page"] { background: #1266d6; border-color: #1266d6; color: #fff; font-weight: 700; }
.mg-bchips a:focus-visible { outline: 2px solid #1266d6; outline-offset: 2px; }

/* L2 (correção da auditoria, etapa 5): ícone de traço de 15px nos chips e nas categorias da lateral. */
.mg-bico { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--mg-azul, #1266d6); stroke-width: 1.8; stroke-linejoin: round; }
.mg-bchips a { gap: 8px; }
.mg-bchips a[aria-current="page"] .mg-bico,
.mg-bcats a[aria-current="page"] .mg-bico { stroke: currentColor; }

@media (min-width: 768px) {
	.mg-bchips { padding-top: 22px; }
	.mg-bchips ul { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
	.mg-bchips a { padding: 0 19px; border-radius: 10px; font-size: 13px; }
}

/* ── Grade: conteúdo e lateral ──────────────────────────────────────────── */

.mg-blog__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	padding-top: 20px;
}
.mg-blog__main { min-width: 0; }
/* minmax(0,1fr): sem ele a coluna cresce até a largura do conteúdo mais largo e a página ganha
   rolagem lateral no celular (achado da etapa 2). */
.mg-blog__lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }

@media (min-width: 1024px) {
	.mg-blog__grade { grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; padding-top: 26px; }
	.mg-blog__lado { gap: 18px; }
}
@media (min-width: 1280px) {
	.mg-blog__grade { grid-template-columns: minmax(0, 1fr) 320px; }
}

.mg-bsecao { margin-bottom: 34px; }
.mg-bsecao:last-child { margin-bottom: 0; }
.mg-bsecao__h2 {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: #0d2b5c;
}
@media (min-width: 768px) { .mg-bsecao__h2 { font-size: 23px; margin-bottom: 18px; } }

/* ── Card de post ───────────────────────────────────────────────────────── */

.mg-pcard {
	position: relative;
	background: #fff;
	border: 1px solid #e6ecf4;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(13, 43, 92, .05);
	transition: box-shadow .15s ease;
}
.mg-pcard:hover { box-shadow: 0 6px 20px rgba(13, 43, 92, .12); }
.mg-pcard__link { color: inherit; text-decoration: none; }
/* O título é o link; a área de clique cobre o card inteiro. */
.mg-pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mg-pcard__link:focus-visible { outline: 2px solid #1266d6; outline-offset: 3px; border-radius: 3px; }
.mg-pcard:hover .mg-pcard__link { color: #1266d6; }

.mg-pcard__foto { display: block; background: #eef5fe; overflow: hidden; }
.mg-pcard__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-foto-vazia { display: flex; width: 100%; height: 100%; min-height: inherit; align-items: center; justify-content: center; color: var(--mg-separador, #98a7bc); }
.mg-foto-vazia svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.mg-pchip {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 6px 9px;
	border-radius: 5px;
	background: #eaf2fd;
	color: #0d4fa8;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.mg-pcard__titulo { margin: 0 0 8px; font-size: 15px; font-weight: 800; line-height: 1.35; color: #0d2b5c; }
.mg-pcard__resumo { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #52678a; }

.mg-pmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: #52678a;
}
.mg-pmeta__item { display: inline-flex; align-items: center; gap: 6px; }
.mg-pmeta svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #6f84a3; stroke-width: 1.9; }

/* Grade (Últimas postagens). */
.mg-pcard--grade { display: flex; flex-direction: column; height: 100%; }
/* L5 (correção da auditoria, etapa 5): foto de 150px abaixo de 640px, como no protótipo (era 180). */
.mg-pcard--grade .mg-pcard__foto { height: 150px; }
.mg-pcard--grade .mg-pcard__corpo { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.mg-pcard--grade .mg-pcard__resumo { flex: 1; }
.mg-pcard--grade .mg-pmeta { padding-top: 13px; border-top: 1px solid var(--mg-borda, #e6ecf4); }
.mg-pcard__ler { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #1266d6; }
.mg-pcard__ler svg { width: 12px; height: 12px; stroke: #1266d6; stroke-width: 2.6; }
@media (min-width: 640px) { .mg-pcard--grade .mg-pcard__foto { height: 160px; } }
@media (min-width: 1280px) { .mg-pcard--grade .mg-pcard__foto { height: 150px; } }

/* Destaque em lista (os três menores). */
.mg-pcard--lista { display: flex; gap: 12px; align-items: center; padding: 11px; border-radius: 12px; }
.mg-pcard--lista .mg-pcard__foto { flex: none; width: 84px; height: 70px; border-radius: 10px; }
.mg-pcard--lista .mg-pcard__corpo { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mg-pcard--lista .mg-pchip { margin-bottom: 8px; font-size: 10px; }
.mg-pcard--lista .mg-pcard__titulo { margin-bottom: 7px; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.mg-pcard--lista .mg-pmeta { gap: 4px 12px; font-size: 11.5px; }
@media (min-width: 1280px) {
	.mg-pcard--lista { gap: 14px; padding: 12px; border-radius: 13px; }
	.mg-pcard--lista .mg-pcard__foto { width: 90px; height: 76px; }
}

/* Destaque grande: foto com o texto por cima. Pilha em grid, sem position no corpo, para o
   ::after do link continuar esticado pelo card inteiro. */
.mg-pcard--destaque { display: grid; border: 0; background: #0d2b5c; color: #fff; box-shadow: 0 2px 8px rgba(13, 43, 92, .08); }
.mg-pcard--destaque .mg-pcard__foto,
.mg-pcard--destaque .mg-pcard__veu,
.mg-pcard--destaque .mg-pcard__corpo { grid-area: 1 / 1; }
.mg-pcard--destaque .mg-pcard__foto { min-height: 260px; background: #12447f; }
.mg-pcard--destaque .mg-foto-vazia { color: #5b82b8; }
.mg-pcard__veu { background: linear-gradient(180deg, rgba(8, 20, 36, .05) 15%, rgba(8, 20, 36, .88) 100%); }
.mg-pcard--destaque .mg-pcard__corpo { align-self: end; padding: 16px; }
.mg-pcard--destaque .mg-pchip { background: #1266d6; color: #fff; }
.mg-pcard--destaque .mg-pcard__titulo { margin-bottom: 10px; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.mg-pcard--destaque:hover .mg-pcard__link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mg-pcard--destaque .mg-pcard__link:focus-visible { outline-color: #fff; }
.mg-pcard--destaque .mg-pcard__resumo { display: none; color: #dce7ef; }
.mg-pcard--destaque .mg-pmeta { padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.mg-pcard--destaque .mg-pmeta svg { stroke: #fff; }
.mg-pcard__salvar { position: absolute; top: 12px; right: 12px; z-index: 2; }
.mg-pcard__salvar .mg-salvar--icone:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #1266d6; }

@media (min-width: 768px) {
	.mg-pcard--destaque .mg-pcard__foto { min-height: 328px; }
	.mg-pcard--destaque .mg-pcard__corpo { padding: 20px; }
	.mg-pcard--destaque .mg-pcard__titulo { font-size: 22px; line-height: 1.28; }
	.mg-pcard--destaque .mg-pcard__resumo { display: block; font-size: 13px; line-height: 1.65; margin-bottom: 16px; }
}

.mg-bdest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mg-bdest__lista { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1280px) {
	.mg-bdest { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
	.mg-bdest--um { grid-template-columns: minmax(0, 1fr); }
	.mg-bdest__lista { gap: 14px; }
}

/* Últimas postagens: 1, 2 e 3 colunas.
   L4 (correção da auditoria, etapa 5): 1 coluna até 767px (antes, 2 colunas a partir de 640px).
   L3 fica: 2 colunas de 1024 a 1279px, porque 3 colunas ao lado da lateral dariam ~200px por card. */
.mg-bposts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .mg-bposts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1280px) { .mg-bposts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* Setting "2 posts por linha" no celular (blog_mobile_colunas), que a listagem antiga já respeitava.
   Acompanha o L4: vale até 767px, para a grade não voltar a 1 coluna entre 640 e 767. */
@media (max-width: 767px) {
	.mg-bposts--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mg-bposts--2up .mg-pcard--grade .mg-pcard__foto { height: 110px; }
	.mg-bposts--2up .mg-pcard--grade .mg-pcard__corpo { padding: 11px; }
	.mg-bposts--2up .mg-pcard__titulo { font-size: 13px; }
	.mg-bposts--2up .mg-pcard__resumo,
	.mg-bposts--2up .mg-pcard__ler { display: none; }
	/* T6: nada abaixo de 10px (era 9,5px). */
	.mg-bposts--2up .mg-pchip { font-size: 10.5px; }
}

/* Paginação (?pagina= em /blog, /page/N/ na categoria). */
.mg-pag { margin-top: 26px; }
.mg-pag ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mg-pag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1.5px solid #c9dcf5;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #1266d6;
	text-decoration: none;
}
.mg-pag a.page-numbers:hover { background: #eef5fe; }
.mg-pag a.page-numbers:focus-visible { outline: 2px solid #0d2b5c; outline-offset: 2px; }
.mg-pag .page-numbers.current { background: #1266d6; border-color: #1266d6; color: #fff; }
.mg-pag .page-numbers.dots { min-width: 0; padding: 0 4px; border: 0; background: transparent; color: #52678a; }

/* Estado vazio e busca sem resultado. */
.mg-bvazio {
	padding: 36px 20px;
	text-align: center;
	background: #fff;
	border: 1px solid #e6ecf4;
	border-radius: 14px;
}
.mg-bvazio > svg { width: 40px; height: 40px; margin: 0 auto 12px; display: block; fill: none; stroke: var(--mg-separador, #98a7bc); stroke-width: 1.8; }
.mg-bvazio__h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.3; color: #0d2b5c; overflow-wrap: anywhere; }
.mg-bvazio__texto { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #52678a; }
.mg-bvazio__botao {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 6px;
	padding: 0 20px;
	border-radius: 10px;
	background: #1266d6;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.mg-bvazio__botao:hover { background: #0d47a6; color: #fff; }
.mg-bvazio__botao:focus-visible { outline: 2px solid #0d2b5c; outline-offset: 2px; }

/* ── Lateral ────────────────────────────────────────────────────────────── */

.mg-blado__card { padding: 18px; background: #fff; border: 1px solid #e6ecf4; border-radius: 14px; }
.mg-blado__titulo { margin: 0 0 14px; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #0d2b5c; }

/* No celular o campo do herói está logo acima; a busca da lateral só aparece no desktop. */
.mg-blado__busca { display: none; }
@media (min-width: 1024px) { .mg-blado__busca { display: block; } }

/* Categorias: chips no celular, lista no desktop. */
.mg-bcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mg-bcats a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 99px;
	background: #f1f5fa;
	font-size: 13px;
	font-weight: 600;
	color: #33496b;
	text-decoration: none;
}
.mg-bcats a:hover { background: #e4ebf4; color: #0d2b5c; }
.mg-bcats a:active { background: var(--mg-ativo-fundo, #e4eefc); }
.mg-bcats a[aria-current="page"] { background: #eaf2fd; color: #0d4fa8; font-weight: 700; }
.mg-bcats a:focus-visible { outline: 2px solid #1266d6; outline-offset: 2px; }
.mg-bcats__n { font-size: 12px; font-weight: 500; color: #52678a; }

@media (min-width: 1024px) {
	.mg-blado__card { padding: 20px; }
	.mg-bcats { display: block; }
	.mg-bcats a {
		display: flex;
		gap: 10px;
		padding: 0;
		border-radius: 0;
		background: transparent;
		border-bottom: 1px solid var(--mg-borda, #e6ecf4);
		font-size: 13px;
	}
	.mg-bcats li:last-child a { border-bottom: 0; }
	.mg-bcats a:hover { background: transparent; color: #1266d6; }
	.mg-bcats a[aria-current="page"] { background: transparent; }
	.mg-bcats__nome { flex: 1; }
}

/* Posts mais lidos. */
.mg-blidos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mg-blidos__item { position: relative; display: flex; gap: 11px; align-items: center; }
.mg-blidos__item + .mg-blidos__item { padding-top: 12px; border-top: 1px solid var(--mg-borda, #e6ecf4); }
.mg-blidos__n {
	flex: none;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #1266d6;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}
.mg-blidos__item:nth-child(n+4) .mg-blidos__n { background: #52678a; }
.mg-blidos__foto { flex: none; width: 56px; height: 48px; border-radius: 8px; overflow: hidden; background: #eef5fe; }
.mg-blidos__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-blidos__corpo { display: flex; flex-direction: column; min-width: 0; }
.mg-blidos__titulo { font-size: 13px; font-weight: 700; line-height: 1.4; color: #0d2b5c; text-decoration: none; }
.mg-blidos__titulo::after { content: ""; position: absolute; inset: 0; }
.mg-blidos__item:hover .mg-blidos__titulo { color: #1266d6; }
.mg-blidos__titulo:focus-visible { outline: 2px solid #1266d6; outline-offset: 2px; border-radius: 3px; }
/* L6 (correção da auditoria, etapa 5): data e visualizações com peso 500, como no protótipo. */
.mg-blidos__meta { margin-top: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--mg-texto-2, #52678a); }

/* ── Faixa "Tem uma história pra contar?" ───────────────────────────────── */

.mg-pauta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 36px;
	padding: 22px 20px;
	border-radius: 16px;
	/* T2 (correção da auditoria, etapa 5): fundo liso. */
	background: var(--mg-marinho, #0d2b5c);
	color: #fff;
}
.mg-pauta__h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: #fff; }
.mg-pauta__texto { margin: 0; max-width: 470px; font-size: 14px; line-height: 1.6; color: #d3e2f2; }
.mg-pauta__botao {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 10px;
	background: #fff;
	color: #0d2b5c;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.mg-pauta__botao svg { width: 16px; height: 16px; fill: none; stroke: #0d2b5c; stroke-width: 1.9; }
.mg-pauta__botao:hover { background: var(--mg-fundo-azul, #eef5fe); color: #0d2b5c; }
.mg-pauta__botao:active { transform: scale(var(--mg-ativo-escala, .97)); }
.mg-pauta__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 768px) {
	.mg-pauta { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 34px; }
	.mg-pauta__h2 { font-size: 24px; margin-bottom: 10px; }
	.mg-pauta__texto { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-pcard { transition: none; }
}
@media print {
	.mg-bchips, .mg-blog__lado, .mg-pauta, .mg-pcard__salvar { display: none !important; }
}

/* 16/09/2026 - Valoar: a página encaixotada, igual à home (mg-home.css, fim). Acima de 1440px a
   migalha e o blog moram numa caixa de 1440px com fundo próprio e um fio de 1px dos dois lados;
   fora dela o fundo fica um tom mais escuro. Pedido do dono comparando com a home. */
@media (min-width: 1441px) {
	body.mg-blog-lista.gcep-public-frontend.bg-background-light { background: #e9eef5; }
	body.mg-blog-lista .gcep-migalha,
	body.mg-blog-lista .mg-blog {
		max-width: 1440px;
		margin-inline: auto;
		background: #f5f8fc;
		box-shadow: -1px 0 0 #dbe3ee, 1px 0 0 #dbe3ee;
	}
}

/* ── Herói do blog pelo protótipo (16/09/2026) ──────────────────────────────
   `Blog Morro Guia.dc.html`, linhas 51-80: 250px de altura, foto da cidade com véu escuro da
   esquerda para a direita, frase manuscrita girada à direita com o traço verde e o crédito da foto
   no canto. A busca sai do herói no desktop (fica na lateral); no celular continua nele, como em
   `Mobile Telas Morro Guia.dc.html` (linha 415), porque lá a lateral vai para o fim da página. */
.mg-bhero__frase,
.mg-bhero__credito { display: none; }

@media (min-width: 1024px) {
	.mg-bhero { min-height: 250px; }
	.mg-bhero--foto::before {
		background: linear-gradient(90deg, rgba(8, 20, 36, .9) 0%, rgba(8, 20, 36, .62) 45%, rgba(8, 20, 36, .1) 100%);
	}
	.mg-bhero__in { padding-block: 34px; }
	.mg-bhero .mg-bbusca--hero { display: none; }
	.mg-bhero__lead { max-width: 560px; margin-bottom: 0; font-size: 14.5px; }

	.mg-bhero__frase {
		display: block;
		position: absolute;
		right: 60px;
		top: 60px;
		z-index: 1;
		margin: 0;
		transform: rotate(-6deg);
		font: 700 20px/1.3 Caveat, "Segoe Script", "Bradley Hand", cursive;
		color: #fff;
		text-align: center;
	}
	.mg-bhero__frase svg { display: block; width: 126px; height: 13px; margin: 2px auto 0; fill: none; stroke: #22b573; stroke-width: 3; stroke-linecap: round; }
	.mg-bhero__credito {
		display: block;
		position: absolute;
		right: 16px;
		bottom: 8px;
		z-index: 1;
		margin: 0;
		font-size: 8.5px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .45);
	}
}

/* "Ver todas as postagens" ao lado do título, como no `Blog Morro Guia.dc.html` (linhas 150-153). */
.mg-bsecao__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mg-bsecao__topo .mg-bsecao__h2 { margin-bottom: 0; }
@media (min-width: 768px) { .mg-bsecao__topo { margin-bottom: 18px; } }
.mg-bver { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 44px; font-size: 12.5px; font-weight: 700; line-height: 1; color: #1266d6; text-decoration: none; }
.mg-bver svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mg-bver:hover { text-decoration: underline; text-underline-offset: 3px; }
.mg-bver:focus-visible { outline: 2px solid #1266d6; outline-offset: 2px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   MOCKUP DE 21/09/2026 — `Pagina do blog.jpg`
   ══════════════════════════════════════════════════════════════════════════
   O desenho saiu de "listagem" para PORTAL EDITORIAL: barra de busca sobre o
   herói, cartões de categoria, UM artigo em destaque, grade de três e a faixa
   de fechamento. O que vem acima continua valendo; daqui para baixo é o que o
   mockup novo pede.
   ────────────────────────────────────────────────────────────────────────── */

/* A migalha agora mora DENTRO do herói, como nas outras páginas mãe do guia. */
body:has(.mg-bhero__migalha) .gcep-migalha { display: none; }

.mg-bhero__migalha { margin: 0 0 14px; }
.mg-bhero__migalha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mg-bhero__migalha li { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.mg-bhero__migalha li + li::before { content: ">"; color: rgba(255, 255, 255, .5); }
.mg-bhero__migalha a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.mg-bhero__migalha a:hover { color: #fff; text-decoration: underline; }
.mg-bhero__migalha [aria-current] { color: #fff; font-weight: 700; }

/* O herói ficou mais alto para caber o título em duas linhas e a barra de busca por cima. */
.mg-blog .mg-bhero__in { padding-block: 26px 58px; }
@media (min-width: 900px) { .mg-blog .mg-bhero__in { padding-block: 40px 86px; } }
.mg-blog .mg-bhero__h1 { max-width: 20ch; }
.mg-blog .mg-bhero__lead { max-width: 56ch; }

/* ── Barra de busca, montada em cima do rodapé do herói ─────────────────── */

.mg-bbarra { position: relative; z-index: 2; margin-top: -34px; }
@media (min-width: 900px) { .mg-bbarra { margin-top: -44px; } }

.mg-blog .mg-bbusca--hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 14px;
	border: 1px solid #e3eaf4;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(13, 43, 92, .14);
}
@media (min-width: 900px) {
	.mg-blog .mg-bbusca--hero { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 12px 12px 20px; }
}
.mg-bbusca__rotulo {
	display: flex; align-items: center; gap: 9px; margin: 0;
	font-size: 15px; font-weight: 800; color: #0d2b5c; white-space: nowrap;
}
.mg-bbusca__rotulo svg { width: 19px; height: 19px; fill: none; stroke: #1266d6; stroke-width: 2; }
/* Na lateral o rótulo some: o campo já se explica e a coluna é estreita. */
.mg-blog .mg-bbusca--lado .mg-bbusca__rotulo { display: none; }
@media (max-width: 899px) { .mg-bbusca__rotulo { font-size: 14px; } }

.mg-blog .mg-bbusca--hero .mg-bbusca__campo-w { border-color: #dbe4f1; background: #fff; }
.mg-blog .mg-bbusca--hero .mg-bbusca__campo { height: 48px; font-size: 15px; }
.mg-blog .mg-bbusca--hero .mg-bbusca__botao { height: 48px; padding-inline: 30px; border-radius: 11px; font-size: 15px; }

/* ── Explore por categoria ──────────────────────────────────────────────── */

.mg-bcatnav { margin-top: 30px; }
.mg-bcards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 620px) { .mg-bcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
/* `auto-fill` e não `auto-fit`: com quatro categorias o auto-fit esticaria cada cartão até um
   quarto de tela. Guardando as colunas, quatro ficam do mesmo tamanho de nove. */
@media (min-width: 1100px) { .mg-bcards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } }

.mg-bcard { border-radius: 14px; transition: transform .18s ease, box-shadow .18s ease; }
.mg-bcard:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(13, 43, 92, .1); }
.mg-blog .mg-bcard a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
	height: 100%; padding: 20px 10px; border-radius: 14px; text-align: center; text-decoration: none; color: #0d2b5c;
}
.mg-bcard__ico { display: grid; place-items: center; width: 40px; height: 40px; }
/* Pictograma CHEIO, como no mockup: o traço fino saía apagado ao lado do fundo pastel. */
.mg-bcard__ico svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.mg-bcard__nome { font-size: 14px; font-weight: 800; line-height: 1.25; }
.mg-bcard__n { font-size: 12px; color: #52678a; }
.mg-blog .mg-bcard a[aria-current] { box-shadow: inset 0 0 0 2px #1266d6; }

.mg-bcard--verde { background: #e5f6ee; } .mg-bcard--verde .mg-bcard__ico { color: #158a58; }
.mg-bcard--laranja { background: #fff1e5; } .mg-bcard--laranja .mg-bcard__ico { color: #c95c00; }
.mg-bcard--roxo { background: #efeafd; } .mg-bcard--roxo .mg-bcard__ico { color: #6d4bd8; }
.mg-bcard--amarelo { background: #fff6d9; } .mg-bcard--amarelo .mg-bcard__ico { color: #8a5f00; }
.mg-bcard--vinho { background: #fbeaf1; } .mg-bcard--vinho .mg-bcard__ico { color: #8c2f52; }
.mg-bcard--azul { background: #e8f1fd; } .mg-bcard--azul .mg-bcard__ico { color: #1266d6; }

/* ── Artigo em destaque ─────────────────────────────────────────────────── */

.mg-blog .mg-pcard--destaque { min-height: 300px; border-radius: 16px; }
@media (min-width: 900px) { .mg-blog .mg-pcard--destaque { min-height: 340px; } }
.mg-blog .mg-pcard--destaque .mg-pcard__corpo { position: relative; }
.mg-pcard__cta {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	margin-top: 14px; padding: 10px 18px; border-radius: 10px;
	background: #fff; color: #0d2b5c; font-size: 14px; font-weight: 800;
}
.mg-pcard__cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
	/* No mockup o botão fica no canto, na altura da linha de metadados. */
	.mg-blog .mg-pcard--destaque .mg-pcard__cta { position: absolute; right: 0; bottom: 0; margin: 0; }
	.mg-blog .mg-pcard--destaque .mg-pmeta { padding-right: 168px; }
}

/* ── Cabeçalho de seção com "Ordenar por" ───────────────────────────────── */

.mg-bordem { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #52678a; }
.mg-bordem label { white-space: nowrap; }
.mg-bordem select {
	height: 38px; padding: 0 30px 0 12px; border: 1px solid #dbe4f1; border-radius: 10px;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352678a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	font: inherit; font-size: 13px; font-weight: 700; color: #0d2b5c;
	appearance: none; cursor: pointer;
}
.mg-bordem select:focus-visible { outline: 2px solid #1266d6; outline-offset: 2px; }

/* ── Card da grade (variante editorial: selo na foto, sem "Ler postagem") ── */

.mg-pcard--editorial { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #e6ecf5; border-radius: 14px; background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.mg-pcard--editorial:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13, 43, 92, .12); }
.mg-pcard--editorial .mg-pcard__foto { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef3f9; }
.mg-pcard--editorial .mg-pcard__foto img { width: 100%; height: 100%; object-fit: cover; }
.mg-pcard--editorial .mg-pcard__selo {
	position: absolute; left: 12px; bottom: 12px; z-index: 1;
	padding: 5px 11px; border-radius: 7px;
	background: #1266d6; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.mg-pcard--editorial .mg-pcard__corpo { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.mg-pcard--editorial .mg-pcard__titulo { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; color: #0d2b5c; }
.mg-pcard--editorial .mg-pcard__titulo a { color: inherit; text-decoration: none; }
.mg-pcard--editorial .mg-pcard__titulo a::after { content: ""; position: absolute; inset: 0; }
.mg-pcard--editorial .mg-pcard__resumo { margin: 0; font-size: 13.5px; line-height: 1.55; color: #52678a; }
.mg-pcard--editorial .mg-pmeta { margin-top: auto; padding-top: 10px; border-top: 1px solid #eef2f8; }

/* ── Lateral ────────────────────────────────────────────────────────────── */

.mg-blado__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.mg-blog .mg-blidos__item { display: grid; grid-template-columns: 26px 62px minmax(0, 1fr); align-items: center; gap: 10px; }
.mg-blog .mg-blidos__n {
	display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
	background: #eaf2fd; color: #0d4fa8; font-size: 13px; font-weight: 800;
}
.mg-blog .mg-blidos__foto { width: 62px; height: 48px; overflow: hidden; border-radius: 9px; background: #eef3f9; }
.mg-blog .mg-blidos__foto img { width: 100%; height: 100%; object-fit: cover; }
.mg-blog .mg-blidos__titulo { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #0d2b5c; text-decoration: none; }
.mg-blog .mg-blidos__meta { font-size: 12px; color: #52678a; }

.mg-bcatfoto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mg-bcatfoto li { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; background: #0d2b5c; }
.mg-bcatfoto img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.mg-bcatfoto a { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px; text-decoration: none; }
.mg-bcatfoto a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 36, 0) 40%, rgba(8, 20, 36, .82) 100%); }
.mg-bcatfoto__txt { position: relative; display: grid; gap: 2px; color: #fff; }
.mg-bcatfoto__nome { font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.mg-bcatfoto__n { font-size: 11.5px; color: rgba(255, 255, 255, .85); }

/* ── Faixa de fechamento ────────────────────────────────────────────────── */

.mg-bfim { position: relative; isolation: isolate; overflow: hidden; margin-top: 36px; color: #fff; background: #0d2b5c; }
.mg-bfim__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mg-bfim--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 20, 36, .93) 0%, rgba(8, 20, 36, .82) 55%, rgba(8, 20, 36, .62) 100%); }
.mg-bfim__in { display: grid; gap: 18px; padding-block: 34px; }
@media (min-width: 900px) { .mg-bfim__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding-block: 46px; } }
.mg-bfim__h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1.18; letter-spacing: -.01em; }
.mg-bfim__texto { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.mg-bfim__botao {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px; justify-self: start;
	min-height: 48px; padding: 0 24px; border-radius: 11px;
	background: #ff7a00; color: #fff; font-size: 15px; font-weight: 800; text-decoration: none;
	transition: background .16s ease;
}
.mg-bfim__botao:hover { background: #e56d00; }
.mg-bfim__botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Correções de encaixe com as regras da etapa 3 que ainda valem acima. */
.mg-blog .mg-bbusca--hero { max-width: none; }          /* a base tinha 580px, do herói antigo */
.mg-blog .mg-bbarra .mg-bbusca--hero { display: grid; } /* a etapa 3 escondia a busca do herói no desktop */
.mg-blog .mg-blidos__item:nth-child(n+4) .mg-blidos__n { background: #eaf2fd; color: #0d4fa8; }
/* Post sem foto de capa: o quadro do card fica com o ícone, e não em branco. */
.mg-pcard--editorial .mg-foto-vazia { min-height: 0; height: 100%; background: #eef3f9; color: #93a6c2; }
/* No celular o "Ordenar por" desce: lado a lado ele quebrava "Últimos artigos" em duas linhas. */
@media (max-width: 560px) {
	.mg-blog .mg-bsecao__topo { flex-wrap: wrap; row-gap: 10px; }
	.mg-blog .mg-bsecao__topo .mg-bsecao__h2 { flex: 1 0 100%; }
	.mg-bordem { flex: 1 0 100%; justify-content: space-between; }
	.mg-bordem select { flex: 0 1 190px; }
}