/*
 * Calculadora de custo da API do WhatsApp (calculadora-whatsapp-api.php). Carregado depois do home.css e do blog.css
 * (trilha, tabelas .blog-tabela, cards, títulos e faixa de demonstração). Só var(--lp-*).
 * Celular: tudo empilhado (campos, depois o resultado). 1000px ou mais: campos e resultado lado a lado.
 */

.calc-cabeca {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	padding-top: var(--lp-esp-4);
	padding-bottom: var(--lp-esp-4);
}

.calc-h1 {
	font-size: var(--lp-t-faixa-m);
	line-height: 1.04;
	text-wrap: balance;
}

.calc-lead {
	max-width: var(--lp-largura-cabeca);
	font-size: var(--lp-t-texto);
	line-height: 1.5;
	color: var(--lp-tinta-2);
}

.calc-sec {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-4);
	padding-bottom: var(--lp-esp-6);
}

/* ---------- Calculadora ---------- */

.calc {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.calc-entradas {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	padding: var(--lp-margem-m);
}

.calc-perfis {
	display: flex;
	gap: var(--lp-esp-1);
	overflow-x: auto;
	scrollbar-width: none;
}

.calc-perfis .blog-cat {
	background: var(--lp-branco);
	font-family: var(--lp-f-texto);
	cursor: pointer;
}

.calc-perfis .blog-cat.is-atual {
	background: var(--lp-tinta);
}

.calc-campo {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-0);
}

.calc-campo label {
	font-size: var(--lp-t-tabela);
	font-weight: 700;
}

.calc-ajuda {
	font-size: var(--lp-t-cat);
	line-height: 1.4;
	color: var(--lp-suave);
}

.calc-campo input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--lp-esp-6);
	margin-top: var(--lp-esp-1);
	padding: 0 var(--lp-esp-3);
	border: 1.5px solid var(--lp-linha-3);
	border-radius: var(--lp-esp-2);
	background: var(--lp-branco);
	color: var(--lp-tinta);
	font-family: var(--lp-f-texto);
	font-size: var(--lp-t-leitura);
	font-weight: 600;
}

.calc-campo input:focus-visible {
	border-color: var(--lp-azul);
	outline: 2px solid var(--lp-azul);
	outline-offset: 1px;
}

.calc-resultado {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	padding: var(--lp-margem-m);
	background: var(--lp-escuro);
	color: var(--lp-papel);
}

.calc-total {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-0);
}

.calc-total-v {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h1-lista);
	line-height: 0.95;
	letter-spacing: -0.05em;
	color: var(--lp-branco);
	overflow-wrap: anywhere;
}

.calc-total-ano {
	font-size: var(--lp-t-meta);
	color: var(--lp-sobre-escuro);
}

.calc-linhas {
	margin: 0;
	border-top: 1px solid var(--lp-linha-escuro);
}

.calc-linhas > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lp-esp-2);
	padding: var(--lp-esp-2) 0;
	border-bottom: 1px solid var(--lp-linha-escuro);
}

.calc-linhas dt {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-0);
	font-weight: 700;
	color: var(--lp-branco);
}

.calc-linhas dt span {
	font-weight: 400;
	font-size: var(--lp-t-nota);
	color: var(--lp-sobre-escuro-2);
}

.calc-linhas dd {
	margin: 0;
	font-weight: 700;
	color: var(--lp-branco);
	white-space: nowrap;
}

.calc-leitura {
	font-size: var(--lp-t-meta);
	line-height: 1.55;
}

.calc-btn {
	white-space: normal;
	text-align: center;
	min-height: var(--lp-esp-6);
}

/* ---------- Tabela de preços e "Como a conta é feita" ---------- */

.calc-texto {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	font-size: var(--lp-t-tabela);
	line-height: 1.6;
}

.calc-num {
	text-align: right !important;
	white-space: nowrap;
}

.calc-conta {
	margin-bottom: var(--lp-esp-6);
	padding: var(--lp-esp-6) 0;
	background: var(--lp-creme);
}

.calc-conta-in {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-4);
}

.calc-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lp-esp-2);
}

.calc-card {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.calc-card-n {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h2);
	letter-spacing: -0.03em;
	color: var(--lp-azul);
}

.calc-card-t {
	font-weight: 700;
}

.calc-card-p {
	font-size: var(--lp-t-meta);
	line-height: 1.5;
	color: var(--lp-tinta-2);
}

.calc-faq .lp-faq {
	max-width: var(--lp-largura-cabeca);
}

/* ---------- Tablet: 768px ou mais ---------- */

@media (min-width: 768px) {
	.calc-cabeca {
		gap: var(--lp-esp-3);
		padding-top: var(--lp-esp-6);
		padding-bottom: var(--lp-esp-5);
	}

	.calc-h1 {
		font-size: var(--lp-t-h1-lista);
		line-height: 1;
		letter-spacing: -0.04em;
		max-width: var(--lp-largura-cabeca);
	}

	.calc-lead {
		font-size: var(--lp-t-sub);
	}

	.calc-sec {
		padding-bottom: var(--lp-esp-7);
	}

	.calc {
		border-radius: var(--lp-raio-card);
	}

	.calc-entradas,
	.calc-resultado {
		gap: var(--lp-esp-4);
		padding: var(--lp-esp-6);
	}

	.calc-campo label {
		font-size: var(--lp-t-texto);
	}

	.calc-ajuda {
		font-size: var(--lp-t-meta);
	}

	.calc-campo input {
		min-height: var(--lp-esp-6);
		font-size: var(--lp-t-sub);
	}

	.calc-total-v {
		font-size: var(--lp-t-calc);
	}

	.calc-total-ano,
	.calc-leitura {
		font-size: var(--lp-t-texto);
	}

	.calc-linhas dt span {
		font-size: var(--lp-t-meta);
	}

	.calc-linhas dd {
		font-size: var(--lp-t-leitura);
	}

	.calc-btn {
		align-self: flex-start;
	}

	.calc-texto {
		font-size: var(--lp-t-leitura);
	}

	.calc-conta {
		margin-bottom: 0;
		padding: var(--lp-esp-7) 0;
	}

	.calc-conta + .calc-sec {
		padding-top: var(--lp-esp-7);
	}

	.calc-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

	.calc-card {
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.calc-card-t {
		font-size: var(--lp-t-leitura);
	}

	.calc-card-p {
		font-size: var(--lp-t-tabela);
	}
}

/* ---------- Desktop: 1000px ou mais ---------- */

@media (min-width: 1000px) {
	.calc {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.calc-tipos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lp-esp-6);
		align-items: start;
	}

	.calc-faq {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--lp-esp-6);
	}
}