/**
 * Duarte Benetti — Blog
 * Identidade derivada da home (página 646) e do kit Elementor 351.
 *
 * Paleta REAL do site (extraída de _elementor_data/CSS gerado):
 *   Verde profundo (dominante) .... #043938
 *   Verde banner .................. #08413F
 *   Verde escuro alt .............. #063D3B / #07312E / #003435
 *   Verde marca (accent) .......... #186560   (hover #083B38)
 *   Verde sage secundário ......... #517D5A
 *   Texto ......................... #676767
 *   Claros ........................ #F5F5F5 / #F3F3F3 / #E9EEEC
 *   Branco ........................ #FFFFFF
 *
 * Dourado/bege: o site NÃO possui token dourado (só o #FFDB1D do kit, não usado
 * no visual atual). O dourado abaixo é introduzido para o blog conforme a
 * REFERÊNCIA enviada pelo cliente, harmonizado com o verde profundo. Ajustável
 * numa variável só (--db-gold).
 *
 * Tipografia:
 *   Sans .... Poppins (já auto-hospedada pelo Elementor em uploads/).
 *   Serif ... Playfair Display, self-hosted neste plugin (zero CDN),
 *             com fallback Georgia/serif do sistema.
 */

/* ---------------------------------------------------------------------------
 * Fontes self-hosted (Playfair Display, variável — cobre 400..900)
 * ------------------------------------------------------------------------- */
@font-face {
	font-family: 'DB Playfair';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url(../fonts/playfair-normal-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DB Playfair';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url(../fonts/playfair-normal-latinext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'DB Playfair';
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url(../fonts/playfair-italic-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DB Playfair';
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url(../fonts/playfair-italic-latinext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */
.db-home,
.db-page {
	--db-green-deep: #043938;
	--db-green-banner: #08413F;
	--db-green-darker: #063d3b;
	--db-green-darkest: #07312e;
	--db-green-brand: #186560;
	--db-green-sage: #517d5a;
	--db-gold: #c9a56a;
	--db-gold-soft: #e0c793;
	--db-ink: #1b2b29;
	--db-ink-soft: #5c6462;
	--db-paper: #ffffff;
	--db-paper-2: #f5f5f5;
	--db-line: rgba(20, 40, 38, 0.10);
	--db-on-green: #ffffff;
	--db-on-green-soft: rgba(255, 255, 255, 0.72);

	--db-serif: 'DB Playfair', Georgia, 'Times New Roman', serif;
	--db-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--db-wrap: 1200px;
	--db-radius: 18px;
	--db-radius-lg: 24px;
	--db-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}

/* ===========================================================================
 * SEÇÃO DA HOME — [db_blog_home]
 * ========================================================================= */
.db-home {
	background: linear-gradient(180deg, var(--db-green-banner) 0%, var(--db-green-deep) 45%, var(--db-green-darker) 100%);
	color: var(--db-on-green);
	font-family: var(--db-sans);
	padding: clamp(48px, 7vw, 96px) 20px clamp(56px, 8vw, 110px);
	-webkit-font-smoothing: antialiased;
}

.db-home *,
.db-page * {
	box-sizing: border-box;
}

.db-home__wrap {
	max-width: var(--db-wrap);
	margin: 0 auto;
}

/* Cabeçalho da seção */
.db-home__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: clamp(28px, 4vw, 46px);
	flex-wrap: wrap;
}

/* Ícone proporcional ao novo tamanho do título. */
.db-home__badge {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--db-gold-soft);
}

.db-home__badge svg {
	width: 22px;
	height: 22px;
}

/* Título da seção alinhado ao padrão do site (Poppins 600, title case, como o
   "Sobre Nós"), um pouco menor. Sem uppercase e com tracking praticamente
   neutro — em title case qualquer espaçamento extra já destoa. */
.db-home__title {
	margin: 0;
	font-family: var(--db-sans);
	font-weight: 600;
	/* 28px no desktop = mesmo tamanho do "Sobre Nós"; piso subido junto para
	   manter a proporção no mobile. */
	font-size: clamp(21px, 2.2vw, 28px);
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--db-on-green);
	line-height: 1.2;
}

.db-home__all {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--db-gold);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, transform 0.2s ease;
}

