/*
 * Camada de polimento — profundidade, hover e foco.
 * Não altera a paleta: usa só tokens existentes + sombras quentes (rgba do marrom).
 */

/* Tokens de movimento — uma linguagem só de duração/curva em todo o site.
 * Curvas custom (nunca o `ease` cru): saída suave, com leve "assentar". */
:root {
	--dg-dur-fast: 150ms;   /* feedback imediato: press, micro-trocas */
	--dg-dur: 240ms;        /* hover padrão: cor, sublinhado, borda */
	--dg-dur-slow: 420ms;   /* deslocamento maior: elevação de card, zoom de imagem */
	--dg-ease: cubic-bezier(0.2, 0.6, 0.2, 1);     /* saída firme */
	--dg-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* assenta com gentileza */
}

/* Transição-base de TODA superfície interativa — nada troca de estado "seco". */
a,
.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-block-read-more,
.wp-block-post-title a,
.wp-block-post-terms a,
.wp-block-columns .wp-block-column > .wp-block-group {
	transition:
		color var(--dg-dur) var(--dg-ease),
		background-color var(--dg-dur) var(--dg-ease),
		border-color var(--dg-dur) var(--dg-ease),
		text-decoration-color var(--dg-dur) var(--dg-ease),
		transform var(--dg-dur-slow) var(--dg-ease),
		box-shadow var(--dg-dur-slow) var(--dg-ease);
}

/* Molduras (passe-partout) com sombra suave → leitura de foto emoldurada na parede */
.wp-block-group.has-base-background-color.has-border-color {
	box-shadow: 0 18px 44px -30px rgba(42, 33, 18, 0.5);
}

/* Caixas de imagem placeholder — moldura interna sutil para não "sumir" no creme */
.wp-block-group.has-surface-background-color.has-border-color {
	box-shadow: inset 0 0 0 1px rgba(42, 33, 18, 0.06);
}

/* Tiles de case — hover elegante (borda dourada + leve elevação) */
.wp-block-columns .wp-block-column > .wp-block-group.has-surface-background-color.has-border-color:hover {
	border-color: var(--wp--preset--color--accent) !important;
	transform: translateY(-5px);
	box-shadow: 0 16px 34px -20px rgba(42, 33, 18, 0.4);
}

/* Links de texto (conteúdo, rodapé, marca) — EXATAMENTE o mesmo fio dourado do
 * menu do topo: um ::after fino que cresce da esquerda via transform: scaleX().
 * (Uma versão anterior usava background-gradient e ficava grossa/borrada por
 * antialiasing — o ::after com transform fica nítido e idêntico ao header.)
 *
 * Escopo POSITIVO em links dentro de p/li (+ a marca do site). Assim já exclui,
 * sem :not() frágil: títulos (h2>a), fotos (figure>a) e o nav (que tem o seu). */
main :is(p, li) a:not(.wp-block-button__link):not(.wp-block-read-more),
footer :is(p, li) a:not(.wp-block-button__link),
.wp-block-site-title a {
	position: relative;
	text-decoration: none;
}
main :is(p, li) a:not(.wp-block-button__link):not(.wp-block-read-more)::after,
footer :is(p, li) a:not(.wp-block-button__link)::after,
.wp-block-site-title a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dg-dur) var(--dg-ease);
}
main :is(p, li) a:not(.wp-block-button__link):not(.wp-block-read-more):hover::after,
main :is(p, li) a:not(.wp-block-button__link):not(.wp-block-read-more):focus-visible::after,
footer :is(p, li) a:not(.wp-block-button__link):hover::after,
footer :is(p, li) a:not(.wp-block-button__link):focus-visible::after,
.wp-block-site-title a:hover::after,
.wp-block-site-title a:focus-visible::after {
	transform: scaleX(1);
}

/* Botão — micro-elevação no hover */
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Foco acessível (dourado) */
a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/*
 * Grid de cases (portfólio) — Query Loop nativo com a classe .dg-cards.
 * Mesma leitura de card do carrossel, mas em grade estática.
 */
.dg-cards .wp-block-post-template {
	gap: var(--wp--preset--spacing--50);
}

.dg-cards .wp-block-post {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.4s ease;
}

.dg-cards .wp-block-post:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-5px);
	box-shadow: 0 16px 34px -20px rgba(42, 33, 18, 0.4);
}

