/*
 * Dicas para Mães — design system do child theme.
 * Carregado em todo o site (sitewide pre-visual cleanup, 2026-08-18).
 * Todo seletor de layout/conteúdo é escopado sob .dpm-portal-home,
 * .dpm-article-page ou .dpm-page para não afetar a Home oficial nem
 * páginas fora desse escopo (Astra / Elementor continuam intactos onde
 * nenhuma dessas classes está presente).
 *
 * O bloco "Header herdado do Astra" logo abaixo é a única exceção: ajusta
 * apenas aparência (título duplicado, quebra de menu, tamanho de logo,
 * espaçamento) do header global, e é intencionalmente NÃO escopado — são
 * correções universais, não específicas de uma página (achado do
 * diagnóstico visual: o defeito aparecia em toda página que não fosse o
 * candidato de Home). Não edita header.php.
 *
 * Tipografia: serifada apenas em títulos (h1/h2) e destaques editoriais
 * (.dpm-headline, .dpm-item-title, .dpm-quote). Corpo de texto, navegação,
 * botões, metadados e elementos funcionais permanecem sans-serif.
 */

.dpm-portal-home,
.dpm-article-page,
body.dpm-page {
	/* Paleta aprovada 2026-08-07 (P0-03, docs/master/05-DESIGN-SYSTEM.md) */
	--dpm-color-text: #221F1C;
	--dpm-color-muted: #55493d;
	--dpm-color-bg: #FFFDFB;
	--dpm-color-bg-soft: #F6F1EA;
	--dpm-color-bg-warm: #f4e7dd;
	--dpm-color-bg-deep: #2c261f;
	--dpm-color-text-inverse: #faf6ef;
	--dpm-color-muted-inverse: #d2c6b3;
	--dpm-color-border: #e6dbc8;
	--dpm-color-border-soft: #ece5d8;
	--dpm-color-accent: #9C5B45;
	--dpm-color-accent-dark: #7D4937;
	--dpm-color-secondary: #4F5F47;
	--dpm-color-gold: #B98A3E;

	--dpm-font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
	--dpm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--dpm-space-xs: 0.5rem;
	--dpm-space-sm: 1rem;
	--dpm-space-md: 1.75rem;
	--dpm-space-lg: 2.75rem;
	--dpm-space-xl: 4rem;

	--dpm-max-width: 75rem;
	--dpm-radius: 0.375rem;
	--dpm-shadow: 0 1px 2px rgba(35, 25, 15, 0.05), 0 4px 10px rgba(35, 25, 15, 0.05);

	display: block;
	background: var(--dpm-color-bg);
	color: var(--dpm-color-text);
	font-family: var(--dpm-font-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.dpm-portal-home {
	max-width: var(--dpm-max-width);
	margin: 0 auto;
	padding: var(--dpm-space-md) var(--dpm-space-sm) var(--dpm-space-xl);
}

.dpm-portal-home *,
.dpm-portal-home *::before,
.dpm-portal-home *::after,
.dpm-article-page *,
.dpm-article-page *::before,
.dpm-article-page *::after {
	box-sizing: border-box;
}

/* ================================================================
   Baseline para páginas institucionais/hubs (Sobre, Contato, Fases,
   Situações, Ferramentas, Especialistas...) — sitewide pre-visual
   cleanup (2026-08-18). Não é um redesenho: aplica só paleta,
   tipografia e espaçamento do design system sobre a estrutura padrão
   do Astra (#primary/.entry-content), para essas páginas pararem de
   parecer HTML sem nenhum estilo. Layout específico de cada hub fica
   para uma fase futura planejada.
   ================================================================ */
body.dpm-page #primary {
	max-width: var(--dpm-max-width);
	margin: 0 auto;
	padding: var(--dpm-space-lg) var(--dpm-space-sm) var(--dpm-space-xl);
}

body.dpm-page .entry-content {
	font-family: var(--dpm-font-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--dpm-color-text);
}

body.dpm-page .entry-title {
	font-family: var(--dpm-font-serif);
	color: var(--dpm-color-text);
	line-height: 1.25;
}

body.dpm-page .entry-content h2,
body.dpm-page .entry-content h3 {
	font-family: var(--dpm-font-serif);
	color: var(--dpm-color-text);
	margin-top: var(--dpm-space-lg);
	line-height: 1.3;
}

body.dpm-page .entry-content p {
	margin-bottom: var(--dpm-space-sm);
}

body.dpm-page .entry-content a {
	color: var(--dpm-color-accent-dark);
	text-decoration-color: var(--dpm-color-border);
}

body.dpm-page .entry-content a:hover,
body.dpm-page .entry-content a:focus {
	color: var(--dpm-color-accent);
}

body.dpm-page .entry-content ul,
body.dpm-page .entry-content ol {
	padding-left: 1.25rem;
	margin-bottom: var(--dpm-space-sm);
}

.dpm-portal-home ul,
.dpm-portal-home ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dpm-portal-home p {
	margin: 0;
}

/* Títulos e destaques editoriais: única família serifada da página */
.dpm-portal-home .dpm-hero__title,
.dpm-portal-home .dpm-section-title,
.dpm-portal-home .dpm-headline,
.dpm-portal-home .dpm-item-title,
.dpm-portal-home .dpm-quote,
.dpm-portal-home .dpm-prefooter__title {
	font-family: var(--dpm-font-serif);
	font-weight: 700;
	color: var(--dpm-color-text);
}

/* Faixa de largura total (full-bleed), sem quebrar o layout mesmo com
   barra de rolagem presente. */
.dpm-portal-home .dpm-band {
	background: var(--dpm-color-bg-soft);
	box-shadow: 0 0 0 100vmax var(--dpm-color-bg-soft);
	clip-path: inset(0 -100vmax);
	padding-top: var(--dpm-space-lg);
	padding-bottom: var(--dpm-space-lg);
}

.dpm-portal-home .dpm-band--deep {
	background: var(--dpm-color-bg-deep);
	box-shadow: 0 0 0 100vmax var(--dpm-color-bg-deep);
	color: var(--dpm-color-text-inverse);
}

.dpm-portal-home .dpm-band--deep .dpm-hero__title,
.dpm-portal-home .dpm-band--deep .dpm-section-title,
.dpm-portal-home .dpm-band--deep .dpm-headline,
.dpm-portal-home .dpm-band--deep .dpm-item-title,
.dpm-portal-home .dpm-band--deep .dpm-quote,
.dpm-portal-home .dpm-band--deep .dpm-prefooter__title {
	color: var(--dpm-color-text-inverse);
}

/* Maternidade Real: tom terroso claro, texto normal (não escuro/inverso) */
.dpm-portal-home .dpm-band--warm {
	background: var(--dpm-color-bg-warm);
	box-shadow: 0 0 0 100vmax var(--dpm-color-bg-warm);
	color: var(--dpm-color-text);
}

/* Marcação visual de conteúdo provisório */
.dpm-portal-home .dpm-provisional-tag {
	display: inline-block;
	font-family: var(--dpm-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--dpm-color-accent-dark);
	background: var(--dpm-color-bg-soft);
	border: 1px solid var(--dpm-color-border);
	border-radius: 0.25rem;
	padding: 0.125rem 0.45rem;
	vertical-align: middle;
}

.dpm-portal-home .dpm-provisional-tag--inverse {
	color: var(--dpm-color-text-inverse);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.25);
}