.db-home__all span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.db-home__all:hover {
	color: var(--db-gold-soft);
}

.db-home__all:hover span {
	transform: translateX(4px);
}

/* Grid 68 / 32 */
.db-home__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
	align-items: stretch;
}

.db-home__grid--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 920px;
}

/* Card destaque */
.db-feature {
	display: grid;
	grid-template-columns: 45% 1fr;
	background: var(--db-paper);
	border-radius: var(--db-radius-lg);
	overflow: hidden;
	box-shadow: var(--db-shadow);
	min-height: 340px;
}

.db-feature__media {
	display: block;
	position: relative;
	overflow: hidden;
}

.db-feature__body {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.6vw, 40px);
	gap: 14px;
}

.db-feature__cat {
	align-self: flex-start;
	font-family: var(--db-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--db-green-brand);
	background: rgba(24, 101, 96, 0.09);
	padding: 6px 12px;
	border-radius: 999px;
}

.db-feature__title {
	margin: 0;
	/* Poppins (fonte do site) — a serifada fica reservada aos títulos de
	   display (hero da home, hero do blog e título do post). */
	font-family: var(--db-sans);
	font-weight: 600;
	font-size: clamp(24px, 2.5vw, 34px);
	line-height: 1.3;
	color: var(--db-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.db-feature__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.db-feature__title a:hover {
	color: var(--db-green-brand);
}

.db-feature__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.66;
	color: var(--db-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.db-feature__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--db-line);
	flex-wrap: wrap;
}

.db-feature__meta {
	font-size: 13px;
	color: var(--db-ink-soft);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.db-feature__link {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--db-gold);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.db-feature__link span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.db-feature__link:hover {
	color: #a8823f;
}

.db-feature__link:hover span {
	transform: translateX(4px);
}

/* Coluna "Próximo no blog" */
.db-next {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.db-next__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--db-gold);
}

.db-next__card {
	position: relative;
	flex: 1 1 auto;
	border-radius: var(--db-radius-lg);
	overflow: hidden;
	box-shadow: var(--db-shadow);
	min-height: 300px;
}

.db-next__media {
	display: block;
	position: relative;
	height: 100%;
	min-height: 300px;
	color: inherit;
	text-decoration: none;
}

.db-next__media .db-media {
	height: 100%;
	min-height: 300px;
}

.db-next__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: linear-gradient(180deg, rgba(4, 57, 56, 0) 0%, rgba(3, 30, 29, 0.86) 78%);
}

.db-next__title {
	font-family: var(--db-sans);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.34;
	color: #fff;
}

.db-next__meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.82);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* ===========================================================================
 * MÍDIA (imagem real ou fallback da marca) — compartilhado
 * ========================================================================= */
.db-media {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 200px;
	background: var(--db-green-darker);
	overflow: hidden;
}

.db-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.db-media--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 120% at 20% 0%, rgba(81, 125, 90, 0.28) 0%, rgba(81, 125, 90, 0) 55%),
		linear-gradient(140deg, var(--db-green-brand) 0%, var(--db-green-deep) 55%, var(--db-green-darkest) 100%);
	color: rgba(255, 255, 255, 0.34);
}

.db-media__mark {
	width: 46%;
	max-width: 120px;
	height: auto;
}

/* ===========================================================================
 * PÁGINA (arquivo + single) — casca comum
 * ========================================================================= */
.db-page {
	font-family: var(--db-sans);
	color: var(--db-ink);
	background: var(--db-paper-2);
	-webkit-font-smoothing: antialiased;
}