.dg-cards .wp-block-post-featured-image {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.dg-cards .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dg-cards .wp-block-post-title {
	margin: 1.2rem 1.3rem 0.3rem;
}

.dg-cards .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.dg-cards .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.dg-cards .wp-block-post-terms {
	margin: 0 1.3rem 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.dg-cards .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

/* =========================================================
 * Calor botânico — hero, girassóis e cards do blog
 * Mantém a paleta: só tokens existentes + sombras quentes.
 * ========================================================= */

/* Hero — colagem da marca flutuando sobre um leve brilho dourado */
.dg-hero {
	position: relative;
	overflow: hidden;
}

.dg-hero::before {
	content: "";
	position: absolute;
	inset: -10% -5% -20% -5%;
	background:
		radial-gradient(46% 60% at 76% 40%, rgba(224, 181, 61, 0.20), transparent 72%),
		radial-gradient(40% 52% at 16% 26%, rgba(243, 231, 204, 0.55), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.dg-hero > * {
	position: relative;
	z-index: 1;
}

.dg-hero__art {
	margin: 0;
}

/* Acento de girassóis (resumo Sobre na home) — é um recorte (PNG com fundo
   transparente), então NÃO corta com object-fit: só limita a altura pra a seção
   não ficar gigante. Como é recorte, ao reduzir a altura ele afina; centralizo
   na coluna pra não ficar perdido encostado num lado. */
.dg-sun-accent {
	margin: 0;
}

.dg-sun-accent img {
	display: block;
	width: auto;
	max-height: 700px;
	margin-inline: auto;
	filter: drop-shadow(0 18px 30px rgba(42, 33, 18, 0.18));
}

/* Colagem "Quem sou eu" na página Sobre */
.dg-marca img {
	filter: drop-shadow(0 26px 38px rgba(42, 33, 18, 0.20));
}

/* Medida de leitura — mesmo com a coluna larga, o texto corrido fica confortável */
.wp-block-post-content > p,
.dg-blog-hero > p {
	max-width: 66ch;
}

.dg-blog-hero > p {
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
 * Blog (Insights) — cards quentes, sem foto destacada
 * ========================================================= */
.dg-blog-hero {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.dg-blog .wp-block-post {
	height: 100%;
}

.dg-blog-card {
	height: 100%;
	align-items: stretch;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--accent);
	overflow: hidden;
	transition:
		transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
		box-shadow 0.4s ease,
		border-color 0.3s ease;
}

.dg-blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 38px -22px rgba(42, 33, 18, 0.45);
	border-top-color: var(--wp--preset--color--accent-2);
}

/* Imagem do card — ocupa toda a largura, recorte uniforme */
.dg-blog-card__img {
	margin: 0;
	width: 100%;
}

.dg-blog-card__img img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.dg-blog-card:hover .dg-blog-card__img img {
	transform: scale(1.04);
}

/* Corpo do card preenche a altura para alinhar o "Ler texto" embaixo */
.dg-blog-card__body {
	flex: 1 1 auto;
	width: 100%;
}

.dg-blog-card .wp-block-post-title {
	margin-top: 0;
}

.dg-blog-card .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.dg-blog-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-2);
}

/* Esconde o "leia mais" automático do resumo — usamos o botão dedicado */
.dg-blog-card .wp-block-post-excerpt__more-text,
.dg-blog-card .wp-block-post-excerpt a.wp-block-post-excerpt__more-link {
	display: none;
}

.dg-blog-card .wp-block-read-more {
	position: relative;
	margin-top: auto;
	color: var(--wp--preset--color--accent-2);
	font-weight: 600;
	text-decoration: none;
}

/* MESMO fio dos outros links: ::after de 2px que cresce da esquerda (antes era
 * text-decoration, que destoava na espessura). Padroniza com header/conteúdo. */
.dg-blog-card .wp-block-read-more::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dg-dur) var(--dg-ease);
}
.dg-blog-card .wp-block-read-more:hover::after,
.dg-blog-card .wp-block-read-more:focus-visible::after {
	transform: scaleX(1);
}

/* =========================================================
 * Botões — mesmo tamanho entre sólido e contorno
 * (o estilo "outline" do core sobrescreve o padding do tema)
 * ========================================================= */
.wp-block-button__link {
	border: 2px solid transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	border-width: 2px;
	padding: 0.85rem 1.4rem;
}

/* Secundário café sólido — acende pro dourado no hover.
 * (O hover global já faz o caminho inverso no primário: dourado → café.) */
.wp-block-button__link.has-contrast-background-color:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* =========================================================
 * Estilos de botão — variações de marca (block style variations)
 * Registradas em functions.php; o visual mora aqui. Aplicáveis a qualquer
 * botão pela aba "Estilos" do editor. Cada uma traz normal + hover.
 *   Famílias: Art Nouveau (moldura serifada) · Retrô (terracota, versalete).
 * Rótulo em Butler (display); cores via tokens da paleta.
 * ========================================================= */

/* Tipografia dos rótulos */
.wp-block-button.is-style-dg-art-nouveau-dark > .wp-block-button__link,
.wp-block-button.is-style-dg-art-nouveau-light > .wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.004em;
	text-transform: none;
}

.wp-block-button.is-style-dg-retro-dark > .wp-block-button__link,
.wp-block-button.is-style-dg-retro-light > .wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.13em;
}

/* Art Nouveau · Escuro — café + moldura dupla dourada */
.wp-block-button.is-style-dg-art-nouveau-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 3px double var(--wp--preset--color--accent);
	border-radius: 0;
}
.wp-block-button.is-style-dg-art-nouveau-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-art-nouveau-dark > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* Art Nouveau · Claro — moldura dupla marrom, fundo translúcido */
.wp-block-button.is-style-dg-art-nouveau-light > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 3px double var(--wp--preset--color--contrast);
	border-radius: 0;
}
.wp-block-button.is-style-dg-art-nouveau-light > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-art-nouveau-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* Art Nouveau sobre fundo escuro (faixa de CTA) — inverte as cores para os
 * botões lerem no café. Mantém a mesma família/forma; só troca o contraste. */