.dpm-portal-home .dpm-placeholder-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--dpm-color-accent-dark);
	margin: 0 0 var(--dpm-space-xs);
}

/* Selo editorial (uso pontual: "Em destaque", "Mais lido", "Guia completo") */
.dpm-portal-home .dpm-badge {
	display: inline-block;
	font-family: var(--dpm-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--dpm-color-gold);
	background: rgba(138, 95, 13, 0.09);
	border: 1px solid rgba(138, 95, 13, 0.22);
	border-radius: 0.25rem;
	padding: 0.2rem 0.6rem;
	margin: 0 0 var(--dpm-space-xs);
}

/* Tag de categoria (código de cor leve para escaneabilidade) */
.dpm-portal-home .dpm-tag {
	display: inline-block;
	font-family: var(--dpm-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	border-radius: 0.25rem;
	padding: 0.15rem 0.55rem;
	margin: 0 0 var(--dpm-space-xs);
}

.dpm-portal-home .dpm-tag--a {
	color: var(--dpm-color-accent-dark);
	background: rgba(149, 83, 60, 0.1);
}

.dpm-portal-home .dpm-tag--b {
	color: var(--dpm-color-secondary);
	background: rgba(76, 90, 63, 0.1);
}

.dpm-portal-home .dpm-tag--c {
	color: var(--dpm-color-gold);
	background: rgba(138, 95, 13, 0.1);
}

/* Tipografia base.
   Home UX/UI V1 (2026-08-18): todo H2 de seção tinha peso/tamanho/cor
   idênticos ao longo da página inteira — contribuía para a sensação de
   "lista de blocos" em vez de composição com ritmo (achado real do
   diagnóstico). Um traço curto de acento acima do título, na cor de
   destaque da própria faixa (herda currentColor em fundos escuros/warm),
   cria uma marca editorial recorrente sem exigir eyebrow textual novo em
   cada seção. */
.dpm-portal-home .dpm-section-title {
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	line-height: 1.25;
	margin: 0 0 var(--dpm-space-md);
	position: relative;
	padding-top: 1rem;
}

.dpm-portal-home .dpm-section-title::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2.75rem;
	height: 3px;
	border-radius: 2px;
	background: var(--dpm-color-accent);
}

.dpm-portal-home .dpm-band--deep .dpm-section-title::before {
	background: var(--dpm-color-gold);
}

.dpm-portal-home .dpm-band--warm .dpm-section-title::before {
	background: var(--dpm-color-secondary);
}

/* No Hero e no pré-footer o H2/H1 já tem um kicker textual próprio
   (.dpm-kicker) cumprindo o mesmo papel — o traço extra seria redundante. */
.dpm-portal-home .dpm-prefooter__title {
	padding-top: 0;
}

.dpm-portal-home .dpm-prefooter__title::before {
	content: none;
}

.dpm-portal-home .dpm-headline {
	font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4375rem);
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.dpm-portal-home .dpm-item-title {
	font-size: 1.0625rem;
	line-height: 1.4;
	margin: 0 0 0.35rem;
}

.dpm-portal-home .dpm-excerpt {
	color: var(--dpm-color-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.dpm-portal-home .dpm-excerpt--small {
	font-size: 0.9375rem;
}

.dpm-portal-home .dpm-excerpt--inverse {
	color: var(--dpm-color-muted-inverse);
}

.dpm-portal-home .dpm-meta {
	display: block;
	font-size: 0.8125rem;
	color: var(--dpm-color-muted);
	margin-bottom: 0.3rem;
}

/* Ritmo entre seções — faixas full-bleed já trazem seu próprio respiro
   interno (padding), então não somam margem externa nas transições
   para dentro/fora delas (evita vão duplo). */
.dpm-portal-home > * + * {
	margin-top: var(--dpm-space-lg);
}

.dpm-portal-home > * + .dpm-band,
.dpm-portal-home > .dpm-band + * {
	margin-top: 0;
}

/* Placeholder de imagem/mídia — aspect-ratio fixo para evitar CLS.
   Home UX/UI V1 (2026-08-18): o degradê bege original (#efe6d8→#e3d5be)
   ficava próximo demais do fundo da própria página (#FFFDFB/#F6F1EA),
   fazendo dezenas de placeholders se fundirem com o layout em vez de
   parecerem espaço reservado com intenção. Tom mais fechado e com leve
   textura via gradiente radial quebra a monotonia sem parecer asset
   final nem exigir imagem real. */
.dpm-portal-home .dpm-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 55%),
		linear-gradient(155deg, #ddccb2, #c7ae87);
	border: 1px solid var(--dpm-color-border);
	border-radius: var(--dpm-radius);
	margin-bottom: var(--dpm-space-sm);
	position: relative;
	object-fit: cover;
	object-position: center;
}

/* Marca discreta de "espaço de imagem reservado" — some assim que uma
   fotografia real substituir o slot (background-image sobrepõe o ::after
   porque o pseudo-elemento fica atrás do conteúdo real via z-index). */
.dpm-portal-home .dpm-img::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image:
		linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.18) 75%, transparent 75%, transparent);
	background-size: 16px 16px;
	opacity: 0.5;
}

.dpm-portal-home .dpm-img--hero {
	aspect-ratio: 4 / 5;
}

.dpm-portal-home .dpm-img--square {
	aspect-ratio: 1 / 1;
	margin-bottom: 0.6rem;
}

.dpm-portal-home .dpm-img--card {
	aspect-ratio: 4 / 3;
}

.dpm-portal-home .dpm-img--portrait {
	aspect-ratio: 3 / 4;
}

.dpm-portal-home .dpm-img--recent {
	aspect-ratio: 16 / 10;
}

/* ---------- Hero editorial ----------
   Home UX/UI V1 (2026-08-18): mesmo com o card de destaque contido
   (max-width 30rem), o header ainda esticava para os 1168px inteiros do
   container, deixando um vazio grande e sem função ao lado do card.
   Conter a coluna inteira do Hero (kicker+H1+subtítulo+card) numa largura
   editorial fixa faz o espaço restante ler como margem deliberada, não
   como grade quebrada — padrão comum em sites editoriais premium. */
.dpm-portal-home .dpm-hero {
	max-width: 34rem;
}

.dpm-portal-home .dpm-kicker {
	font-family: var(--dpm-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dpm-color-accent-dark);
	margin: 0 0 var(--dpm-space-xs);
}

.dpm-portal-home .dpm-kicker--inverse {
	color: var(--dpm-color-text-inverse);
}

