/*
 * Base e componentes compartilhados.
 *
 * Tudo aqui é cópia literal do que se repete no <style> de cada página do ref
 * (ver design/_extracted/*.css). O ref duplica esse bloco em todas as páginas
 * porque é HTML gerado; aqui ele é carregado uma vez, e os literais viram
 * token. Regra de página específica não entra neste arquivo — vai em
 * assets/css/pages/.
 */

/* ---------- base ---------- */

body {
	margin: 0;
	font-family: var(--ec-font-body);
	background: var(--ec-white);
	color: var(--ec-ink);
}

a {
	color: var(--ec-blue);
}

a:hover {
	color: var(--ec-blue-800);
}

img {
	max-width: 100%;
}

/* O ref desenha tudo com div; manter a caixa previsível evita surpresa. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

.ec-shell {
	display: flex;
	flex-direction: column;
	font-family: var(--ec-font-body);
	min-height: 100vh;
}

.ec-shell > main {
	flex: 1 0 auto;
}

/* Leitor de tela, para os rótulos que o ref resolve só visualmente. */
.ec-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- navbar ---------- */

.ec-topbar {
	height: 3px;
	background: var(--ec-grad-topbar);
}

.ec-bar-wrap {
	background: var(--ec-white);
	border-bottom: 1px solid var(--ec-hairline);
	position: relative;
	z-index: 1000;
	font-family: var(--ec-font-body);
}

.ec-bar {
	max-width: var(--ec-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
}

.ec-bar-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex: none;
}

.ec-bar-logo img {
	height: 50px;
	width: auto;
}

.ec-bar-nav {
	display: flex;
	align-items: center;
	gap: 2px;
}

.ec-bar-sep {
	width: 1px;
	height: 22px;
	background: var(--ec-hairline-strong);
	margin: 0 6px;
	flex: none;
}

/*
 * O efeito de colchetes é a assinatura da marca: [ Features ] abrindo nas
 * laterais no hover. Vem de ::before e ::after, nunca de texto no HTML.
 */
.ec-navlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	color: var(--ec-navy);
	padding: 9px 18px;
	white-space: nowrap;
	transition: color .2s ease;
}

.ec-navlink::before,
.ec-navlink::after {
	position: absolute;
	opacity: 0;
	color: var(--ec-red);
	font-weight: 800;
	transition: opacity .2s ease, transform .2s ease;
}

.ec-navlink::before {
	content: '[';
	left: 2px;
	transform: translateX(6px);
}

.ec-navlink::after {
	content: ']';
	right: 2px;
	transform: translateX(-6px);
}

.ec-navlink:hover {
	color: var(--ec-navy);
}

.ec-navlink:hover::before,
.ec-navlink:hover::after,
.ec-navlink:focus-visible::before,
.ec-navlink:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/*
 * O ref diverge aqui: na Navbar isolada o ativo é vermelho (#e0533f), nas
 * páginas é azul (#1f5f95). As páginas são o que está publicado, então o azul
 * é o que vale — o vermelho ficou na Navbar.dc.html, que é a tela do componente.
 */
.ec-navlink.active {
	color: var(--ec-blue);
}

.ec-navlink.active::before,
.ec-navlink.active::after {
	opacity: 1;
	transform: translateX(0);
	color: var(--ec-blue);
}

/* ---------- navbar: menu mobile ---------- */

.ec-burger {
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
	padding: 0;
}

.ec-burger-bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.ec-burger-bars span {
	height: 2px;
	width: 100%;
	background: var(--ec-navy);
	border-radius: 1px;
}

.ec-burger-bars span:nth-child(2) {
	width: 70%;
	align-self: flex-end;
}

.ec-burger-x {
	width: 20px;
	height: 20px;
	position: relative;
	display: none;
}

.ec-burger-x span {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--ec-white);
	border-radius: 1px;
}

.ec-burger-x span:first-child {
	transform: translateY(-50%) rotate(45deg);
}

.ec-burger-x span:last-child {
	transform: translateY(-50%) rotate(-45deg);
}

.ec-mobile-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--ec-navy);
	box-shadow: 0 20px 40px rgba(18, 35, 61, .3);
	display: none;
	flex-direction: column;
	padding: 8px 20px 24px;
	z-index: 999;
}