.dg-cta .wp-block-button.is-style-dg-art-nouveau-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent);
}
.dg-cta .wp-block-button.is-style-dg-art-nouveau-dark > .wp-block-button__link:hover,
.dg-cta .wp-block-button.is-style-dg-art-nouveau-dark > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}
.dg-cta .wp-block-button.is-style-dg-art-nouveau-light > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}
.dg-cta .wp-block-button.is-style-dg-art-nouveau-light > .wp-block-button__link:hover,
.dg-cta .wp-block-button.is-style-dg-art-nouveau-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

/* Retrô · Escuro — terracota sólido, cantos suaves */
.wp-block-button.is-style-dg-retro-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--terracota);
	color: var(--wp--preset--color--base);
	border: 1.5px solid transparent;
	border-radius: 5px;
}
.wp-block-button.is-style-dg-retro-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-retro-dark > .wp-block-button__link:focus {
	background-color: #93431f; /* terracota mais escura — estado hover */
	color: var(--wp--preset--color--base);
}

/* Retrô · Claro — creme dourado + contorno terracota */
.wp-block-button.is-style-dg-retro-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--preset--color--terracota);
	border-radius: 5px;
}
.wp-block-button.is-style-dg-retro-light > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-retro-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--terracota);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--terracota);
}

/* =========================================================
 * Estilos de botão — novas famílias (block style variations)
 * Mesmas regras de tamanho/registro das famílias acima. Cada uma traz
 * normal + hover, tipografia Butler/Poppins e cores via tokens da paleta.
 *   Editorial (serifa chapada) · Pílula (cápsula) · Sálvia (botânica) ·
 *   Carimbo (tracejado/selo) · Passe-partout (moldura de quadro).
 * ========================================================= */

/* Tipografia dos rótulos — serifa display (Editorial, Sálvia, Passe-partout) */
.wp-block-button.is-style-dg-editorial-dark > .wp-block-button__link,
.wp-block-button.is-style-dg-editorial-light > .wp-block-button__link,
.wp-block-button.is-style-dg-sage-dark > .wp-block-button__link,
.wp-block-button.is-style-dg-sage-light > .wp-block-button__link,
.wp-block-button.is-style-dg-passepartout-dark > .wp-block-button__link,
.wp-block-button.is-style-dg-passepartout-light > .wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.004em;
	text-transform: none;
}

/* Tipografia dos rótulos — versalete serifado (Carimbo) */
.wp-block-button.is-style-dg-carimbo-dark > .wp-block-button__link,
.wp-block-button.is-style-dg-carimbo-light > .wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.13em;
}

/* Tipografia dos rótulos — Poppins caixa-alta (Pílula) */
.wp-block-button.is-style-dg-pilula-dark > .wp-block-button__link,
.wp-block-button.is-style-dg-pilula-light > .wp-block-button__link {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Editorial · Escuro — café chapado, serifa, cantos retos */
.wp-block-button.is-style-dg-editorial-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 2px solid transparent;
	border-radius: 0;
}
.wp-block-button.is-style-dg-editorial-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-editorial-dark > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Editorial · Claro — ouro chapado, serifa */
.wp-block-button.is-style-dg-editorial-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border: 2px solid transparent;
	border-radius: 0;
}
.wp-block-button.is-style-dg-editorial-light > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-editorial-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Pílula · Escuro — café sólido em cápsula */
.wp-block-button.is-style-dg-pilula-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 2px solid transparent;
	border-radius: 999px;
}
.wp-block-button.is-style-dg-pilula-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-pilula-dark > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Pílula · Claro — contorno café em cápsula */
.wp-block-button.is-style-dg-pilula-light > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
}
.wp-block-button.is-style-dg-pilula-light > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-pilula-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* Sálvia · Escuro — verde-sálvia sólido, cantos suaves */
.wp-block-button.is-style-dg-sage-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--base);
	border: 2px solid transparent;
	border-radius: 5px;
}
.wp-block-button.is-style-dg-sage-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-sage-dark > .wp-block-button__link:focus {
	background-color: #6f7d54; /* sálvia mais escura — estado hover */
	color: var(--wp--preset--color--base);
}

/* Sálvia · Claro — creme + contorno sálvia */
.wp-block-button.is-style-dg-sage-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--sage);
	border-radius: 5px;
}
.wp-block-button.is-style-dg-sage-light > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-sage-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--sage);
}

/* Carimbo · Escuro — ouro sólido, versalete */
.wp-block-button.is-style-dg-carimbo-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border: 2px solid transparent;
	border-radius: 0;
}
.wp-block-button.is-style-dg-carimbo-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-carimbo-dark > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Carimbo · Claro — contorno tracejado ocre (cara de selo) */
.wp-block-button.is-style-dg-carimbo-light > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent-2);
	border: 2px dashed var(--wp--preset--color--accent-2);
	border-radius: 0;
}
.wp-block-button.is-style-dg-carimbo-light > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-carimbo-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 2px dashed var(--wp--preset--color--accent);
}

/* Passe-partout · Escuro — ouro com moldura de quadro (passe-partout) */
.wp-block-button.is-style-dg-passepartout-dark > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 0.95rem 1.65rem;
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--base), inset 0 0 0 4.5px var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-dg-passepartout-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-passepartout-dark > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--surface), inset 0 0 0 4.5px var(--wp--preset--color--accent);
}

