/* ==========================================================================
   DATAMOVE - sistema de composicao editorial
   Escopo: tudo prefixado .dm- para nao vazar no resto do site.
   ========================================================================== */

/* ESCOPO — duas classes de body, de proposito:
     .dm-site  entra em todo o site  -> cabecalho, foco, borda. Mudanca global,
               aprovada, e que precisa ser igual em todas as paginas.
     .dm-page  entra SO nas paginas que ja usam a composicao nova (o PHP procura
               "dm-rail" no _elementor_data) -> soltura de largura do container,
               overrides de secao esticada, tipografia de leitura.
   Sem essa separacao, ativar o tema filho soltaria a largura das 21 paginas
   antigas de uma vez, que foram desenhadas para o container fechado. */

:root {
	--dm-ink:      #002745;
	--dm-primary:  #30347A;
	--dm-accent:   #494692;
	--dm-body:     #43433F;
	--dm-muted:    #6F6F6E;
	--dm-highlight:#CC5294;
	--dm-surface:  #F5F7FA;
	--dm-border:   #D9DEE5;

	--dm-wide:     1760px;  /* grids e composicoes */
	--dm-read:     720px;   /* largura confortavel de leitura */
	--dm-gutter:   clamp(18px, 4vw, 76px);
}

/* --------------------------------------------------------------------------
   1. LARGURA — o conteudo deixa de ser uma coluna estreita centralizada
   -------------------------------------------------------------------------- */

.dm-page #main #content-wrap,
.dm-page .container {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.dm-page #content-wrap > .content-area,
.dm-page #primary { width: 100% !important; max-width: none !important; }

/* Sangra ate a borda da viewport, sem gerar scroll horizontal */
.dm-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: clip;
}

/* Trilho interno: largo para composicao, estreito para prosa */
.dm-rail   { max-width: var(--dm-wide); margin-inline: auto; padding-inline: var(--dm-gutter); }
.dm-rail--read { max-width: calc(var(--dm-read) + var(--dm-gutter) * 2); }

/* Prosa nunca passa de 70ch, mesmo dentro de um trilho largo */
.dm-prose p { max-width: 70ch; }

/* --------------------------------------------------------------------------
   2. REVELACAO NO SCROLL — entrada sutil, estado final visivel por padrao
   -------------------------------------------------------------------------- */

/* Sem JS ou com movimento reduzido, tudo nasce visivel: nada some da pagina. */
.dm-reveal { opacity: 1; transform: none; }

.js-dm .dm-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .7s cubic-bezier(.22,.61,.36,1),
	            transform .7s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.js-dm .dm-reveal.is-in { opacity: 1; transform: none; }

/* Escalonamento: cada filho entra um pouco depois do anterior */
.js-dm .dm-stagger > * { transition-delay: calc(var(--dm-i, 0) * 90ms); }

/* --------------------------------------------------------------------------
   3. HERO — imagem ocupando a tela, texto ancorado embaixo
   -------------------------------------------------------------------------- */

.dm-hero {
	position: relative;
	min-height: clamp(460px, 78vh, 820px);
	display: flex;
	align-items: flex-end;
	background: var(--dm-ink);
	overflow: clip;
}
.dm-hero__media {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center 40%;
	transform: scale(1.06);
	transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.js-dm .dm-hero.is-in .dm-hero__media { transform: scale(1); }

/* Vinheta: garante contraste do texto sobre qualquer foto */
.dm-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg,
		rgba(0,39,69,.94) 0%, rgba(0,39,69,.86) 38%,
		rgba(0,39,69,.52) 70%, rgba(0,39,69,.34) 100%);
}
.dm-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(56px, 9vw, 120px); }

.dm-hero__title {
	font-family: "Exo 2", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(3.36rem, 5.4vw, 7.04rem);
	line-height: 1.04;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 .5em;
	max-width: 17ch;
	text-wrap: balance;
}
.dm-hero__lead {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: clamp(1.6rem, 1.35vw, 1.92rem);
	line-height: 1.7;
	color: #CFDDE7;
	max-width: 58ch;
	margin: 0 0 3.2rem;
}

/* --------------------------------------------------------------------------
   4. ETIQUETA DE SECAO — o marcador tipografico que da ritmo
   -------------------------------------------------------------------------- */

