/* ============================================================
   EVE Theme — Components
   Todos os componentes do UI: header, nav, botões, cards,
   hero, forms, breadcrumbs, paginação, footer.
   ============================================================ */


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   1. SITE HEADER
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	z-index: var(--z-sticky);
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.site-header__accent-line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-circuit-teal) 60%, var(--color-energy-green) 100%);
}

.site-header.is-scrolled {
	border-color: var(--color-border);
	box-shadow: 0 1px 0 var(--color-border), var(--shadow-xs);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: var(--space-8);
}

.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.site-header__logo img {
	height: 40px;
	width: auto;
}

.site-header__logo .site-logo__text {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	letter-spacing: var(--tracking-tight);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
}

/* ── Hamburguer ──────────────────────────────────────────── */
.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	padding: 6px;
	cursor: pointer;
	border: none;
	background: none;
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}

.menu-toggle:hover {
	background: var(--color-gray-100);
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-fast);
	transform-origin: center;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
	.menu-toggle { display: none; }
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   2. NAVEGAÇÃO PRINCIPAL
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.site-nav {
	flex: 1;
}

.site-nav__list {
	display: none;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text);
	border-radius: var(--radius-md);
	transition: color var(--transition-fast), background var(--transition-fast);
	white-space: nowrap;
}

.site-nav__link:hover {
	color: var(--color-primary);
	background: transparent;
}

.site-nav__link[aria-current="page"] {
	color: var(--color-primary);
	font-weight: var(--font-semibold);
}

/* Dropdown */
.site-nav__dropdown {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: var(--z-dropdown);
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__dropdown a {
	display: block;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text);
	border-radius: 0;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.site-nav__dropdown a:first-child {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	padding-top: var(--space-3);
}

.site-nav__dropdown a:last-child {
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding-bottom: var(--space-3);
}

.site-nav__dropdown a:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

/* Nav desktop */
@media (min-width: 1024px) {
	.site-nav__list {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--space-1);
	}
}

/* Nav mobile */
@media (max-width: 1023px) {
	.site-nav {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--color-white);
		padding: var(--space-6) var(--container-px);
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform var(--transition-base);
		z-index: var(--z-overlay);
	}

	.site-nav.is-open {
		transform: translateX(0);
	}

	.site-nav__list {
		display: flex;
		gap: var(--space-1);
	}

	.site-nav__link {
		font-size: var(--text-base);
		padding: var(--space-3) var(--space-4);
	}

	.site-nav__dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: var(--color-bg-alt);
		border-radius: var(--radius-lg);
		margin-top: var(--space-1);
		padding: var(--space-2) 0;
	}

	.site-nav__dropdown a {
		padding: var(--space-2) var(--space-6);
	}
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   3. BOTÕES
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.75rem 1.5rem;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
	-webkit-user-select: none;
	user-select: none;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* Primário */
.btn--primary {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.btn--primary:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-white);
	box-shadow: 0 4px 20px rgba(15, 77, 63, 0.35);
}

/* Acento */
.btn--accent {
	background: var(--color-accent);
	color: var(--color-white);
	border-color: var(--color-accent);
	box-shadow: 0 2px 12px rgba(61, 180, 124, 0.2);
}

.btn--accent:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-white);
	box-shadow: 0 4px 24px rgba(61, 180, 124, 0.4);
}

/* No hero, o btn--accent fica mais proeminente */
.hero .btn--accent {
	box-shadow: 0 4px 20px rgba(61, 180, 124, 0.3);
}

.hero .btn--accent:hover {
	box-shadow: 0 6px 32px rgba(61, 180, 124, 0.55);
}

/* Outline (fundo claro) */
.btn--outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--outline:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* Ghost (para fundos escuros) */
.btn--ghost {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.3);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Outline claro (para fundos escuros) */
.btn--outline-light {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255,255,255,0.5);
}

.btn--outline-light:hover {
	background: rgba(255,255,255,0.1);
	color: var(--color-white);
	border-color: var(--color-white);
}

/* Tamanhos */
.btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--text-xs);
}

.btn--lg {
	padding: 1rem 2rem;
	font-size: var(--text-base);
}

