/*
Theme Name: 	Duplo D
Theme URI: 		http://www.nosdepinho.com.br
Author: 		Daniel Skroski
Author URI: 	http://www.nosdepinho.com.br
Description:	Duplo D Design e Desenvolvimento
Template:		betheme
Version: 		2.0.0
*/

/* Theme customization starts here
-------------------------------------------------------------- */


/* ==========================================================================
   DUPLO D 2026
   Paleta derivada da referencia do cliente: vermelho oxblood (H354 S70) e
   verde pinho/sage (H174-179, satura caindo conforme clareia), sobre
   neutros quentes. Poppins 600 nos titulos, 400 no corpo.
   Raio: 4px em controles, 8px em midia.
   Contraste: toda combinacao de texto abaixo foi medida e passa WCAG AA.
   ========================================================================== */

:root {
	--dd-red-900: #570F16;
	--dd-red-800: #71141D;
	--dd-red-700: #8B1824;
	--dd-red-600: #A51D2B;
	--dd-red-100: #FAE5E7;

	--dd-teal-950: #0C2727;
	--dd-teal-900: #123A39;
	--dd-teal-800: #1C4F4D;
	--dd-teal-700: #276360;
	--dd-teal-600: #327671;
	--dd-teal-400: #5AA09A;
	--dd-teal-300: #84B8B3;
	--dd-teal-100: #E8F3F1;

	--dd-ink: #2E2A2A;
	--dd-ink-2: #544D4D;
	--dd-ink-3: #726969;
	--dd-line: #E4DFDF;
	--dd-bg: #FCFCFC;
	--dd-surface: #FFFFFF;
	--dd-warm: #F3EFEF;
	--dd-on-dark: #EDE8E8;
	--dd-on-dark-2: #C6BFBF;
	--dd-rule-on-dark: rgba(255, 255, 255, .18);

	--dd-radius-control: 4px;
	--dd-radius-media: 8px;
}


/* ==========================================================================
   PARTE 1 . BASE DO SITE INTEIRO
   Vale para todas as 40 paginas, nao so para a home.
   ========================================================================== */

/* --- Foco visivel. O tema nao entrega um consistente. ------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--dd-teal-600);
	outline-offset: 2px;
	border-radius: var(--dd-radius-control);
}

::selection {
	background: var(--dd-red-800);
	color: #fff;
}

/* --- Links de conteudo: sublinhado legivel, nao colado na base ---------- */

.the_content_wrapper a:not(.button):not(.mfn-link):not(.image_frame),
.post-desc a:not(.button),
.column_attr a:not(.button):not(.dd-inline-link):not(.mfn-link) {
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

/* --- Piso de tamanho de fonte -------------------------------------------
   O BeTheme interpola sozinho as faixas responsivas e derruba o corpo para
   13px e h5/h6 para 13px no celular, abaixo do minimo legivel de 16px.
   Estes pisos valem para o site inteiro, nao so para a home. O seletor
   comeca em html so para ganhar da regra gerada pelo tema.
   ----------------------------------------------------------------------- */

@media (max-width: 959px) {

	html body,
	html .mfn-menu-item-megamenu {
		font-size: 16px;
		line-height: 1.65;
	}

	html h3,
	html .woocommerce ul.products li.product h3 {
		font-size: 1.25rem;
		line-height: 1.3;
	}

	html h4 {
		font-size: 1.125rem;
		line-height: 1.35;
	}

	html h5 {
		font-size: 1rem;
		line-height: 1.4;
	}

	html h6 {
		font-size: .9375rem;
		line-height: 1.45;
	}
}

/* --- Medida de leitura em texto corrido -------------------------------- */

.single-post .the_content_wrapper > p,
.single-post .the_content_wrapper > ul,
.single-post .the_content_wrapper > ol,
.page .the_content_wrapper > p {
	max-width: 68ch;
}

/* --- Controles de formulario: alvo de toque e raio consistentes -------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
	min-height: 48px;
	border-radius: var(--dd-radius-control);
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

textarea {
	min-height: 140px;
	padding-top: .8rem;
}

input[type="submit"],
button[type="submit"],
.button {
	min-height: 48px;
	border-radius: var(--dd-radius-control);
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	box-shadow: none;
}

/* --- Imagens e midia nunca estouram a coluna --------------------------- */

img,
video,
iframe,
table {
	max-width: 100%;
}

.the_content_wrapper table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
}

.the_content_wrapper th,
.the_content_wrapper td {
	border-bottom: 1px solid var(--dd-line);
	padding: .7rem .9rem;
	text-align: left;
}

/* --- Citacoes planas, sem caixa ---------------------------------------- */

blockquote {
	border-left: 3px solid var(--dd-teal-600);
	background: none;
	padding: .2rem 0 .2rem 1.4rem;
	margin: 1.8rem 0;
	font-style: normal;
}

/* --- Menu principal ---------------------------------------------------- */

#Top_bar #menu > ul > li > a {
	transition: color .18s ease;
}

#Top_bar #menu > ul > li.current-menu-item > a,
#Top_bar #menu > ul > li.current_page_item > a,
#Top_bar #menu > ul > li.current-menu-ancestor > a {
	color: var(--dd-teal-600);
}


/* --- Submenu e submenu do submenu: dois degraus -------------------------
   O BeTheme so aplica "font-size-menu" em "> li > a". O segundo e o
   terceiro nivel nao herdavam nada do menu, caiam no corpo da pagina e
   saiam a 17px: MAIORES que o primeiro nivel, que esta a 16px. A escala
   abaixo devolve a ordem. Padding e cor descem junto, para o degrau ser
   lido no ritmo vertical e na profundidade, nao so no tamanho da letra:

       nivel 1   16px . peso 500 . --dd-ink     (opcao do tema)
       nivel 2   15px . peso 400 . --dd-ink-2
       nivel 3   14px . peso 400 . --dd-ink-3

   14px e o piso. Abaixo disso contraria o piso de legibilidade declarado
   no topo deste arquivo. As tres cores foram medidas sobre branco e sobre
   o verde claro do hover: todas passam WCAG AA.
   ----------------------------------------------------------------------- */

/* A sombra falsa em PNG, legado do tema, atras da sombra de verdade.
   Vale nos dois formatos de menu. */

#Top_bar #menu ul li ul:not(.mfn-megamenu) {
	background-image: none;
}

/* Nivel 2 */

#Top_bar #menu ul li ul li a {
	font-size: 15px;
	line-height: 1.45;
	font-weight: 400;
	padding: 9px 18px;
	color: var(--dd-ink-2);
	border-bottom: 0;
}

/* Nivel 3: mais um degrau abaixo */

#Top_bar #menu ul li ul li ul li a {
	font-size: 14px;
	padding: 8px 18px;
	color: var(--dd-ink-3);
}

/* Hover e pagina atual, nos dois niveis */

#Top_bar #menu ul li ul li a:hover,
#Top_bar #menu ul li ul li.hover > a,
#Top_bar #menu ul li ul li.current-menu-item > a,
#Top_bar #menu ul li ul li.current-menu-ancestor > a {
	background: var(--dd-teal-100);
	color: var(--dd-teal-600);
}

/* A seta ">" de quem tem filhos. O tema prende em "top:11px", calibrado
   para o padding antigo; com o padding novo ela sai do eixo. */

#Top_bar #menu ul li ul li.submenu > a {
	padding-right: 28px;
}

#Top_bar #menu ul li ul li a .menu-arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-size: 11px;
	color: var(--dd-ink-3);
}


/* --- Geometria do menu suspenso, so acima de 1098px --------------------
   Abaixo disso o tema troca o menu suspenso por um painel empilhado, e
   la estas duas regras nao fazem sentido.

   O terceiro nivel abre colado no segundo: "left:100%" no lugar do
   "left:200px" do tema, que estava preso a largura do item. Assim a
   largura pode mudar sem abrir uma fresta entre os dois paineis - e uma
   fresta fecha o menu quando o ponteiro atravessa de um para o outro.
   ----------------------------------------------------------------------- */