.ec-navlink-dark {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-decoration: none;
	color: var(--ec-white);
	padding: 14px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ec-navlink-dark:last-of-type {
	border-bottom: none;
}

.ec-navlink-dark:hover {
	color: var(--ec-white);
}

.ec-navlink-dark-label {
	position: relative;
	padding: 0 14px;
	font-weight: 700;
	font-size: 16px;
}

.ec-navlink-dark-label::before,
.ec-navlink-dark-label::after {
	position: absolute;
	opacity: 0;
	color: var(--ec-orange);
	font-weight: 800;
}

.ec-navlink-dark-label::before {
	content: '[';
	left: 0;
}

.ec-navlink-dark-label::after {
	content: ']';
	right: 0;
}

.ec-navlink-dark-label.active {
	color: var(--ec-orange);
}

.ec-navlink-dark-label.active::before,
.ec-navlink-dark-label.active::after {
	opacity: 1;
}

.ec-mobile-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.ec-mobile-actions a {
	font-weight: 700;
	font-size: 14px;
	padding: 12px;
	border-radius: var(--ec-radius-pill);
	text-decoration: none;
	text-align: center;
}

.ec-mobile-actions .ec-portal {
	background: transparent;
	color: var(--ec-white);
	border: 1.5px solid rgba(255, 255, 255, .4);
}

/*
 * O corte é 1040px, o mesmo BREAKPOINT do design/_extracted/navbar.dc.js. Lá a
 * troca é feita em JS, medindo window.innerWidth e re-renderizando; aqui é
 * media query, que faz o mesmo sem depender de script.
 */
@media (max-width: 1039px) {
	.ec-bar {
		padding: 16px 20px;
	}

	.ec-bar-nav {
		display: none;
	}

	.ec-burger {
		display: flex;
	}

	.ec-nav-open .ec-bar-wrap {
		background: var(--ec-navy);
		border-bottom-color: rgba(255, 255, 255, .1);
	}

	.ec-nav-open .ec-mobile-menu {
		display: flex;
	}

	.ec-nav-open .ec-burger-bars {
		display: none;
	}

	.ec-nav-open .ec-burger-x {
		display: block;
	}
}

/* ---------- hero com foto (contato, blog, home) ---------- */

/*
 * A foto do hero e o véu escuro por cima aparecem em três páginas, então vivem
 * aqui. Ficaram um tempo só no CSS da página de contato: no blog o div da foto
 * não posicionava, o véu não pintava, e o título — que é branco — desaparecia
 * no fundo branco. Não dava erro nenhum; a página só vinha com um pedaço em
 * branco.
 */
.ec-hero-photo {
	position: absolute;
	inset: -4%;
	z-index: 0;
	background-size: cover;
	background-position: center;
}

.ec-hero-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(8, 16, 28, .92) 0%, rgba(8, 16, 28, .85) 26%, rgba(8, 16, 28, .45) 48%, rgba(8, 16, 28, 0) 68%),
		linear-gradient(180deg, rgba(8, 16, 28, .2) 0%, transparent 18%, transparent 78%, rgba(8, 16, 28, .5) 100%);
}

/* ---------- selos de seção ---------- */

/*
 * Aparecem em mais de uma página, então moram aqui. O .ec-badge-blue estava só
 * no CSS da política de privacidade e a página de recursos o usava em duas
 * seções: o selo vinha sem fundo, sem cor e sem pílula, parecendo texto solto.
 */
.ec-badge-blue {
	align-self: flex-start;
	font-weight: 800;
	font-size: var(--ec-size-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-blue);
	background: var(--ec-pale-blue);
	padding: 6px 14px;
	border-radius: var(--ec-radius-pill);
}

.ec-badge-white {
	align-self: flex-start;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-white);
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .3);
	padding: 7px 16px;
	border-radius: var(--ec-radius-pill);
}


/* ---------- botões ---------- */