/* Largura total */
.btn--full {
	width: 100%;
}

/* Estado desabilitado */
.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
	transform: none;
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   4. HERO — Premium Engineering
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg-primary);
	overflow: hidden;
	padding-top: var(--header-height);
}

.hero__bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(61,180,124,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(61,180,124,0.07) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.hero__bg-grid::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 80% at 80% 40%, rgba(26,163,154,0.1) 0%, transparent 70%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-12);
	align-items: center;
	padding-block: var(--space-20);
	flex: 1;
}

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr 520px;
		padding-block: var(--space-24);
		gap: var(--space-16);
	}
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-energy-green);
	margin-bottom: var(--space-6);
}

.hero__eyebrow-line {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--color-energy-green);
	flex-shrink: 0;
}

.hero__title {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	font-weight: var(--font-extrabold);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin-bottom: var(--space-6);
}

.hero__title em {
	font-style: normal;
	color: var(--color-energy-green);
}

.hero__description {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: rgba(255,255,255,0.65);
	max-width: 500px;
	margin-bottom: var(--space-10);
	font-weight: var(--font-light);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Hero visual — diagrama técnico */
.hero__visual {
	display: none;
}

@media (min-width: 1024px) {
	.hero__visual {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
}

.hero__diagram {
	width: 100%;
	max-width: 520px;
	height: auto;
	opacity: 0.9;
}

/* Barra de estatísticas — ancora no fundo do hero */
.hero__stats-bar {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.2);
	padding-block: var(--space-6);
}

.hero__stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

@media (min-width: 640px) {
	.hero__stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.hero__stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-6);
	border-right: 1px solid rgba(255,255,255,0.06);
}

.hero__stat:last-child {
	border-right: none;
}

.hero__stat-value {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--font-extrabold);
	color: var(--color-white);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
}

.hero__stat-label {
	font-size: var(--text-xs);
	color: rgba(255,255,255,0.45);
	font-weight: var(--font-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   5. CARDS DE SERVIÇO
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.service-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-8);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
	text-decoration: none;
}

.service-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.service-card__icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-6);
	color: var(--color-primary);
}

.service-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	margin-bottom: var(--space-3);
	line-height: var(--leading-tight);
}

.service-card:hover .service-card__title {
	color: var(--color-primary);
}

.service-card__description {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	flex: 1;
	margin-bottom: var(--space-6);
}

.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
	margin-top: auto;
}

.service-card__link svg {
	transition: transform var(--transition-fast);
}

.service-card:hover .service-card__link svg {
	transform: translateX(4px);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   6. CARDS DE POST (BLOG)
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
	text-decoration: none;
	color: inherit;
}

.post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.post-card__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-gray-100);
}

.post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.post-card:hover .post-card__image img {
	transform: scale(1.03);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	flex: 1;
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.post-card__category {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.post-card__date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.post-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	line-height: var(--leading-snug);
	color: var(--color-text);
	margin-bottom: var(--space-3);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card:hover .post-card__title {
	color: var(--color-primary);
}

.post-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
	margin-bottom: var(--space-4);
}

.post-card__reading-time {
	font-size: var(--text-xs);
	color: var(--color-text-light);
	margin-top: auto;
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   7. CARDS DE CASE
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.case-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
	text-decoration: none;
	color: inherit;
}

.case-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.case-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	background: var(--color-gray-100);
}

.case-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.case-card:hover .case-card__image img {
	transform: scale(1.04);
}

.case-card__tags {
	position: absolute;
	bottom: var(--space-4);
	left: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.case-card__body {
	padding: var(--space-6);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.case-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	margin-bottom: var(--space-3);
	line-height: var(--leading-snug);
}

.case-card:hover .case-card__title {
	color: var(--color-primary);
}

.case-card__description {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: var(--space-4);
	flex: 1;
}

.case-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	margin-top: auto;
}

.case-card__segment {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.case-card__arrow {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.case-card:hover .case-card__arrow {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   8. FORMULÁRIOS
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.form-label {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text);
}

.form-label--required::after {
	content: ' *';
	color: var(--color-error);
}

.form-control {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-white);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	appearance: none;
}

.form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(15, 77, 63, 0.12);
}