@media only screen and (min-width: 1098px) {

	/* A caixa que flutua.

	   Sem "overflow:hidden": o terceiro nivel abre para FORA da caixa do
	   segundo, entao recortar a caixa apagava o terceiro nivel inteiro da
	   tela. Os cantos vem do raio nos links das pontas, que e como o
	   proprio BeTheme resolve isso no megamenu dele. */

	#Top_bar #menu ul li ul:not(.mfn-megamenu) {
		border-radius: var(--dd-radius-media);
		box-shadow: 0 6px 24px rgba(46, 42, 42, .1);
	}

	#Top_bar #menu ul li ul:not(.mfn-megamenu) > li:first-child > a {
		border-radius: var(--dd-radius-media) var(--dd-radius-media) 0 0;
	}

	#Top_bar #menu ul li ul:not(.mfn-megamenu) > li:last-child > a {
		border-radius: 0 0 var(--dd-radius-media) var(--dd-radius-media);
	}

	#Top_bar #menu ul li ul li ul {
		left: 100%;
		top: 0;
	}

	#Top_bar #menu ul li ul li ul:not(.mfn-megamenu) > li {
		width: 224px;
	}
}


/* --- Menu empilhado, ate 1097px ----------------------------------------
   Aqui o menu vira um painel unico, um nivel embaixo do outro. Num menu
   empilhado quem conta a profundidade e o recuo, nao o tamanho da letra
   - e como o proprio BeTheme faz no painel lateral dele.

   O primeiro nivel volta para 16px: a interpolacao responsiva do tema o
   derruba para 14px no tablet e 13px no celular, abaixo dos 15 e 16 que
   as proprias opcoes do tema pedem. Com 13px no primeiro nivel a escala
   se invertia de novo, agora contra os submenus. Mesmo motivo do piso de
   fonte declarado no topo deste arquivo.
   ----------------------------------------------------------------------- */

@media only screen and (max-width: 1097px) {

	#Top_bar #menu > ul > li > a {
		font-size: 16px;
	}

	#Top_bar #menu ul li ul li a {
		padding-left: 34px;
	}

	#Top_bar #menu ul li ul li ul li a {
		padding-left: 50px;
	}
}

/* --- Banda de titulo das paginas internas ------------------------------ */

#Subheader {
	background-color: var(--dd-warm);
}

#Subheader .title {
	color: var(--dd-ink);
}

#Subheader .breadcrumbs,
#Subheader .breadcrumbs a {
	color: var(--dd-ink-3);
}

#Subheader .breadcrumbs a:hover {
	color: var(--dd-teal-600);
}


/* ==========================================================================
   PARTE 1B . HERO DAS PAGINAS INTERNAS
   Substitui o #Subheader do tema. Quatro tratamentos com significado:
   fundo profundo = navegar (blog), claro = ler (artigo),
   teal = agir (contato), quente = institucional (demais paginas).
   ========================================================================== */

.dd-page-hero {
	padding: 3.25rem 0 3rem;
}

.dd-page-hero .dd-page-hero-inner {
	max-width: 62rem;
}

/* --- Migalhas ----------------------------------------------------------- */

.dd-hero-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .55rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: .8125rem;
	line-height: 1.4;
}

.dd-hero-crumbs li {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: 0;
}

.dd-hero-crumbs li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}

.dd-hero-crumbs a,
.dd-hero-crumbs [aria-current] {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.dd-hero-crumbs a:hover,
.dd-hero-crumbs a:focus-visible {
	border-bottom-color: currentColor;
}

.dd-hero-crumbs [aria-current] {
	opacity: .75;
}

/* --- Titulo e apoio ----------------------------------------------------- */

.dd-page-hero .dd-hero-title {
	font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -.015em;
	margin: 0 0 .9rem;
	padding: 0;
	max-width: 24ch;
}

.dd-page-hero .dd-hero-lead {
	font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
	line-height: 1.6;
	margin: 0 0 1.5rem;
	max-width: 60ch;
}

.dd-hero-meta {
	margin: 0;
}

.dd-hero-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .7rem;
	font-size: .875rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
}

.dd-hero-facts:last-child {
	margin-bottom: 0;
}

.dd-hero-sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .4;
	margin: 0 .35rem;
}

/* --- Etiqueta de categoria no artigo ------------------------------------ */

.dd-hero-kicker {
	margin: 0 0 .75rem;
}

.dd-hero-kicker a {
	display: inline-block;
	padding: .3rem .7rem;
	border-radius: var(--dd-radius-control);
	background: var(--dd-teal-600);
	color: #fff;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

.dd-hero-kicker a:hover,
.dd-hero-kicker a:focus-visible {
	background: var(--dd-teal-800);
	color: #fff;
}

/* --- Busca -------------------------------------------------------------- */

.dd-hero-search {
	margin: 0 0 1.4rem;
	max-width: 30rem;
}

.dd-hero-search-label {
	display: block;
	font-size: .8125rem;
	font-weight: 500;
	margin: 0 0 .4rem;
}

.dd-hero-search-row {
	display: flex;
	gap: .5rem;
}

.dd-page-hero .dd-hero-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 .9rem;
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius-control);
	background: #fff;
	color: var(--dd-ink);
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
}

.dd-page-hero .dd-hero-search input[type="search"]::placeholder {
	color: var(--dd-ink-3);
}

.dd-page-hero .dd-hero-search button {
	min-height: 48px;
	padding: 0 1.2rem;
	border: 0;
	border-radius: var(--dd-radius-control);
	background: var(--dd-red-800);
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .18s ease;
}

.dd-page-hero .dd-hero-search button:hover,
.dd-page-hero .dd-hero-search button:focus-visible {
	background: var(--dd-red-700);
}

/* --- Temas do blog ------------------------------------------------------ */

.dd-hero-topics {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .8rem;
}

.dd-hero-topics-label {
	font-size: .8125rem;
	font-weight: 500;
	opacity: .75;
}

.dd-hero-topics ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dd-hero-topics li {
	margin: 0;
	padding: 0;
}

.dd-hero-topics a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 40px;
	padding: 0 .8rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--dd-radius-control);
	font-size: .8125rem;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.dd-hero-topics a span {
	font-size: .6875rem;
	opacity: .7;
}

.dd-hero-topics a:hover,
.dd-hero-topics a:focus-visible,
.dd-hero-topics a.is-current {
	background: var(--dd-teal-400);
	border-color: var(--dd-teal-400);
	color: var(--dd-teal-950);
}

.dd-hero-topics a.is-current span,
.dd-hero-topics a:hover span {
	opacity: .8;
}

/* --- Canais de contato -------------------------------------------------- */

.dd-hero-channels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem 2rem;
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 1.4rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
}

.dd-hero-channels li {
	margin: 0;
	padding: 0;
}

.dd-hero-channel-label {
	display: block;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .72;
	margin-bottom: .3rem;
}

.dd-hero-channels a,
.dd-hero-channel-value {
	font-size: 1rem;
	line-height: 1.5;
}

.dd-hero-channels a {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* --- Acoes -------------------------------------------------------------- */

.dd-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
	margin: 0;
}

.dd-page-hero a.dd-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: var(--dd-radius-control);
	background: var(--dd-red-800);
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color .18s ease;
}

.dd-page-hero a.dd-hero-btn:hover,
.dd-page-hero a.dd-hero-btn:focus-visible {
	background: var(--dd-red-700);
	color: #fff;
}

.dd-page-hero a.dd-hero-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	text-decoration: underline;
	text-underline-offset: .22em;
}

/* --- Variante: arquivo do blog, fundo profundo --------------------------
   Este e o hero de "navegar": entrada do acervo. Carrega o campo de
   particulas (o mesmo da home) e, no desktop, divide em 3/5 + 2/5 para o
   titulo nao competir com a busca e os temas.
   ------------------------------------------------------------------------ */

.dd-page-hero--blog {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--dd-teal-950);
	color: var(--dd-on-dark-2);
	padding: 4rem 0 3.75rem;
}

/* Canvas decorativo injetado por duplod-hero-particles.php. */
.dd-page-hero--blog .dd-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* Veu diagonal: a coluna de texto fica sobre fundo solido e as particulas
   so aparecem de verdade do meio para a direita. Legibilidade primeiro. */
.dd-page-hero--blog::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg,
		var(--dd-teal-950) 18%,
		rgba(12, 39, 39, .74) 38%,
		rgba(12, 39, 39, .12) 76%,
		rgba(12, 39, 39, 0) 100%);
}

.dd-page-hero--blog > .container {
	position: relative;
	z-index: 2;
}

.dd-page-hero--blog .dd-hero-title {
	color: #fff;
	font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem);
	max-width: 18ch;
	margin-bottom: 1rem;
}