/* Passe-partout · Claro — creme com moldura de quadro */
.wp-block-button.is-style-dg-passepartout-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 0.95rem 1.65rem;
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--base), inset 0 0 0 4.5px var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-dg-passepartout-light > .wp-block-button__link:hover,
.wp-block-button.is-style-dg-passepartout-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--base), inset 0 0 0 4.5px var(--wp--preset--color--contrast);
}

/* =========================================================
 * Hero — colagem alinhada à base + granulação quente
 * ========================================================= */
/* A primeira dobra ocupa o viewport e isola a seção seguinte (sem invasão do bouquet) */
.dg-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* TETO absoluto: sem o min(), o 90svh cresce sem limite no zoom-out / telas
	 * enormes e o hero "estoura". O min() trava num máximo em px. */
	min-height: min(calc(90svh - 84px), 900px);
}

/* Recorte da Duda dentro do arco — fica em pé na base e abraça a imagem
   pra o arco ficar atrás dela (e não da coluna inteira). */
.dg-hero__art {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: auto auto 0; /* fica em pé na base + centralizado na coluna */
}

.dg-hero__art img {
	display: block;
	width: auto;
	max-width: 100%;
	/* mesmo teto em px: a colagem não cresce além de ~760px no zoom-out */
	max-height: min(72svh, 760px);
	margin-inline: auto;
}

/* Arco atrás da colagem — idêntico ao de antes (forma, tamanho, posição e sombra),
   só que SEM `background`: a box-shadow é o que destaca o contorno do arco. */
.dg-hero__art::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 84%;
	height: 92%;
	border-radius: 50% 50% 30px 30px / 40% 40% 6% 6%;
	box-shadow:
		/* contato — cola na base do recorte e elimina a linha clara de antes */
		0 5px 12px -3px rgba(42, 33, 18, 0.42),
		/* ambiente — idêntica à de quando era marrom */
		0 40px 70px -34px rgba(42, 33, 18, 0.55);
	pointer-events: none;
}

/* Colunas do hero podem encolher — sem isso o recorte (largura intrínseca grande)
   empurra a coluna além da viewport e estoura o layout em telas médias/pequenas */
.dg-hero .wp-block-column {
	min-width: 0;
}

/* Granulação (miolo de girassol) sobre o brilho do hero */
.dg-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../img/grain.png);
	background-size: 460px;
	opacity: 0.06;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}

/* =========================================================
 * Faixa de contato (CTA) — fundo granulado tipo semente de girassol
 * ========================================================= */
.dg-cta {
	position: relative;
	overflow: hidden;
}

.dg-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 110% at 50% -10%, rgba(197, 144, 31, 0.18), transparent 72%),
		url(../img/grain.png);
	background-size: cover, 280px;
	opacity: 0.22;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 0;
}

.dg-cta > * {
	position: relative;
	z-index: 1;
}

/* =========================================================
 * Layout raiz — seções de topo (header / main / footer) rentes
 * O WordPress insere o block-gap (1.25rem) entre os filhos diretos
 * de .wp-site-blocks. Cada seção já traz seu próprio padding, então
 * zeramos esse vão para o conteúdo encostar no header e no rodapé.
 * ========================================================= */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* =========================================================
 * Assets espalhados nas margens (fora da coluna central)
 * Só aparecem quando há espaço — telas largas — e nunca geram scroll.
 * ========================================================= */
body {
	overflow-x: hidden;
}

/* =========================================================
 * Cabeçalho de seção — rótulo ornamental + acento script
 * Padrão único usado em TODAS as seções da Home.
 * ========================================================= */

/* Rótulo (eyebrow) com fio dourado de abertura (vibe art-nouveau) */
.dg-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.dg-eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}

/* Variante centrada (faixa de CTA) — fios dos dois lados */
.dg-eyebrow.has-text-align-center {
	justify-content: center;
}

.dg-eyebrow.has-text-align-center::after {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}

/* Acento script (Griffiths dourado) numa palavra do título */
.dg-script {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	color: var(--wp--preset--color--accent-2);
	font-size: 1.12em;
	line-height: 1;
}

/* Em fundo escuro (faixa de CTA) o acento usa um dourado mais claro */
.dg-cta .dg-script {
	color: var(--wp--preset--color--accent-3);
}

/* ---- Responsivo ---- */

/* Hero empilha já no tablet (≤960px): recorte em cima, texto embaixo.
   Evita a coluna de 50% espremida onde o recorte estourava para fora da tela. */
@media (max-width: 960px) {
	.dg-hero {
		min-height: 0;
	}
	.dg-hero .wp-block-columns {
		flex-direction: column;
	}
	.dg-hero .wp-block-column {
		flex-basis: auto !important;
		width: 100% !important;
	}
	/* o rosto (confiança da marca) vem ANTES do texto */
	.dg-hero .wp-block-column.is-vertically-aligned-bottom {
		order: -1;
	}
	.dg-hero__art img {
		max-height: 52svh;
	}
}

@media (max-width: 600px) {
	.dg-hero__art img {
		max-height: 46svh;
	}
}