.dm-eyebrow {
	display: inline-flex; align-items: center; gap: .6em;
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.344rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--dm-accent);
	margin: 0 0 1.76rem;
}
.dm-eyebrow::before {
	content: ""; width: 28px; height: 2px; background: currentColor; flex: none;
}
.dm-eyebrow--light { color: #8FB6CE; }

.dm-h2 {
	font-family: "Exo 2", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.56rem, 3vw, 4.16rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--dm-ink);
	margin: 0 0 1.6rem;
	text-wrap: balance;
}
.dm-h2--light { color: #fff; }

/* --------------------------------------------------------------------------
   5. COMPOSICAO ASSIMETRICA — texto deslocado, espaco negativo com funcao
   -------------------------------------------------------------------------- */

.dm-offset { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 900px) {
	.dm-offset { grid-template-columns: 5fr 7fr; align-items: start; }
	.dm-offset--flip > :first-child { order: 2; }
}

/* Imagem que sangra por um dos lados */
.dm-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
	.dm-split { grid-template-columns: 1.05fr .95fr; align-items: center; }
	.dm-split__media { height: 100%; min-height: 520px; }
}
.dm-split__media {
	background-size: cover; background-position: center;
	min-height: 320px;
}
.dm-split__text { padding: clamp(36px, 5vw, 84px) var(--dm-gutter); }

/* --------------------------------------------------------------------------
   6. ENTREGAVEIS — editorial, sem card: numero em escala, regua, lista
   -------------------------------------------------------------------------- */

.dm-steps { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4vw, 56px); }
@media (min-width: 860px) { .dm-steps { grid-template-columns: repeat(3, 1fr); } }

.dm-step__n {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: clamp(4.8rem, 5vw, 7.36rem);
	font-weight: 700; line-height: .9;
	color: transparent;
	-webkit-text-stroke: 1.5px #5C7B90;
	margin: 0 0 .35em;
}
.dm-step__rule { width: 100%; height: 1px; background: #23485F; margin: 0 0 2.24rem; }
.dm-step h3 {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 2.32rem; font-weight: 600; color: #fff; margin: 0 0 1.76rem;
}
.dm-step ul { list-style: none; margin: 0; padding: 0; }
.dm-step li {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 1.68rem; line-height: 1.7; color: #C2D4DF;
	padding: 0 0 1.44rem 1.76rem; position: relative;
}
.dm-step li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 5px; height: 5px; background: var(--dm-highlight);
}

/* --------------------------------------------------------------------------
   7. STICKY — a coluna da esquerda fica, a da direita rola
   -------------------------------------------------------------------------- */

.dm-sticky { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 72px); }
@media (min-width: 1000px) {
	.dm-sticky { grid-template-columns: 5fr 7fr; align-items: start; }
	.dm-sticky__fixed { position: sticky; top: 110px; }
}
.dm-normas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dm-border); }
.dm-normas li {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 1.632rem; line-height: 1.55; color: var(--dm-body);
	padding: 1.28rem 0; border-bottom: 1px solid var(--dm-border);
}

/* --------------------------------------------------------------------------
   8. NUMERO GRANDE — mudanca de escala, quase sem texto
   -------------------------------------------------------------------------- */