.form-control::placeholder {
	color: var(--color-gray-400);
}

textarea.form-control {
	resize: vertical;
	min-height: 140px;
}

.form-grid {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.form-grid--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.form-feedback {
	font-size: var(--text-sm);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	margin-top: var(--space-4);
}

.form-feedback--success {
	background: rgba(25, 135, 84, 0.1);
	color: var(--color-success);
}

.form-feedback--error {
	background: rgba(220, 53, 69, 0.1);
	color: var(--color-error);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   9. BREADCRUMBS
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.breadcrumbs {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-white);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs__item,
.breadcrumbs__separator {
	display: flex;
	align-items: center;
}

.breadcrumbs__link {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
	color: var(--color-primary);
}

.breadcrumbs__separator {
	color: var(--color-gray-300);
}

.breadcrumbs__current {
	font-size: var(--text-xs);
	color: var(--color-text);
	font-weight: var(--font-medium);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   10. PAGINAÇÃO
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.pagination__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pagination__link:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.pagination__link--active {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.pagination__link--prev,
.pagination__link--next {
	width: auto;
	padding: 0 var(--space-4);
	gap: var(--space-2);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   11. SITE FOOTER
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.site-footer {
	background: var(--color-deep-blue);
	color: rgba(255,255,255,0.75);
	padding-top: var(--space-20);
	position: relative;
}

.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-circuit-teal) 50%, transparent 100%);
}

.site-footer__main {
	display: grid;
	gap: var(--space-12);
	padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
	.site-footer__main {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.site-footer__logo {
	display: block;
	margin-bottom: var(--space-2);
}

.site-footer__logo img {
	height: 36px;
	width: auto;
	filter: brightness(0) invert(1);
}

.site-footer__logo .site-logo__text {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-white);
}

.site-footer__tagline {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.6);
	line-height: var(--leading-relaxed);
	max-width: 260px;
}

.site-footer__col-title {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	margin-bottom: var(--space-4);
}

.site-footer__nav {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__nav a {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-footer__nav a:hover {
	color: var(--color-energy-green);
}

.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-block: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
	text-align: center;
}

@media (min-width: 768px) {
	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

.site-footer__copyright {
	font-size: var(--text-xs);
	color: rgba(255,255,255,0.4);
}

.site-footer__legal-links {
	display: flex;
	gap: var(--space-4);
	list-style: none;
}

.site-footer__legal-links a {
	font-size: var(--text-xs);
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-footer__legal-links a:hover {
	color: rgba(255,255,255,0.8);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   12. CTA STRIP — Layout horizontal, limpo
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.cta-strip {
	background: var(--color-bg-dark);
	padding-block: var(--space-16);
	border-top: 1px solid rgba(255,255,255,0.06);
}

.cta-strip__inner {
	display: grid;
	gap: var(--space-10);
	align-items: center;
}

@media (min-width: 1024px) {
	.cta-strip__inner {
		grid-template-columns: 1fr auto;
		gap: var(--space-16);
	}
}

.cta-strip__eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-energy-green);
	margin-bottom: var(--space-4);
}

.cta-strip__title {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: var(--font-extrabold);
	color: var(--color-white);
	line-height: 1.1;
	letter-spacing: var(--tracking-tight);
	margin-bottom: 0;
}

.cta-strip__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.cta-strip__actions {
		flex-direction: row;
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.cta-strip__actions {
		flex-direction: column;
		align-items: flex-end;
	}
}

.cta-strip__contact {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.4);
	font-family: var(--font-body);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   13. SEÇÃO DE DIFERENCIAIS / STATS
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
}

@media (min-width: 768px) {
	.stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.stat-item {
	text-align: center;
	padding: var(--space-6);
}

.stat-item__number {
	font-family: var(--font-heading);
	font-size: var(--text-5xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: var(--space-2);
}

.stat-item__label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-weight: var(--font-medium);
}

/* Stats no dark bg */
.bg-dark .stat-item__number,
.bg-primary .stat-item__number {
	color: var(--color-energy-green);
}

.bg-dark .stat-item__label,
.bg-primary .stat-item__label {
	color: rgba(255,255,255,0.6);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   14. PAGE HERO (páginas internas)
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.page-hero {
	background: var(--color-bg-primary);
	padding-top: calc(var(--header-height) + var(--space-16));
	padding-bottom: var(--space-20);
	position: relative;
	overflow: hidden;
}

.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(61,180,124,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(61,180,124,0.06) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.page-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-energy-green);
	margin-bottom: var(--space-6);
}

.page-hero__eyebrow::before {
	content: '';
	display: block;
	width: 24px;
	height: 1px;
	background: var(--color-energy-green);
	flex-shrink: 0;
}

.page-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: var(--font-extrabold);
	color: var(--color-white);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-4);
}

.page-hero__description {
	font-size: var(--text-lg);
	color: rgba(255,255,255,0.65);
	line-height: var(--leading-relaxed);
	font-weight: var(--font-light);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   15. SIDEBAR
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.sidebar__widget {
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.sidebar__widget-title {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-accent);
	display: inline-block;
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   16. SERVICES LAYOUT — Lista numerada premium
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.services-layout {
	display: grid;
	gap: var(--space-16);
	align-items: start;
}

@media (min-width: 1024px) {
	.services-layout {
		grid-template-columns: 360px 1fr;
		gap: var(--space-20);
	}
}

.services-layout__header {
	/* sticky apenas em desktop */
}

@media (min-width: 1024px) {
	.services-layout__header {
		position: sticky;
		top: calc(var(--header-height) + var(--space-8));
	}
}

.services-layout__header .section-subtitle {
	margin-bottom: var(--space-8);
}

.services-list {
	display: flex;
	flex-direction: column;
}

.service-item {
	display: grid;
	grid-template-columns: 48px 1fr 32px;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	border-left: 2px solid transparent;
	text-decoration: none;
	color: inherit;
	transition:
		border-color var(--transition-fast),
		padding-left var(--transition-fast);
}

.service-item:last-child {
	border-bottom: 1px solid var(--color-border);
}

.service-item:hover {
	border-left-color: var(--color-energy-green);
	border-top-color: transparent;
	padding-left: var(--space-4);
}

.service-item__num {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-gray-400);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	padding-top: 2px;
	flex-shrink: 0;
}

.service-item:hover .service-item__num {
	color: var(--color-accent);
}

.service-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.service-item__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	line-height: var(--leading-snug);
	transition: color var(--transition-fast);
}

.service-item:hover .service-item__title {
	color: var(--color-primary);
}

.service-item__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
}

.service-item__arrow {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	color: var(--color-gray-400);
	flex-shrink: 0;
	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast);
}