/* =========================================================
 * NAVEGAÇÃO MOBILE — "Editorial Index" (índice de revista)
 * Overlay full-screen creme, itens à ESQUERDA, numerais 01–04,
 * eyebrow dourado + script "navegação" no topo, contato no rodapé.
 * Reaproveita os motivos da marca (.dg-eyebrow fio 34px / .dg-script Griffiths).
 *
 * Escopo: tudo sob .is-menu-open -> o nav inline do desktop (justified-right)
 * fica intacto. Só os botões open/close (visíveis no mobile) ficam fora desse escopo.
 *
 * NOTA DE ESPECIFICIDADE (verificado no core wp-includes/blocks/navigation/style.css):
 *   - bg/cor do core NÃO são !important; vivem em
 *     ".wp-block-navigation:not(.has-background) ...is-menu-open:not(.disable-default-overlay){background-color:#fff}"
 *     (e o gêmeo :not(.has-text-color){color:#000}). São ~4 classes de especificidade.
 *     Por isso usamos !important E prefixamos .wp-block-navigation para vencer com folga.
 *   - align-items vem de "align-items:var(--navigation-layout-justification-setting)"
 *     aplicado em -content E no ul __container, dentro de :where(...) (0 de especificidade).
 *     Sobrescrevemos flex-end -> flex-start nos DOIS, com !important por garantia.
 * ========================================================= */

/* --- 1. Fundo creme + tinta marrom + layout do overlay aberto ------------- */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	/* vence ".wp-block-navigation:not(.has-background) ...is-menu-open{background-color:#fff}" */
	background-color: var(--wp--preset--color--base) !important;
	/* vence ".wp-block-navigation:not(.has-text-color) ...is-menu-open{color:#000}" */
	color: var(--wp--preset--color--contrast) !important;
	/* brilho dourado discreto no canto superior, eco do hero da marca */
	background-image:
		radial-gradient(60% 46% at 12% 6%, rgba(224, 181, 61, 0.16), transparent 70%);
	background-repeat: no-repeat;
}

/* Diálogo posicionado para ancorar conteúdo à ESQUERDA e segurar o rodapé */
.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 0;                 /* nunca centraliza/encosta na direita */
}

/* Conteúdo: coluna única, início à esquerda, respiro generoso + safe-area.
 * min-height:100svh garante que viewports curtos ROLAM em vez de cortar o rodapé. */
.is-menu-open .wp-block-navigation__responsive-container-content {
	/* vence "align-items:var(--navigation-layout-justification-setting)" (=flex-end) do core */
	align-items: flex-start !important;
	justify-content: flex-start;
	width: 100%;
	min-height: 100svh;
	box-sizing: border-box;
	position: relative;
	padding:
		calc(env(safe-area-inset-top, 0px) + clamp(4.5rem, 13svh, 7rem))
		clamp(1.5rem, 7vw, 4rem)
		calc(env(safe-area-inset-bottom, 0px) + clamp(2rem, 7svh, 3.25rem));
}

/* --- 2. Topo: eyebrow dourado + script "navegação" (motivos .dg-*) --------
 * Injetado via ::before do -content (sem markup extra). O fio dourado de 34px
 * é o mesmo da .dg-eyebrow; a palavra usa Griffiths como a .dg-script. */
.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "navegação";
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: clamp(1.75rem, 5svh, 2.75rem);
	padding-left: 48px;                 /* 34px de fio + 14px de respiro */
	font-family: var(--wp--preset--font-family--script); /* Griffiths */
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1;
	text-transform: none;               /* derruba o uppercase de core/navigation (theme.json) — script minúsculo como .dg-script */
	color: var(--wp--preset--color--accent-2);
	/* o fio dourado de abertura (igual ao .dg-eyebrow::before), desenhado inline */
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent))
		left center / 34px 1px no-repeat;
}

/* --- 3. Lista: pilha vertical, à esquerda, com numerais 01–04 ------------- */
.is-menu-open .wp-block-navigation__container {
	/* reforço contra o flex-end herdado (a var também é aplicada no ul) */
	align-items: flex-start !important;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 3svh, 1.7rem);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dg-nav;              /* numerais reiniciam a cada abertura */
	flex: 1 1 auto;                     /* preenche a altura -> o margin-top:auto do contato encosta no rodapé */
}

.is-menu-open .wp-block-navigation-item {
	width: 100%;
	counter-increment: dg-nav;
}

/* O link: linha flex (numeral + rótulo), alvo de toque >=44px, sem clipping */
.is-menu-open .wp-block-navigation-item__content {
	display: flex !important;
	align-items: baseline;
	gap: clamp(0.85rem, 3vw, 1.3rem);
	width: 100%;
	min-height: 44px;                   /* tap target acessível */
	padding: 0.3rem 0;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	white-space: normal;                /* nunca corta horizontalmente */
	overflow-wrap: anywhere;            /* palavras longas quebram em vez de estourar */
	transition: color 0.28s ease;
}