.dpm-portal-home .dpm-hero__title {
	font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
	line-height: 1.12;
	margin: 0 0 var(--dpm-space-sm);
	max-width: 19ch;
}

.dpm-portal-home .dpm-hero__subtitle {
	font-size: 1.125rem;
	color: var(--dpm-color-muted);
	margin: 0 0 var(--dpm-space-md);
	max-width: 46ch;
}

/* Home UX/UI V1 (2026-08-18): o layout original reservava uma 2ª coluna
   (1.6fr/1fr) para o Hero mesmo com um único filho real (o card de
   destaque), deixando ~40% da largura em branco morto no desktop —
   achado real do diagnóstico visual. Sem um segundo elemento de conteúdo
   real para preencher essa coluna, o Hero passa a ser de largura única e
   contida (não estica para preencher 1168px), evitando tanto o vão vazio
   quanto a dominância excessiva do card (ver §15 do brief — hero não
   pode dominar a página). */
.dpm-portal-home .dpm-hero__layout {
	display: block;
}

.dpm-portal-home .dpm-hero__feature {
	max-width: 30rem;
}

.dpm-portal-home .dpm-hero__feature .dpm-img {
	margin-bottom: var(--dpm-space-sm);
}

.dpm-portal-home .dpm-hero__feature a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dpm-portal-home .dpm-hero__feature a:hover .dpm-headline,
.dpm-portal-home .dpm-hero__feature a:focus-visible .dpm-headline {
	text-decoration: underline;
}

/* ---------- Hero V3 (2026-08-19) ----------
   Reconstrução sobre a referência visual aprovada: 3 colunas no desktop
   (texto / imagem editorial com card sobreposto / navegação de fase),
   empilhadas em mobile na ordem texto → imagem → fase. Substitui o Hero
   de coluna única da V1/V2 (mantido acima, agora não referenciado pelo
   template — .dpm-hero__layout/.dpm-hero__feature ficaram sem uso). */
.dpm-portal-home .dpm-hero--v3 {
	max-width: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dpm-space-lg);
}

.dpm-portal-home .dpm-hero__text {
	max-width: 34rem;
}

/* Home V3.1: badge "Conteúdo baseado em evidências" — reaproveita o
   componente .dpm-badge (chip já existente), só adiciona o tratamento
   tipográfico de kicker (versalete, letter-spacing) neste contexto. */
.dpm-portal-home .dpm-hero__text .dpm-badge {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	margin-bottom: var(--dpm-space-sm);
}

/* Home V3.2 (2026-08-19): CTAs re-adicionados ao Hero — links compactos
   (não botões grandes) para não pesar a 1ª dobra em nenhum breakpoint. */
.dpm-portal-home .dpm-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: var(--dpm-space-xs);
}

.dpm-portal-home .dpm-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--dpm-color-accent-dark);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.dpm-portal-home .dpm-hero__cta:hover,
.dpm-portal-home .dpm-hero__cta:focus-visible {
	border-bottom-color: var(--dpm-color-accent-dark);
}

.dpm-portal-home .dpm-hero__media {
	position: relative;
}

.dpm-portal-home .dpm-hero__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: var(--dpm-radius);
	border: 1px solid var(--dpm-color-border);
	background: var(--dpm-color-bg-soft);
}

.dpm-portal-home .dpm-hero__overlay-card {
	display: block;
	position: absolute;
	left: var(--dpm-space-sm);
	right: var(--dpm-space-sm);
	bottom: var(--dpm-space-sm);
	background: rgba(255, 253, 251, 0.94);
	border: 1px solid var(--dpm-color-border);
	border-radius: var(--dpm-radius);
	padding: var(--dpm-space-sm);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--dpm-shadow);
}

.dpm-portal-home .dpm-hero__overlay-card .dpm-headline {
	margin: 0;
	font-size: 1.0625rem;
}

.dpm-portal-home .dpm-hero__overlay-card:hover .dpm-headline,
.dpm-portal-home .dpm-hero__overlay-card:focus-visible .dpm-headline {
	text-decoration: underline;
}

.dpm-portal-home .dpm-hero__phasenav .dpm-section-title {
	font-size: 1.0625rem;
}

/* Navegação de fase vertical (coluna direita do Hero) — mesma chip do
   componente de fase original, empilhada em vez de rolagem horizontal:
   dentro de uma coluna estreita, lista vertical lê melhor que carrossel. */
.dpm-portal-home .dpm-phase__list--vertical {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	overflow-x: visible;
	gap: 0.5rem;
}

.dpm-portal-home .dpm-phase__list--vertical li {
	flex: none;
}

.dpm-portal-home .dpm-phase__list--vertical .dpm-phase__item {
	width: 100%;
	justify-content: flex-start;
}

@media (min-width: 64rem) {
	.dpm-portal-home .dpm-hero--v3 {
		/* Home V3.2 (2026-08-19): coluna de texto alargada (1.05fr→1.3fr,
		   mídia 1.3fr→1.15fr) para o H1 quebrar em ~3 linhas em vez de 4
		   sem precisar reduzir a tipografia agressivamente (achado real
		   do proprietário — medido via DOM: 3 linhas confirmadas). */
		grid-template-columns: 1.3fr 1.15fr 0.85fr;
		align-items: start;
		gap: var(--dpm-space-md);
	}

	.dpm-portal-home .dpm-hero__text {
		max-width: none;
		padding-top: var(--dpm-space-sm);
	}

	.dpm-portal-home .dpm-hero__title {
		font-size: clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem);
		max-width: 24ch;
	}

	.dpm-portal-home .dpm-hero__photo {
		aspect-ratio: 16 / 10;
	}

	/* Home V3.2 (2026-08-19): painel de fases ganha fundo sálvia muito
	   claro + borda arredondada, para ler como "painel de navegação"
	   (referência aprovada) em vez de pills soltas na página. Só
	   desktop — mobile preserva o grid 2 colunas aprovado sem nenhuma
	   mudança de fundo/espaçamento. Pills usam fundo mais claro que o
	   painel para ficarem "bem separadas" visualmente. */
	.dpm-portal-home .dpm-hero__phasenav {
		background: rgba(79, 95, 71, 0.07);
		border: 1px solid rgba(79, 95, 71, 0.16);
		border-radius: var(--dpm-radius);
		padding: var(--dpm-space-md);
	}

	.dpm-portal-home .dpm-hero__phasenav .dpm-phase__list--vertical {
		gap: 0.625rem;
	}

	.dpm-portal-home .dpm-hero__phasenav .dpm-phase__item {
		background: var(--dpm-color-bg);
	}
}