.dd-page-hero--blog .dd-hero-lead {
	color: var(--dd-on-dark-2);
	max-width: 46ch;
	margin-bottom: 0;
}

.dd-page-hero--blog .dd-hero-crumbs,
.dd-page-hero--blog .dd-hero-crumbs a,
.dd-page-hero--blog .dd-hero-topics a {
	color: var(--dd-teal-300);
}

/* Alvo de toque de 44px, o minimo das diretrizes. */
.dd-page-hero--blog .dd-hero-topics a {
	min-height: 44px;
}

/* A regra acima pinta o chip de teal-300 e, por vir depois no arquivo, ganhava
   da cor de estado no mesmo nivel de especificidade: o chip ativo ficava
   teal-300 sobre teal-400, 1.37:1. Reafirmado aqui dentro da variante. */
.dd-page-hero--blog .dd-hero-topics a:hover,
.dd-page-hero--blog .dd-hero-topics a:focus-visible,
.dd-page-hero--blog .dd-hero-topics a.is-current {
	color: var(--dd-teal-950);
}

.dd-page-hero--blog .dd-hero-topics a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.dd-page-hero--blog .dd-hero-facts {
	font-variant-numeric: tabular-nums;
	color: var(--dd-teal-300);
}

.dd-page-hero--blog .dd-hero-topics-label,
.dd-page-hero--blog .dd-hero-search-label {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dd-on-dark-2);
	opacity: 1;
}

@media (min-width: 62rem) {

	.dd-page-hero--blog {
		padding: 5rem 0 4.5rem;
	}

	.dd-page-hero--blog .dd-page-hero-inner {
		max-width: 72rem;
		display: grid;
		grid-template-columns: 3fr 2fr;
		column-gap: 3.5rem;
		align-items: start;
	}

	.dd-page-hero--blog .dd-hero-crumbs {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	/* Centrado contra a coluna da direita, que e mais alta. Alinhado ao topo
	   sobrava um vao morto embaixo do titulo. */
	.dd-page-hero--blog .dd-hero-head {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		padding-right: 1rem;
	}

	/* Busca e temas ganham coluna propria, separados por fio, em vez de
	   ficarem pendurados embaixo de um paragrafo de 60 caracteres. */
	.dd-page-hero--blog .dd-hero-meta {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		padding-left: 3.5rem;
		border-left: 1px solid var(--dd-rule-on-dark);
	}

	.dd-page-hero--blog .dd-hero-search {
		max-width: none;
	}
}

@media (max-width: 61.9375rem) {

	/* Empilhado: o paragrafo precisa do respiro que a grade dava. */
	.dd-page-hero--blog .dd-hero-lead {
		margin-bottom: 1.6rem;
	}

	/* Sem coluna de texto a proteger, o veu diagonal nao serve: as particulas
	   passam por tras de tudo. Aqui elas viram textura, nao desenho. */
	.dd-page-hero--blog::after {
		background: linear-gradient(180deg,
			rgba(12, 39, 39, .90) 0%,
			rgba(12, 39, 39, .84) 55%,
			rgba(12, 39, 39, .90) 100%);
	}

	/* O tema empilha o campo e o botao no mobile. Tudo bem, mas o input
	   carrega um margin-bottom de 20px do BeTheme que abre um vao. */
	.dd-page-hero--blog .dd-hero-search input[type="search"] {
		margin-bottom: 0;
		width: 100%;
	}

	.dd-page-hero--blog .dd-hero-search button {
		width: 100%;
	}
}

/* --- Variante: contato, fundo teal -------------------------------------- */

.dd-page-hero--contact {
	background-color: var(--dd-teal-700);
	color: #fff;
}

.dd-page-hero--contact .dd-hero-title,
.dd-page-hero--contact .dd-hero-lead,
.dd-page-hero--contact .dd-hero-crumbs,
.dd-page-hero--contact .dd-hero-crumbs a,
.dd-page-hero--contact .dd-hero-channels a {
	color: #fff;
}

.dd-page-hero--contact .dd-hero-lead {
	color: rgba(255, 255, 255, .92);
}

.dd-page-hero--contact a.dd-hero-btn {
	background: #fff;
	color: var(--dd-teal-800);
}

.dd-page-hero--contact a.dd-hero-btn:hover,
.dd-page-hero--contact a.dd-hero-btn:focus-visible {
	background: var(--dd-teal-100);
	color: var(--dd-teal-800);
}

/* --- Variantes claras: artigo, pagina, busca, 404 ----------------------- */

.dd-page-hero--post,
.dd-page-hero--page,
.dd-page-hero--search,
.dd-page-hero--notfound {
	background-color: var(--dd-warm);
	color: var(--dd-ink-2);
}

.dd-page-hero--post .dd-hero-title,
.dd-page-hero--page .dd-hero-title,
.dd-page-hero--search .dd-hero-title,
.dd-page-hero--notfound .dd-hero-title {
	color: var(--dd-ink);
}

.dd-page-hero--post .dd-hero-lead,
.dd-page-hero--page .dd-hero-lead,
.dd-page-hero--search .dd-hero-lead,
.dd-page-hero--notfound .dd-hero-lead {
	color: var(--dd-ink-2);
}

.dd-page-hero--post .dd-hero-crumbs,
.dd-page-hero--page .dd-hero-crumbs,
.dd-page-hero--search .dd-hero-crumbs,
.dd-page-hero--notfound .dd-hero-crumbs {
	color: var(--dd-ink-3);
}

.dd-page-hero--post .dd-hero-crumbs a,
.dd-page-hero--page .dd-hero-crumbs a,
.dd-page-hero--search .dd-hero-crumbs a,
.dd-page-hero--notfound .dd-hero-crumbs a {
	color: var(--dd-teal-600);
}

.dd-page-hero--post .dd-hero-facts {
	color: var(--dd-ink-3);
}

/* A pagina institucional ganha um filete vermelho, como a faixa da home. */
.dd-page-hero--page .dd-page-hero-inner {
	border-left: 3px solid var(--dd-red-800);
	padding-left: 1.6rem;
}

@media (max-width: 767px) {

	.dd-page-hero {
		padding: 2.25rem 0 2rem;
	}

	.dd-page-hero .dd-hero-title {
		max-width: none;
	}

	.dd-hero-search-row {
		flex-direction: column;
	}

	.dd-page-hero .dd-hero-search button {
		width: 100%;
	}

	.dd-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dd-page-hero a.dd-hero-btn {
		width: 100%;
	}

	.dd-page-hero--page .dd-page-hero-inner {
		padding-left: 1.1rem;
	}
}


/* ==========================================================================
   PARTE 2 . HOME
   Sequencia de fundos: profundo, claro, quente, claro, quente, claro,
   profundo, quente, claro, teal.
   Desde 2026-08-12 dois desses fundos carregam cenario gerado por IA: o
   hero (.dd-hero) e a chamada final (.dd-cta). Fundo com imagem exige veu
   proprio . ver 2.13 . senao o texto branco perde contraste sobre o pastel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Hero com campo de particulas
   -------------------------------------------------------------------------- */

.dd-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dd-hero .dd-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* Vela sobre as particulas do lado do texto, para o H1 nunca competir
   com a malha. As particulas ficam visiveis a direita. */
.dd-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg,
		#0C2727 0%,
		rgba(12, 39, 39, .94) 30%,
		rgba(12, 39, 39, .55) 58%,
		rgba(12, 39, 39, .1) 100%);
}

.dd-hero > .section_wrapper,
.dd-hero > .mcb-background-overlay {
	position: relative;
	z-index: 2;
}

.dd-hero .column_attr h1,
.dd-hero h1 {
	/* Calibrado para caber em duas linhas na coluna 3/5 do hero. */
	font-size: clamp(1.75rem, 1.25rem + 1.25vw, 2.5rem);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -.015em;
	color: #fff;
	margin: 0 0 1.25rem;
	padding: 0;
	max-width: none;
}

.dd-hero .column_attr .dd-lead,
.dd-hero .dd-lead {
	font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
	line-height: 1.62;
	font-weight: 400;
	color: var(--dd-on-dark-2);
	max-width: 52ch;
	margin: 0 0 1.75rem;
	padding: 0;
}

/* --------------------------------------------------------------------------
   2.2 Botoes
   Vermelho da marca sobre fundo claro. Sobre teal ou fundo profundo o
   botao vira branco com rotulo teal, que e o unico par que passa AA.
   -------------------------------------------------------------------------- */