.service-item:hover .service-item__arrow {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
	transform: translateX(4px);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   17. ABOUT STATS — Números oversized no fundo escuro
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.about-hero-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	margin-bottom: var(--space-16);
}

@media (min-width: 768px) {
	.about-hero-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

.about-stat {
	padding: var(--space-10) var(--space-8);
	border-right: 1px solid rgba(255,255,255,0.06);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* mobile: 2x2 — nenhuma borda direita na 2ª coluna */
.about-stat:nth-child(2n) {
	border-right: none;
}

/* mobile: nenhuma borda bottom na 2ª linha */
.about-stat:nth-child(3),
.about-stat:nth-child(4) {
	border-bottom: none;
}

@media (min-width: 768px) {
	.about-stat:nth-child(2n) {
		border-right: 1px solid rgba(255,255,255,0.06);
	}
	.about-stat:last-child {
		border-right: none;
	}
	.about-stat:nth-child(3),
	.about-stat:nth-child(4) {
		border-bottom: none;
	}
	.about-stat {
		border-bottom: none;
	}
}

.about-stat__value {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: var(--font-extrabold);
	color: var(--color-white);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-2);
}

.about-stat__label {
	display: block;
	font-size: var(--text-xs);
	color: rgba(255,255,255,0.4);
	font-weight: var(--font-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.about-cols {
	display: grid;
	gap: var(--space-12);
}

@media (min-width: 1024px) {
	.about-cols {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
	}
}

.about-cols__text {
	color: rgba(255,255,255,0.7);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	font-weight: var(--font-light);
}

.about-cols__text + .about-cols__text {
	color: rgba(255,255,255,0.55);
	font-size: var(--text-base);
}

.about-features {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--space-10);
	border-top: 1px solid rgba(255,255,255,0.08);
}

.about-feature {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.about-feature__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--color-energy-green);
	flex-shrink: 0;
}

.about-feature__text {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.65);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   18. BLOG EDITORIAL — Layout assimétrico feature + lista
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.blog-editorial {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 1024px) {
	.blog-editorial {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10);
	}
}