/* ---------- Situações: ícone + rótulo (referência aprovada) ---------- */
.dpm-portal-home .dpm-situation__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dpm-portal-home .dpm-situation__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	white-space: nowrap;
	color: var(--dpm-color-text);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	background: var(--dpm-color-bg-soft);
	border: 1px solid var(--dpm-color-border);
	border-radius: 999px;
	padding: 0 1rem 0 0.75rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/*
 * Home V3.1 (2026-08-19): o SVG tinha só viewBox, sem width/height
 * próprios, e o wrapper dependia de width:100%/height:100% para
 * dimensionar o ícone — combinação que alguns navegadores (achado real,
 * captura Safari mobile) resolvem mal quando o pai é flex/inline-flex
 * sem altura definida, fazendo o SVG assumir o tamanho intrínseco
 * padrão (bem maior que o pill). Corrigido em 2 camadas: 1) o próprio
 * `<svg>` agora declara width="24" height="24" no HTML (nunca depende só
 * de CSS); 2) aqui, tamanho fixo em px (não % do container) + max-width/
 * max-height como trava rígida — mesmo que algo dê errado, o ícone não
 * consegue crescer além disso.
 */
.dpm-portal-home .dpm-situation__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	max-width: 20px;
	max-height: 20px;
	color: var(--dpm-color-secondary);
	flex-shrink: 0;
	overflow: hidden;
}

.dpm-portal-home .dpm-situation__icon svg {
	width: 20px;
	height: 20px;
	max-width: 100%;
	max-height: 100%;
}

.dpm-portal-home .dpm-situation__item:hover,
.dpm-portal-home .dpm-situation__item:focus-visible {
	background: var(--dpm-color-secondary);
	border-color: var(--dpm-color-secondary);
	color: #fff;
}

.dpm-portal-home .dpm-situation__item:hover .dpm-situation__icon,
.dpm-portal-home .dpm-situation__item:focus-visible .dpm-situation__icon {
	color: #fff;
}

.dpm-portal-home .dpm-situation__item--all {
	background: transparent;
	border-style: dashed;
}

/*
 * Home V3.1 (2026-08-19): "O que está a acontecer?" com as 10 situações
 * em pill horizontal (flex-wrap) somava várias linhas cheias no mobile
 * e, combinado com o bug de ícone acima, deixava a Home extremamente
 * longa (achado real). No mobile: grid compacto de 2 colunas, só as 6
 * "principais" por evidência real de volume de conteúdo (ver comentário
 * PHP), ícone um pouco maior (mais fácil de tocar/reconhecer num card
 * vertical) e cartão vertical (ícone em cima, rótulo embaixo) em vez de
 * pill horizontal — textos longos como "Meu filho não quer ir à escola"
 * cabem em 2 linhas dentro do card, sem cortar. As 4 restantes + "Ver
 * todas" ficam disponíveis via /situacoes/. Desktop mantém as 10, sem
 * mudança (já compacto em flex-wrap). */
@media (max-width: 47.9375rem) {
	.dpm-portal-home .dpm-situation__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.625rem;
	}

	.dpm-portal-home .dpm-situation__li--extra {
		display: none;
	}

	.dpm-portal-home .dpm-situation__item {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		white-space: normal;
		min-height: 5.5rem;
		gap: 0.375rem;
		padding: 0.75rem 0.5rem;
		border-radius: var(--dpm-radius);
	}

	.dpm-portal-home .dpm-situation__icon,
	.dpm-portal-home .dpm-situation__icon svg {
		width: 40px;
		height: 40px;
		max-width: 40px;
		max-height: 40px;
	}

	.dpm-portal-home .dpm-situation__label {
		font-size: 0.8125rem;
		line-height: 1.25;
	}

	.dpm-portal-home .dpm-situation__item--all {
		min-height: auto;
		grid-column: 1 / -1;
		flex-direction: row;
	}
}

/* ---------- Muitas famílias procuram + newsletter lateral ----------
   Home V3.2 (2026-08-19): composição refeita — 4 cards editoriais de
   largura igual (achado real: feature enorme + lista estreita forçava
   título palavra-por-palavra e um card caindo isolado numa 2ª linha).
   Newsletter honesta ao lado, ~74%/26% no desktop (empilha em mobile). */
.dpm-portal-home .dpm-popular__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dpm-space-lg);
	align-items: start;
}

.dpm-portal-home .dpm-popular__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dpm-space-md) var(--dpm-space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dpm-portal-home .dpm-popular__card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.dpm-portal-home .dpm-popular__card--text a {
	padding: var(--dpm-space-sm) var(--dpm-space-sm) var(--dpm-space-sm) var(--dpm-space-md);
	border-left: 3px solid var(--dpm-color-accent);
	background: var(--dpm-color-bg-soft);
	border-radius: 0 var(--dpm-radius) var(--dpm-radius) 0;
}

.dpm-portal-home .dpm-popular__card a:hover .dpm-item-title,
.dpm-portal-home .dpm-popular__card a:focus-visible .dpm-item-title {
	text-decoration: underline;
}

/* Newsletter — painel coral/pêssego claro, compacto (Home V3.2). */
.dpm-portal-home .dpm-newsletter--lateral {
	margin: 0;
}

.dpm-portal-home .dpm-newsletter--lateral .dpm-newsletter__card {
	max-width: none;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgba(156, 91, 69, 0.06);
	border: 1px solid rgba(156, 91, 69, 0.18);
	border-radius: var(--dpm-radius);
	padding: var(--dpm-space-md);
}

.dpm-portal-home .dpm-newsletter--lateral .dpm-section-title {
	font-size: 1.1875rem;
}

@media (min-width: 40rem) {
	.dpm-portal-home .dpm-popular__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 64rem) {
	.dpm-portal-home .dpm-popular__row {
		grid-template-columns: 2.9fr 1fr;
	}
}

/* ---------- Situações + Ferramentas — grupo pareado (Home V3.2) ----------
   Movidos para logo após "Muitas famílias" (referência aprovada) e
   agrupados visualmente: mesmo espaçamento vertical reduzido entre os
   dois, para ler como um par, não duas seções soltas. */
.dpm-situations-tools-group > .dpm-situations {
	padding-bottom: var(--dpm-space-sm);
}

.dpm-situations-tools-group > .dpm-tools {
	margin-top: 0;
}

/* ---------- Ferramentas — teaser compacto (Home V3.1, ajustado V3.2) ----------
   Antes: 6 cards completos (mesmo catálogo de /ferramentas/), achado
   real de alongar a Home sem necessidade. V3.1: teaser compacto (heading
   + 1 parágrafo citando no máx. 3 nomes + CTA). V3.2: painel escuro
   reprovado — trocado para claro (creme/dourado suave, mesma família de
   --dpm-color-bg-warm já usada em "Vida real da mãe"), sem alterar o
   conteúdo/teaser já aprovado. */
.dpm-portal-home .dpm-tools--teaser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dpm-space-md);
	background: var(--dpm-color-bg-warm);
	border: 1px solid rgba(185, 138, 62, 0.25);
	border-radius: var(--dpm-radius);
	padding: var(--dpm-space-md) var(--dpm-space-md);
}

.dpm-portal-home .dpm-tools--teaser .dpm-kicker {
	color: var(--dpm-color-accent-dark);
}