.mfn-builder-content a.button.dd-btn,
a.button.dd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.6rem;
	border-radius: var(--dd-radius-control);
	border: 2px solid transparent;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	box-shadow: none;
	background-image: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mfn-builder-content a.button.dd-btn .button_label,
a.button.dd-btn .button_label {
	padding: 0;
	line-height: 1.2;
	color: inherit;
}

/* Os seletores das variantes repetem o prefixo .mfn-builder-content para
   empatar em especificidade com a regra base e vencer por ordem. */
.mfn-builder-content a.button.dd-btn-primary,
a.button.dd-btn-primary {
	background-color: var(--dd-red-800);
	border-color: var(--dd-red-800);
	color: #fff;
}

.mfn-builder-content a.button.dd-btn-primary:hover,
.mfn-builder-content a.button.dd-btn-primary:focus-visible,
a.button.dd-btn-primary:hover,
a.button.dd-btn-primary:focus-visible {
	background-color: var(--dd-red-700);
	border-color: var(--dd-red-700);
	color: #fff;
}

.mfn-builder-content a.button.dd-btn-ghost,
a.button.dd-btn-ghost {
	background-color: transparent;
	border-color: var(--dd-teal-600);
	color: var(--dd-teal-600);
}

.mfn-builder-content a.button.dd-btn-ghost:hover,
.mfn-builder-content a.button.dd-btn-ghost:focus-visible,
a.button.dd-btn-ghost:hover,
a.button.dd-btn-ghost:focus-visible {
	background-color: var(--dd-teal-600);
	border-color: var(--dd-teal-600);
	color: #fff;
}

/* Sobre fundo profundo ou teal */
.mfn-builder-content .dd-hero a.button.dd-btn-primary,
.dd-hero a.button.dd-btn-primary,
.mfn-builder-content a.button.dd-btn-onteal,
a.button.dd-btn-onteal {
	background-color: #fff;
	border-color: #fff;
	color: var(--dd-teal-800);
}

.mfn-builder-content .dd-hero a.button.dd-btn-primary:hover,
.mfn-builder-content .dd-hero a.button.dd-btn-primary:focus-visible,
.dd-hero a.button.dd-btn-primary:hover,
.dd-hero a.button.dd-btn-primary:focus-visible,
.mfn-builder-content a.button.dd-btn-onteal:hover,
.mfn-builder-content a.button.dd-btn-onteal:focus-visible,
a.button.dd-btn-onteal:hover,
a.button.dd-btn-onteal:focus-visible {
	background-color: var(--dd-teal-100);
	border-color: var(--dd-teal-100);
	color: var(--dd-teal-800);
}

.mfn-builder-content .dd-hero a.button.dd-btn-ghost,
.dd-hero a.button.dd-btn-ghost {
	background-color: transparent;
	border-color: var(--dd-teal-300);
	color: var(--dd-teal-300);
}

.mfn-builder-content .dd-hero a.button.dd-btn-ghost:hover,
.mfn-builder-content .dd-hero a.button.dd-btn-ghost:focus-visible,
.dd-hero a.button.dd-btn-ghost:hover,
.dd-hero a.button.dd-btn-ghost:focus-visible {
	background-color: var(--dd-teal-300);
	border-color: var(--dd-teal-300);
	color: var(--dd-teal-950);
}

.mfn-builder-content a.button.dd-btn:focus-visible,
a.button.dd-btn:focus-visible {
	outline: 3px solid var(--dd-teal-300);
	outline-offset: 3px;
}

.dd-hero .column_button .button_align {
	margin: 0 0 .75rem;
}

/* --------------------------------------------------------------------------
   2.3 Tipografia comum das secoes
   -------------------------------------------------------------------------- */

.dd-statement .column_attr,
.dd-services .column_attr,
.dd-ai .column_attr,
.dd-process .column_attr,
.dd-about .column_attr,
.dd-faq .column_attr,
.dd-blog .column_attr,
.dd-cta .column_attr {
	font-size: 1rem;
	line-height: 1.65;
}

.dd-services .column_attr h2,
.dd-ai .column_attr h2,
.dd-process .column_attr h2,
.dd-about .column_attr h2,
.dd-faq .column_attr h2,
.dd-blog .column_attr h2,
.dd-cta .column_attr h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.15vw, 2.125rem);
	line-height: 1.14;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--dd-ink);
	margin: 0 0 .85rem;
	padding: 0;
	max-width: 22ch;
}

.dd-services .column_attr p,
.dd-ai .column_attr p,
.dd-process .column_attr p,
.dd-about .column_attr p,
.dd-faq .column_attr p,
.dd-blog .column_attr p,
.dd-cta .column_attr p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--dd-ink-2);
	max-width: 62ch;
	margin: 0 0 1rem;
}

.dd-services .column_attr p:last-child,
.dd-ai .column_attr p:last-child,
.dd-process .column_attr p:last-child,
.dd-about .column_attr p:last-child,
.dd-faq .column_attr p:last-child,
.dd-blog .column_attr p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2.4 Faixa de posicionamento, agora sobre fundo quente com filete vermelho
   -------------------------------------------------------------------------- */

.dd-statement .column_attr {
	border-left: 3px solid var(--dd-red-800);
	padding-left: 1.8rem;
}

.dd-statement .column_attr h2 {
	font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.375rem);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -.012em;
	color: var(--dd-ink);
	margin: 0 0 1rem;
	padding: 0;
	max-width: 24ch;
}

.dd-statement .column_attr p {
	font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
	line-height: 1.62;
	color: var(--dd-ink-2);
	max-width: 64ch;
	margin: 0;
}

/* --------------------------------------------------------------------------
   2.5 Servicos. Linhas com filete, sem card.
   -------------------------------------------------------------------------- */

.dd-services .mcb-item-list-inner {
	padding: 0;
}

.dd-services .list_item {
	margin: 0;
	padding: 1.6rem 0;
	border-top: 1px solid var(--dd-line);
}

.dd-services .mcb-column:first-child .list_item {
	border-top: 0;
	padding-top: 0;
}

.dd-services .list_item a {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	color: inherit;
	text-decoration: none;
}

.dd-services .list_item .list_left {
	position: static;
	float: none;
	width: 2.25rem;
	min-width: 2.25rem;
	height: auto;
	margin: 0;
	padding: 0;
	line-height: 1;
	text-align: left;
	background: none;
	border: 0;
}

.dd-services .list_item .list_left i {
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--dd-teal-600);
	transition: color .18s ease;
}

.dd-services .list_item .list_right {
	padding: 0;
	margin: 0;
	min-height: 0;
}

.dd-services .list_item .list_right h3.title {
	font-size: 1.1875rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--dd-ink);
	margin: 0 0 .35rem;
	padding: 0;
	transition: color .18s ease;
}

.dd-services .list_item .list_right .desc,
.dd-services .list_item .list_right .desc p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dd-ink-2);
	margin: 0;
	max-width: 60ch;
}

.dd-services .list_item a:hover .list_right h3.title,
.dd-services .list_item a:focus-visible .list_right h3.title {
	color: var(--dd-teal-600);
}

.dd-services .list_item a:focus-visible {
	outline: 3px solid var(--dd-teal-600);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   2.6 Inteligencia Artificial. Grade 2x2 com filete no topo.
   -------------------------------------------------------------------------- */

.dd-ai .mcb-item-icon_box_2-inner {
	padding: 0;
}

.dd-ai .mfn-icon-box {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	border-top: 1px solid var(--dd-line);
	padding-top: 1.5rem;
	margin: 1.5rem 0 0;
}

.dd-ai .mfn-icon-box .icon-wrapper {
	width: 2.25rem;
	min-width: 2.25rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	line-height: 1;
}

.dd-ai .mfn-icon-box .icon-wrapper i {
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--dd-teal-600);
}

.dd-ai .mfn-icon-box .desc-wrapper {
	padding: 0;
	margin: 0;
}

.dd-ai .mfn-icon-box .desc-wrapper h3.title {
	font-size: 1.1875rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--dd-ink);
	margin: 0 0 .35rem;
	padding: 0;
}

.dd-ai .mfn-icon-box .desc-wrapper .desc,
.dd-ai .mfn-icon-box .desc-wrapper .desc p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dd-ink-2);
	margin: 0;
	max-width: 56ch;
}

