/**
 * Blocos Lizzon.
 *
 * Escuro primeiro, tipografia editorial, ouro usado com parcimônia — ouro em
 * tudo deixa de ser ouro e vira amarelo.
 *
 * As medidas são em `clamp()` para a página respirar sem media query a cada
 * bloco: o mesmo componente serve o telefone e a tela grande, que é onde um
 * construtor genérico costuma entregar uma das duas mal.
 */

.ub {
	--ub-gap: clamp(18px, 3vw, 34px);
	box-sizing: border-box;
	color: var(--lz-texto, #f3efe8);
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	text-align: center;
}

.ub *,
.ub *::before,
.ub *::after {
	box-sizing: inherit;
}

.ub h2,
.ub h3 {
	margin: 0;
	color: inherit;
	font-family: inherit;
}

/* ─────────────────────────── Números ─────────────────────────── */

.ub-numeros__titulo {
	margin-bottom: clamp(22px, 4vw, 40px);
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.01em;
	text-wrap: balance;
}

/*
 * As colunas vêm da contagem, não do `auto-fit`.
 *
 * Deixar o navegador decidir parece elegante e produz órfão: quatro números
 * numa tela média viram três em cima e um sozinho embaixo, que lê como erro.
 * Com a contagem conhecida dá para escolher sempre uma divisão inteira.
 */
.ub-numeros__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ub-gap);
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.ub-numeros--n1 .ub-numeros__lista { grid-template-columns: 1fr; }
.ub-numeros--n3 .ub-numeros__lista { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 720px) {
	.ub-numeros--n4 .ub-numeros__lista { grid-template-columns: repeat(4, 1fr); }
}

.ub-numeros__lista li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 8px;
}

/* O número é o herói do bloco: tudo em volta existe para ele ser lido. */
.ub-numeros__valor {
	background: linear-gradient(180deg, var(--lz-ouro-claro, #f3d99a), var(--lz-ouro, #d6ad60));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.ub-numeros__rotulo {
	color: var(--lz-suave, #a9a296);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ub-numeros__nota {
	margin: clamp(16px, 3vw, 26px) 0 0;
	color: #6f685e;
	font-size: .72rem;
	letter-spacing: .06em;
}

/* ─────────────────────────── Benefícios ─────────────────────────── */

.ub-beneficios__titulo {
	margin-bottom: clamp(22px, 4vw, 40px);
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.01em;
	text-wrap: balance;
}

/*
 * Empilhado no telefone e direto no número escolhido a partir de 760px.
 *
 * Não existe passo intermediário de duas colunas de propósito: com três
 * cartões, duas colunas sempre deixam um sozinho embaixo — e um cartão
 * órfão parece defeito, não ritmo.
 */
.ub-beneficios__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ub-gap);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.ub-beneficios--c2 .ub-beneficios__lista { grid-template-columns: repeat(2, 1fr); }
	.ub-beneficios--c3 .ub-beneficios__lista { grid-template-columns: repeat(3, 1fr); }
	/* Quatro só quando cabem quatro: abaixo disso, duas e duas. */
	.ub-beneficios--c4 .ub-beneficios__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
	.ub-beneficios--c4 .ub-beneficios__lista { grid-template-columns: repeat(4, 1fr); }
}

.ub-beneficios__lista li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: clamp(22px, 3vw, 30px) 20px;
	background: var(--lz-cartao, #121110);
	border: 1px solid var(--lz-linha, #26221d);
	border-radius: 14px;
	transition: border-color .2s ease, transform .2s ease;
}

.ub-beneficios__lista li:hover {
	border-color: rgba(214, 173, 96, .45);
	transform: translateY(-2px);
}

.ub-beneficios__icone {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(214, 173, 96, .4);
	border-radius: 50%;
	color: var(--lz-ouro, #d6ad60);
	font-size: 22px;
}

.ub-beneficios__icone svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ub-beneficios__lista h3 {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

.ub-beneficios__lista p {
	margin: 0;
	color: var(--lz-suave, #a9a296);
	font-size: .9rem;
	line-height: 1.55;
	text-wrap: pretty;
}

/* ─────────────────────────── Chamada para ação ─────────────────────────── */

.ub-cta {
	max-width: 470px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 30px) clamp(18px, 3vw, 24px) 20px;
	background: rgba(18, 17, 16, .92);
	border: 1px solid rgba(214, 173, 96, .35);
	border-radius: 18px;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset;
	text-align: left;
}

.ub-cta__titulo {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.ub-cta__apoio {
	margin: 8px 0 0;
	color: var(--lz-suave, #a9a296);
	font-size: .94rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.ub-cta__nota {
	margin: 12px 0 0;
	color: #7d766b;
	font-size: .78rem;
	text-align: center;
}

.ub-cta__vazio {
	margin: 18px 0 0;
	padding: 12px 14px;
	border: 1px dashed rgba(214, 173, 96, .5);
	border-radius: 8px;
	color: var(--lz-ouro, #d6ad60);
	font-size: .85rem;
	text-align: center;
}

/* ─────────────────────────── Botão ─────────────────────────── */

.ub-cta .fluentform .ff-btn-submit,
.ub-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	margin-top: 22px;
	padding: 14px 24px;
	background: linear-gradient(90deg, #8a6424 0%, #d9b264 18%, #f6e2ad 48%, #e7c47a 70%, #9a7230 100%);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 10px 30px -10px rgba(232, 190, 110, .55);
	color: #170f04;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.ub-cta .fluentform .ff-btn-submit:hover,
.ub-botao:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #170f04;
}

/*
 * Verde quando o botão leva para o WhatsApp. A cor é a placa que diz o
 * destino, e ela é lida antes do texto.
 *
 * As pontas não descem abaixo de #179a56: o rótulo é escuro e quase encosta
 * nas bordas no telefone, e num verde mais fundo o contraste cai para 2,1:1 e
 * a primeira palavra some. Em #179a56 dá 4,71:1, que passa em AA.
 */
.ub-botao--zap {
	padding-left: 18px;
	padding-right: 18px;
	background: linear-gradient(90deg, #179a56 0%, #1fb365 18%, #5ce895 48%, #2ecb74 70%, #18a159 100%);
	box-shadow: 0 10px 30px -10px rgba(63, 200, 118, .5);
	color: #04210f;
}

.ub-botao--zap:hover {
	color: #04210f;
}

.ub-botao svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ub-botao span {
	text-wrap: balance;
}

/* O telefone é a largura principal destas páginas, não um caso de borda. */
@media (max-width: 430px) {
	.ub-botao--zap {
		padding-left: 14px;
		padding-right: 14px;
		font-size: .9375rem;
		letter-spacing: -.01em;
	}

	.ub-botao--zap svg {
		width: 20px;
		height: 20px;
	}
}