/*
 * Recursos — design/Features.dc.html.
 *
 * O corte de mobile é 880px, o do features.dc.js.
 *
 * A paleta dos dez cards se repete de quatro em quatro: no protótipo isso é
 * `palettes[i % 4]` em JavaScript, aqui é :nth-child(4n+1) e companhia. Mesma
 * ordem, mesmos valores — azul, petróleo, âmbar, vermelho.
 */

/* ---------- hero ---------- */

.ec-features-hero {
	position: relative;
	overflow: hidden;
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	align-items: flex-start;
	isolation: isolate;
	padding: 80px 48px;
}

.ec-hero-veil-features {
	background: linear-gradient(90deg, rgba(8, 16, 28, .94) 0%, rgba(8, 16, 28, .82) 34%, rgba(8, 16, 28, .45) 58%, rgba(8, 16, 28, .15) 100%);
}

.ec-features-hero-inner {
	position: relative;
	z-index: 5;
	max-width: var(--ec-max);
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.ec-features-hero-title {
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 60px;
	line-height: 1.08;
	color: var(--ec-white);
	max-width: 820px;
	margin: 0;
}

.ec-features-hero-lead {
	font-size: 18px;
	line-height: 28px;
	color: rgba(255, 255, 255, .8);
	max-width: 620px;
	margin: 0;
}

/* ---------- intro e os três números ---------- */

.ec-intro {
	position: relative;
	padding: 130px 48px 120px;
	background: var(--ec-white);
	overflow: hidden;
	isolation: isolate;
}

.ec-intro-inner {
	max-width: var(--ec-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.ec-intro-head {
	position: relative;
	z-index: 1;
	max-width: 820px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ec-intro-head .ec-badge-blue {
	align-self: center;
}

.ec-intro-wrap {
	width: 780px;
	max-width: 100%;
	margin: 0 auto;
}

.ec-intro-heading {
	font-family: var(--ec-font-display);
	font-weight: 800;
	font-size: 36px;
	line-height: 1.42;
	color: var(--ec-navy);
	text-wrap: pretty;
	margin: 0;
}

.ec-accent {
	color: var(--ec-red);
}

.ec-stats {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.ec-stat {
	display: flex;
	align-items: center;
}

.ec-stat-rule {
	width: 1px;
	align-self: stretch;
	background: rgba(18, 35, 61, .1);
	margin: 0 48px;
}

.ec-stat-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	max-width: 220px;
}

.ec-stat-num {
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 64px;
	line-height: 1;
	margin: 0;
}

.ec-stat-1 { color: var(--ec-blue-600); }
.ec-stat-2 { color: var(--ec-red); }
.ec-stat-3 { color: var(--ec-orange); }

.ec-stat-label {
	font-size: 14px;
	color: var(--ec-ink);
	line-height: 20px;
	margin: 0;
}

/* ---------- cabeçalho de seção ---------- */

.ec-section-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px;
}

.ec-section-head.is-centered {
	text-align: center;
	align-items: center;
	max-width: none;
}

.ec-section-title {
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: var(--ec-size-h1);
	color: var(--ec-navy);
	line-height: 1.1;
	margin: 0;
}

.ec-section-lead {
	font-size: 16px;
	line-height: 25px;
	color: var(--ec-ink);
	margin: 0;
	max-width: 520px;
}

.ec-badge-red {
	font-weight: 800;
	font-size: var(--ec-size-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #a3341f;
	background: #fbe9e6;
	padding: 6px 14px;
	border-radius: var(--ec-radius-pill);
	align-self: center;
}

/* ---------- as dez ferramentas ---------- */

.ec-basic {
	padding: 110px 48px;
	background: #f7f8fa;
}

.ec-basic-inner {
	max-width: var(--ec-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.ec-feat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ec-feat-card {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

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

.ec-feat-glyph {
	position: absolute;
	right: -10px;
	top: -20px;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 86px;
	line-height: 1;
}

.ec-feat-icon {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
}

.ec-feat-name {
	position: relative;
	z-index: 1;
	font-family: var(--ec-font-display);
	font-weight: 800;
	font-size: 17px;
	color: var(--ec-white);
	margin: 0;
}

.ec-feat-desc {
	position: relative;
	z-index: 1;
	font-size: 13px;
	line-height: 19px;
	margin: 0;
}

/* paleta 1 — azul */
.ec-feat-card:nth-child(4n+1) {
	background: linear-gradient(160deg, #16314f, #12233d);
	border: 1px solid rgba(111, 179, 224, .2);
}
.ec-feat-card:nth-child(4n+1) .ec-feat-glyph { color: rgba(111, 179, 224, .1); }
.ec-feat-card:nth-child(4n+1) .ec-feat-icon {
	background: linear-gradient(135deg, #6fb3e0, #2f80c9);
	color: #12233d;
	box-shadow: 0 10px 22px rgba(47, 128, 201, .35);
}
.ec-feat-card:nth-child(4n+1) .ec-feat-desc { color: rgba(207, 228, 245, .75); }

/* paleta 2 — petróleo */
.ec-feat-card:nth-child(4n+2) {
	background: linear-gradient(160deg, #123a52, #0f2a3d);
	border: 1px solid rgba(47, 128, 201, .25);
}
.ec-feat-card:nth-child(4n+2) .ec-feat-glyph { color: rgba(47, 128, 201, .12); }
.ec-feat-card:nth-child(4n+2) .ec-feat-icon {
	background: linear-gradient(135deg, #8be9dc, #2f80c9);
	color: #0f2a3d;
	box-shadow: 0 10px 22px rgba(47, 128, 201, .35);
}
.ec-feat-card:nth-child(4n+2) .ec-feat-desc { color: rgba(207, 228, 245, .75); }

/* paleta 3 — âmbar */
.ec-feat-card:nth-child(4n+3) {
	background: linear-gradient(160deg, #5c2a12, #3a1a0c);
	border: 1px solid rgba(242, 147, 63, .3);
}
.ec-feat-card:nth-child(4n+3) .ec-feat-glyph { color: rgba(242, 147, 63, .16); }
.ec-feat-card:nth-child(4n+3) .ec-feat-icon {
	background: linear-gradient(135deg, #f7b073, #e0533f);
	color: #3a1a0c;
	box-shadow: 0 10px 22px rgba(224, 83, 63, .4);
}
.ec-feat-card:nth-child(4n+3) .ec-feat-desc { color: rgba(251, 220, 201, .8); }

/* paleta 4 — vermelho */
.ec-feat-card:nth-child(4n+4) {
	background: linear-gradient(160deg, #5c1a12, #3a0f0c);
	border: 1px solid rgba(224, 83, 63, .3);
}
.ec-feat-card:nth-child(4n+4) .ec-feat-glyph { color: rgba(224, 83, 63, .16); }
.ec-feat-card:nth-child(4n+4) .ec-feat-icon {
	background: linear-gradient(135deg, #ec7c68, #c93f2e);
	color: #3a0f0c;
	box-shadow: 0 10px 22px rgba(201, 63, 46, .4);
}
.ec-feat-card:nth-child(4n+4) .ec-feat-desc { color: rgba(251, 208, 201, .8); }

/* ---------- módulos por indústria ---------- */

.ec-industry {
	padding: 110px 48px;
}

.ec-industry-inner {
	max-width: var(--ec-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.ec-ind-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}

.ec-ind-card {
	position: relative;
	background: linear-gradient(135deg, #1f5f95, #2f80c9);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 18px 40px rgba(18, 35, 61, .18);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.ec-ind-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 56px rgba(18, 35, 61, .25);
}

.ec-ind-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-ind-head {
	position: relative;
	height: 190px;
	overflow: hidden;
}

.ec-ind-photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.ec-ind-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 35, 61, 0) 40%, rgba(18, 35, 61, .92) 100%);
}

.ec-ind-name {
	position: absolute;
	left: 20px;
	bottom: 14px;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 22px;
	color: var(--ec-white);
	z-index: 1;
	margin: 0;
}

.ec-ind-icon {
	position: absolute;
	right: 16px;
	top: 14px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	font-size: 18px;
}

.ec-ind-env .ec-ind-icon {
	background: linear-gradient(135deg, #8be9dc, #2f80c9);
	color: #0f2a3d;
	box-shadow: 0 10px 22px rgba(47, 128, 201, .35);
}

.ec-ind-safety .ec-ind-icon {
	background: linear-gradient(135deg, #f7b073, #e0533f);
	color: #3a1a0c;
	box-shadow: 0 10px 22px rgba(224, 83, 63, .4);
}

.ec-ind-transport .ec-ind-icon {
	background: linear-gradient(135deg, #ec7c68, #c93f2e);
	color: #3a0f0c;
	box-shadow: 0 10px 22px rgba(201, 63, 46, .4);
}

.ec-ind-items {
	position: relative;
	z-index: 1;
	padding: 28px 26px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ec-ind-item {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ec-white);
	background: rgba(255, 255, 255, .16);
	padding: 8px 14px;
	border-radius: var(--ec-radius-pill);
	display: inline-flex;
	align-items: center;
	width: fit-content;
}

.ec-js .ec-ind-item {
	opacity: 0;
}

@keyframes ecPillIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ec-ind-card.is-visible .ec-ind-item {
	animation: ecPillIn .5s cubic-bezier(.2, .7, .2, 1) both;
}

.ec-ind-card.is-visible .ec-ind-item:nth-child(1) { animation-delay: .30s; }
.ec-ind-card.is-visible .ec-ind-item:nth-child(2) { animation-delay: .38s; }
.ec-ind-card.is-visible .ec-ind-item:nth-child(3) { animation-delay: .46s; }
.ec-ind-card.is-visible .ec-ind-item:nth-child(4) { animation-delay: .54s; }
.ec-ind-card.is-visible .ec-ind-item:nth-child(5) { animation-delay: .62s; }

/* Sem movimento, as pílulas precisam existir mesmo assim. */
@media (prefers-reduced-motion: reduce) {
	.ec-ind-item {
		opacity: 1;
		animation: none !important;
	}
}

/* ---------- animações de entrada desta página ---------- */

.ec-js .ec-reveal-rotate {
	opacity: 0;
	transform: rotate(-5deg) translateY(20px) scale(.95);
	transform-origin: center bottom;
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.ec-reveal-rotate.is-visible {
	opacity: 1;
	transform: none;
}

.ec-stagger-grid > *:nth-child(1)  { transition-delay: 0s; }
.ec-stagger-grid > *:nth-child(2)  { transition-delay: .08s; }
.ec-stagger-grid > *:nth-child(3)  { transition-delay: .16s; }
.ec-stagger-grid > *:nth-child(4)  { transition-delay: .24s; }
.ec-stagger-grid > *:nth-child(5)  { transition-delay: .32s; }
.ec-stagger-grid > *:nth-child(6)  { transition-delay: .40s; }
.ec-stagger-grid > *:nth-child(7)  { transition-delay: .48s; }
.ec-stagger-grid > *:nth-child(8)  { transition-delay: .56s; }
.ec-stagger-grid > *:nth-child(9)  { transition-delay: .64s; }
.ec-stagger-grid > *:nth-child(10) { transition-delay: .72s; }

/* ---------- mobile ---------- */

@media (max-width: 879px) {
	.ec-features-hero {
		min-height: auto;
		padding: 56px 20px 48px;
	}

	.ec-features-hero-title {
		font-size: 34px;
	}

	.ec-intro {
		padding: 64px 20px 60px;
	}

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

	.ec-stats {
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	.ec-stat-rule {
		display: none;
	}

	.ec-basic,
	.ec-industry {
		padding: 64px 20px;
	}

	.ec-feat-grid,
	.ec-ind-grid {
		grid-template-columns: 1fr;
	}

	.ec-ind-grid {
		gap: 24px;
	}
}