.ec-pill-primary {
	font-weight: 700;
	font-size: 16px;
	padding: 16px 30px;
	border-radius: var(--ec-radius-pill);
	text-decoration: none;
	display: inline-block;
	background: var(--ec-grad-cta);
	color: var(--ec-white);
	border: none;
	cursor: pointer;
	box-shadow: var(--ec-shadow-cta);
	transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.ec-pill-primary:hover {
	background: var(--ec-grad-cta-hover);
	color: var(--ec-white);
	box-shadow: var(--ec-shadow-cta-hover);
	transform: translateY(-2px);
}

.ec-pill-secondary {
	font-weight: 700;
	font-size: 16px;
	padding: 16px 30px;
	border-radius: var(--ec-radius-pill);
	text-decoration: none;
	display: inline-block;
	background: transparent;
	color: var(--ec-navy);
	border: 1px solid var(--ec-border);
	cursor: pointer;
}

/* Versões compactas da barra — mesmo desenho, 13px. */
.ec-pill-sm {
	font-size: 13px;
	padding: 10px 20px;
	white-space: nowrap;
}

.ec-portal-btn {
	font-weight: 700;
	font-size: 13px;
	padding: 10px 16px;
	white-space: nowrap;
	border-radius: var(--ec-radius-pill);
	background: transparent;
	color: var(--ec-navy);
	border: 1.5px solid var(--ec-navy);
	text-decoration: none;
	margin-right: 10px;
	transition: background .25s ease, color .25s ease;
}

.ec-portal-btn:hover {
	background: var(--ec-navy);
	color: var(--ec-white);
}

/* ================= cards de artigo =================
 *
 * O card e o card de destaque aparecem na listagem do blog E na home, então são
 * componentes, não estilo de página. Ficaram um tempo dentro de pages/blog.css:
 * na home, que não carrega aquela folha, os mesmos elementos vinham sem estilo
 * nenhum e a seção esticava para mais de quatro mil pixels de altura. O que é
 * usado em duas páginas mora aqui.
 */

/* ---------- destaque ---------- */

.ec-featured {
	position: relative;
	background: linear-gradient(135deg, #1f5f95, #2f80c9);
	border-radius: 24px;
	padding: 44px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 56px;
	box-shadow: 0 24px 48px rgba(31, 95, 149, .28);
	overflow: hidden;
	transition: box-shadow .4s cubic-bezier(.2, .8, .2, 1);
}

.ec-featured:hover {
	box-shadow: 0 32px 64px rgba(31, 95, 149, .4);
}

.ec-featured-deco {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	overflow: hidden;
}

.ec-featured-hatch {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 2px, transparent 2px, transparent 30px);
}

.ec-featured-deco img {
	position: absolute;
	top: 50%;
	right: -50px;
	transform: translateY(-50%);
	height: 260px;
	width: auto;
	opacity: .16;
	pointer-events: none;
}

.ec-featured-img-wrap {
	position: relative;
	z-index: 1;
	flex: none;
	width: 100%;
	max-width: 340px;
}

.ec-featured-img-box {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	transform: rotate(2deg);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
	border-radius: 18px;
	background: linear-gradient(135deg, #12233d, #1a3350);
}

.ec-featured-img-box img:not(.ec-featured-watermark) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ec-featured-watermark {
	position: absolute;
	top: 8px;
	right: 8px;
	height: 38px;
	width: auto;
	opacity: .55;
	pointer-events: none;
}

.ec-featured-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 440px;
}

.ec-badge-sm {
	font-size: var(--ec-size-label);
	letter-spacing: .1em;
	padding: 6px 14px;
	width: fit-content;
}

.ec-featured-title {
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 30px;
	line-height: 1.22;
	color: var(--ec-white);
	margin: 0;
}

.ec-featured-title a {
	color: inherit;
	text-decoration: none;
}

.ec-featured-title a:hover {
	color: var(--ec-white);
	text-decoration: underline;
}

.ec-featured-meta {
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, .75);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.ec-dot {
	opacity: .5;
}

.ec-featured-excerpt {
	font-size: 15px;
	line-height: 24px;
	color: rgba(255, 255, 255, .85);
	margin: 0;
}

.ec-pill-featured {
	margin-top: 8px;
	width: fit-content;
	padding: 14px 28px;
	font-size: 14.5px;
}

/* ---------- card: base ---------- */

.ec-card {
	height: 100%;
}

.ec-card-link {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	background: var(--ec-white);
	border: 1px solid var(--ec-hairline);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.ec-card-link:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}

.ec-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(135deg, #12233d, #1a3350);
}

.ec-card-media img:not(.ec-card-watermark) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ec-card-watermark {
	position: absolute;
	top: 8px;
	right: 8px;
	height: 38px;
	width: auto;
	opacity: .55;
	pointer-events: none;
}

.ec-card-hatch {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0px, rgba(255, 255, 255, .1) 2px, transparent 2px, transparent 22px);
}