.dpm-portal-home .dpm-tools__teaser-body {
	max-width: 42rem;
}

.dpm-portal-home .dpm-tools__intro {
	color: var(--dpm-color-muted);
	max-width: 46ch;
	margin: 0;
}

.dpm-portal-home .dpm-tools__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dpm-color-accent-dark);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--dpm-color-gold);
	padding-bottom: 0.2rem;
	white-space: nowrap;
}

.dpm-portal-home .dpm-tools--teaser .dpm-section-title::before {
	background: var(--dpm-color-gold);
}

.dpm-portal-home .dpm-tools__cta:hover,
.dpm-portal-home .dpm-tools__cta:focus-visible {
	color: var(--dpm-color-accent);
}

/*
 * Reset genérico para todos os cards clicáveis da Home que passaram a
 * envolver o conteúdo inteiro num <a> (Mais procurados, Psicologia,
 * Rotina, Vida real da mãe, Compras, Recentes) — sem isso, herdam a
 * cor/sublinhado azul padrão do navegador. Sublinhado só aparece no
 * título, em hover/foco (afordance de link sem poluir o card inteiro).
 */
.dpm-portal-home .dpm-popular__feature a,
.dpm-portal-home .dpm-popular__item a,
.dpm-portal-home .dpm-feature-links__main a,
.dpm-portal-home .dpm-grid__item a,
.dpm-portal-home .dpm-portrait-grid__item a,
.dpm-portal-home .dpm-recent__feature a,
.dpm-portal-home .dpm-recent__list li a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dpm-portal-home .dpm-popular__feature a:hover .dpm-headline,
.dpm-portal-home .dpm-popular__feature a:focus-visible .dpm-headline,
.dpm-portal-home .dpm-popular__item a:hover .dpm-item-title,
.dpm-portal-home .dpm-popular__item a:focus-visible .dpm-item-title,
.dpm-portal-home .dpm-feature-links__main a:hover .dpm-headline,
.dpm-portal-home .dpm-feature-links__main a:focus-visible .dpm-headline,
.dpm-portal-home .dpm-grid__item a:hover .dpm-item-title,
.dpm-portal-home .dpm-grid__item a:focus-visible .dpm-item-title,
.dpm-portal-home .dpm-portrait-grid__item a:hover .dpm-item-title,
.dpm-portal-home .dpm-portrait-grid__item a:focus-visible .dpm-item-title,
.dpm-portal-home .dpm-recent__feature a:hover .dpm-headline,
.dpm-portal-home .dpm-recent__feature a:focus-visible .dpm-headline,
.dpm-portal-home .dpm-recent__list li a:hover .dpm-item-title,
.dpm-portal-home .dpm-recent__list li a:focus-visible .dpm-item-title {
	text-decoration: underline;
}

.dpm-portal-home .dpm-feature-links__item {
	text-decoration: none;
	color: inherit;
	display: inline-block;
}

.dpm-portal-home .dpm-feature-links__item:hover,
.dpm-portal-home .dpm-feature-links__item:focus-visible {
	color: var(--dpm-color-accent-dark);
	text-decoration: underline;
}

.dpm-portal-home .dpm-situations .dpm-phase__list {
	flex-wrap: wrap;
	overflow-x: visible;
}

.dpm-portal-home .dpm-hero__picks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dpm-space-sm);
}

.dpm-portal-home .dpm-pick__title {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* ---------- Navegação por fase / situações ----------
   Home UX/UI V1 (2026-08-18): destinos são reais (get_term_link), mas o
   tratamento original era texto plano separado por regras finas — sem
   nenhuma affordance de "acesso rápido". Convertido para chip/pill com
   fundo, borda e preenchimento sólido no hover — mais perto de "cartão
   leve" do que "índice de rodapé" (ver §22-23 do brief). */
.dpm-portal-home .dpm-phase__list {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0.625rem;
	padding-bottom: var(--dpm-space-xs);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.dpm-portal-home .dpm-phase__list li {
	flex: 0 0 auto;
}

.dpm-portal-home .dpm-phase__item {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	white-space: nowrap;
	color: var(--dpm-color-text);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	background: var(--dpm-color-bg);
	border: 1px solid var(--dpm-color-border);
	border-radius: 999px;
	padding: 0 1rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dpm-portal-home .dpm-phase__item:hover,
.dpm-portal-home .dpm-phase__item:focus-visible {
	color: #fff;
	background: var(--dpm-color-accent);
	border-color: var(--dpm-color-accent);
	text-decoration: none;
}

/*
 * Home V3.1 (2026-08-19): no mobile, a lista vertical de 7 fases ficava
 * alta demais (7 linhas cheias, uma embaixo da outra) — achado real,
 * contribuía para a Home "extremamente longa". Grid 2 colunas compacta
 * pela metade sem cortar nenhum rótulo (permite quebra de linha dentro
 * do card em vez de nowrap/corte).
 * IMPORTANTE: precisa vir DEPOIS da regra base .dpm-phase__list acima —
 * mesma especificidade (2 classes) e mesmo elemento (a lista carrega as
 * duas classes, .dpm-phase__list E .dpm-phase__list--vertical), então
 * quem vier por último no arquivo vence, independente de media query.
 * Colocar este bloco antes da regra base (como na primeira tentativa)
 * fazia o `display:flex` genérico sobrescrever o `display:grid` daqui,
 * mesmo dentro do @media — bug real, pego só ao medir o DOM ao vivo.
 */
@media (max-width: 47.9375rem) {
	.dpm-portal-home .dpm-phase__list--vertical {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	.dpm-portal-home .dpm-phase__list--vertical .dpm-phase__item {
		white-space: normal;
		text-align: center;
		justify-content: center;
		line-height: 1.25;
		padding: 0.5rem 0.75rem;
	}
}

/* Situações usa a mesma chip, em tom sage para se diferenciar da trilha
   de fase (terracotta) sem introduzir um terceiro componente novo. */
.dpm-portal-home .dpm-situations .dpm-phase__item {
	background: var(--dpm-color-bg-soft);
}

.dpm-portal-home .dpm-situations .dpm-phase__item:hover,
.dpm-portal-home .dpm-situations .dpm-phase__item:focus-visible {
	background: var(--dpm-color-secondary);
	border-color: var(--dpm-color-secondary);
	color: #fff;
}

/* Trilha de fase: numeração + linha de conexão para reforçar a ideia de
   jornada sequencial (Tentantes → ... → 6-10 anos) sem depender de
   imagem/ícone — e para não parecer filtro de SaaS genérico como
   "Situações" (achado do V2: pills numeradas sozinhas ainda liam como
   tags de app). A linha fica atrás dos chips (z-index), que têm fundo
   sólido — o efeito visual é de "pontos conectados", não apenas uma lista
   de badges soltos. Cantos menos arredondados (0.5rem, não pill 999px)
   reforçam a diferença de "passo de trilha" vs. "tag de situação". */
.dpm-portal-home .dpm-phase .dpm-phase__list {
	counter-reset: dpm-phase-step;
	position: relative;
}

.dpm-portal-home .dpm-phase .dpm-phase__list::before {
	content: '';
	position: absolute;
	left: 0.625rem;
	right: 0.625rem;
	top: 1.25rem;
	height: 1px;
	background: var(--dpm-color-border);
	z-index: 0;
}

.dpm-portal-home .dpm-phase .dpm-phase__list li {
	counter-increment: dpm-phase-step;
	position: relative;
	z-index: 1;
}

.dpm-portal-home .dpm-phase .dpm-phase__item {
	border-radius: 0.5rem;
}

.dpm-portal-home .dpm-phase .dpm-phase__item::before {
	content: counter(dpm-phase-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--dpm-color-bg-soft);
	color: var(--dpm-color-accent-dark);
	font-size: 0.6875rem;
	font-weight: 700;
}

.dpm-portal-home .dpm-phase .dpm-phase__item:hover::before,
.dpm-portal-home .dpm-phase .dpm-phase__item:focus-visible::before {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* ---------- Mais procurados ---------- */
.dpm-portal-home .dpm-popular__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dpm-space-md);
}

.dpm-portal-home .dpm-popular__feature .dpm-badge {
	margin-right: 0.4rem;
}

.dpm-portal-home .dpm-popular__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dpm-space-md) var(--dpm-space-sm);
}

/*
 * Home V3.1 (2026-08-19): sem featured image própria nos artigos do
 * Core, o quadrado bege (.dpm-img--square) lia como "imagem quebrada"
 * — achado real, primeira/segunda dobra. Card textual deliberado:
 * categoria + título + resumo curto, com uma borda de destaque à
 * esquerda no lugar da imagem — assumidamente sem foto, não fingindo
 * ter uma. */
.dpm-portal-home .dpm-popular__item--text a {
	display: block;
	height: 100%;
	padding: var(--dpm-space-sm) var(--dpm-space-sm) var(--dpm-space-sm) var(--dpm-space-md);
	border-left: 3px solid var(--dpm-color-accent);
	background: var(--dpm-color-bg-soft);
	border-radius: 0 var(--dpm-radius) var(--dpm-radius) 0;
}

.dpm-portal-home .dpm-popular__excerpt {
	margin: 0.375rem 0 0;
	color: var(--dpm-color-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ---------- Bloco temático: editorial split (imagem + texto) ---------- */
.dpm-portal-home .dpm-theme--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dpm-space-md);
	align-items: center;
}

.dpm-portal-home .dpm-theme--split .dpm-img {
	margin-bottom: 0;
}

.dpm-portal-home .dpm-theme--split .dpm-headline {
	max-width: 30ch;
}

/* ---------- Bloco temático: grade ----------
   Sitewide V2 cleanup (2026-08-18): `repeat(3, 1fr)` sempre esticava para
   3 colunas de largura igual, mesmo com 1-2 itens reais (pilares PARTIAL
   como Bebê) — sobrava uma "coluna fantasma" vazia, lida como área morta.
   `auto-fill` com largura máxima fixa (não `1fr`) faz o card parar de
   crescer e o grid simplesmente terminar a linha mais cedo, sem reservar
   espaço para colunas que não existem. Efeito colateral desejado: já
   funciona em qualquer contagem de itens (1 a 5+) sem breakpoint dedicado
   por número de colunas. */
.dpm-portal-home .dpm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 21rem));
	justify-content: start;
	gap: var(--dpm-space-md) var(--dpm-space-sm);
}

