/*
 * Modelos de mensagem (modelos.php e modelo.php). Carregado depois do home.css e do blog.css (trilha, títulos, filtros
 * .blog-cat, .blog-tabela, .blog-passos, faixa). Só var(--lp-*); o balão e os selos de categoria usam --lp-balao,
 * --lp-mk-* e --lp-at-* (home.css).
 * Celular: uma coluna. 768px ou mais: modelos em duas colunas. 1000px ou mais: modelos à esquerda e a conta fixa à direita.
 */

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

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

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

.mod-filtros {
	display: flex;
	gap: var(--lp-esp-1);
	overflow-x: auto;
	scrollbar-width: none;
	padding-top: var(--lp-esp-1);
}

.mod-filtros .blog-cat {
	flex: none;
	background: var(--lp-branco);
	font-family: var(--lp-f-texto);
	cursor: pointer;
}

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

/* ---------- Modelos ---------- */

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

.mod-lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lp-esp-2);
	align-content: start;
}

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

.mod-card[hidden] {
	display: none;
}

.mod-card-topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lp-esp-2);
}

.mod-card-t {
	margin: 0;
	font-size: var(--lp-t-texto);
	line-height: 1.3;
}

.mod-card-n {
	font-family: var(--lp-f-mono);
	font-size: var(--lp-t-mono-p);
	color: var(--lp-suave);
	white-space: nowrap;
}

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

.mod-texto {
	margin: 0;
	padding: var(--lp-esp-2) var(--lp-esp-3);
	font-size: var(--lp-t-meta);
	line-height: 1.55;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.mod-var {
	font-weight: 700;
	color: var(--lp-azul-hover);
}

.mod-botao {
	padding: var(--lp-esp-1) var(--lp-esp-3);
	border-top: 1px solid var(--lp-linha-2);
	text-align: center;
	font-size: var(--lp-t-nota);
	font-weight: 600;
	color: var(--lp-azul-hover);
}

.mod-selos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-esp-1);
}

.mod-selo {
	padding: var(--lp-esp-0) var(--lp-esp-2);
	border-radius: var(--lp-raio-pilula);
	background: var(--lp-creme);
	font-size: var(--lp-t-nota);
	line-height: 1.5;
}

.mod-selo--marketing {
	background: var(--lp-mk-fundo);
	color: var(--lp-mk-tinta);
	font-weight: 700;
}

.mod-selo--utilidade {
	background: var(--lp-azul-palido);
	color: var(--lp-azul-hover);
	font-weight: 700;
}

.mod-selo--atendimento {
	background: var(--lp-at-fundo);
	color: var(--lp-at-tinta);
	font-weight: 700;
}

.mod-nota {
	font-size: var(--lp-t-nota);
	line-height: 1.45;
	color: var(--lp-suave);
}

.mod-copiar {
	align-self: stretch;
	cursor: pointer;
}

.mod-copiar.is-copiado {
	background: var(--lp-tinta);
	border-color: var(--lp-tinta);
	color: var(--lp-branco);
}

/* ---------- Lado: conta e Clent ---------- */

.mod-lado {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
}

.mod-conta {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-escuro);
	color: var(--lp-papel);
}

.mod-conta label {
	font-weight: 700;
	color: var(--lp-branco);
}

.mod-conta input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--lp-esp-6);
	padding: 0 var(--lp-esp-3);
	border: 0;
	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;
}

.mod-conta input:focus-visible {
	outline: 2px solid var(--lp-azul-claro);
	outline-offset: 2px;
}

.mod-conta-total {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h2);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--lp-branco);
	overflow-wrap: anywhere;
}

.mod-conta-p {
	font-size: var(--lp-t-nota);
	line-height: 1.5;
	color: var(--lp-sobre-escuro);
}

.mod-conta a {
	font-size: var(--lp-t-nota);
	color: var(--lp-azul-claro);
}

.mod-clent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lp-esp-2);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.mod-clent-t {
	font-weight: 700;
	line-height: 1.4;
}

