:root {
	--cover-timing: 0.5s;
	--cover-ease: cubic-bezier(0.66, 0.08, 0.19, 0.97);
	--cover-stagger: 0.15s;
	--text-timing: 0.75s;
	--text-stagger: 0.015s;
	--text-ease: cubic-bezier(0.38, 0.26, 0.05, 1.07);
	--title-stagger: 0.05s;
	--highlight: white;
}

.card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 0.75;
	display: flex;
	flex-direction: column;
	border-radius: 7px;
	box-shadow: rgba(255, 255, 255, 0.3) 0 5vw 6vw -8vw, rgba(255, 255, 255, 0) 0 4.5vw 5vw -6vw, rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
	transition: box-shadow 1s var(--cover-ease);
	width: 90vw;
	max-width: 300px;
}

.card > * {
	z-index: 2;
}

.card > img {
	z-index: 0;
	transition: all 0.8s cubic-bezier(0.66, 0.08, 0.19, 0.97);
}

.card::before, .card::after {
	content: "";
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	transform-origin: left;
	transform: scaleX(0);
	transition: all var(--cover-timing) var(--cover-ease);
	z-index: 1;
}

.card::after {
	transition-delay: var(--cover-stagger);
	top: 50%;
}

.card:hover, .card:focus {
	box-shadow: white 0 5vw 6vw -9vw, var(--highlight) 0 5.5vw 5vw -7.5vw, rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
}

.card:hover::before, .card:focus::before, .card:hover::after, .card:focus::after {
	transform: scaleX(1);
}

.card:hover h2 .char, .card:focus h2 .char,
.card:hover p .word, .card:focus p .word {
	opacity: 1;
	transform: translateY(0);
	color: inherit;
}

.card:hover h2 .char, .card:focus h2 .char {
	transition-delay: calc(0.1s + var(--char-index) * var(--title-stagger));
}

.card:hover p .word, .card:focus p .word {
	transition-delay: calc(0.1s + var(--word-index) * var(--text-stagger));
}

.card:hover img, .card:focus img {
	transform: scale(1.1);
}

.card:nth-of-type(1) {
	--highlight: #009cea;
}

.card:nth-of-type(2) {
	--highlight: #009cea;
}

.card:nth-of-type(3) {
	--highlight: #009cea;
}

.card .text {
	position: absolute;
	inset: 20px;
	top: 35%;
}

.card h2 {
	font-size: 30px;
	font-size: clamp(20px, 4vw, 40px);
	font-weight: 800;
	margin-bottom: 0.2em;
}

.card p {
	font-size: 12px;
	font-size: clamp(10px, 1.25vw, 14px);
	line-height: 1.4;
	text-align: justify;
	margin-top: 0.2em;
	margin-bottom: 0;
}

.card h2 .char, .card p .word {
	color: var(--highlight);
	display: inline-block;
	opacity: 0;
	position: relative;
	transform: translateY(20px);
	transition-property: transform, opacity, color;
	transition-timing-function: var(--text-ease);
	transition-duration: var(--text-timing), var(--text-timing), calc(var(--text-timing)*2);
}

.card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 7px;
}

.cards-section {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 60px;
	grid-gap: 2em;
}

@media screen and (min-width: 600px) {
	.cards-section {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content 1fr;
	}

	.card {
		width: 40vw;
	}
}

@media screen and (min-width: 1024px) {
	.card {
		width: 100%;
		max-width: 100%;
	}

	.card-stair-2 {
		margin-top: 5rem;
	}

	.card-stair-3 {
		margin-top: 10rem;
	}
}

/* ── METODOLOGIA TIMELINE ANIMATION ── */
.timeline-item-metodo {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item-metodo.visible {
	opacity: 1;
	transform: translateY(0);
}

.timeline-dot-metodo {
	background: #d1d5db;
	color: #9ca3af;
	transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.timeline-dot-metodo.active {
	background: #1844a5;
	color: #ffffff;
	box-shadow: 0 0 0 5px rgba(24, 68, 165, 0.18);
}

/* ── METODOLOGIA GRID LAYOUT ── */
.metodo-grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.metodo-line-track {
	display: none;
}

.metodo-col-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 0;
}

.metodo-col-left,
.metodo-col-right {
	display: flex;
	align-items: center;
}

.metodo-text {
	text-align: right;
}

#lineFillMetodo {
	width: 100%;
	height: 0%;
	background: #1844a5;
}

@media (min-width: 768px) {
	.metodo-grid {
		display: grid;
		grid-template-columns: 1fr 5rem 1fr;
		gap: 0;
		position: relative;
	}

	.metodo-line-track {
		display: block;
		position: absolute;
		/* Centrado na coluna do meio: 1fr + metade dos 5rem */
		left: calc(50% - 1px);
		top: 0;
		bottom: 0;
		width: 2px;
		background: #e5e7eb;
		overflow: hidden;
		pointer-events: none;
		z-index: 1;
	}

	.metodo-col-left {
		justify-content: flex-end;
		padding: 3rem 3rem 3rem 0;
	}

	.metodo-col-right {
		padding: 3rem 0 3rem 3rem;
	}

	.metodo-col-dot {
		padding: 3rem 0;
		z-index: 10;
		position: relative;
	}
}