/*
 * Home V3.2 (2026-08-19): itens de grid sem foto própria (nenhum dos
 * 100 artigos do Core tem featured image ainda) viram card textual
 * deliberado — mesma lógica já usada em "Muitas famílias" — em vez do
 * retângulo bege/listrado fingindo imagem ausente (regra explícita:
 * REAL PLACEHOLDERS = 0).
 */
.dpm-portal-home .dpm-grid__item--text a,
.dpm-portal-home .dpm-portrait-grid__item--text a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--dpm-space-sm) var(--dpm-space-sm) var(--dpm-space-sm) var(--dpm-space-md);
	border-left: 3px solid var(--dpm-color-secondary);
	background: var(--dpm-color-bg-soft);
	border-radius: 0 var(--dpm-radius) var(--dpm-radius) 0;
}

/* ---------- Bloco temático: lista editorial ---------- */
.dpm-portal-home .dpm-list {
	border-top: 1px solid var(--dpm-color-border);
}

.dpm-portal-home .dpm-list li {
	padding: var(--dpm-space-sm) 0;
	border-bottom: 1px solid var(--dpm-color-border);
}

/* ---------- Bloco temático: principal + links ---------- */
.dpm-portal-home .dpm-feature-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dpm-space-md);
}

.dpm-portal-home .dpm-feature-links__list {
	border-top: 1px solid var(--dpm-color-border);
}

.dpm-portal-home .dpm-feature-links__list li {
	border-bottom: 1px solid var(--dpm-color-border);
}

/* Ainda sem artigo real correspondente: texto, não link. */
.dpm-portal-home .dpm-feature-links__item {
	display: block;
	padding: var(--dpm-space-sm) 0;
	color: var(--dpm-color-text);
	font-weight: 700;
	font-size: 1.0625rem;
}

/* ---------- Bloco temático: cards retrato ----------
   Mesmo achado do .dpm-grid acima — "Compras e segurança" com 1-2 itens
   reais deixava 50-65% da seção em branco morto. Mesmo padrão de correção
   (auto-fill + largura máxima fixa, não 1fr). */
.dpm-portal-home .dpm-portrait-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 15rem));
	justify-content: start;
	gap: var(--dpm-space-md) var(--dpm-space-sm);
}

/* ---------- Bloco temático: editorial (Maternidade Real) ---------- */
.dpm-portal-home .dpm-quote {
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.25rem);
	line-height: 1.3;
	max-width: 26ch;
	margin: 0 0 var(--dpm-space-sm);
}

.dpm-portal-home .dpm-theme--editorial .dpm-excerpt {
	max-width: 55ch;
	font-size: 1.0625rem;
}

/*
 * Conteúdos recentes — Home V3.2: sem imagem (nenhum artigo tem
 * featured image própria) — lista editorial pura (categoria/data +
 * título), preferível a placeholder grande de imagem (regra explícita).
 */
.dpm-portal-home .dpm-recent__editorial-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dpm-color-border);
}

.dpm-portal-home .dpm-recent__editorial-list li {
	border-bottom: 1px solid var(--dpm-color-border);
}

.dpm-portal-home .dpm-recent__editorial-list a {
	display: block;
	padding: var(--dpm-space-sm) 0;
	color: inherit;
	text-decoration: none;
}

.dpm-portal-home .dpm-recent__editorial-list a:hover .dpm-item-title,
.dpm-portal-home .dpm-recent__editorial-list a:focus-visible .dpm-item-title {
	text-decoration: underline;
}