/* Numeral 01–04 em Poppins dourado, pequeno, tabular */
.is-menu-open .wp-block-navigation-item__content::before {
	content: counter(dg-nav, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
	transform: translateY(-0.2em);      /* alinha o numeral ao topo da serifa */
	transition: color 0.28s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Rótulo: Butler serif grande, sublinhado dourado que "desenha" da esquerda */
.is-menu-open .wp-block-navigation-item__label {
	position: relative;
	font-family: var(--wp--preset--font-family--display); /* Butler */
	font-weight: 500;
	font-size: clamp(1.85rem, 1.2rem + 4vw, 2.6rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: none;               /* derruba o uppercase de core/navigation (theme.json) */
	color: inherit;
}

.is-menu-open .wp-block-navigation-item__label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.1em;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--accent-3); /* dourado brilhante */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hover / foco / página atual: âmbar + fio cheio + numeral avança */
.is-menu-open .wp-block-navigation-item__content:hover,
.is-menu-open .wp-block-navigation-item__content:focus-visible,
.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2);
}
.is-menu-open .wp-block-navigation-item__content:hover::before,
.is-menu-open .wp-block-navigation-item__content:focus-visible::before,
.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before {
	color: var(--wp--preset--color--accent-2);
	transform: translateY(-0.2em) translateX(2px);
}
.is-menu-open .wp-block-navigation-item__content:hover .wp-block-navigation-item__label::after,
.is-menu-open .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label::after,
.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
	transform: scaleX(1);
}
.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: none;                      /* o realce é o fio + a cor, sem retângulo feio */
}

/* --- 4. Rodapé de contato CLICÁVEL (markup real .dg-nav-social) -----------
 * Renderizado a partir de links no header.html; empurrado para o fim do overlay.
 * (Pseudo-conteúdo CSS não pode ser clicável — por isso usamos markup.) */
.is-menu-open .dg-nav-social {
	width: 100%;
	margin-top: 0;                      /* itens sociais agrupados (só o gap do container entre eles) */
	counter-increment: none;            /* não entra na contagem 01–04 */
}
/* O PRIMEIRO item social (Instagram) = o social logo após um item normal.
 * (não usar :first-of-type — todos os itens são <li>, então :first-of-type seria o "Portfólio".) */
.is-menu-open .wp-block-navigation-item:not(.dg-nav-social) + .dg-nav-social {
	margin-top: auto;                   /* empurra o bloco social para o rodapé (container é flex:1) */
	padding-top: clamp(1.5rem, 4svh, 2.25rem);
	border-top: 1px solid var(--wp--preset--color--line);
}
.is-menu-open .dg-nav-social .wp-block-navigation-item__content {
	min-height: 30px;                   /* alvo de toque enxuto p/ links secundários (texto centrado) */
	align-items: center;                /* centra o texto na caixa -> sem sobra grande embaixo */
	padding: 0.15rem 0;                 /* derruba o 0.3rem dos itens grandes */
	font-family: var(--wp--preset--font-family--sans); /* Poppins */
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	transition: color 0.25s ease;
}
/* Segundo item social (e-mail) encosta no Instagram: anula a maior parte do gap de 20px da lista */
.is-menu-open .dg-nav-social + .dg-nav-social {
	margin-top: -0.75rem;
}
.is-menu-open .dg-nav-social .wp-block-navigation-item__content::before {
	content: none;                      /* sem numeral nos itens sociais */
}
.is-menu-open .dg-nav-social .wp-block-navigation-item__content .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
}
.is-menu-open .dg-nav-social .wp-block-navigation-item__content:hover,
.is-menu-open .dg-nav-social .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-2);
}
.is-menu-open .dg-nav-social .wp-block-navigation-item__label::after {
	display: none;                      /* sem o sublinhado grande dos itens principais */
}
/* Esconde os itens sociais do nav inline do desktop (só aparecem no overlay) */
.wp-block-navigation:not(.is-menu-open) .dg-nav-social {
	display: none;
}

/* --- 5. BOTÃO FECHAR (X nativo, recolorido) ------------------------------- */
.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(env(safe-area-inset-top, 0px) + clamp(1rem, 3.5svh, 1.75rem));
	right: clamp(1.25rem, 6vw, 3rem);
	width: 44px;                        /* alvo de toque */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast); /* svg herda via fill:currentColor */
	transition: color 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;                        /* core dá 24x24; ampliamos discretamente */
	height: 28px;
	fill: currentColor;
}
.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	color: var(--wp--preset--color--accent-2);
	transform: rotate(90deg);
}
.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* --- 6. HAMBÚRGER — ícone editorial de 3 linhas (larguras variadas) -------
 * Core renderiza um <svg> de 2 paths (2 barras) — exatamente o que o cliente
 * não gosta. Escondemos o svg e desenhamos 3 fios em ouro/marrom da marca.
 * FORA do escopo .is-menu-open de propósito: o botão só aparece no mobile. */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 44px;                        /* alvo de toque >=44px */
	height: 44px;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	/* linha do MEIO (média, ~76%) desenhada como background do próprio botão */
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 22px 2px;
	background-position: center center;
	background-repeat: no-repeat;
}
.wp-block-navigation__responsive-container-open svg {
	display: none !important;           /* remove as 2 barras default do core */
}
.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 50%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: width 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.3s ease;
}
.wp-block-navigation__responsive-container-open::before {  /* topo — larga (28px) */
	top: 13px;
	width: 28px;
	transform: translateX(-50%);
}
.wp-block-navigation__responsive-container-open::after {   /* base — curta (16px) */
	bottom: 13px;
	width: 16px;
	transform: translateX(-50%);
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
	color: var(--wp--preset--color--accent-2);
}
.wp-block-navigation__responsive-container-open:hover::after,
.wp-block-navigation__responsive-container-open:focus-visible::after {
	width: 28px;                        /* a linha curta cresce no hover — toque vivo */
}
.wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: 6px;
}

