/**
 * How it works (home, seção #how-it-works).
 *
 * Stepper horizontal minimalista com círculos numerados, ícone em currentColor,
 * título curto e texto muted. Fecha com uma trust bar premium responsiva.
 */

.dr-how {
	background: var(--dr-color-bg);
}

/* --- Passos ----------------------------------------------------------------- */

.dr-how__steps {
	display: grid;
	gap: clamp(var(--dr-space-4), 4vw, var(--dr-space-5)) var(--dr-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

@media (min-width: 48rem) {
	.dr-how__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.dr-how__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dr-how__steps::before {
		background: var(--dr-color-border);
		content: "";
		height: 1px;
		left: 12.5%;
		position: absolute;
		right: 12.5%;
		top: 1.5rem;
	}

}

.dr-how__step {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 0;
	position: relative;
	text-align: center;
}

.dr-how__number {
	align-items: center;
	background: var(--dr-color-surface);
	border: var(--dr-border-width-1) solid var(--dr-color-border);
	border-radius: var(--dr-radius-round);
	color: var(--dr-color-text);
	display: flex;
	font-size: var(--dr-font-size-300);
	font-weight: var(--dr-font-weight-bold);
	height: 3rem;
	justify-content: center;
	margin-block-end: var(--dr-space-2);
	position: relative;
	width: 3rem;
	z-index: 2;
}

.dr-how__icon {
	align-items: center;
	background: var(--dr-color-bg-subtle);
	border-radius: var(--dr-radius-round);
	color: var(--dr-color-accent);
	display: flex;
	height: 2.75rem;
	justify-content: center;
	margin-block-end: var(--dr-space-2);
	width: 2.75rem;
}

.dr-how__icon svg {
	display: block;
	height: 1.375rem;
	width: 1.375rem;
}

/* Sedan da seção Our services (assets/images/icons/icon-sedan-front.svg tem
 * fill fixo — o mask pinta com o currentColor do círculo). */
.dr-how__icon-sedan {
	background-color: currentColor;
	display: block;
	height: 1.5rem;
	mask: url("../../images/icons/icon-sedan-front.svg") center / contain no-repeat;
	-webkit-mask: url("../../images/icons/icon-sedan-front.svg") center / contain no-repeat;
	width: 1.5rem;
}

.dr-how__title {
	font-size: var(--dr-font-size-300);
	font-weight: var(--dr-font-weight-semibold);
	letter-spacing: var(--dr-letter-spacing-tight);
	line-height: var(--dr-line-height-heading);
	margin: 0 0 var(--dr-space-1);
}

.dr-how__text {
	color: var(--dr-color-text-muted);
	font-size: var(--dr-font-size-200);
	line-height: var(--dr-line-height-body);
	margin: 0;
	max-width: 30ch;
}

/* --- Trust bar --------------------------------------------------------------- */

.dr-how .dr-trust-bar {
	background: #fff;
	border: 1px solid #e8ecef;
	border-radius: 28px;
	box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
	color: #111;
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 72px auto 0;
	max-width: 82.5rem;
	padding: 24px 40px;
	width: 100%;
}

.dr-how .dr-trust-item {
	align-items: center;
	display: flex;
	gap: 16px;
	margin: 0;
	min-width: 0;
}

.dr-how .dr-trust-icon {
	align-items: center;
	background: #f7f9fb;
	border: 1px solid #eef2f4;
	border-radius: 999px;
	color: #0f5668;
	display: inline-flex;
	flex: 0 0 52px;
	height: 52px;
	justify-content: center;
	transition:
		box-shadow 250ms ease,
		transform 250ms ease;
	width: 52px;
}

.dr-how .dr-trust-icon svg {
	display: block;
	height: 20px;
	width: 20px;
}

.dr-how .dr-trust-content {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.dr-how .dr-trust-content strong {
	color: #111;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

.dr-how .dr-trust-content > span {
	color: #6b7280;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.6;
}

.dr-how .dr-trust-divider {
	background: #e8ecef;
	height: 1px;
	margin: 0;
	width: 100%;
}

@media (hover: hover) {
	.dr-how .dr-trust-item:hover .dr-trust-icon {
		box-shadow: 0 10px 24px rgba(15, 86, 104, 0.12);
		transform: translateY(-2px);
	}
}

@media (min-width: 48rem) {
	.dr-how .dr-trust-bar {
		align-items: center;
		gap: clamp(20px, 2.5vw, 36px);
		grid-template-columns:
			minmax(0, 1fr)
			1px
			minmax(0, 1fr)
			1px
			minmax(0, 1fr);
	}

	.dr-how .dr-trust-divider {
		height: 56px;
		width: 1px;
	}
}

@media (max-width: 47.9375rem) {
	.dr-how .dr-trust-bar {
		padding: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dr-how .dr-trust-icon {
		transition: none;
	}

	.dr-how .dr-trust-item:hover .dr-trust-icon {
		transform: none;
	}
}