.dpm-portal-home .dpm-recent__editorial-list .dpm-meta {
	display: block;
	font-size: 0.8125rem;
	color: var(--dpm-color-muted);
	margin-bottom: 0.25rem;
}

/* ---------- Newsletter ("em preparação", honesto — sem formulário falso) ----------
   Sitewide V2 cleanup (2026-08-18): removido o input/botão desabilitado
   (lia como formulário quebrado) e a nota técnica entre colchetes. Card
   agora é só texto — mantido de largura contida (não a largura toda do
   grid) para não parecer uma seção vazia tentando preencher espaço. */
.dpm-portal-home .dpm-newsletter__card {
	max-width: 34rem;
	background: var(--dpm-color-bg);
	border: 1px solid var(--dpm-color-border-soft);
	border-top: 3px solid var(--dpm-color-accent);
	border-radius: var(--dpm-radius);
	box-shadow: var(--dpm-shadow);
	padding: var(--dpm-space-lg) var(--dpm-space-md);
}

.dpm-portal-home .dpm-newsletter__card .dpm-badge {
	margin-bottom: var(--dpm-space-sm);
}

.dpm-portal-home .dpm-newsletter__text {
	display: block;
	color: var(--dpm-color-muted);
	margin: 0;
	max-width: 48ch;
}

.dpm-portal-home .dpm-newsletter__text a {
	color: var(--dpm-color-accent-dark);
}

/* ---------- Pré-footer editorial ---------- */
.dpm-portal-home .dpm-prefooter {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dpm-space-md);
	border-radius: var(--dpm-radius);
}

.dpm-portal-home .dpm-prefooter__title {
	font-size: 1.4rem;
	margin: 0 0 0.5rem;
}

.dpm-portal-home .dpm-prefooter__heading {
	font-family: var(--dpm-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dpm-color-text-inverse);
	margin: 0 0 var(--dpm-space-sm);
}

.dpm-portal-home .dpm-prefooter__nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.dpm-portal-home .dpm-prefooter__nav a {
	color: var(--dpm-color-muted-inverse);
	text-decoration: none;
	font-size: 0.9375rem;
}

.dpm-portal-home .dpm-prefooter__nav a:hover,
.dpm-portal-home .dpm-prefooter__nav a:focus-visible {
	color: var(--dpm-color-text-inverse);
}

/* Home UX/UI V1 (2026-08-18): "pending" tinha o mesmo peso visual dos
   links reais ao lado — indistinguível de um link quebrado. Opacidade
   reduzida + rótulo "em breve" tornam a diferença honesta sem precisar
   de href="#" nem de remover o item da lista. */
.dpm-portal-home .dpm-prefooter__pending {
	display: inline-block;
	color: var(--dpm-color-muted-inverse);
	font-size: 0.9375rem;
	opacity: 0.55;
	cursor: default;
}

.dpm-portal-home .dpm-prefooter__pending::after {
	content: ' · em breve';
	font-size: 0.75rem;
	font-style: italic;
}

.dpm-portal-home .dpm-prefooter__copy {
	grid-column: 1 / -1;
	font-size: 0.8125rem;
	color: var(--dpm-color-muted-inverse);
	margin-top: var(--dpm-space-sm);
	padding-top: var(--dpm-space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Foco visível ---------- */
.dpm-portal-home a:focus-visible,
.dpm-portal-home button:focus-visible,
.dpm-portal-home input:focus-visible {
	outline: 2px solid var(--dpm-color-accent);
	outline-offset: 2px;
}

.dpm-portal-home .dpm-band--deep a:focus-visible {
	outline-color: var(--dpm-color-text-inverse);
}

/* ---------- Prevenção de overflow horizontal ----------
   Faixas full-bleed usam box-shadow (não afeta overflow), mas mantemos
   a trava como segurança estrutural nesta página de teste. */
body:has(.dpm-portal-home) {
	overflow-x: hidden;
}

/* ================================================================
   Header herdado do Astra — ajuste CSS-only, SITEWIDE (2026-08-18).
   Não edita header.php. Correção universal: título duplicado ao lado da
   logo e menu quebrando para 2 linhas ("Especialistas" caindo) apareciam
   em toda página que não fosse o candidato de Home (achado do
   diagnóstico visual — verificado em /fases/ e num artigo do Core 100).
   Antes escopado só a .dpm-portal-home via body:has(); intencionalmente
   des-escopado agora, pois o defeito e a correção não são específicos de
   uma página. Provisório: será substituído por um header global próprio
   numa fase futura planejada.
   ================================================================ */
.site-header {
	background: #fffdfb;
	border-bottom: 1px solid #ece1d0;
}

/* Alinha a largura do header com o container editorial da página
   (evita a sensação de menu "desalinhado" em relação ao conteúdo). */
#masthead .ast-container {
	max-width: 1200px;
}

.ast-primary-header-bar {
	min-height: 88px;
}

.ast-builder-grid-row {
	align-items: center;
}

/* Logo proporcional (a imagem original é grande: ~910×170px).
   Home V3.2 (2026-08-19): 38px→45px (~+18%) no desktop, avaliado via
   medição real (header continua 1 linha, menu não empurra, sem quebra —
   ver relatório da unidade). Mobile congelado em 42px (V3.1, aprovado —
   ver @media abaixo, não alterado). */
.site-logo-img img.custom-logo {
	height: 45px;
	width: auto;
	max-width: none;
}

/* Título/tagline textual é redundante com a logo (que já contém o nome
   da marca) — não reserva espaço vazio/duplicado ao lado do logo. */
.ast-site-title-wrap {
	display: none;
}

/* Menu principal: uma linha só, espaçamento uniforme, hover discreto.
   Home UX/UI V1 (2026-08-18): gap aumentado (2rem→2.375rem) e altura da
   barra (+4px) para o menu "respirar" mais sem quebrar a régua de uma
   linha (verificado com "Especialistas", o item mais longo). */
.main-header-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2.375rem;
}