.dd-ai > .section_wrapper > .mcb-wrap:first-child {
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   2.7 Processo
   -------------------------------------------------------------------------- */

.dd-process .how_it_works {
	padding: 1.5rem 0 0;
	border: 0;
	border-top: 2px solid var(--dd-teal-600);
	text-align: left;
	background: none;
}

.dd-process .how_it_works .image_wrapper {
	width: auto;
	height: auto;
	margin: 0 0 .6rem;
	background: none;
	border: 0;
	line-height: 1;
}

.dd-process .how_it_works .image_wrapper .image {
	display: none;
}

.dd-process .how_it_works .image_wrapper .number {
	position: static;
	display: block;
	width: auto;
	height: auto;
	font-family: "Poppins", sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--dd-teal-600);
	background: none;
	border: 0;
	border-radius: 0;
	text-align: left;
}

.dd-process .how_it_works h3.title {
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--dd-ink);
	margin: 0 0 .4rem;
	padding: 0;
	text-align: left;
}

.dd-process .how_it_works .desc,
.dd-process .how_it_works .desc p {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--dd-ink-2);
	margin: 0;
	text-align: left;
}

.dd-process > .section_wrapper > .mcb-wrap:first-child {
	margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   2.8 Sobre, sobre verde profundo
   -------------------------------------------------------------------------- */

.dd-about .column_attr h2 {
	color: #fff;
}

.dd-about .column_attr p {
	color: var(--dd-on-dark-2);
	max-width: 58ch;
}

.dd-about .column_attr a.dd-inline-link,
.dd-about .column_attr a {
	color: var(--dd-teal-300);
	text-decoration: underline;
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
}

.dd-about .column_attr a:hover,
.dd-about .column_attr a:focus-visible {
	color: #fff;
}

.dd-about .image_frame {
	border: 0;
	margin: 0;
	border-radius: var(--dd-radius-media);
	overflow: hidden;
}

.dd-about .image_frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   2.9 FAQ. Acordeao plano com filete.
   -------------------------------------------------------------------------- */

.dd-faq .faq {
	margin: 0;
}

.dd-faq .faq .mfn-acc .question {
	border: 0;
	border-top: 1px solid var(--dd-line);
	background: none;
	margin: 0;
	padding: 0;
}

.dd-faq .faq .mfn-acc .question:first-child {
	border-top: 0;
}

/* O BeTheme desenha uma faixa decorativa de 60px a esquerda de cada
   pergunta. Nao cabe no desenho plano desta home. */
.dd-faq .faq .mfn-acc .question::before,
.dd-faq .faq .mfn-acc .question::after {
	content: none;
	display: none;
}

.dd-faq .faq .mfn-acc .question:focus-visible {
	outline: 3px solid var(--dd-teal-600);
	outline-offset: 2px;
}

.dd-faq .faq .mfn-acc .question .title {
	position: relative;
	display: block;
	padding: 1.25rem 2.5rem 1.25rem 0;
	font-family: "Poppins", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.4;
	font-weight: 500;
	color: var(--dd-ink);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .18s ease;
}

.dd-faq .faq .mfn-acc .question .title:hover,
.dd-faq .faq .mfn-acc .question:focus-visible .title {
	color: var(--dd-teal-600);
}

.dd-faq .faq .mfn-acc .question .title .num {
	display: none;
}

.dd-faq .faq .mfn-acc .question .title i {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 1rem;
	color: var(--dd-teal-600);
}

.dd-faq .faq .mfn-acc .question .answer {
	padding: 0 2.5rem 1.4rem 0;
	background: none;
	border: 0;
}

.dd-faq .faq .mfn-acc .question .answer p {
	font-size: 1rem;
	line-height: 1.68;
	color: var(--dd-ink-2);
	margin: 0 0 .8rem;
	max-width: 68ch;
}

.dd-faq .faq .mfn-acc .question .answer p:last-child {
	margin-bottom: 0;
}

.dd-faq .faq .mfn-acc .question .answer a {
	color: var(--dd-teal-600);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* --------------------------------------------------------------------------
   2.10 Blog
   -------------------------------------------------------------------------- */

.dd-blog > .section_wrapper > .mcb-wrap:first-child {
	margin-bottom: 1.75rem;
}

.dd-blog .posts_group.grid .post-item {
	border: 0;
	box-shadow: none;
	background: none;
}

.dd-blog .posts_group.grid .post-item .image_frame {
	border: 0;
	border-radius: var(--dd-radius-media);
	overflow: hidden;
	margin-bottom: .9rem;
}

.dd-blog .post-item .post-desc-wrapper .post-desc {
	padding: 0;
}

.dd-blog .post-item h3.entry-title,
.dd-blog .post-item .post-title h3 {
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 600;
	margin: 0 0 .5rem;
}

.dd-blog .post-item h3 a {
	color: var(--dd-ink);
}

.dd-blog .post-item h3 a:hover,
.dd-blog .post-item h3 a:focus-visible {
	color: var(--dd-teal-600);
}

.dd-blog .post-item .post-excerpt,
.dd-blog .post-item .post-excerpt p {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--dd-ink-2);
}

.dd-blog .post-item .post-meta,
.dd-blog .post-item .date_label {
	font-size: .8125rem;
	color: var(--dd-ink-3);
}

/* --------------------------------------------------------------------------
   2.11 Chamada final sobre teal
   -------------------------------------------------------------------------- */

.dd-cta .column_attr h2 {
	color: #fff;
	max-width: 20ch;
}

.dd-cta .column_attr p {
	color: rgba(255, 255, 255, .92);
	max-width: 56ch;
}

.dd-cta .column_attr p.dd-cta-alt {
	margin: .9rem 0 0;
	font-size: .9375rem;
}

.dd-cta .column_attr a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .22em;
}

.dd-cta .column_attr a:hover,
.dd-cta .column_attr a:focus-visible {
	color: var(--dd-teal-100);
}

/* --------------------------------------------------------------------------
   2.12 Alvos de toque dos links de texto isolados
   -------------------------------------------------------------------------- */

.dd-about .column_attr a.dd-inline-link,
.dd-cta .column_attr p.dd-cta-alt a,
.dd-blog .post-item .post-more a,
.dd-blog .post-item a.button-love,
.dd-blog .post-item .post-footer a {
	display: inline-block;
	padding-top: .7rem;
	padding-bottom: .7rem;
}

.dd-about .column_attr a.dd-inline-link {
	margin-right: 1.5rem;
}

.dd-about .column_attr a.dd-inline-link + a.dd-inline-link {
	margin-left: 0;
}


/* ==========================================================================
   PARTE 3 . RODAPE
   ========================================================================== */

/* A home ja termina com a propria chamada. Repetir a faixa do rodape logo
   embaixo seria o mesmo CTA duas vezes seguidas. */
.home .footer_action {
	display: none;
}

/* O BeTheme pinta .footer_action com um overlay proprio e forca a cor dos
   links do rodape. Prefixo #Footer para ganhar dessas regras. */
#Footer .footer_action,
.footer_action {
	background-color: var(--dd-teal-900);
	background-image: none;
	border-bottom: 1px solid var(--dd-rule-on-dark);
	padding: 3rem 0;
}

#Footer .dd-foot-cta h3,
#Footer .dd-foot-partner h3,
.dd-foot-cta h3,
.dd-foot-partner h3 {
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
	margin: 0 0 .5rem;
	padding: 0;
}

.dd-foot-cta p,
.dd-foot-partner p {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--dd-on-dark-2);
	margin: 0 0 1.1rem;
	max-width: 42ch;
}

#Footer a.dd-foot-wa,
a.dd-foot-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: var(--dd-radius-control);
	background-color: #fff;
	color: var(--dd-teal-800);
	font-weight: 500;
	transition: background-color .18s ease;
}

#Footer .dd-foot-cta p,
#Footer .dd-foot-partner p {
	color: var(--dd-on-dark-2);
}

#Footer a.dd-foot-wa:hover,
#Footer a.dd-foot-wa:focus-visible,
a.dd-foot-wa:hover,
a.dd-foot-wa:focus-visible {
	background-color: var(--dd-teal-100);
	color: var(--dd-teal-800);
}

#Footer p.dd-foot-phone,
p.dd-foot-phone {
	margin: .8rem 0 0;
	font-size: .9375rem;
	color: var(--dd-teal-300);
}

.dd-foot-badge img {
	border-radius: var(--dd-radius-media);
	max-width: 150px;
	height: auto;
}

