.page-template-page-careers .page-hero__text{
	max-width: 54ch;
}

/* ==========================================================================
   Careers
   ========================================================================== */

.behaviors{
	background-color: var(--c-surface);
	padding-bottom: 0;
	padding-top: 1rem;
}

@media (min-width: 767px) {
	.behaviors{
		padding-top: clamp(2rem, 2.5rem + 6vw, 4rem);
	}
}

.behaviors .section__head {
	max-width: 1214px;
}

.behaviors__mark {
	display: inline-block;
	width: clamp(40px, 5vw, 63px);
	height: auto;
	transform: translateY(6px) scaleY(-1);
	/* espelhado na vertical, como no design */
}

.behaviors .lead{
	max-width: 880px;
}

.behaviors-last-two{
	padding-block: clamp(var(--space-12), 6vw, 4.6875rem);
}

/* --- Cartão de comportamento ---------------------------------------------- */

.behavior {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	align-items: stretch;
	/* O mesmo respiro entre as duas metades e entre um cartão e o seguinte. */
	gap: var(--space-5);
	margin-bottom: var(--space-5);
}

.behavior--flipped{
	grid-template-columns: 1fr 1fr;
}

/* Metade imagem, metade texto — o lado da foto alterna a cada cartão. */
.behavior--flipped .behavior__image {
	order: 2;
}

.behavior--flipped .behavior__card {
	order: 1;
}

.behavior__image {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	border-radius: var(--radius-card);
	aspect-ratio: 1 / 0.5;
}

.behavior__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-height: 420px;
	padding: clamp(var(--space-6), 3vw, var(--space-12));
	border: 1px solid #d9d9d9;
	border-radius: var(--radius-card);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* No hover o quadro vira o cartão azul do design: o ícone e o texto passam a
   branco e o nome do valor, de cinza-assinatura, acende em água. */
.behavior__card:hover,
.behavior__card:focus-within {
	background: var(--c-blue);
	border-color: var(--c-blue);
}

.behavior__card:hover .behavior__title,
.behavior__card:focus-within .behavior__title,
.behavior__card:hover .behavior__text,
.behavior__card:focus-within .behavior__text {
	color: var(--c-white);
}

.behavior__card:hover .behavior__value,
.behavior__card:focus-within .behavior__value {
	color: var(--c-aqua);
}

/* Os ícones são SVG de uma cor só, servidos como <img>: o filtro é o caminho
   para virarem brancos — o mesmo usado no pilar ativo do portfólio. */
.behavior__card:hover .behavior__icon,
.behavior__card:focus-within .behavior__icon {
	filter: brightness(0) invert(1);
}

/* Os arquivos são azuis (#003EC5), mas no cartão de Careers o design os quer
   em cinza — o mesmo tom da assinatura do valor. brightness(0) achata para
   preto e invert() escolhe o cinza: .65 dá ~#A6A6A6. */
.behavior__icon {
	width: 49px;
	height: auto;
	filter: brightness(0) invert(.65);
	transition: filter var(--dur) var(--ease);
}

.behavior__title {
	margin-top: auto;
	transition: color var(--dur) var(--ease);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3.125rem);
	/* 28 → 50px */
	line-height: 1;
}

/* O nome do valor fica em cinza claro no design, como uma assinatura — mas o
   #d9d9d9 do Figma dava 1.4:1 sobre o cartão branco e só ficava legível no
   hover. --c-ink-soft é o cinza mais claro que ainda passa em 4.5:1. */
.behavior__value {
	font-family: var(--font-sans);
	font-size: clamp(1.125rem, 1rem + .6vw, 1.625rem);
	/* 18 → 26px */
	font-weight: var(--fw-medium);
	line-height: 1;
	color: var(--c-ink-soft);
	transition: color var(--dur) var(--ease);
}

.behavior__text {
	max-width: 44ch;
	font-size: var(--fs-nav);
	/* 20px */
	line-height: 1.25;
	color: var(--c-ink);
	transition: color var(--dur) var(--ease);
}



@media (max-width: 1600px) {
	.behavior__image {
		min-height: 270px;
	}
	.behavior__card {
		min-height: 270px;
	}
}

@media (max-width: 860px) {
	.behavior {
		grid-template-columns: 1fr;
	}

	.behavior--flipped .behavior__image,
	.behavior--flipped .behavior__card {
		order: 0;
	}
}

/* --- Faixa de destaque ----------------------------------------------------- */

.quote-band {
	margin-top: var(--space-16);
	padding-block: clamp(var(--space-12), 6vw, 4.6875rem);
	background: var(--c-blue);
}

.quote-band__text {
	max-width: 1152px;
	margin-inline: auto;
	font-family: var(--font-display);
	font-weight: var(--fw-light);
	font-size: var(--fs-h2);
	line-height: 1.25;
	text-align: center;
	color: var(--c-surface);
}