.db-wrap {
	max-width: var(--db-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.db-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--db-gold);
	margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
 * Arquivo / listagem
 * ------------------------------------------------------------------------- */
/* Sem faixa verde: a listagem abre direto no conteúdo, com um H1 discreto
   sobre o fundo claro da página. O padding-top garante respiro abaixo do
   header (no desktop ele é uma faixa em fluxo de ~93px; no mobile o body já
   recebe padding-top da barra fixa de 62px). */
.db-archive__head {
	padding: clamp(30px, 4.5vw, 54px) 0 clamp(18px, 2.5vw, 26px);
}

.db-archive__h1 {
	margin: 0;
	font-family: var(--db-sans);
	font-weight: 600;
	font-size: clamp(20px, 2.1vw, 26px);
	line-height: 1.32;
	letter-spacing: 0.01em;
	color: var(--db-ink);
	max-width: 760px;
}

.db-archive__body {
	padding: clamp(32px, 4.5vw, 60px) 0 clamp(56px, 8vw, 100px);
}

.db-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.db-card {
	display: flex;
	flex-direction: column;
	background: var(--db-paper);
	border-radius: var(--db-radius);
	overflow: hidden;
	box-shadow: 0 18px 44px -30px rgba(4, 57, 56, 0.55);
	border: 1px solid rgba(4, 57, 56, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.db-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 60px -30px rgba(4, 57, 56, 0.6);
}

.db-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	position: relative;
	overflow: hidden;
}

.db-card__media .db-media {
	min-height: 0;
}

.db-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 26px;
	flex: 1 1 auto;
}

.db-card__cat {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--db-green-brand);
	background: rgba(24, 101, 96, 0.09);
	padding: 5px 11px;
	border-radius: 999px;
}

.db-card__title {
	margin: 0;
	font-family: var(--db-sans);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.34;
	color: var(--db-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.db-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.db-card__title a:hover {
	color: var(--db-green-brand);
}

.db-card__excerpt {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--db-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.db-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--db-line);
	flex-wrap: wrap;
}

.db-card__meta {
	font-size: 12.5px;
	color: var(--db-ink-soft);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.db-card__link {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--db-gold);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.db-card__link span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.db-card__link:hover {
	color: #a8823f;
}

.db-card__link:hover span {
	transform: translateX(3px);
}

.db-dot {
	opacity: 0.5;
}

/* Paginação */
.db-pagination {
	margin-top: clamp(40px, 5vw, 64px);
}

.db-pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.db-pagination .page-numbers li {
	margin: 0;
}

.db-pagination a.page-numbers,
.db-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: var(--db-ink);
	background: var(--db-paper);
	border: 1px solid rgba(4, 57, 56, 0.10);
	transition: all 0.2s ease;
}

.db-pagination a.page-numbers:hover {
	border-color: var(--db-green-brand);
	color: var(--db-green-brand);
}

.db-pagination .page-numbers.current {
	background: var(--db-green-deep);
	border-color: var(--db-green-deep);
	color: #fff;
}

/* Vazio */
.db-empty {
	text-align: center;
	max-width: 460px;
	margin: 0 auto;
	padding: 40px 20px 60px;
	color: var(--db-ink-soft);
}

.db-empty svg {
	width: 84px;
	height: 84px;
	color: var(--db-green-sage);
	opacity: 0.5;
	margin-bottom: 8px;
}

.db-empty h2 {
	font-family: var(--db-serif);
	font-weight: 600;
	font-size: 24px;
	color: var(--db-ink);
	margin: 0 0 8px;
}

.db-empty p {
	margin: 0;
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * Post individual
 * ------------------------------------------------------------------------- */
.db-single__hero {
	background: linear-gradient(180deg, var(--db-green-banner) 0%, var(--db-green-deep) 70%, var(--db-green-darker) 100%);
	color: var(--db-on-green);
	padding: clamp(52px, 7vw, 96px) 20px clamp(40px, 5vw, 72px);
}

.db-single__hero-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.db-single__crumb {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--db-on-green-soft);
	text-decoration: none;
	margin-bottom: 22px;
	transition: color 0.2s ease;
}

.db-single__crumb:hover {
	color: var(--db-gold);
}

.db-single__cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--db-gold);
	border: 1px solid rgba(201, 165, 106, 0.4);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.db-single__title {
	margin: 0;
	font-family: var(--db-serif);
	font-weight: 600;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.16;
	color: #fff;
}

.db-single__meta {
	margin-top: 22px;
	font-size: 13.5px;
	color: var(--db-on-green-soft);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	justify-content: center;
}

.db-single__author {
	font-weight: 600;
	color: #fff;
}

/* Imagem destacada, sobreposta ao hero */
.db-single__feature {
	max-width: 900px;
	margin: clamp(-56px, -5vw, -40px) auto 0;
	padding: 0 20px;
	position: relative;
	z-index: 2;
}

