/* Hero comercial (variante B do teste A/B). Reaproveita .hero do tema. */

.hero--comercial .hero__titulo { max-width: 18ch; }
.hero--comercial .hero__apoio { margin-top: 20px; }

/* Faixa de preços: duas colunas separadas por fio dourado. */
.oferta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(100%, 44rem);
	margin-top: 30px;
	border: 1px solid rgba(var(--dourado-rgb), .55);
	border-radius: var(--r);
	background: rgba(var(--verde-rgb), .82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.oferta__item { padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.8vw, 32px); }
.oferta__item + .oferta__item { border-left: 1px solid rgba(var(--dourado-rgb), .7); }

.oferta__rotulo {
	color: rgba(var(--areia-rgb), .9);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .18em;
	line-height: 1.35;
	text-transform: uppercase;
}
.oferta__valor {
	margin-top: 8px;
	color: #fff;
	font-family: var(--ff-titulo);
	font-size: clamp(1.7rem, 1rem + 2.6vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
}
.oferta__valor span {
	margin-right: .12em;
	color: var(--dourado);
	font-size: .5em;
	letter-spacing: 0;
}

.oferta__entrega {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	color: rgba(var(--areia-rgb), .9);
	font-size: .95rem;
}
.oferta__entrega .ico { width: 20px; height: 20px; flex: none; color: var(--dourado); }
.oferta__entrega strong { color: var(--areia); font-weight: 600; }

.oferta__legal {
	margin-top: 16px;
	color: rgba(var(--areia-rgb), .62);
	font-size: .72rem;
	line-height: 1.4;
}

@media (max-width: 480px) {
	.oferta__rotulo { font-size: .62rem; letter-spacing: .12em; }
	.oferta__valor { font-size: clamp(1.35rem, 7vw, 1.75rem); }
	.oferta__valor span { display: block; margin: 0 0 4px; font-size: .55em; }
	.hero--comercial .hero__acoes .btn { width: 100%; }
}

/* v3: entrada em percentual. Faixa mais compacta, conteúdo centrado na vertical
   e número do 5% só um pouco maior que o das parcelas, para os dois cards
   terem a mesma altura visual. */
.oferta--pct { grid-template-columns: 2fr 3fr; width: min(100%, 38rem); }
.oferta--pct .oferta__item { display: flex; flex-direction: column; justify-content: center; }
.oferta--pct .oferta__item:first-child .oferta__valor { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); }
.oferta__nota {
	margin-top: 6px;
	color: rgba(var(--areia-rgb), .78);
	font-size: .74rem;
	letter-spacing: .04em;
	line-height: 1.3;
}
@media (max-width: 480px) {
	.oferta--pct .oferta__item:first-child .oferta__valor { font-size: clamp(2rem, 10vw, 2.5rem); }
}

/* v4: hero original + selo comercial com um único quadrante (parcelas). */
.oferta--selo { grid-template-columns: auto; width: fit-content; max-width: 100%; margin-top: 26px; }
.oferta--selo .oferta__item { padding: 16px 26px 14px; }
.oferta--selo .oferta__valor { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); }
.oferta--selo .oferta__nota { max-width: 26ch; font-size: .66rem; letter-spacing: .02em; opacity: .85; }
.oferta--selo + .hero__acoes { margin-top: 22px; }

/* v4: hero original + selo comercial com um único quadrante (parcelas). */
.oferta--selo { grid-template-columns: auto; width: fit-content; max-width: 100%; margin-top: 26px; }
.oferta--selo .oferta__item { padding: 16px 26px 14px; }
.oferta--selo .oferta__valor { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); }
.oferta--selo .oferta__nota { max-width: 26ch; font-size: .66rem; letter-spacing: .02em; opacity: .85; }
.oferta--selo + .hero__acoes { margin-top: 22px; }