.dm-figure { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
@media (min-width: 860px) { .dm-figure { grid-template-columns: auto 1fr; } }
.dm-figure__n {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: clamp(7.2rem, 13vw, 17.6rem);
	font-weight: 700; line-height: .82; letter-spacing: -.04em;
	color: var(--dm-ink); margin: 0;
	font-variant-numeric: tabular-nums;
}
.dm-figure__u {
	font-size: clamp(1.6rem, 2vw, 2.56rem); font-weight: 600;
	color: var(--dm-accent); margin-left: .12em;
}

/* --------------------------------------------------------------------------
   9. FAIXA DE IMAGEM — respiro entre blocos densos, com parallax leve
   -------------------------------------------------------------------------- */

.dm-band { position: relative; min-height: clamp(280px, 46vh, 520px); overflow: clip; background: var(--dm-ink); }
.dm-band__media {
	position: absolute; inset: -12% 0 -12% 0;
	background-size: cover; background-position: center;
	will-change: transform;
}
.dm-band__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: var(--dm-gutter);
	background: linear-gradient(to top, rgba(0,39,69,.88), rgba(0,39,69,0));
	color: #D7E3EA;
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.28rem; letter-spacing: .16em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. LINHAS EDITORIAIS — "para quem", sem card
   -------------------------------------------------------------------------- */

.dm-rows { border-top: 1px solid var(--dm-border); }
.dm-row {
	display: grid; grid-template-columns: 1fr; gap: 0.96rem;
	padding: clamp(28px, 3.4vw, 48px) 0;
	border-bottom: 1px solid var(--dm-border);
}
@media (min-width: 900px) {
	.dm-row { grid-template-columns: 64px 4fr 6fr; gap: clamp(24px, 3vw, 56px); align-items: baseline; }
}
.dm-row__n {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.68rem; font-weight: 600; color: var(--dm-highlight);
	font-variant-numeric: tabular-nums;
}
.dm-row h3 {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: clamp(1.84rem, 1.7vw, 2.32rem); font-weight: 600;
	color: var(--dm-ink); margin: 0;
}
.dm-row p {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 1.728rem; line-height: 1.75; color: var(--dm-muted); margin: 0;
}

/* --------------------------------------------------------------------------
   11. BOTAO
   -------------------------------------------------------------------------- */

.dm-btn {
	display: inline-flex; align-items: center; gap: .7em;
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.6rem; font-weight: 600; letter-spacing: .04em;
	padding: 1.05em 2.2em;
	background: #fff; color: var(--dm-ink);
	text-decoration: none; border: 1px solid #fff;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.dm-btn:hover, .dm-btn:focus-visible { background: var(--dm-highlight); border-color: var(--dm-highlight); color: #fff; }
.dm-btn--ink { background: var(--dm-ink); border-color: var(--dm-ink); color: #fff; }
.dm-btn--ink:hover, .dm-btn--ink:focus-visible { background: var(--dm-accent); border-color: var(--dm-accent); }
.dm-btn::after { content: "→"; transition: transform .25s ease; }
.dm-btn:hover::after { transform: translateX(4px); }

/* Foco visivel em tudo que e interativo */
.dm-site a:focus-visible, .dm-site button:focus-visible {
	outline: 2px solid var(--dm-highlight); outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. ESPACAMENTO DE SECAO — ritmo, nao repeticao
   -------------------------------------------------------------------------- */

.dm-s    { padding-block: clamp(48px, 4vw, 82px); }
.dm-s--lg{ padding-block: clamp(60px, 5.5vw, 108px); }
.dm-s--sm{ padding-block: clamp(36px, 3vw, 58px); }
.dm-ink-bg     { background: var(--dm-ink); }
.dm-surface-bg { background: var(--dm-surface); }

/* --------------------------------------------------------------------------
   13. MOVIMENTO REDUZIDO — respeita a preferencia do sistema
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.js-dm .dm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.dm-hero__media, .js-dm .dm-hero.is-in .dm-hero__media { transform: none !important; transition: none !important; }
	.dm-band__media { transform: none !important; }
	.dm-btn, .dm-btn::after { transition: none !important; }
}

/* --------------------------------------------------------------------------
   14. SANGRIA — garante largura total mesmo se o Elementor marcar a secao
       como "boxed". Depende so de CSS, nao do JS de stretch do Elementor.
   -------------------------------------------------------------------------- */

.dm-page .elementor-section-stretched > .elementor-container,
.dm-page .elementor-section-full_width > .elementor-container {
	max-width: none !important;
	width: 100% !important;
}
.dm-page .elementor-section-stretched > .elementor-container > .elementor-column,
.dm-page .elementor-section-stretched .elementor-widget-html > .elementor-widget-container {
	padding: 0 !important;
}


/* --------------------------------------------------------------------------
   15. IMAGEM FIXA — a imagem para, o conteudo corre ao lado.
       Mesmo efeito do ScrollTrigger.pin, em CSS puro: zero JS, zero KB.
   -------------------------------------------------------------------------- */

.dm-pin { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
	.dm-pin { grid-template-columns: 1fr 1fr; align-items: start; }
	.dm-pin__media {
		position: sticky; top: 0;
		height: 100vh;
	}
	.dm-pin--flip .dm-pin__media { order: 2; }
}
.dm-pin__media {
	background-size: cover; background-position: center;
	min-height: 52vh;
	position: relative;   /* contexto para o ::after; o media query acima troca para sticky */
}
@media (min-width: 1000px) {
	/* repetido depois da regra base para vencer a cascata por ordem */
	.dm-pin__media { position: sticky; top: 0; height: 100vh; min-height: 0; }
}
.dm-pin__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,39,69,.30) 0%, rgba(0,39,69,.10) 45%, rgba(0,39,69,.55) 100%);
}
.dm-pin__label {
	position: absolute; z-index: 2; left: 0; bottom: 0;
	padding: clamp(20px, 2.4vw, 38px);
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.312rem; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: #E2ECF3;
}
.dm-pin__flow { padding: clamp(40px, 5vw, 90px) var(--dm-gutter); }

/* Cada bloco ocupa altura suficiente para a imagem "segurar" enquanto ele passa */
.dm-pin__bloco {
	padding-block: clamp(34px, 5vw, 70px);
	border-bottom: 1px solid var(--dm-border);
}
.dm-pin__bloco:last-child { border-bottom: 0; }
.dm-pin__bloco h3 {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: clamp(1.92rem, 1.8vw, 2.4rem); font-weight: 600;
	color: var(--dm-ink); margin: 0 0 1.12rem;
}
.dm-pin__bloco p {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 1.696rem; line-height: 1.78; color: var(--dm-muted); margin: 0;
}
.dm-pin__n {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.44rem; font-weight: 600; letter-spacing: .12em;
	color: var(--dm-highlight); margin: 0 0 0.8rem;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   16. ALINHAMENTO — cabecalho de secao e conteudo no mesmo trilho
   -------------------------------------------------------------------------- */

.dm-page .elementor-widget-toggle .elementor-toggle {
	max-width: var(--dm-wide);
	margin-inline: auto;
	padding-inline: var(--dm-gutter);
}
.dm-page .elementor-widget-toggle .elementor-tab-title { padding-inline: 0 !important; }
.dm-page .elementor-widget-toggle .elementor-tab-content { padding-inline: 0 !important; }


/* --------------------------------------------------------------------------
   17. DECLARACAO — texto grande com palavras destacadas em cor.
       O destaque usa <em> sem italico: cor faz o trabalho, nao a inclinacao.
   -------------------------------------------------------------------------- */

.dm-statement {
	font-family: "Exo 2", system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(2.1rem, 2.9vw, 3.9rem);
	line-height: 1.26;
	letter-spacing: -.012em;
	color: var(--dm-ink);
	margin: 0 0 1.6rem;
	max-width: 24ch;
	text-wrap: balance;
}
.dm-statement--wide  { max-width: 30ch; }
.dm-statement--light { color: #fff; }
.dm-statement em {
	font-style: normal;
	color: var(--dm-accent);
}
.dm-statement--light em { color: #8FC6DE; }

/* --------------------------------------------------------------------------
   18. DOIS NIVEIS — declaracao em cima, detalhe embaixo em outra composicao
   -------------------------------------------------------------------------- */

.dm-two__detail { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 52px); }
@media (min-width: 1000px) {
	.dm-two__detail { grid-template-columns: 1fr 5fr 4fr; align-items: start; }
}
.dm-two__detail p {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 1.6rem; line-height: 1.8; color: var(--dm-muted); margin: 0 0 1.1em;
}
.dm-two__detail p:last-child { margin-bottom: 0; }

/* Painel de contraste — o bloco escuro do exemplo, com lista */
.dm-panel {
	background: var(--dm-ink);
	padding: clamp(28px, 3vw, 46px);
	color: #C2D4DF;
}
.dm-panel h3 {
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.9rem; font-weight: 600; color: #fff; margin: 0 0 1.1rem;
}
.dm-panel ul { list-style: none; margin: 0; padding: 0; }
.dm-panel li {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 1.5rem; line-height: 1.6;
	padding: 0 0 .85rem 1.15rem; position: relative;
}
.dm-panel li:last-child { padding-bottom: 0; }
.dm-panel li::before {
	content: ""; position: absolute; left: 0; top: .6em;
	width: 5px; height: 5px; background: var(--dm-highlight);
}

/* --------------------------------------------------------------------------
   19. DIVISORIAS TECNICAS — cota de desenho e seta, no lugar de linha simples
   -------------------------------------------------------------------------- */

/* Cota: |—— texto ——| , como marcacao de projeto */
.dm-cota {
	display: flex; align-items: center; gap: .9em;
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.1rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--dm-muted);
	margin: clamp(28px, 3vw, 48px) 0;
}
.dm-cota::before, .dm-cota::after {
	content: ""; height: 1px; background: currentColor; flex: 1; opacity: .5;
}
.dm-cota__tick {
	width: 1px; height: 9px; background: currentColor; flex: none; opacity: .6;
}
.dm-cota--light { color: #7FA8C0; }

/* Seta diagonal, para marcar continuidade de leitura */
.dm-seta {
	width: 46px; height: 46px; flex: none;
	border-right: 1px solid var(--dm-muted);
	border-bottom: 1px solid var(--dm-muted);
	position: relative;
}
.dm-seta::after {
	content: ""; position: absolute; right: -1px; bottom: -1px;
	width: 15px; height: 15px;
	border-right: 1px solid var(--dm-muted);
	border-bottom: 1px solid var(--dm-muted);
	transform: rotate(-45deg) translate(3px, -1px);
	transform-origin: bottom right;
}


/* --------------------------------------------------------------------------
   20. CORRECOES FINAIS — vencem por ordem, sem depender de especificidade
   -------------------------------------------------------------------------- */

/* "meses" herdava o letter-spacing -.04em do numero de 176px, o que a 26px
   colapsa as letras umas sobre as outras. */
.dm-figure__n .dm-figure__u,
.dm-figure__u {
	display: inline-block;
	letter-spacing: .03em !important;
	font-size: clamp(1.7rem, 1.9vw, 2.4rem);
	line-height: 1;
	margin-left: .28em;
	vertical-align: baseline;
	color: var(--dm-accent);
}

/* Lista do painel escuro: estava menor que o corpo ao lado. */
.dm-panel li { font-size: 1.68rem; line-height: 1.65; }
.dm-panel h3 { font-size: 2.1rem; }


/* --------------------------------------------------------------------------
   21. CABECALHO NO MESMO TRILHO DO CONTEUDO
       A regra 1 zerou o padding de .container, o que colou o logo na borda.
       Aqui o cabecalho volta a ter respiro — e, mais importante, passa a
       comecar exatamente onde comeca o texto das secoes.
   -------------------------------------------------------------------------- */

.dm-site #site-header-inner,
.dm-site .oceanwp-mobile-menu-icon {
	max-width: none !important;          /* fora do trilho de 1440 */
	margin-inline: 0 !important;
	padding-inline: clamp(18px, 4.75vw, 76px) !important;  /* metade do recuo anterior */
}

/* O menu fica colado na borda direita do trilho, nao na da tela */
.dm-site #site-navigation-wrap { padding-right: 0 !important; max-width: none !important; }

/* Linha tenue separando cabecalho do hero, sem peso visual */
.dm-site #site-header { border-bottom: 1px solid rgba(0,39,69,.08); }


/* --------------------------------------------------------------------------
   22. DIAGONAL — transicao entre secoes por um unico corte inclinado,
       raso e contínuo, no lugar de linha reta. E a linguagem que o proprio
       site ja usa nas faixas de imagem.
   -------------------------------------------------------------------------- */

.dm-diagonal {
	--dm-inc: clamp(18px, 2.2vw, 42px);
	position: relative;
	margin-top: calc(var(--dm-inc) * -1);
	padding-top: calc(var(--dm-inc) + clamp(60px, 5.5vw, 108px)) !important;
	/* sobe da esquerda para a direita */
	clip-path: polygon(0 var(--dm-inc), 100% 0, 100% 100%, 0 100%);
}

/* Corta tambem embaixo, no mesmo angulo: a faixa vira um paralelogramo raso */
.dm-diagonal--duplo {
	margin-bottom: calc(var(--dm-inc) * -1);
	padding-bottom: calc(var(--dm-inc) + clamp(60px, 5.5vw, 108px)) !important;
	clip-path: polygon(
		0    var(--dm-inc),
		100% 0,
		100% calc(100% - var(--dm-inc)),
		0    100%
	);
}

/* Inclinacao invertida, para alternar o sentido entre secoes */
.dm-diagonal--inv { clip-path: polygon(0 0, 100% var(--dm-inc), 100% 100%, 0 100%); }

/* Em tela estreita o mesmo percentual vira uma rampa agressiva */
@media (max-width: 767px) {
	.dm-diagonal, .dm-diagonal--duplo { --dm-inc: 14px; }
}


/* --------------------------------------------------------------------------
   23. MEDIDA DE LEITURA — nenhum texto corrido passa de ~68 caracteres.
       Vale em qualquer trilho: alargar a composicao nao alarga a linha.
   -------------------------------------------------------------------------- */

.dm-prose p,
.dm-two__detail p,
.dm-pin__bloco p,
.dm-panel li,
.dm-normas li,
.dm-step li,
.dm-sticky p {
	max-width: 68ch;
}

/* Alinhado a esquerda, sempre: justificado sem hifenizacao abre rios de
   branco entre as palavras e o WCAG 1.4.8 desaconselha. */
.dm-page .dm-prose p,
.dm-page .dm-two__detail p,
.dm-page .dm-pin__bloco p,
.dm-page .dm-panel li,
.dm-page .dm-normas li,
.dm-page .dm-step li {
	text-align: left;
	text-wrap: pretty;      /* evita palavra orfa na ultima linha */
	hyphens: none;
}

/* Titulos equilibram a quebra entre as linhas, nao o rio de branco */
.dm-h2, .dm-statement, .dm-hero__title { text-wrap: balance; }


/* --------------------------------------------------------------------------
   24. CONTRASTE DO TEXTO DESCRITIVO
       #6F6F6E da 5,03:1 — passa AA, mas e limitrofe para texto longo.
       #43433F da 9,94:1 e mantem a familia do cinza da marca.
   -------------------------------------------------------------------------- */

.dm-two__detail p,
.dm-pin__bloco p,
.dm-row p { color: var(--dm-body); }


/* --------------------------------------------------------------------------
   25. IMAGEM DE FUNDO RESPONSIVA
       background-image nao aceita srcset. A alternativa e declarar os tres
       tamanhos como variaveis no elemento e trocar por media query aqui.
       Sem isso, o celular baixa o arquivo de desktop inteiro.
   -------------------------------------------------------------------------- */

.dm-hero__media,
.dm-split__media,
.dm-pin__media { background-image: var(--img-lg); }

@media (max-width: 1024px) {
	.dm-hero__media,
	.dm-split__media,
	.dm-pin__media { background-image: var(--img-md, var(--img-lg)); }
}
@media (max-width: 767px) {
	.dm-hero__media,
	.dm-split__media,
	.dm-pin__media { background-image: var(--img-sm, var(--img-md, var(--img-lg))); }
}

/* --------------------------------------------------------------------------
   26. CRONOGRAMA DE PRAZO — barras que crescem ao entrar na tela
   --------------------------------------------------------------------------
   Nao e SVG de proposito: os rotulos sao texto de verdade, entao escalam com
   a tipografia do site, sao lidos por leitor de tela e nao serrilham.
   A posicao de cada barra vem de --ini/--fim em semanas; o calculo em % vale
   para qualquer largura, inclusive quando o rotulo sobe para cima da barra.
   -------------------------------------------------------------------------- */

/* so-leitor-de-tela: descreve o grafico para quem nao ve as barras */
.dm-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --lab em rem, nunca em ch: "ch" depende do font-size de cada elemento,
   entao o mesmo 25ch valia 200px no rotulo (14,4px) e 157px no cabecalho
   dos meses (11,2px) — e as divisorias saiam fora do trilho. */
.dm-crono { --lab: 20rem; margin: 0; }

/* cabecalho dos meses, alinhado ao trilho */
.dm-crono__meses {
	display: grid; grid-template-columns: var(--lab) repeat(3, 1fr);
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.12rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--dm-accent);
	padding-bottom: .9rem;
}
/* o primeiro span precisa comecar na coluna 2: a coluna 1 e o vao do
   rotulo. Sem isso o auto-placement joga "Mes 1" em cima dos rotulos. */
.dm-crono__meses span { text-align: center; }
.dm-crono__meses span:first-child { grid-column: 2; }

.dm-crono__grade {
	position: relative;
	border-top: 1px solid var(--dm-border);
	padding: 1.8rem 0 1.4rem;
}

/* divisorias de mes: dois fios a 1/3 e 2/3 do trilho */
.dm-crono__grade::before,
.dm-crono__grade::after {
	content: ""; position: absolute; top: 0; bottom: 0;
	width: 1px; background: var(--dm-border); pointer-events: none;
}
.dm-crono__grade::before { left: calc(var(--lab) + (100% - var(--lab)) / 3); }
.dm-crono__grade::after  { left: calc(var(--lab) + (100% - var(--lab)) * 2 / 3); }

.dm-crono__lista { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.dm-crono__lista li { display: flex; align-items: center; }
.dm-crono__lista li + li { margin-top: 1.8rem; }

.dm-crono__lab {
	flex: 0 0 var(--lab); box-sizing: border-box; padding-right: 1.6rem;
	font-size: 1.44rem; line-height: 1.35; color: var(--dm-body);
}

.dm-crono__trilho { flex: 1 1 auto; position: relative; height: 10px; display: block; }

.dm-crono__bar {
	position: absolute; top: 0; bottom: 0;
	left:  calc(var(--ini) / 12 * 100%);
	width: calc((var(--fim) - var(--ini)) / 12 * 100%);
	background: var(--dm-primary); opacity: .88;
}
.dm-crono__bar--destaque { background: var(--dm-highlight); opacity: 1; }

/* marcador da semana --m */
.dm-crono__linha {
	position: absolute; top: 0; bottom: 0; width: 0;
	left: calc(var(--lab) + (100% - var(--lab)) * var(--m) / 12);
	border-left: 1.5px dashed var(--dm-highlight);
}
.dm-crono__marca {
	box-sizing: border-box;
	width: calc(var(--lab) + (100% - var(--lab)) * var(--m) / 12);
	margin: .8rem 0 0; padding-right: 1rem; text-align: right;
	font-family: "Exo 2", system-ui, sans-serif;
	font-size: 1.12rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--dm-highlight);
}

/* --- animacao: so com JS ativo e sem prefers-reduced-motion --------------- */
/* transition, nao animation, de proposito. Se o navegador estiver com a
   timeline suspensa (aba em segundo plano, economia de bateria), uma
   @keyframes travaria em scaleX(0) e a barra sumiria. Com transition, o
   estado final vem da classe: sem animacao possivel, ele simplesmente ja
   esta la. Conteudo nunca fica invisivel. */
.js-dm .dm-crono__bar {
	transform: scaleX(0); transform-origin: left center;
	transition: transform .72s cubic-bezier(.22, .61, .36, 1) var(--d, 0s);
	will-change: transform;
}
.js-dm .dm-reveal.is-in .dm-crono__bar { transform: scaleX(1); }

.js-dm .dm-crono__linha,
.js-dm .dm-crono__marca { opacity: 0; transition: opacity .5s ease-out; }
.js-dm .dm-crono__linha { transition-delay: 1s; }
.js-dm .dm-crono__marca { transition-delay: 1.08s; }
.js-dm .dm-reveal.is-in .dm-crono__linha,
.js-dm .dm-reveal.is-in .dm-crono__marca { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.js-dm .dm-crono__bar { transform: none; transition: none; will-change: auto; }
	.js-dm .dm-crono__linha,
	.js-dm .dm-crono__marca { opacity: 1; transition: none; }
}

/* --- o cronograma entra como terceira coluna do bloco do numero ----------- */
@media (min-width: 860px) {
	.dm-figure__crono { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
	.dm-figure { grid-template-columns: auto auto minmax(440px, 1fr); }
	.dm-figure__crono { grid-column: auto; }
}

/* --- telas estreitas: rotulo sobe para cima da barra ---------------------- */
@media (max-width: 640px) {
	.dm-crono { --lab: 0px; }
	.dm-crono__meses { grid-template-columns: repeat(3, 1fr); }
	.dm-crono__lista li { flex-wrap: wrap; }
	.dm-crono__lab { flex: 0 0 100%; padding: 0 0 .5rem; }
	.dm-crono__trilho { flex: 1 0 100%; }
	.dm-crono__lista li + li { margin-top: 2.2rem; }
}