#Footer .widgets_wrapper a:hover,
#Footer .footer_copy a:hover {
	color: var(--dd-teal-300);
}


/* ==========================================================================
   PARTE 4 . RESPONSIVO
   ========================================================================== */

@media (max-width: 959px) {

	/* Empilhada, a imagem ocupa a largura toda e engole a tela. */
	.dd-about .image_frame {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	.dd-hero::after {
		background: linear-gradient(170deg,
			#0C2727 0%,
			rgba(12, 39, 39, .92) 46%,
			rgba(12, 39, 39, .6) 78%,
			rgba(12, 39, 39, .25) 100%);
	}

	.dd-about .mcb-wrap:first-child {
		margin-bottom: 1.75rem;
	}

	.dd-services .mcb-wrap:first-child,
	.dd-faq .mcb-wrap:first-child {
		margin-bottom: 1.5rem;
	}

	.dd-cta .mcb-wrap:first-child {
		margin-bottom: 1.5rem;
	}

	.dd-statement .column_attr,
	.dd-services .column_attr h2,
	.dd-ai .column_attr h2,
	.dd-process .column_attr h2,
	.dd-about .column_attr h2,
	.dd-faq .column_attr h2,
	.dd-blog .column_attr h2,
	.dd-cta .column_attr h2 {
		max-width: none;
	}

	.dd-statement .column_attr {
		padding-left: 1.2rem;
	}

	/* No tablet, tres cards de post ficam estreitos demais. */
	.dd-blog .posts_group.grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 1.75rem;
	}

	.dd-blog .posts_group.grid .post-item {
		float: none;
		width: auto;
		margin: 0;
	}

	.dd-foot-partner {
		margin-top: 2rem;
	}
}

@media (max-width: 767px) {

	.dd-hero .column_button {
		margin-bottom: 0;
	}

	.dd-hero .column_button .button_align {
		margin-bottom: .6rem;
	}

	.mfn-builder-content a.button.dd-btn,
	a.button.dd-btn,
	a.dd-foot-wa {
		width: 100%;
	}

	.dd-blog .posts_group.grid {
		grid-template-columns: 1fr;
	}

	.dd-process .how_it_works {
		padding-top: 1.15rem;
	}

	.dd-process .mcb-column + .mcb-column .how_it_works {
		margin-top: 1.15rem;
	}

	.dd-faq .faq .mfn-acc .question .title {
		padding-right: 2rem;
		font-size: 1rem;
	}

	.dd-services .list_item .list_right .desc,
	.dd-services .list_item .list_right .desc p,
	.dd-ai .mfn-icon-box .desc-wrapper .desc,
	.dd-ai .mfn-icon-box .desc-wrapper .desc p {
		max-width: none;
	}
}


/* ==========================================================================
   PARTE 5 . MOVIMENTO REDUZIDO
   O campo de particulas para sozinho pelo JS. Aqui zeramos o resto.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   PARTE 6 . ARQUIVO DO BLOG, LAYOUT CLASSICO
   O tema entrega o classico em duas colunas com icones de lupa e link
   sobrepostos na imagem. Aqui vira uma lista horizontal de leitura:
   imagem a esquerda, texto a direita, uma por linha.
   ========================================================================== */

.blog_wrapper .posts_group.classic {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.blog_wrapper .posts_group.classic .post-item {
	display: grid;
	/* Colocacao explicita: o tema poe .date_label como filho direto do
	   article, entao sem isto a data ocupa a primeira celula do grid e
	   empurra imagem e texto para os lugares errados. */
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 1.75rem;
	row-gap: .3rem;
	align-items: start;
	float: none;
	width: auto;
	margin: 0;
	padding: 2rem 0;
	border: 0;
	border-top: 1px solid var(--dd-line);
	background: none;
	box-shadow: none;
}

.blog_wrapper .posts_group.classic .post-item:first-child {
	border-top: 0;
	padding-top: .5rem;
}

/* Imagem: sem moldura, sem icones sobrepostos. */
.blog_wrapper .posts_group.classic .post-item .image_frame {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
	border: 0;
	border-radius: var(--dd-radius-media);
	overflow: hidden;
}

.blog_wrapper .posts_group.classic .post-item .image_frame .image_links,
.blog_wrapper .posts_group.classic .post-item .image_frame .mask {
	display: none;
}

/* O script scale-with-grid do tema grava uma largura fixa em linha no
   .image_frame, calculada para o layout antigo de duas colunas. Aqui a
   celula do grid manda, entao a cadeia inteira volta para 100%. O
   !important e por causa do estilo inline do proprio tema. */
.blog_wrapper .posts_group.classic .post-item .image_frame,
.blog_wrapper .posts_group.classic .post-item .image_frame .image_wrapper,
.blog_wrapper .posts_group.classic .post-item .image_frame .image_wrapper > a {
	width: 100% !important;
	max-width: 100%;
	display: block;
}

.blog_wrapper .posts_group.classic .post-item .image_frame img {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.blog_wrapper .posts_group.classic .post-item:hover .image_frame img {
	transform: scale(1.03);
}

/* Data: vira etiqueta discreta, nao um selo sobre a foto. */
.blog_wrapper .posts_group.classic .post-item .date_label {
	grid-column: 2;
	grid-row: 1;
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 0 .5rem;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--dd-ink-3);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}

.blog_wrapper .posts_group.classic .post-item .post-desc-wrapper {
	grid-column: 2;
	grid-row: 2;
	background: none;
	border: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

.blog_wrapper .posts_group.classic .post-item .post-desc {
	padding: 0;
	background: none;
}

.blog_wrapper .posts_group.classic .post-item .post-head {
	display: none;
}

.blog_wrapper .posts_group.classic .post-item h2.entry-title {
	font-size: clamp(1.125rem, 1rem + .5vw, 1.4375rem);
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 .6rem;
	padding: 0;
	max-width: 34ch;
}

.blog_wrapper .posts_group.classic .post-item h2.entry-title a {
	color: var(--dd-ink);
	background-image: linear-gradient(var(--dd-teal-600), var(--dd-teal-600));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s ease, color .2s ease;
}

.blog_wrapper .posts_group.classic .post-item h2.entry-title a:hover,
.blog_wrapper .posts_group.classic .post-item h2.entry-title a:focus-visible {
	color: var(--dd-teal-600);
	background-size: 100% 1px;
}

.blog_wrapper .posts_group.classic .post-item .post-excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dd-ink-2);
	margin: 0 0 1rem;
	max-width: 62ch;
}

.blog_wrapper .posts_group.classic .post-item .post-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.blog_wrapper .posts_group.classic .post-item .post-links {
	margin: 0;
	padding: 0;
	border: 0;
}

.blog_wrapper .posts_group.classic .post-item a.post-more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 40px;
	color: var(--dd-teal-600);
	font-weight: 500;
	text-decoration: none;
}

.blog_wrapper .posts_group.classic .post-item a.post-more::after {
	content: "\2192";
	transition: transform .25s ease;
}

.blog_wrapper .posts_group.classic .post-item a.post-more:hover::after,
.blog_wrapper .posts_group.classic .post-item a.post-more:focus-visible::after {
	transform: translateX(3px);
}

.blog_wrapper .posts_group.classic .post-item .read-more-icon {
	display: none;
}

.blog_wrapper .posts_group.classic .post-item .button-love {
	margin: 0;
}

.blog_wrapper .posts_group.classic .post-item .button-love a,
.blog_wrapper .posts_group.classic .post-item .button-love span {
	color: var(--dd-ink-3);
	font-size: .875rem;
}

/* Paginacao na paleta da marca. */
.pager .pages a,
.pager .pages span {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--dd-radius-control);
	border: 1px solid var(--dd-line);
	color: var(--dd-ink-2);
	font-weight: 500;
	background: none;
}

.pager .pages a:hover,
.pager .pages a:focus-visible {
	border-color: var(--dd-teal-600);
	color: var(--dd-teal-600);
}

.pager .pages .current {
	background: var(--dd-red-800);
	border-color: var(--dd-red-800);
	color: #fff;
}