.blog-editorial__feature {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.blog-editorial__feature:hover {
	box-shadow: var(--shadow-lg);
	border-color: var(--color-border-strong);
}

.blog-editorial__feature-img {
	aspect-ratio: 16 / 9;
	background: var(--color-gray-100);
	overflow: hidden;
}

.blog-editorial__feature-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.blog-editorial__feature:hover .blog-editorial__feature-img img {
	transform: scale(1.03);
}

.blog-editorial__feature-img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-circuit-teal) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
}

.blog-editorial__feature-body {
	padding: var(--space-8);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-editorial__feature-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.blog-editorial__feature-cat {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.blog-editorial__feature-date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.blog-editorial__feature-title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	line-height: var(--leading-snug);
	margin-bottom: var(--space-4);
	transition: color var(--transition-fast);
}

.blog-editorial__feature:hover .blog-editorial__feature-title {
	color: var(--color-primary);
}

.blog-editorial__feature-excerpt {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	flex: 1;
}

.blog-editorial__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.blog-editorial__list-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	flex: 1;
	transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.blog-editorial__list-item:hover {
	box-shadow: var(--shadow-sm);
	border-color: var(--color-border-strong);
}

.blog-editorial__list-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.blog-editorial__list-cat {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.blog-editorial__list-date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.blog-editorial__list-title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	line-height: var(--leading-snug);
	transition: color var(--transition-fast);
}

.blog-editorial__list-item:hover .blog-editorial__list-title {
	color: var(--color-primary);
}

.blog-editorial__list-excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   19. CASES PREMIUM — Cards grandes com número de sequência
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.cases-grid {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.cases-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.cases-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.case-card--premium {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		box-shadow var(--transition-base),
		border-color var(--transition-base),
		transform var(--transition-base);
}

.case-card--premium:hover {
	box-shadow: var(--shadow-lg);
	border-color: var(--color-border-strong);
	transform: translateY(-2px);
}

.case-card__visual {
	aspect-ratio: 4 / 3;
	background: var(--color-gray-100);
	overflow: hidden;
	position: relative;
}

.case-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.case-card--premium:hover .case-card__visual img {
	transform: scale(1.04);
}

.case-card__visual-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-deep-blue) 0%, var(--color-primary) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.case-card__segment-badge {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-white);
	background: rgba(15,77,63,0.85);
	backdrop-filter: blur(4px);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.case-card__info {
	padding: var(--space-6);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.case-card__name {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	line-height: var(--leading-snug);
	transition: color var(--transition-fast);
}

.case-card--premium:hover .case-card__name {
	color: var(--color-primary);
}

.case-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.case-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	margin-top: auto;
}

.case-card__read {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   20. SECTION HEADER — variantes premium
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.section-header--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-bottom: var(--space-12);
}

.section-header--split .section-title {
	margin-bottom: 0;
}


/* ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ──
   21. SEGMENTS STRIP — Faixa de mercados rápida
   ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */

.segments-strip {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-4);
	overflow: hidden;
}

.segments-strip__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.segments-strip__inner::-webkit-scrollbar {
	display: none;
}

.segments-strip__label {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	white-space: nowrap;
	flex-shrink: 0;
	padding-right: var(--space-4);
	border-right: 1px solid var(--color-border);
}

.segments-strip__list {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
}

.segments-strip__item {
	display: inline-block;
	padding: var(--space-1) var(--space-4);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--color-text-muted);
	text-decoration: none;
	white-space: nowrap;
	border-right: 1px solid var(--color-border);
	transition: color var(--transition-fast);
	letter-spacing: 0.01em;
}

.segments-strip__item:last-child {
	border-right: none;
}

.segments-strip__item:hover {
	color: var(--color-primary);
}