.db-single__feature-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--db-radius-lg);
	box-shadow: var(--db-shadow);
}

.db-single__hero--flat + .db-single__body {
	padding-top: clamp(40px, 5vw, 72px);
}

.db-single__body {
	padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 8vw, 100px);
}

.db-single__feature + .db-single__body {
	padding-top: clamp(36px, 4vw, 56px);
}

/* Corpo do texto — largura confortável ~780px */
.db-prose {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 20px;
	font-size: 17.5px;
	line-height: 1.78;
	color: #33403e;
}

.db-prose > * + * {
	margin-top: 1.35em;
}

.db-prose h2,
.db-prose h3,
.db-prose h4 {
	font-family: var(--db-serif);
	font-weight: 600;
	color: var(--db-ink);
	line-height: 1.28;
	margin-top: 1.8em;
}

.db-prose h2 {
	font-size: 30px;
}

.db-prose h3 {
	font-size: 24px;
}

.db-prose h4 {
	font-size: 20px;
}

.db-prose a {
	color: var(--db-green-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.db-prose a:hover {
	color: var(--db-gold);
}

.db-prose img,
.db-prose figure {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.db-prose figure {
	margin-left: 0;
	margin-right: 0;
}

.db-prose figcaption {
	font-size: 13.5px;
	color: var(--db-ink-soft);
	text-align: center;
	margin-top: 8px;
}

.db-prose blockquote {
	margin: 1.6em 0;
	padding: 6px 0 6px 26px;
	border-left: 3px solid var(--db-gold);
	font-family: var(--db-serif);
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	color: var(--db-ink);
}

.db-prose ul,
.db-prose ol {
	padding-left: 1.4em;
}

.db-prose li + li {
	margin-top: 0.5em;
}

.db-prose code {
	font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: rgba(4, 57, 56, 0.07);
	padding: 2px 6px;
	border-radius: 6px;
}

.db-prose pre {
	background: var(--db-green-darkest);
	color: #e9f3f1;
	padding: 20px 22px;
	border-radius: 14px;
	overflow-x: auto;
	font-size: 14.5px;
	line-height: 1.6;
}

.db-prose pre code {
	background: none;
	padding: 0;
}

.db-prose hr {
	border: none;
	border-top: 1px solid var(--db-line);
	margin: 2.2em 0;
}

/* Tags */
.db-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 2.4em 0 0;
}

.db-tags li {
	margin: 0;
}

.db-tags a {
	display: inline-block;
	font-size: 12.5px;
	color: var(--db-ink-soft);
	background: rgba(4, 57, 56, 0.06);
	padding: 6px 13px;
	border-radius: 999px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.db-tags a:hover {
	color: #fff;
	background: var(--db-green-brand);
}

/* Voltar */
.db-single__back {
	max-width: 780px;
	margin: clamp(36px, 4vw, 56px) auto 0;
	padding: 0 20px;
}

.db-backbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--db-green-deep);
	text-decoration: none;
	padding: 13px 24px;
	border-radius: 999px;
	border: 1px solid rgba(4, 57, 56, 0.18);
	transition: all 0.2s ease;
}

.db-backbtn:hover {
	background: var(--db-green-deep);
	color: #fff;
	border-color: var(--db-green-deep);
}

.db-pagelinks {
	margin-top: 2em;
	font-size: 14px;
	color: var(--db-ink-soft);
}

/* ===========================================================================
 * RESPONSIVO
 * ========================================================================= */
@media (max-width: 1024px) {
	.db-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	/* Home: colunas empilham, card destaque vira vertical */
	.db-home__grid,
	.db-home__grid--solo {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}

	.db-feature {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.db-feature__media {
		aspect-ratio: 16 / 9;
	}

	.db-feature__media .db-media {
		min-height: 0;
	}

	.db-next__card {
		min-height: 240px;
	}

	.db-next__media,
	.db-next__media .db-media {
		min-height: 240px;
	}
}

@media (max-width: 620px) {
	.db-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
	}

	.db-home__head {
		gap: 14px;
	}

	.db-home__all {
		flex-basis: 100%;
		margin-left: 0;
	}

	.db-feature__foot,
	.db-card__foot {
		align-items: flex-start;
	}

	.db-prose {
		font-size: 16.5px;
	}
}

/* ===========================================================================
 * BLINDAGEM CONTRA O CASCADE DO ELEMENTOR
 * ---------------------------------------------------------------------------
 * A seção da home é renderizada DENTRO do DOM do Elementor (widget de
 * shortcode). O kit global sobrescreve tipografia e cores de link, e a
 * otimização de lazy-load zera o background-image de descendentes de
 * containers ainda não revelados:
 *   .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded) * { background-image: none !important }
 * Portanto: fundo por background-COLOR (imune) + gradiente no ::before (o
 * seletor universal do Elementor não atinge pseudo-elementos), e !important
 * cirúrgico nas propriedades que colidem.
 * ========================================================================= */

/* Fundo da seção da home */
.db-home {
	position: relative;
	background-color: #063d3b !important;
	isolation: isolate;
}

.db-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, #08413f 0%, #043938 45%, #063d3b 100%);
}