.ec-card-ribbon {
	position: absolute;
	top: 14px;
	left: -6px;
	background: linear-gradient(120deg, #f7b073, #e0533f);
	color: var(--ec-white);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 16px 6px 20px;
	transform: rotate(-3deg);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
	z-index: 1;
}

.ec-card-body {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 26px 28px;
}

.ec-card-num {
	position: absolute;
	right: 20px;
	top: -30px;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 15px;
	color: var(--ec-white);
	background: linear-gradient(135deg, #16314f, #12233d);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.ec-card-meta {
	font-size: var(--ec-size-label);
	font-weight: 700;
	color: var(--ec-blue);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.ec-card-title {
	font-family: var(--ec-font-display);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.28;
	color: var(--ec-navy);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ec-card-bar {
	width: 38px;
	height: 3px;
	border-radius: 2px;
	background: var(--ec-red);
}

.ec-card-excerpt {
	font-size: 14px;
	line-height: 21px;
	color: var(--ec-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ec-card-more {
	margin: auto 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 13.5px;
	color: #c9481f;
}

.ec-card-more i {
	transition: transform .3s;
}

.ec-card-link:hover .ec-card-more i {
	transform: translateX(4px);
}

/* ---------- card: variante escura ---------- */

.ec-card.is-dark .ec-card-link {
	background: var(--ec-navy);
	border-color: rgba(111, 179, 224, .16);
}

.ec-card.is-dark .ec-card-meta  { color: var(--ec-blue-400); }
.ec-card.is-dark .ec-card-title { color: var(--ec-white); }
.ec-card.is-dark .ec-card-bar   { background: var(--ec-orange); }
.ec-card.is-dark .ec-card-excerpt { color: rgba(255, 255, 255, .65); }
.ec-card.is-dark .ec-card-more  { color: var(--ec-orange); }

.ec-card.is-dark .ec-card-num {
	color: var(--ec-navy);
	background: linear-gradient(135deg, #6fb3e0, #2f80c9);
}


/* O destaque no mobile — mesma razão de estar aqui: é componente. */
@media (max-width: 879px) {
	.ec-featured {
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		gap: 14px;
		padding: 0 0 20px;
		border-radius: 18px;
	}

	.ec-featured-img-wrap {
		max-width: none;
	}

	.ec-featured-img-box {
		aspect-ratio: 2 / 1;
		transform: none;
		box-shadow: none;
		border-radius: 0;
	}

	.ec-featured-text {
		max-width: 100%;
		gap: 10px;
		padding: 0 18px;
	}

	.ec-featured-title {
		font-size: 20px;
	}

	.ec-featured-excerpt {
		font-size: 13.5px;
		line-height: 20px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ---------- rodapé ---------- */

.ec-footer {
	background: var(--ec-grad-warm);
	color: rgba(255, 255, 255, .85);
	padding: 48px 48px 32px;
	position: relative;
	overflow: hidden;
}

.ec-footer-inner {
	position: relative;
	z-index: 1;
	max-width: var(--ec-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.ec-footer-cols {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px 32px;
}

.ec-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 260px;
}

.ec-footer-brand img {
	height: 58px;
	width: auto;
}

.ec-footer-tagline {
	font-size: 13px;
	line-height: 20px;
}

.ec-footer-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ec-footer-col h2 {
	font-family: var(--ec-font-body);
	font-weight: 700;
	font-size: 12px;
	color: var(--ec-white);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0;
}

.ec-footer-col a,
.ec-footer-text {
	font-size: 13px;
	line-height: 20px;
	color: inherit;
	text-decoration: none;
}

.ec-footer-col a:hover {
	color: var(--ec-white);
	text-decoration: underline;
}

.ec-footer-links {
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
}

.ec-follow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ec-follow-label {
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65);
}

.ec-follow-sep {
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, .3);
}

.ec-social {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ec-white);
	text-decoration: none;
	transition: background .25s ease, box-shadow .25s ease;
}

.ec-social i {
	font-size: 16px;
}

.ec-social:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
	color: var(--ec-white);
}

.ec-social.li:hover { background: #0077b5; }
.ec-social.fb:hover { background: #3b5998; }
.ec-social.yt:hover { background: #ff0000; }

.ec-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .18);
	padding-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

.ec-footer-credit {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ec-footer-credit a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
}

.ec-footer-credit img {
	height: 16px;
	width: auto;
}

.ec-footer-bottom .ec-privacy {
	color: rgba(255, 255, 255, .75);
	text-decoration: underline;
}

@media (max-width: 700px) {
	.ec-footer {
		padding: 40px 20px 28px;
	}
}

/* ---------- formulário ---------- */

.ec-input {
	font-family: var(--ec-font-body);
	font-size: 15px;
	color: var(--ec-navy);
	background: var(--ec-white);
	border: 1px solid rgba(18, 35, 61, .18);
	border-radius: 12px;
	padding: 14px 16px;
	width: 100%;
}

.ec-input::placeholder {
	color: var(--ec-mute);
}

.ec-label {
	font-weight: 600;
	font-size: 13px;
	color: var(--ec-navy);
	margin-bottom: 6px;
	display: block;
}

/* ---------- animações ---------- */

@keyframes ecStaggerIn {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ecPhotoIn {
	from { opacity: 0; transform: scale(1.04); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ecDrift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); }
	50%      { transform: translate3d(-10px, -6px, 0) scale(1.03); }
}

.ec-js .ec-stagger {
	opacity: 0;
	animation: ecStaggerIn .8s cubic-bezier(.2, .7, .2, 1) forwards;
}

.ec-photo {
	animation: ecPhotoIn 1.1s cubic-bezier(.2, .7, .2, 1) forwards,
	           ecDrift 30s ease-in-out infinite;
	animation-delay: 0s, 1.2s;
}

.ec-reveal,
.ec-reveal-left,
.ec-reveal-right,
.ec-reveal-scale,
.ec-reveal-blur {
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1),
	            transform .8s cubic-bezier(.2, .7, .2, 1),
	            filter .8s cubic-bezier(.2, .7, .2, 1);
}

.ec-js .ec-reveal        { opacity: 0; transform: translateY(30px); }
.ec-js .ec-reveal-left   { opacity: 0; transform: translateX(-30px); }
.ec-js .ec-reveal-right  { opacity: 0; transform: translateX(30px); }
.ec-js .ec-reveal-scale  { opacity: 0; transform: scale(.94); }
.ec-js .ec-reveal-blur   { opacity: 0; filter: blur(10px); }

.ec-reveal.is-visible,
.ec-reveal-left.is-visible,
.ec-reveal-right.is-visible,
.ec-reveal-scale.is-visible,
.ec-reveal-blur.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

/*
 * O estado escondido acima só existe com .ec-js no <html>, marcado por um
 * script de uma linha no cabeçalho. Sem JavaScript — ou com o script quebrado —
 * nada fica invisível esperando um observador que nunca vai rodar. Foi assim
 * que uma captura de página inteira saiu com metade da página em branco: o
 * conteúdo estava lá, com opacity 0, esperando uma rolagem que não aconteceu.
 */

/*
 * Sem animação para quem pediu sem animação. O ref traz essa regra só na
 * navbar; aqui vale para o site inteiro, incluindo os reveals — que de outro
 * modo deixariam a página em branco para quem desliga movimento, já que o
 * estado inicial é opacity 0.
 */
@media (prefers-reduced-motion: reduce) {
	.ec-navlink,
	.ec-navlink-dark-label,
	.ec-reveal,
	.ec-reveal-left,
	.ec-reveal-right,
	.ec-reveal-scale,
	.ec-reveal-blur {
		transition: none;
	}

	.ec-stagger,
	.ec-photo {
		animation: none;
		opacity: 1;
	}

	.ec-reveal,
	.ec-reveal-left,
	.ec-reveal-right,
	.ec-reveal-scale,
	.ec-reveal-blur {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* ---------- logo: a versão branca só existe com o menu mobile aberto ---------- */

.ec-logo-dark {
	display: none;
}

@media (max-width: 1039px) {
	.ec-nav-open .ec-bar-logo img:first-child {
		display: none;
	}

	.ec-nav-open .ec-logo-dark {
		display: block;
	}
}

/* ---------- chamada final (template-parts/final-cta.php) ---------- */

.ec-final-cta {
	background: var(--ec-navy);
	padding: 70px 48px;
	position: relative;
	overflow: hidden;
}

.ec-final-cta-inner {
	position: relative;
	z-index: 1;
	max-width: var(--ec-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.ec-final-cta-heading {
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 30px;
	color: var(--ec-white);
	max-width: 480px;
	margin: 0;
}

.ec-final-cta-actions {
	display: flex;
	gap: 14px;
	transition-delay: .12s;
}

.ec-cta-ghost {
	color: var(--ec-white);
	border: 1px solid rgba(255, 255, 255, .4);
	padding: 16px 30px;
	font-size: 16px;
	border-radius: var(--ec-radius-pill);
	text-decoration: none;
	font-weight: 700;
	transition: background .25s ease;
}

.ec-cta-ghost:hover {
	background: rgba(255, 255, 255, .1);
	color: var(--ec-white);
}

/* O corte é 640px, o do finalcta.dc.js. */
@media (max-width: 639px) {
	.ec-final-cta {
		padding: 44px 20px;
	}

	.ec-final-cta-heading {
		font-size: 24px;
	}

	.ec-final-cta-actions {
		flex-direction: column;
		width: 100%;
	}

	.ec-final-cta-actions a {
		text-align: center;
	}
}

/* ---------- listagem simples (index.php) ---------- */

.ec-plain-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ec-plain-list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ec-hairline);
}

.ec-plain-list a {
	font-family: var(--ec-font-display);
	font-weight: 800;
	font-size: 17px;
	color: var(--ec-navy);
	text-decoration: none;
}

.ec-plain-list a:hover {
	color: var(--ec-blue);
}

.ec-plain-meta {
	font-size: 12.5px;
	color: var(--ec-mute);
}

/* ---------- card: variante grid do design/BlogCard.dc.html ----------
 *
 * O card da grade não é um retângulo com borda: é um contorno de 1px feito com
 * o fundo do link, raio 4/28/4/4 e o canto inferior direito cortado em 44px por
 * clip-path. O miolo branco repete o mesmo corte. Vale na home e na vista Grid
 * do blog; Compact e List continuam com o card simples.
 */
.ec-card-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	height: 100%;
}

.ec-home-blog-grid .ec-card-link,
.ec-posts[data-view="grid"] .ec-card-link {
	background: var(--ec-hairline);
	padding: 1px;
	border: 0;
	border-radius: 4px 28px 4px 4px;
	overflow: visible;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}

.ec-home-blog-grid .ec-card-link:hover,
.ec-posts[data-view="grid"] .ec-card-link:hover {
	transform: translateY(-8px);
	box-shadow: none;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)) drop-shadow(0 24px 48px rgba(0, 0, 0, .35));
}

.ec-home-blog-grid .ec-card-inner,
.ec-posts[data-view="grid"] .ec-card-inner {
	background: var(--ec-white);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
}

.ec-home-blog-grid .ec-card.is-dark .ec-card-link,
.ec-posts[data-view="grid"] .ec-card.is-dark .ec-card-link {
	background: rgba(111, 179, 224, .16);
}

.ec-card.is-dark .ec-card-inner {
	background: var(--ec-navy);
}

/* Na vista List o miolo vira a linha: miniatura, texto e seta lado a lado. */
.ec-posts[data-view="list"] .ec-card-inner {
	flex-direction: row;
	align-items: center;
	gap: 18px;
}

/* ---------- trilha de navegação ----------
 *
 * Usada na política de privacidade E no post do blog. Estava só no CSS da
 * política, e no post a trilha saía sem estilo nenhum.
 */
.ec-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	margin: 0;
}

.ec-breadcrumb a {
	color: var(--ec-blue);
	font-weight: 600;
	text-decoration: none;
}

.ec-breadcrumb a:hover {
	text-decoration: underline;
}

.ec-breadcrumb i {
	font-size: 10px;
	color: var(--ec-mute-300);
}

.ec-breadcrumb .ec-current {
	color: var(--ec-navy);
	font-weight: 700;
}

/* A seta do card só aparece na vista List do blog (pages/blog.css). */
.ec-card-arrow {
	display: none;
}

/* ================= tela de carregamento entre páginas =================
 *
 * design/Navbar.dc.html: navy cobrindo tudo, as três fitas do símbolo se
 * desenhando em sequência (keyframes ecDraw1–3 do protótipo), wordmark branco e
 * "Loading page" em mono.
 */

.ec-loader {
	position: fixed;
	inset: 0;
	background: var(--ec-navy);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility 0s linear .45s;
}

.ec-loader.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease, visibility 0s;
}

.ec-loader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.ec-loader-mark {
	width: 110px;
	height: 110px;
	overflow: visible;
}

.ec-loader-word {
	height: 22px;
	width: auto;
}

.ec-loader-label {
	font-family: var(--ec-font-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

@keyframes ecDraw1 { 0%, 4% { stroke-dashoffset: 1; } 26%, 60% { stroke-dashoffset: 0; } 86%, 100% { stroke-dashoffset: -1; } }
@keyframes ecDraw2 { 0%, 16% { stroke-dashoffset: 1; } 38%, 60% { stroke-dashoffset: 0; } 80%, 100% { stroke-dashoffset: -1; } }
@keyframes ecDraw3 { 0%, 28% { stroke-dashoffset: 1; } 50%, 60% { stroke-dashoffset: 0; } 74%, 100% { stroke-dashoffset: -1; } }

.ec-loader-draw-1 { animation: ecDraw1 1.6s ease-in-out infinite; }
.ec-loader-draw-2 { animation: ecDraw2 1.6s ease-in-out infinite; }
.ec-loader-draw-3 { animation: ecDraw3 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.ec-loader-draw-1,
	.ec-loader-draw-2,
	.ec-loader-draw-3 {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* ================= 404 =================
 *
 * NotFound-1b (Claude Design): ficha com carimbo sobre creme quadriculado.
 */

.ec-404 {
	position: relative;
	overflow: hidden;
	background: var(--ec-cream);
	padding: 100px 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	isolation: isolate;
}

.ec-404-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(18, 35, 61, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 35, 61, .05) 1px, transparent 1px);
	background-size: 36px 36px;
	pointer-events: none;
}

.ec-404-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 660px;
	background: var(--ec-white);
	border: 2px dashed var(--ec-border);
	border-radius: 8px;
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	box-shadow: 0 24px 48px rgba(18, 35, 61, .12);
	box-sizing: border-box;
}

.ec-404-meta {
	font-family: var(--ec-font-mono);
	font-size: 12.5px;
	letter-spacing: .1em;
	color: var(--ec-mute);
	align-self: stretch;
	text-align: left;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
	border-bottom: 1px solid rgba(18, 35, 61, .1);
	padding-bottom: 14px;
}

.ec-404-stamp {
	transform: rotate(-9deg);
	border: 5px solid var(--ec-red);
	color: var(--ec-red);
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 34px;
	letter-spacing: .04em;
	padding: 10px 28px;
	border-radius: 10px;
	margin: 12px 0;
}

.ec-404-title {
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 40px;
	line-height: 1.15;
	color: var(--ec-navy);
	max-width: 520px;
	margin: 0;
}

.ec-404-lead {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ec-ink);
	max-width: 460px;
	margin: 0;
}

.ec-404-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
}

.ec-404-cta {
	font-weight: 700;
	font-size: 16px;
	padding: 16px 30px;
	border-radius: var(--ec-radius-pill);
	display: inline-block;
	text-decoration: none;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.ec-404-cta:hover {
	transform: translateY(-3px);
}

.ec-404-cta-primary,
.ec-404-cta-primary:hover {
	background: var(--ec-grad-cta);
	color: var(--ec-white);
	box-shadow: var(--ec-shadow-cta);
}

.ec-404-cta-ghost,
.ec-404-cta-ghost:hover {
	color: var(--ec-navy);
	border: 1.5px solid var(--ec-border);
}

.ec-404-footnote {
	font-family: var(--ec-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--ec-mute-300);
	margin-top: 8px;
}

@media (max-width: 879px) {
	.ec-404 {
		padding: 48px 20px;
	}

	.ec-404-card {
		padding: 36px 24px;
	}

	.ec-404-title {
		font-size: 28px;
	}

	.ec-404-stamp {
		font-size: 24px;
		padding: 8px 18px;
	}
}