/* =========================================================
 * 7. ENTRADA — eyebrow + itens sobem em escada; contato em fade
 * ========================================================= */
@keyframes dg-nav-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.is-menu-open .wp-block-navigation__responsive-container-content::before {
	opacity: 0;
	animation: dg-nav-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
}
.is-menu-open .wp-block-navigation-item {
	opacity: 0;
	animation: dg-nav-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.12s; }
.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.19s; }
.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.26s; }
.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.33s; }
.is-menu-open .wp-block-navigation-item:nth-child(n+5) { animation-delay: 0.40s; }

/* Respeita "menos movimento": sem entrada, sem rotação, fio aparece estático */
@media (prefers-reduced-motion: reduce) {
	.is-menu-open .wp-block-navigation__responsive-container-content::before,
	.is-menu-open .wp-block-navigation-item {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.is-menu-open .wp-block-navigation-item__label::after {
		transition: none;
	}
	.is-menu-open .wp-block-navigation__responsive-container-close:hover,
	.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
		transform: none;
	}
}

/* =========================================================
 * PÁGINA INTERNA DO POST (Insights) — leitura editorial
 * Masthead centrado (eyebrow + título serifado + data), foto emoldurada e UMA
 * coluna de leitura: título e corpo dividem a MESMA esquerda. Isso corrige o
 * "degrau" do template antigo (H2 ocupava a coluna inteira de 1360px enquanto o
 * parágrafo, capado em 66ch + centrado pelo layout constrained, descolava à
 * direita). Aqui a coluna JÁ é a medida — nada centraliza o corpo por dentro.
 * ========================================================= */

/* Masthead, corpo e rodapé centrados como blocos; cada um com sua medida. */
.dg-single__head {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}
.dg-single__body,
.dg-single__nav {
	max-width: 40rem;            /* ~70ch — medida de leitura confortável */
	margin-inline: auto;
}

/* Título: serifa display contida (o template antigo deixava o H1 gigante). */
.dg-single__title {
	font-size: clamp(2.1rem, 1.45rem + 3vw, 3.3rem);
	margin: 0;
}

/* Data: meta delicada, versalete dourado-acastanhado espaçado sob o título. */
.dg-single__date {
	font-weight: 500;
}

/* Categorias = badges em pílula, quentes, na identidade da marca (creme + fio
 * dourado). Centradas no masthead. Post usa 'category'; case usa 'tipo_trabalho'.
 * Não pegam o sublinhado-fio global (não estão em p/li). */
.dg-single__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0;
}
.dg-single__cats a {
	display: inline-block;
	padding: 0.36em 0.95em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent-2);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		border-color var(--dg-dur) var(--dg-ease),
		background-color var(--dg-dur) var(--dg-ease),
		color var(--dg-dur) var(--dg-ease),
		transform var(--dg-dur-fast) var(--dg-ease-out);
}
.dg-single__cats a:hover,
.dg-single__cats a:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--honey);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-1px);
}

/* Foto destacada — respira além do texto, emoldurada como quadro na parede.
 * SEM proporção forçada (não corta nada): a imagem mantém o ratio natural, com
 * um TETO de altura para retrato/imagens grandes não dominarem a página. A
 * moldura (fio + sombra + cantos) vai na própria <img>, então abraça qualquer
 * formato em vez de criar uma caixa larga em volta de uma foto estreita. */
.dg-single__figure {
	max-width: 58rem;
	margin-inline: auto;
}
.dg-single__figure img {
	display: block;
	max-width: 100%;
	max-height: min(72vh, 720px);   /* teto: imagem alta encolhe (sem corte) e centraliza */
	width: auto;
	height: auto;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow: 0 22px 50px -34px rgba(42, 33, 18, 0.5);
}

/* Corpo: o texto preenche a coluna (a coluna é a medida) — anula o cap de 66ch
 * e a centralização do constrained, então H2 e parágrafo dividem a esquerda. */
.dg-single__body {
	text-align: left;
}
.dg-single__body .wp-block-post-content > p,
.dg-single__body .wp-block-post-content > ul,
.dg-single__body .wp-block-post-content > ol,
.dg-single__body .wp-block-post-content > blockquote {
	max-width: none;
}

/* Ritmo de artigo: leitura aberta + ar generoso acima dos subtítulos. */
.dg-single__body .wp-block-post-content {
	line-height: 1.75;
}
.dg-single__body .wp-block-post-content > * + * {
	margin-top: 1.2em;
}
.dg-single__body .wp-block-post-content > :is(h2, h3) {
	margin-top: 2.3em;
	line-height: 1.18;
	letter-spacing: -0.01em;
}
.dg-single__body .wp-block-post-content > :is(h2, h3) + * {
	margin-top: 0.5em;
}

/* Listas alinhadas à esquerda do texto, sem recuo nativo exagerado. */
.dg-single__body .wp-block-post-content :is(ul, ol) {
	padding-left: 1.15em;
}
.dg-single__body .wp-block-post-content li + li {
	margin-top: 0.4em;
}