@media (max-width: 767px) {

	.blog_wrapper .posts_group.classic .post-item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: .75rem;
		padding: 1.6rem 0;
	}

	.blog_wrapper .posts_group.classic .post-item .image_frame {
		grid-column: 1;
		grid-row: 1;
	}

	.blog_wrapper .posts_group.classic .post-item .date_label {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
	}

	.blog_wrapper .posts_group.classic .post-item .post-desc-wrapper {
		grid-column: 1;
		grid-row: 3;
	}

	.blog_wrapper .posts_group.classic .post-item .image_frame img {
		aspect-ratio: 16 / 9;
	}

	.blog_wrapper .posts_group.classic .post-item h2.entry-title,
	.blog_wrapper .posts_group.classic .post-item .post-excerpt {
		max-width: none;
	}
}


/* ==========================================================================
   PARTE 7 . MOVIMENTO NO SCROLL
   Feito com animation-timeline, o recurso nativo de animação por rolagem.
   Roda na thread de composicao, nao no JavaScript: nenhum listener de
   scroll, nenhuma biblioteca, custo praticamente zero.
   Tudo dentro de @supports: onde o navegador nao suporta, o conteudo
   simplesmente aparece normal, sem nada quebrado e sem fallback em JS.
   Tudo dentro de prefers-reduced-motion: no-preference.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		/* Revelacao. Regra de ouro: nada que possa estar visivel no
		   carregamento entra aqui, senao nasce translucido. Por isso os
		   heroes ficam de fora e a lista de posts comeca no segundo item. */
		.home .mcb-section:not(:first-child),
		#Content .mcb-section:not(:first-child),
		.blog_wrapper .posts_group.classic .post-item:nth-child(n+2),
		.single-post .the_content_wrapper > *:nth-child(n+3) {
			animation: dd-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}

		@keyframes dd-rise {
			from {
				opacity: 0;
				transform: translateY(22px);
			}
			to {
				opacity: 1;
				transform: none;
			}
		}

		/* Profundidade sutil nas imagens grandes: a foto se move um pouco
		   mais devagar que a pagina enquanto atravessa a tela. */
		.dd-about .image_frame img,
		.single-post .the_content_wrapper > .image_frame img {
			animation: dd-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
			will-change: transform;
		}

		@keyframes dd-drift {
			from {
				transform: translateY(-2.2%) scale(1.06);
			}
			to {
				transform: translateY(2.2%) scale(1.06);
			}
		}

		/* Barra de progresso de leitura no artigo. */
		.dd-read-progress {
			animation: dd-progress linear both;
			animation-timeline: scroll(root block);
		}

		@keyframes dd-progress {
			from {
				transform: scaleX(0);
			}
			to {
				transform: scaleX(1);
			}
		}
	}
}

/* A barra existe mesmo sem suporte a scroll timeline: fica so em 0
   e nao atrapalha nada. */
.dd-read-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 3px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--dd-red-800), var(--dd-teal-600));
	pointer-events: none;
}


/* ==========================================================================
   PARTE 8 . CASES DE IA NO PORTFOLIO
   ========================================================================== */

.dd-case-vetbots .column_attr p.dd-case-kicker {
	color: var(--dd-teal-300);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: -.4rem 0 1.1rem;
}

.dd-case-vetbots .column_attr h2 {
	margin-bottom: .5rem;
}

/* A lista de capacidades do case fica sobre fundo profundo. */
.dd-case-vetbots .list_item {
	margin: 0;
	padding: 1.4rem 0;
	border-top: 1px solid var(--dd-rule-on-dark);
}

.dd-case-vetbots .mcb-column:first-child .list_item {
	border-top: 0;
	padding-top: 0;
}

.dd-case-vetbots .list_item .list_left {
	position: static;
	float: none;
	width: 2.25rem;
	min-width: 2.25rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	line-height: 1;
}

.dd-case-vetbots .list_item .list_left i {
	font-size: 1.4rem;
	color: var(--dd-teal-300);
}

.dd-case-vetbots .list_item a,
.dd-case-vetbots .list_item .list_item_wrapper {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
}

.dd-case-vetbots .list_item .list_right {
	padding: 0;
	margin: 0;
	min-height: 0;
}

.dd-case-vetbots .list_item .list_right h3.title {
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
	margin: 0 0 .3rem;
	padding: 0;
}

.dd-case-vetbots .list_item .list_right .desc,
.dd-case-vetbots .list_item .list_right .desc p {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--dd-on-dark-2);
	margin: 0;
}

/* Filtros do grid legado na paleta da marca. */
.dd-portfolio-legado .filters_wrapper ul li a {
	border-radius: var(--dd-radius-control);
	color: var(--dd-ink-2);
}

.dd-portfolio-legado .filters_wrapper ul li.current-cat a,
.dd-portfolio-legado .filters_wrapper ul li a:hover {
	color: var(--dd-teal-600);
}

/* --------------------------------------------------------------------------
   2.13 Cenarios e personagens gerados por IA
   Seis imagens entraram na narrativa da home em 2026-08-12. Duas regras
   valem para todas: fundo com imagem carrega veu proprio, e imagem ao lado
   de texto nunca compete com ele.
   Os prompts e o mapa ativo -> secao vivem fora do site, na skill
   visual-storytelling (references/duplod-*.md).
   -------------------------------------------------------------------------- */

/* Chamada final sobre o cenario "O destino".
   O terco direito foi liberado de proposito: o paragrafo "Ou use a pagina
   de contato" desceu para junto do texto principal, e o que sobrou la e o
   botao, que pinta fundo branco opaco e nao depende de veu. Por isso o
   gradiente pode fechar sobre a coluna de texto (ate 66%) e abrir para .25
   na ponta, onde o vilarejo aparece.
   Medido nessa configuracao: pior caso 4.81:1 no lead (branco a 92%), com
   o texto confinado aos primeiros 66% da largura. Se algum dia voltar
   texto para a direita, este numero deixa de valer . medir de novo. */
.dd-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dd-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg,
		#276360 0%,
		rgba(39, 99, 96, .96) 42%,
		rgba(39, 99, 96, .88) 66%,
		rgba(39, 99, 96, .25) 100%);
}

.dd-cta > .section_wrapper,
.dd-cta > .mcb-background-overlay {
	position: relative;
	z-index: 2;
}

/* No retrato o diagonal nao protege nada, porque o texto ocupa a largura
   toda. Vira veu vertical.
   Medido em 375 e 390 de largura contra a variante 3:4: com .80 na base o
   lead (branco a 92%) dava 4.30:1 e reprovava. Em .88 vai a 4.95:1. */
@media (max-width: 767px) {
	.dd-cta::after {
		background: linear-gradient(180deg,
			rgba(39, 99, 96, .96) 0%,
			rgba(39, 99, 96, .93) 58%,
			rgba(39, 99, 96, .88) 100%);
	}
}

/* Personagens. Entram como elemento image ao lado do texto e herdam o
   srcset do WordPress, entao nao precisam de variante retrato propria . ao
   contrario dos cenarios, que sao fundo CSS. */
html .mfn-builder-content .dd-statement .image_frame,
html .mfn-builder-content .dd-ai .image_frame,
html .mfn-builder-content .dd-about .image_frame {
	margin: 0;
}

html .mfn-builder-content .dd-statement .image_frame img,
html .mfn-builder-content .dd-ai .image_frame img,
html .mfn-builder-content .dd-about .image_frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dd-radius-media);
}

/* O personagem centraliza com o bloco de texto ao lado em vez de encostar
   no topo da secao. O :has() limita a regra ao wrap que carrega imagem . a
   .dd-ai tem outros dois wraps de icon_box que nao podem virar flex. */