.main-header-menu .menu-link {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #241f1b;
	padding: 0.4rem 0;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.main-header-menu .menu-link:hover,
.main-header-menu .menu-link:focus {
	color: #95533c;
	border-bottom-color: #95533c;
}

/* Home V3.1 (2026-08-19): 32px lia como pouco presente ao lado do
   hambúrguer (41.8px) — subido para 42px, ficando visualmente no mesmo
   peso do ícone de menu, sem crescer a barra do header (81px de altura
   total já comporta os dois, medido via DOM real: hambúrguer ocupa
   18.5–60.4px, header vai de 0–81px). */
@media (max-width: 37.4375rem) {
	.site-logo-img img.custom-logo {
		height: 42px;
	}
}

/* ---------- Breakpoints — mobile-first ----------
   .dpm-grid e .dpm-portrait-grid não precisam de override de coluna por
   breakpoint desde o fix de auto-fill acima — a contagem de colunas já
   se ajusta sozinha à largura disponível e ao número real de itens. */
@media (min-width: 48rem) {
	.dpm-portal-home .dpm-img--hero {
		aspect-ratio: 16 / 10;
	}

	.dpm-portal-home .dpm-hero__picks {
		grid-template-columns: 1fr;
	}

	.dpm-portal-home .dpm-popular__layout {
		grid-template-columns: 1.3fr 1fr;
	}

	.dpm-portal-home .dpm-theme--split {
		grid-template-columns: 1fr 1fr;
	}

	.dpm-portal-home .dpm-feature-links {
		grid-template-columns: 1.4fr 1fr;
	}

	.dpm-portal-home .dpm-recent__layout {
		grid-template-columns: 1.5fr 1fr;
	}

	.dpm-portal-home .dpm-prefooter {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

/* ================================================================
   Template de artigo (single.php) — escopado sob .dpm-article-page.
   Carregado apenas em is_single() (ver functions.php). Coluna de
   leitura mais estreita que a Home, própria de conteúdo editorial.
   ================================================================ */
.dpm-article-page {
	max-width: 42rem;
	margin: 0 auto;
	padding: var(--dpm-space-md) var(--dpm-space-sm) var(--dpm-space-xl);
}

.dpm-article-page ul,
.dpm-article-page ol {
	list-style: revert;
	margin: 0 0 var(--dpm-space-sm) 1.25rem;
	padding: 0;
}

.dpm-article-page p {
	margin: 0 0 var(--dpm-space-sm);
}

.dpm-article-page h1,
.dpm-article-page h2,
.dpm-article-page h3 {
	font-family: var(--dpm-font-serif);
	font-weight: 700;
	color: var(--dpm-color-text);
	line-height: 1.25;
}

.dpm-article-page .dpm-article__breadcrumb {
	font-size: 0.875rem;
	color: var(--dpm-color-muted);
	margin-bottom: var(--dpm-space-sm);
}

.dpm-article-page .dpm-article__breadcrumb a {
	color: var(--dpm-color-muted);
}

.dpm-article-page .dpm-article__breadcrumb a:hover,
.dpm-article-page .dpm-article__breadcrumb a:focus-visible {
	color: var(--dpm-color-accent);
}

.dpm-article-page .dpm-article__tags {
	margin: 0 0 var(--dpm-space-sm);
}

.dpm-article-page .dpm-article__byline {
	margin: 0 0 var(--dpm-space-sm);
	font-family: var(--dpm-font-sans);
	font-size: 0.8125rem;
	color: var(--dpm-color-muted);
}

.dpm-article-page .dpm-tag {
	display: inline-block;
	font-family: var(--dpm-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0.25rem;
	padding: 0.15rem 0.55rem;
	margin: 0 0.35rem 0.35rem 0;
}

.dpm-article-page .dpm-tag--a {
	color: var(--dpm-color-accent-dark);
	background: rgba(149, 83, 60, 0.1);
}

.dpm-article-page .dpm-tag--b {
	color: var(--dpm-color-secondary);
	background: rgba(76, 90, 63, 0.1);
}

.dpm-article-page .dpm-article__title {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 var(--dpm-space-sm);
}

/* Alerta de risco — nunca só cor: sempre rótulo textual explícito.
   Nível médio/alto/crítico apenas (baixo não exibe alerta). */
.dpm-article-page .dpm-alert {
	display: block;
	font-weight: 700;
	font-size: 0.9375rem;
	border-radius: var(--dpm-radius);
	padding: 0.75rem 1rem;
	margin: 0 0 var(--dpm-space-md);
	border: 1px solid transparent;
}

.dpm-article-page .dpm-alert--medio {
	color: var(--dpm-color-accent-dark);
	background: rgba(149, 83, 60, 0.08);
	border-color: rgba(149, 83, 60, 0.25);
}

.dpm-article-page .dpm-alert--alto,
.dpm-article-page .dpm-alert--critico {
	color: #7a2e1f;
	background: #fbe9e4;
	border-color: #e8b7a8;
}

/* Aviso honesto de conteúdo ainda não revisado por profissional — nunca
   alarmista, nunca some, nunca finge revisão. Ver .claude/rules/ymyl.md. */
.dpm-article-page .dpm-unreviewed-notice {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--dpm-color-muted);
	background: var(--dpm-color-bg-soft);
	border: 1px solid var(--dpm-color-border);
	border-left: 3px solid var(--dpm-color-gold);
	border-radius: 0.375rem;
	padding: var(--dpm-space-sm) var(--dpm-space-md);
	margin: 0 0 var(--dpm-space-md);
}

.dpm-article-page .dpm-unreviewed-notice--strong {
	color: #7a2e1f;
	background: #fbe9e4;
	border-color: #e8b7a8;
	border-left-color: #7a2e1f;
	font-weight: 600;
}

.dpm-article-page .dpm-article__body {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dpm-article-page .dpm-article__body h2 {
	font-size: 1.375rem;
	margin: var(--dpm-space-lg) 0 var(--dpm-space-sm);
}

.dpm-article-page .dpm-article__body h3 {
	font-size: 1.125rem;
	margin: var(--dpm-space-md) 0 var(--dpm-space-xs);
}

.dpm-article-page .dpm-article__body li {
	margin-bottom: 0.4rem;
}

/* Cartão de confiança (autor/revisor/fontes) e próxima necessidade */
.dpm-article-page .dpm-trust-card,
.dpm-article-page .dpm-next-needs {
	margin-top: var(--dpm-space-lg);
	padding-top: var(--dpm-space-md);
	border-top: 1px solid var(--dpm-color-border);
}

.dpm-article-page .dpm-trust-card .dpm-section-title,
.dpm-article-page .dpm-next-needs .dpm-section-title {
	font-size: 1.125rem;
	margin: 0 0 var(--dpm-space-sm);
}

.dpm-article-page .dpm-trust-card__row {
	font-size: 0.9375rem;
	color: var(--dpm-color-muted);
	margin: 0 0 0.4rem;
}

.dpm-article-page .dpm-trust-card__sources {
	font-size: 0.9375rem;
	color: var(--dpm-color-muted);
	margin: var(--dpm-space-xs) 0 0 1.25rem;
}

.dpm-article-page .dpm-next-needs ul {
	margin-left: 0;
}

.dpm-article-page .dpm-next-needs li {
	list-style: none;
	border-bottom: 1px solid var(--dpm-color-border);
	padding: 0.6rem 0;
}

.dpm-article-page .dpm-next-needs a {
	color: var(--dpm-color-text);
	text-decoration: none;
	font-weight: 600;
}

.dpm-article-page .dpm-next-needs a:hover,
.dpm-article-page .dpm-next-needs a:focus-visible {
	color: var(--dpm-color-accent);
}

.dpm-article-page a:focus-visible {
	outline: 2px solid var(--dpm-color-accent);
	outline-offset: 2px;
}