/* ---------- Seções ---------- */

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

.mod-sec + .mod-sec,
.mod-destaque-wrap + .mod-sec {
	padding-top: 0;
}

.mod-faixa {
	padding: var(--lp-esp-6) 0;
	background: var(--lp-creme);
}

.mod-duas {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
}

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

.mod-passos {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--lp-t-texto);
	line-height: 1.55;
}

.mod-fonte {
	margin-top: var(--lp-esp-2);
	font-size: var(--lp-t-nota);
	color: var(--lp-suave);
}

.mod-fonte a {
	color: var(--lp-suave);
}

.mod-num {
	text-align: right !important;
}

/* Outros tipos e índice */

.mod-outros,
.mod-tipos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lp-esp-2);
}

.mod-outro,
.mod-tipo {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	height: 100%;
	box-sizing: border-box;
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
	color: var(--lp-tinta);
	text-decoration: none;
}

.mod-outro-t {
	font-weight: 700;
	font-size: var(--lp-t-texto);
}

.mod-outro-p,
.mod-tipo-p {
	font-size: var(--lp-t-meta);
	line-height: 1.5;
	color: var(--lp-tinta-2);
}

.mod-tipo-topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lp-esp-2);
}

.mod-tipo-nome {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h3);
	letter-spacing: -0.03em;
}

.mod-outro:hover .mod-outro-t,
.mod-outro:focus-visible .mod-outro-t,
.mod-tipo:hover .mod-tipo-nome,
.mod-tipo:focus-visible .mod-tipo-nome {
	color: var(--lp-azul-hover);
}

.mod-tipo .mod-selos {
	margin-top: auto;
	padding-top: var(--lp-esp-1);
}

.mod-destaque-wrap {
	padding-bottom: var(--lp-esp-5);
}

.mod-destaque {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-escuro);
	color: var(--lp-papel);
	text-decoration: none;
}

.mod-destaque .lp-btn {
	white-space: normal;
	text-align: center;
}

.mod-destaque-txt {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
}

.mod-destaque-t {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h3);
	letter-spacing: -0.03em;
	color: var(--lp-branco);
}

.mod-destaque-p {
	font-size: var(--lp-t-meta);
	color: var(--lp-sobre-escuro);
}

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

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

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

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

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

	.mod-filtros {
		flex-wrap: wrap;
		overflow: visible;
	}

	.mod-grade {
		padding-bottom: var(--lp-esp-7);
	}

	.mod-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

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

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

	.mod-copiar {
		align-self: flex-start;
	}

	.mod-lado {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

	.mod-conta,
	.mod-clent {
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.mod-sec {
		gap: var(--lp-esp-4);
		padding-top: var(--lp-esp-7);
		padding-bottom: var(--lp-esp-7);
	}

	.mod-faixa {
		padding: var(--lp-esp-7) 0;
	}

	.mod-texto-sec,
	.mod-passos {
		font-size: var(--lp-t-leitura);
	}

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

	.mod-tipos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

	.mod-outro,
	.mod-tipo {
		padding: var(--lp-esp-4);
		border-radius: var(--lp-raio-card);
	}

	.mod-tipo-nome {
		font-size: var(--lp-t-h2-m);
	}

	.mod-tipo-p {
		font-size: var(--lp-t-texto);
	}

	.mod-destaque {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lp-esp-4);
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.mod-destaque-t {
		font-size: var(--lp-t-h2-m);
	}

	.mod-destaque-p {
		font-size: var(--lp-t-texto);
	}
}

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

@media (min-width: 1000px) {
	.mod-grade {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--lp-esp-6);
		align-items: start;
	}

	.mod-lado {
		display: flex;
		position: sticky;
		top: var(--lp-esp-5);
		max-height: calc(100vh - 2 * var(--lp-esp-5));
		overflow-y: auto;
		scrollbar-width: thin;
	}

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

	.mod-tipos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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