.db-home > .db-home__wrap {
	position: relative;
	z-index: 1;
}

/* Fundos de mídia dentro da seção da home (também vítimas do lazy-nuke) */
.db-home .db-media--fallback {
	background-color: #0d4a44 !important;
}

.db-home .db-next__overlay {
	background-color: rgba(3, 30, 29, 0.55);
}

/* Regra de tipografia:
   - Serifada (Playfair) só nos títulos de DISPLAY — hero do blog, título do
     post e citações. O hero da home tem a sua própria regra.
   - Poppins (fonte do site) nos títulos de CARD, para casar com as seções do
     site. Precisa de !important porque o kit do Elementor força família,
     tamanho e peso em h1–h6. */
.db-single__title,
.db-empty h2,
.db-prose h2,
.db-prose h3,
.db-prose h4,
.db-prose blockquote {
	font-family: "DB Playfair", Georgia, "Times New Roman", serif !important;
}

/* Tamanho/peso dos headings e citação DENTRO do corpo do post. Mesmo
   mecanismo do kit: força h1–h6 (h2 = 48px/700, h3 = 38px/700) e também
   estiliza blockquote — sem !important, o subtítulo do post saía maior que os
   títulos de seção do site. Valores idênticos aos definidos acima (linha
   ~793), só blindados. */
.db-prose h2 {
	font-size: 30px !important;
	font-weight: 600 !important;
	line-height: 1.28 !important;
}

.db-prose h3 {
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.28 !important;
}

.db-prose h4 {
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.28 !important;
}

.db-prose blockquote {
	font-size: 21px !important;
	line-height: 1.5 !important;
}