@media (min-width: 960px) {
	.dd-statement .mcb-wrap-inner:has(.mcb-item-image-inner),
	.dd-ai .mcb-wrap-inner:has(.mcb-item-image-inner),
	.dd-about .mcb-wrap-inner:has(.mcb-item-image-inner) {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Em tela estreita o personagem vira apoio, nao protagonista. Sem o teto
   de largura ele ocupa a dobra inteira e empurra o texto para fora. */
@media (max-width: 959px) {
	html .mfn-builder-content .dd-statement .image_frame img,
	html .mfn-builder-content .dd-ai .image_frame img,
	html .mfn-builder-content .dd-about .image_frame img {
		max-width: 300px;
		margin-inline: auto;
	}
}

/* O diagrama do Double Diamond ganhou classe para ter respiro proprio. Ele
   e conteudo e nao decoracao, entao fica com teto de largura para as
   legendas do desenho continuarem legiveis. */
.dd-method {
	padding-bottom: 68px;
}

html .mfn-builder-content .dd-method .image_frame img {
	display: block;
	max-width: 900px;
	margin-inline: auto;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   1C . Cenario no hero da pagina de contato
   O cenario "O encontro" entra atras do hero de /contato/. Ele cobre em
   parte o fundo teal-700 que significa "agir" no sistema de cores dos heros
   internos. E deliberado: o veu mantem a cor da variante legivel por baixo,
   e a semantica continua valendo nas paginas sem imagem.
   Diferente do hero da home, aqui o conteudo (titulo, lead, migalhas,
   canais e botoes) ocupa a largura toda . entao o veu e quase uniforme, e
   nao um diagonal que abre para a direita.
   -------------------------------------------------------------------------- */

.dd-page-hero--contact {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image: url("/wp-content/uploads/2026/08/dd-encontro.webp");
	background-size: cover;
	background-position: center 62%;
	background-repeat: no-repeat;
}

.dd-page-hero--contact::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg,
		#276360 0%,
		rgba(39, 99, 96, .97) 42%,
		rgba(39, 99, 96, .92) 72%,
		rgba(39, 99, 96, .88) 100%);
}

.dd-page-hero--contact > .container {
	position: relative;
	z-index: 2;
}

/* No retrato o diagonal nao protege nada e o 16:9 vira uma tira estreita.
   Troca pela variante 3:4 e por veu vertical. */
@media (max-width: 767px) {
	.dd-page-hero--contact {
		background-image: url("/wp-content/uploads/2026/08/dd-encontro-mobile.webp");
		background-position: center bottom;
	}

	.dd-page-hero--contact::after {
		background: linear-gradient(180deg,
			rgba(39, 99, 96, .96) 0%,
			rgba(39, 99, 96, .92) 60%,
			rgba(39, 99, 96, .86) 100%);
	}
}

/* --------------------------------------------------------------------------
   1D . Cenario no hero de arquivo
   O cenario "O acervo" entra atras de .dd-page-hero--blog, que dispara em
   blog, categoria, tag, autor, data e portfolio.
   As particulas sairam deste hero em 2026-08-12 (ver duplod-hero-particles
   .php): a imagem passou a ser a textura da secao, e empilhar as duas
   camadas sob o mesmo texto virava ruido. Elas seguem na home.
   -------------------------------------------------------------------------- */

.dd-page-hero--blog {
	background-image: url("/wp-content/uploads/2026/08/dd-acervo.webp");
	background-size: cover;
	background-position: center 55%;
	background-repeat: no-repeat;
}

/* Substitui o veu diagonal da epoca das particulas, que abria para
   transparente na direita . exatamente onde moram os chips de categoria.
   Com cenario atras, aquele gradiente derrubava os chips (teal-300, a cor
   mais fraca do hero) para perto de 2:1. Agora o veu e quase uniforme.
   Medido sobre dd-acervo.webp: titulo 11.2, lead 6.2, chip 5.05. */
.dd-page-hero--blog::after {
	background: linear-gradient(100deg,
		var(--dd-teal-950) 0%,
		rgba(12, 39, 39, .94) 45%,
		rgba(12, 39, 39, .88) 100%);
}

/* Empilhado o texto ocupa a largura toda. O veu antigo daqui (.84 no meio)
   foi calibrado para particulas e deixava o chip em 4.56 . passa, mas sem
   margem nenhuma. Com estes valores vai a 5.46. */
@media (max-width: 61.9375rem) {
	.dd-page-hero--blog::after {
		background: linear-gradient(180deg,
			rgba(12, 39, 39, .94) 0%,
			rgba(12, 39, 39, .91) 60%,
			rgba(12, 39, 39, .88) 100%);
	}
}

/* No retrato o 16:9 viraria uma tira estreita: entra a variante 3:4. */
@media (max-width: 767px) {
	.dd-page-hero--blog {
		background-image: url("/wp-content/uploads/2026/08/dd-acervo-mobile.webp");
		background-position: center bottom;
	}
}

/* --------------------------------------------------------------------------
   2.14 Colheita . scrollytelling com as verticais
   A coluna de imagem fica fixa e a de texto rola ao lado; a imagem troca
   conforme o bloco entra na faixa central da tela. O JS vive em
   novamira-sandbox/duplod-scroll-reveal.php.
   As tres verticais 1200x1600 (artesaos, cliente, agente) saem das secoes
   .dd-statement, .dd-ai e .dd-about e passam a viver AQUI, grandes. Repetir a
   mesma foto pequena acima e grande abaixo na mesma pagina lia como erro.
   -------------------------------------------------------------------------- */

.dd-colheita .column_attr {
	max-width: none;
}

.dd-colheita-grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

/* --- Coluna de imagem --------------------------------------------------- */

.dd-colheita-media {
	position: relative;
	border-radius: var(--dd-radius-media);
	overflow: hidden;
	background-color: var(--dd-teal-950);
	aspect-ratio: 3 / 4;
}

.dd-colheita-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .5s ease;
}

/* Estado inicial e tambem o estado sem JS: a primeira imagem aparece e a
   secao continua fazendo sentido. */
.dd-colheita-img:first-child,
.dd-colheita-img.is-active {
	opacity: 1;
}

.dd-colheita.is-live .dd-colheita-img:first-child:not(.is-active) {
	opacity: 0;
}

/* --- Coluna de texto ---------------------------------------------------- */

.dd-colheita-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: colheita;
}

.dd-colheita-step {
	margin: 0;
	padding: 0;
}

.dd-colheita-step h3 {
	font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
	line-height: 1.2;
	font-weight: 600;
	color: var(--dd-ink);
	margin: 0 0 .75rem;
}

.dd-colheita-step p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--dd-ink-2);
	margin: 0;
	max-width: 46ch;
}

/* --- Empilhado: sem sticky, imagem antes de cada passo ------------------- */

@media (max-width: 61.9375rem) {

	.dd-colheita-media {
		display: none;
	}

	.dd-colheita-step {
		padding-bottom: 2.5rem;
	}

	.dd-colheita-step:last-child {
		padding-bottom: 0;
	}

	/* No empilhado cada passo carrega a propria imagem, senao a coluna fixa
	   sumiria e o texto ficaria sozinho. */
	.dd-colheita-step::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 3 / 4;
		max-height: 62vh;
		margin: 0 0 1.5rem;
		border-radius: var(--dd-radius-media);
		background-color: var(--dd-teal-950);
		background-size: cover;
		background-position: center;
	}

	.dd-colheita-step[data-step="0"]::before {
		background-image: url("/wp-content/uploads/2026/08/dd-artesaos.webp");
	}

	.dd-colheita-step[data-step="1"]::before {
		background-image: url("/wp-content/uploads/2026/08/dd-cliente.webp");
	}

	.dd-colheita-step[data-step="2"]::before {
		background-image: url("/wp-content/uploads/2026/08/dd-agente.webp");
	}
}

/* --- Duas colunas com a midia fixa -------------------------------------- */

@media (min-width: 62rem) {

	.dd-colheita-grid {
		grid-template-columns: 5fr 6fr;
		gap: 4rem;
	}

	.dd-colheita-media {
		position: sticky;
		/* O topo do site nao e fixo, entao 8vh e so respiro visual. */
		top: 8vh;
		max-height: 78vh;
	}

	.dd-colheita-steps {
		display: flex;
		flex-direction: column;
	}

	/* Cada passo ocupa quase uma tela: e o que da tempo de ler antes de a
	   imagem trocar. O primeiro e o ultimo levam meia altura para o texto
	   nascer alinhado com o topo da imagem e nao sobrar vao no fim. */
	.dd-colheita-step {
		min-height: 76vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.dd-colheita-step:first-child,
	.dd-colheita-step:last-child {
		min-height: 52vh;
	}

	/* O passo que nao esta sendo lido recua, sem sumir . ainda da para ler
	   se a pessoa parar no meio da transicao. */
	.dd-colheita.is-live .dd-colheita-step {
		opacity: .38;
		transition: opacity .4s ease;
	}

	.dd-colheita.is-live .dd-colheita-step.is-active {
		opacity: 1;
	}
}

/* --- Quem pediu menos movimento ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.dd-colheita-img,
	.dd-colheita.is-live .dd-colheita-step {
		transition: none;
	}

	/* Sem atenuar os passos inativos: variar opacidade em rolagem e
	   justamente o que incomoda quem pediu menos movimento. */
	.dd-colheita.is-live .dd-colheita-step {
		opacity: 1;
	}
}