/* Rodapé do artigo — dois links discretos (o sublinhado-fade global de `main a`
 * já cuida do hover); só damos a cor de base e zeramos margens dos parágrafos. */
.dg-single__nav {
	color: var(--wp--preset--color--muted);
}
.dg-single__nav p {
	margin: 0;
}

/* ---- Responsivo: foto encosta menos nas bordas e some a moldura forte ---- */
@media (max-width: 600px) {
	.dg-single__figure img {
		border-radius: 8px;
		box-shadow: 0 16px 36px -28px rgba(42, 33, 18, 0.5);
	}
	.dg-single__nav {
		gap: 0.4rem;
	}
}

/* =========================================================
 * Rodapé no mobile — colunas empilhadas (1 por linha)
 * No desktop são 3 colunas (marca / navegação / redes) com space-between.
 * No mobile o wrap deixava "Navegação" e "Redes" tortas — uma em cada canto
 * com um vão no meio. Abaixo de 600px viram coluna única, à esquerda.
 * ========================================================= */
@media (max-width: 600px) {
	.dg-footer-cols {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
	}
}

/* =========================================================
 * CAMADA DE INTERAÇÃO — hover / foco / ativo polidos e consistentes
 * Linguagem: Jakub (sutil, pronto p/ produção) + um toque de Jhey (deleite).
 * Anima só transform/opacity/cor/sombra (nunca layout); curva custom sempre.
 * ========================================================= */

/* --- Menu do desktop: fio dourado que cresce da esquerda no hover ---------
 * Só ≥600px — abaixo disso quem aparece é o overlay (com seu próprio realce). */
@media (min-width: 600px) {
	header .wp-block-navigation-item__content {
		position: relative;
	}
	header .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3px;
		height: 2px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--dg-dur) var(--dg-ease);
	}
	header .wp-block-navigation-item__content:hover::after,
	header .wp-block-navigation-item__content:focus-visible::after,
	header .current-menu-item > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}
}

/* --- Botões: feedback tátil ao pressionar (afunda de leve) ----------------
 * O hover (elevar -1px + inverter cor) já existe; aqui só o estado :active. */
.wp-block-button__link:active {
	transform: translateY(0) scale(0.97);
	transition-duration: var(--dg-dur-fast);
}

/* --- Cards (portfólio + carrossel) ganham o MESMO zoom de imagem do blog --
 * A moldura recorta o zoom; a imagem cresce devagar sob a elevação do card. */
.dg-cards .wp-block-post-featured-image,
.dg-swiper .wp-block-post-featured-image,
.dg-blog-card__img {
	overflow: hidden;
}
.dg-cards .wp-block-post-featured-image img,
.dg-swiper .wp-block-post-featured-image img {
	transition: transform var(--dg-dur-slow) var(--dg-ease);
}
.dg-cards .wp-block-post:hover .wp-block-post-featured-image img,
.dg-swiper .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.045);
}

/* --- "Ler texto →": o link inteiro avança de leve no hover (a seta já vem no
 * texto do bloco, então não acrescentamos outra — só damos movimento). -------- */
.wp-block-read-more {
	display: inline-block;
}
.wp-block-read-more:hover,
.wp-block-read-more:focus-visible {
	transform: translateX(3px);
}

/* --- Campos de formulário (Fluent Forms) — foco dourado suave ------------- */
.fluentform input:not([type="submit"]):not([type="button"]),
.fluentform textarea,
.fluentform select {
	transition:
		border-color var(--dg-dur) var(--dg-ease),
		box-shadow var(--dg-dur) var(--dg-ease),
		background-color var(--dg-dur) var(--dg-ease);
}
.fluentform input:not([type="submit"]):not([type="button"]):focus,
.fluentform textarea:focus,
.fluentform select:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 3px rgba(197, 144, 31, 0.16) !important;
	outline: none;
}

/* =========================================================
 * Movimento reduzido — respeita quem pediu menos animação.
 * Mantém transições de COR/sublinhado (seguras p/ vestibular);
 * remove só o deslocamento (elevação, zoom, seta, press).
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover,
	.wp-block-button__link:active,
	.dg-cards .wp-block-post:hover,
	.dg-swiper .wp-block-post:hover,
	.dg-blog-card:hover,
	.wp-block-columns .wp-block-column > .wp-block-group:hover {
		transform: none !important;
	}
	.dg-blog-card:hover .dg-blog-card__img img,
	.dg-cards .wp-block-post:hover .wp-block-post-featured-image img,
	.dg-swiper .wp-block-post:hover .wp-block-post-featured-image img {
		transform: none !important;
	}
	.wp-block-read-more:hover,
	.wp-block-read-more:focus-visible {
		transform: none !important;
	}
	/* Fios de sublinhado (header, conteúdo, rodapé, marca) aparecem direto, sem
	 * varredura; o realce de cor continua. Fecha a lacuna do menu do topo. */
	header .wp-block-navigation-item__content::after,
	main :is(p, li) a::after,
	footer :is(p, li) a::after,
	.wp-block-site-title a::after,
	.dg-blog-card .wp-block-read-more::after {
		transition: none !important;
	}
	/* Badges de categoria: sem micro-elevação (cor/borda continuam). */
	.dg-single__cats a:hover,
	.dg-single__cats a:focus-visible {
		transform: none !important;
	}
}