.db-home .db-feature__title,
.db-home .db-feature__title a,
.db-home .db-next__title,
.db-card__title,
.db-card__title a {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Cor escura dos títulos sobre card branco (o kit tenta clarear/recolorir) */
.db-home .db-feature__title,
.db-home .db-feature__title a,
.db-card__title,
.db-card__title a {
	color: #1b2b29 !important;
}

.db-home .db-feature__title a:hover,
.db-card__title a:hover {
	color: #186560 !important;
}

/* Destaques em dourado (o kit força a cor de link primária #161B22) */
.db-home__all,
.db-feature__link,
.db-card__link,
.db-next__label,
.db-eyebrow,
.db-single__cat {
	color: #c9a56a !important;
}

.db-home__all:hover {
	color: #e0c793 !important;
}

.db-feature__link:hover,
.db-card__link:hover {
	color: #a8823f !important;
}

/* Chips de categoria em verde da marca */
.db-feature__cat,
.db-card__cat {
	color: #186560 !important;
}

/* Corpo do post: links em verde, hover dourado */
.db-prose a {
	color: #186560 !important;
}

.db-prose a:hover {
	color: #c9a56a !important;
}

/* Textos claros sobre os fundos verdes (o kit força a cor primária #161B22
   nos headings e a cor de texto #676767 nos parágrafos). */
.db-home .db-home__title,
.db-single__hero .db-single__title,
.db-single__hero .db-single__author,
.db-home .db-next__title {
	color: #ffffff !important;
}

.db-single__hero .db-single__meta,
.db-single__hero .db-single__meta span,
.db-single__hero .db-single__crumb {
	color: rgba(255, 255, 255, 0.74) !important;
}

.db-single__hero .db-single__author {
	color: #ffffff !important;
}

/* Meta e excerpt sobre card branco: manter o cinza legível do design. */
.db-home .db-feature__excerpt,
.db-card__excerpt {
	color: #5c6462 !important;
}

/* Escala dos títulos de card. O kit do Elementor força tamanho/peso em h1–h6
   (h2 = 48px/700, h3 = 38px/700), o que estourava os títulos dos cards e os
   truncava. Fixamos aqui a escala do design (referência de proporção: card do
   ramusvita, 19px/1.25/600). Spans não sofrem o override — por isso
   .db-next__title já vinha correto. */
.db-card__title,
.db-card__title a {
	font-size: 20px !important;
	line-height: 1.34 !important;
	font-weight: 600 !important;
}

.db-home .db-feature__title,
.db-home .db-feature__title a {
	font-size: clamp(22px, 2.2vw, 30px) !important;
	/* 1.3 dá respiro ao Poppins, que tem altura-x maior que a serifada. */
	line-height: 1.3 !important;
	font-weight: 600 !important;
}

.db-empty h2 {
	font-size: 24px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}

/* H1 da listagem: discreto. É um <h1>, então o kit do Elementor forçaria
   ~65px/700 — fixamos a escala do site. */
.db-archive .db-archive__h1 {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: clamp(20px, 2.1vw, 26px) !important;
	font-weight: 600 !important;
	line-height: 1.32 !important;
	letter-spacing: 0.01em !important;
	color: #1b2b29 !important;
	text-transform: none !important;
}

/* Título da seção ("Na Mídia") — também é um <h2>, então o kit forçava
   32px/700. Fixamos o padrão de seção do site: Poppins 600, title case,
   tracking neutro. O text-transform vai blindado porque a tipografia de
   "accent" do kit usa uppercase. */
.db-home .db-home__title {
	font-size: clamp(21px, 2.2vw, 28px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.2 !important;
	text-transform: none !important;
}

/* ===========================================================================
 * BARRA DE FILTROS DO BLOG (categorias)
 * ========================================================================= */
.db-filters {
	background: #f5f5f5;
	border-bottom: 1px solid rgba(4, 57, 56, 0.08);
	padding: 18px 0;
}

.db-filters__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.db-filters__label {
	font-family: var(--db-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5c6462;
	margin-right: 2px;
}

.db-filters__chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--db-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 16px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid rgba(4, 57, 56, 0.16);
	color: #1b2b29 !important;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.db-filters__chip:hover,
.db-filters__chip:focus {
	border-color: #186560;
	color: #186560 !important;
}

.db-filters__chip.is-active {
	background: #043938;
	border-color: #043938;
	color: #ffffff !important;
}

@media (max-width: 620px) {
	.db-filters {
		padding: 14px 0;
	}

	.db-filters__inner {
		gap: 8px;
	}

	.db-filters__chip {
		font-size: 12.5px;
		padding: 8px 14px;
	}
}

/* ===========================================================================
 * HERO DA HOME — [db_hero]
 * ---------------------------------------------------------------------------
 * Renderizado dentro de um container (index 0) que espelha as settings
 * espaciais do banner original (tuck -332 sob o header sticky + padding-top
 * que libera o header). O container é o 1º .e-con, então NÃO sofre o
 * lazy-nuke de background-image; ainda assim, a tipografia/cores do kit são
 * blindadas com !important.
 * ========================================================================= */
/* Oculta o banner original (container f03b683 da home). Só existe na 646;
   desativar o plugin remove esta regra e o banner original reaparece. */
.elementor-element-f03b683 {
	display: none !important;
}

/* Header: vidro fosco esverdeado — verde bem translúcido + blur forte (dá pra
   ver levemente o conteúdo desfocado atrás). Topo E sticky (mesmo elemento
   jkit, uma regra cobre os dois, sem piscar). O blur segura o contraste do
   menu claro ao rolar sobre conteúdo claro. */
[data-elementor-type="header"] .jkit-sticky-element--enabled,
.elementor-location-header .elementor-element-2fedd456,
[data-elementor-type="header"] > .elementor > .e-con.e-parent {
	background-color: rgba(8, 65, 63, 0.62) !important;
	-webkit-backdrop-filter: blur(11px);
	backdrop-filter: blur(11px);
}

/* Botão "Área do Cliente" em laranja âmbar (era branco). Mantém formato,
   tamanho e cantos (radius 20px); só troca a cor. Texto branco. */
[data-elementor-type="header"] .elementor-element-30252eda .elementor-button,
[data-elementor-type="header"] .elementor-element-30252eda .elementor-button:link,
[data-elementor-type="header"] .elementor-element-30252eda .elementor-button:visited {
	background-color: #e0822e !important;
	color: #ffffff !important;
	/* Um pouco menor para devolver largura ao menu (cor, texto branco e raio
	   de 20px preservados). */
	font-size: 13.5px !important;
	padding: 12px 17px !important;
}

[data-elementor-type="header"] .elementor-element-30252eda .elementor-button:hover,
[data-elementor-type="header"] .elementor-element-30252eda .elementor-button:focus {
	background-color: #c86f22 !important;
	color: #ffffff !important;
}

/* Logo Duarte Benetti (branco) reinserido no header. Ele vivia no banner
   original (agora oculto), então some com ele — repomos por CSS como primeiro
   item flex da linha do header (desktop 5275527e), empurrando o menu. */
.elementor-location-header .elementor-element-5275527e > .e-con-inner::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 116px;
	height: 54px;
	margin-right: 22px;
	background: url("https://duartebenetti.com.br/wp-content/uploads/2024/09/Duarte-Benetti-Logo-Branco-V.png") left center / contain no-repeat;
}

/* Menu do header em UMA linha: nowrap + espaçamento e fonte um pouco menores,
   usando a largura lateral disponível. Sem overflow. */
[data-elementor-type="header"] ul.elementor-nav-menu {
	flex-wrap: nowrap !important;
	white-space: nowrap;
}

/* O kit define a tipografia do widget de menu, entao o tamanho precisa de
   !important — sem ele os itens voltavam a 16px e o <ul> (747px) estourava a
   coluna dele (653px), passando por baixo do botao "Area do Cliente". */
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
	font-size: 13.5px !important;
	white-space: nowrap;
}

[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li {
	margin-right: 2px;
}

[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:last-child {
	margin-right: 0;
}

.db-hero {
	position: relative;
	width: 100%;
	/* O hero começa em y=0 e passa POR TRÁS do header translúcido: assim o
	   backdrop-filter tem o próprio hero (verde + foto) para desfocar — vidro
	   de verdade, sem a linha de corte que aparecia quando o header desfocava
	   o branco do body. O tuck é exatamente a altura do header (93px), não a
	   margem gigante antiga; quem afasta o conteúdo é o padding do __inner. */
	margin-top: -93px;
	min-height: 70vh;
	display: flex;
	align-items: stretch;
	background-color: #08413f;
	font-family: var(--db-sans, "Poppins", sans-serif);
	overflow: hidden;
}

/* Foto do prédio cobrindo TODO o hero (inclusive atrás do texto), com foco à
   direita — nada de metade esquerda em verde chapado. */
.db-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	z-index: 0;
}

.db-hero__photo-veil {
	position: absolute;
	inset: 0;
	/* Véu calibrado: presente na faixa do texto (0–~52%, onde ficam título,
	   subtítulo e botão) para dar contraste ao branco e ao dourado, caindo de
	   forma longa e contínua até transparente na direita — a foto do prédio
	   segue limpa onde fica o card, e ainda transparece levemente atrás do
	   texto (sem bloco sólido nem corte vertical). */
	background:
		linear-gradient(90deg, rgba(8, 65, 63, 0.92) 0%, rgba(8, 65, 63, 0.82) 28%, rgba(8, 65, 63, 0.62) 52%, rgba(8, 65, 63, 0.15) 78%, rgba(8, 65, 63, 0) 100%),
		linear-gradient(0deg, rgba(3, 30, 29, 0.1) 0%, rgba(3, 30, 29, 0) 30%);
}

.db-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	/* Como o hero passa por trás do header (93px), o conteúdo precisa começar
	   abaixo dele — padding-top livra o menu com respiro. Nada de margem
	   negativa no conteúdo (era o que cortava antes). */
	padding: clamp(118px, 15vh, 158px) clamp(20px, 4vw, 56px) clamp(40px, 6vh, 68px);
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

/* Coluna esquerda */
.db-hero__content {
	max-width: 620px;
}

.db-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #c9a56a;
}

.db-hero__eyebrow-dash {
	display: inline-block;
	width: 42px;
	height: 2px;
	background: #c9a56a;
	flex: 0 0 auto;
}

.db-hero__title {
	margin: 0 0 24px;
	font-family: var(--db-serif, "DB Playfair", Georgia, serif);
	font-weight: 600;
	color: #ffffff;
	line-height: 1.08;
	/* Min baixo o suficiente para não estourar em telas de 360px. */
	font-size: clamp(34px, 5vw, 72px);
	letter-spacing: -0.01em;
}

.db-hero__title-line {
	display: block;
}

.db-hero__accent {
	color: #c9a56a;
	font-style: italic;
	font-weight: 500;
}

.db-hero__subtitle {
	margin: 0 0 34px;
	max-width: 30em;
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* Botão outline dourado */
.db-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px 26px;
	border: 1.5px solid rgba(201, 165, 106, 0.85);
	border-radius: 10px;
	color: #c9a56a;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	background: rgba(201, 165, 106, 0.04);
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.db-hero__cta-icon {
	display: inline-flex;
}

.db-hero__cta-icon svg {
	width: 20px;
	height: 20px;
}

.db-hero__cta-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.db-hero__cta:hover {
	background: #c9a56a;
	border-color: #c9a56a;
	color: #06302e;
	transform: translateY(-1px);
}

.db-hero__cta:hover .db-hero__cta-arrow {
	transform: translateX(4px);
}

.db-hero__divider {
	display: block;
	height: 1px;
	margin-top: clamp(34px, 5vh, 54px);
	background: linear-gradient(90deg, rgba(201, 165, 106, 0.55) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0) 100%);
}

/* Coluna direita: card sobre a foto */
.db-hero__aside {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	height: 100%;
	min-height: 220px;
}

.db-hero__card {
	max-width: 360px;
	padding: 30px 32px;
	border-radius: 16px;
	background: rgba(3, 27, 26, 0.62);
	border: 1px solid rgba(201, 165, 106, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.65);
}

.db-hero__card-text {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.db-hero__card-text strong {
	color: #c9a56a;
	font-weight: 600;
}

/* Blindagem contra o kit (serifada/dourado/branco) */
.db-hero .db-hero__title {
	font-family: "DB Playfair", Georgia, "Times New Roman", serif !important;
	color: #ffffff !important;
}

.db-hero .db-hero__accent {
	color: #c9a56a !important;
}

.db-hero .db-hero__eyebrow {
	color: #c9a56a !important;
}

.db-hero .db-hero__cta {
	color: #c9a56a !important;
}

.db-hero .db-hero__cta:hover {
	color: #06302e !important;
}

.db-hero .db-hero__card-text {
	color: rgba(255, 255, 255, 0.86) !important;
}

.db-hero .db-hero__card-text strong {
	color: #c9a56a !important;
}

/* Responsivo: empilha, foto vira faixa de topo, card largura confortável */
@media (max-width: 900px) {
	.db-hero {
		flex-direction: column;
		min-height: auto;
		/* No mobile quem cuida do espaçamento é o header custom .db-mnav
		   (fixo, 62px) via padding-top no body — sem tuck aqui. */
		margin-top: 0;
	}

	.db-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		/* a faixa da foto já fica sob o header; o conteúdo não precisa do
		   padding-top grande do desktop. */
		padding-top: clamp(28px, 5vh, 44px);
		padding-bottom: clamp(32px, 6vh, 56px);
	}

	.db-hero__photo {
		position: relative;
		inset: auto;
		width: 100%;
		height: 200px;
		order: -1;
	}

	.db-hero__content {
		max-width: 100%;
	}

	.db-hero__cta {
		width: 100%;
		justify-content: center;
	}

	.db-hero__aside {
		justify-content: stretch;
		min-height: 0;
	}

	.db-hero__card {
		max-width: 100%;
	}
}