/*
 * Blog do site (blog.php e blog_post.php), carregado depois do home.css (topo, rodapé, botões .lp-btn, FAQ .lp-faq).
 * Layout aprovado no canvas "Landing Clent proposta" (página Blog, v2 de 21/10/2026). Só var(--lp-*): cores, escala de
 * espaçamento (--lp-esp-*), texto (--lp-t-*), raios e larguras ficam no home.css.
 * Telas: celular (< 768px, texto 17px), tablet (768 a 999px, uma coluna, 19px) e desktop (1000px ou mais: texto de
 * 688px em 20px, ~75 caracteres por linha medidos com a Archivo, + lateral de 300px).
 */

/* ---------- Base ---------- */

.blog-wrap {
	width: 100%;
	max-width: var(--lp-largura-post);
	margin: 0 auto;
	padding: 0 var(--lp-margem-m);
	box-sizing: border-box;
}

.blog-rotulo {
	margin: 0;
	font-family: var(--lp-f-mono);
	font-weight: 400;
	font-size: var(--lp-t-mono-p);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lp-azul-hover);
}

.blog-rotulo--suave {
	color: var(--lp-suave);
}

.blog-rotulo--claro {
	color: var(--lp-azul-claro);
}

.blog-h2 {
	margin: 0;
	font-family: var(--lp-f-display);
	font-weight: 400;
	font-size: var(--lp-t-h2-m);
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.blog-previa {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: var(--lp-esp-2) var(--lp-margem-m);
	background: var(--lp-tinta);
	color: var(--lp-papel);
	font-size: var(--lp-t-meta);
}

.blog-previa strong {
	margin-right: var(--lp-esp-1);
	color: var(--lp-menta);
}

/* ---------- Trilha ---------- */

.blog-trilha ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--lp-esp-1);
	font-family: var(--lp-f-mono);
	font-size: var(--lp-t-mono-p);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lp-suave);
}

.blog-trilha li + li::before {
	content: "/";
	margin-right: var(--lp-esp-1);
}

.blog-trilha a {
	color: var(--lp-suave);
}

.blog-trilha [aria-current] {
	color: var(--lp-azul-hover);
}

/* Na página do post, a trilha mostra até a categoria (o título já é o H1) */
.blog-cabeca .blog-trilha li:last-child {
	display: none;
}

.blog-cabeca .blog-trilha li:nth-last-child(2) a {
	color: var(--lp-azul-hover);
}

/* ---------- Cabeçalho do post ---------- */

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

.blog-cabeca > * {
	max-width: var(--lp-largura-cabeca);
}

.blog-h1 {
	margin: 0;
	font-family: var(--lp-f-display);
	font-weight: 400;
	font-size: var(--lp-t-h1-m);
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.blog-sub {
	font-size: var(--lp-t-texto);
	line-height: 1.5;
	color: var(--lp-tinta-2);
}

.blog-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-esp-3);
	padding-top: var(--lp-esp-1);
}

.blog-autor {
	display: flex;
	align-items: center;
	gap: var(--lp-esp-2);
}

.blog-autor-foto {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lp-tinta);
	color: var(--lp-papel);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-meta);
}

.blog-autor-txt {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-0);
}

.blog-autor-nome {
	font-weight: 700;
	font-size: var(--lp-t-meta);
}

.blog-autor-cargo {
	font-weight: 400;
	color: var(--lp-suave);
}

.blog-autor-meta {
	font-size: var(--lp-t-nota);
	color: var(--lp-suave);
}

/* ---------- Compartilhar ---------- */

.blog-compartilhar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lp-esp-1);
}

.blog-compartilhar-t {
	margin-right: var(--lp-esp-1);
	font-size: var(--lp-t-meta);
	font-weight: 700;
}

.blog-comp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-esp-1);
	min-height: var(--lp-toque);
	padding: 0 var(--lp-esp-3);
	border: 1px solid var(--lp-linha);
	border-radius: var(--lp-raio-pilula);
	background: var(--lp-branco);
	color: var(--lp-tinta);
	font-family: var(--lp-f-texto);
	font-size: var(--lp-t-meta);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.blog-comp:hover {
	border-color: var(--lp-tinta);
}

.blog-comp--icone {
	width: var(--lp-toque);
	padding: 0;
}

.blog-zap {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--lp-whats);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.blog-compartilhar--fim .blog-comp {
	flex: 1 1 auto;
}

/* ---------- Grade do post: texto + lateral ---------- */

.blog-grade {
	padding-bottom: var(--lp-esp-6);
}

.blog-artigo {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	font-size: var(--lp-t-texto);
	line-height: 1.65;
}

.blog-lado {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	margin-top: var(--lp-esp-5);
}

.blog-lado-cta {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	padding: var(--lp-esp-4);
	border-radius: var(--lp-raio-card);
	background: var(--lp-azul);
	color: var(--lp-branco);
}

.blog-lado-cta-t {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h2-m);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.blog-lado-cta-p {
	font-size: var(--lp-t-meta);
	line-height: 1.5;
}

/* ---------- Caixas do topo do post ---------- */

.blog-resposta,
.blog-muda {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	padding: var(--lp-esp-3) var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.blog-resposta {
	border: 2px solid var(--lp-azul);
}

.blog-resposta p {
	line-height: 1.55;
}

.blog-muda {
	background: var(--lp-creme);
}

.blog-muda ul {
	padding-left: 1.2em;
	list-style: disc;
}

/* ---------- Capa gerada em código ---------- */

.blog-capa {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	object-fit: cover;
}

.blog-capa--escura {
	background: var(--lp-escuro);
	color: var(--lp-papel);
}

.blog-capa--azul {
	background: var(--lp-azul);
	color: var(--lp-branco);
}

.blog-capa--clara {
	background: var(--lp-creme);
	color: var(--lp-tinta);
	border: 1px solid var(--lp-linha-4);
}

.blog-capa-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-esp-2);
}

.blog-capa-rotulo {
	font-family: var(--lp-f-mono);
	font-size: var(--lp-t-mono-p);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lp-azul-claro);
}

.blog-capa--azul .blog-capa-rotulo {
	color: var(--lp-branco);
}

.blog-capa--clara .blog-capa-rotulo {
	color: var(--lp-suave);
}

.blog-capa .lp-logo {
	width: 22px;
	height: 26px;
	color: var(--lp-azul);
}

.blog-capa--azul .lp-logo {
	color: var(--lp-branco);
}

.blog-capa-base {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
}

.blog-capa-dado {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-capa);
	line-height: 0.88;
	letter-spacing: -0.05em;
	white-space: nowrap;
}

.blog-capa--escura .blog-capa-dado {
	color: var(--lp-branco);
}

.blog-capa-frase {
	max-width: 480px;
	font-family: var(--lp-f-serif);
	font-style: italic;
	font-weight: 700;
	font-size: var(--lp-t-texto);
	line-height: 1.2;
}

.blog-capa--card {
	border-radius: 0;
}

.blog-capa--card .blog-capa-dado {
	font-size: var(--lp-t-capa-card);
}

.blog-capa--mini {
	width: 84px;
	height: 84px;
	padding: 0;
	align-items: center;
	justify-content: center;
}

.blog-capa--mini .blog-capa-dado {
	font-size: var(--lp-t-sub);
}

/* Número longo: fonte menor, e a capa nunca deixa o texto sair dela */
.blog-capa {
	overflow: hidden;
}

.blog-capa--longa .blog-capa-dado {
	font-size: var(--lp-t-capa-longa);
	white-space: normal;
}

.blog-capa--card.blog-capa--longa .blog-capa-dado,
.blog-grade-cards .blog-capa--card.blog-capa--longa .blog-capa-dado {
	font-size: var(--lp-t-capa-card-longa);
	white-space: normal;
}

.blog-capa--mini.blog-capa--longa .blog-capa-dado {
	font-size: var(--lp-t-cat);
	text-align: center;
}

/* ---------- Sumário ---------- */

.blog-sumario {
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.blog-sumario a {
	display: flex;
	align-items: center;
	min-height: var(--lp-toque);
	border-top: 1px solid var(--lp-linha-4);
	color: var(--lp-tinta);
	font-size: var(--lp-t-meta);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.blog-sumario a:hover {
	color: var(--lp-azul-hover);
}

.blog-sumario--topo {
	padding: 0 var(--lp-margem-m);
}

.blog-sumario--topo summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	cursor: pointer;
	list-style: none;
}

.blog-sumario--topo summary::-webkit-details-marker {
	display: none;
}

.blog-sumario--topo summary svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--lp-suave);
	stroke-width: 2;
	stroke-linecap: round;
	transition: transform 0.15s ease;
}

.blog-sumario--topo[open] summary svg {
	transform: rotate(180deg);
}

.blog-sumario--topo nav {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--lp-esp-1);
}

.blog-sumario--lado {
	display: none;
	flex-direction: column;
	padding: var(--lp-esp-4);
}

.blog-sumario--lado .blog-rotulo {
	padding-bottom: var(--lp-esp-1);
}

/* ---------- Corpo do post ---------- */

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

.blog-corpo h2 {
	margin: var(--lp-esp-3) 0 0;
	font-family: var(--lp-f-display);
	font-weight: 400;
	font-size: var(--lp-t-h2-m);
	line-height: 1.15;
	letter-spacing: -0.03em;
	scroll-margin-top: var(--lp-esp-4);
}

.blog-corpo h3 {
	margin: var(--lp-esp-1) 0 0;
	font-size: var(--lp-t-h3);
	line-height: 1.3;
}

.blog-corpo em {
	font-family: inherit;
	font-weight: inherit;
}

.blog-corpo a,
.blog-fontes a {
	color: var(--lp-azul-hover);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.blog-corpo strong {
	font-weight: 700;
}

.blog-lista {
	padding-left: 1.2em;
	list-style: disc;
}

ol.blog-lista {
	list-style: decimal;
}

.blog-lista li + li {
	margin-top: var(--lp-esp-1);
}

.blog-corpo blockquote {
	margin: 0;
	padding-left: var(--lp-esp-3);
	border-left: 3px solid var(--lp-azul);
	color: var(--lp-tinta-2);
}

.blog-tabela {
	overflow-x: auto;
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.blog-tabela table {
	width: 100%;
	min-width: 340px;
	border-collapse: collapse;
	font-size: var(--lp-t-meta);
	line-height: 1.4;
}

.blog-tabela caption {
	padding: var(--lp-esp-3) var(--lp-esp-3) var(--lp-esp-1);
	text-align: left;
	font-size: var(--lp-t-texto);
	font-weight: 700;
}

.blog-tabela thead th {
	padding: var(--lp-esp-1) var(--lp-esp-3);
	border-bottom: 1.5px solid var(--lp-tinta);
	text-align: left;
	font-family: var(--lp-f-mono);
	font-weight: 400;
	font-size: var(--lp-t-mono-p);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lp-suave);
}

.blog-tabela tbody th,
.blog-tabela td {
	padding: var(--lp-esp-2) var(--lp-esp-3);
	border-bottom: 1px solid var(--lp-linha-2);
	text-align: left;
	vertical-align: top;
}

.blog-tabela tbody tr:last-child > * {
	border-bottom: 0;
}

.blog-tabela-nota {
	padding: var(--lp-esp-1) var(--lp-esp-3) var(--lp-esp-3);
	font-size: var(--lp-t-nota);
	color: var(--lp-suave);
}

.blog-exemplo {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	padding: var(--lp-esp-3) var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-creme);
	font-size: var(--lp-t-texto);
	line-height: 1.55;
}

.blog-exemplo-fim {
	font-weight: 700;
}

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

.blog-passos li {
	display: flex;
	align-items: flex-start;
	gap: var(--lp-esp-2);
}

.blog-passo-n {
	flex: none;
	width: 32px;
	height: 32px;
	margin-top: var(--lp-esp-0);
	border-radius: 50%;
	background: var(--lp-azul);
	color: var(--lp-branco);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lp-t-meta);
	font-weight: 700;
	line-height: 1;
}

.blog-clent {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	margin-top: var(--lp-esp-1);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-escuro);
	color: var(--lp-papel);
}

.blog-clent p {
	color: var(--lp-branco);
	line-height: 1.55;
}

/* Dentro da caixa escura: o botão fica branco sobre o azul e o link do texto, azul-claro (a regra .blog-corpo a pinta de azul-escuro) */
.blog-clent .lp-btn,
.blog-clent .lp-btn:hover {
	color: var(--lp-branco);
	text-decoration: none;
}

.blog-clent a:not(.lp-btn) {
	color: var(--lp-azul-claro);
}

/* Chamada no meio do texto: frase curta e botão, sem tirar a atenção da leitura */
.blog-chamada {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lp-esp-2);
	padding: var(--lp-margem-m);
	border: 1px solid var(--lp-linha-4);
	border-left: 4px solid var(--lp-azul);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.blog-chamada p {
	font-weight: 600;
	line-height: 1.45;
}

.blog-chamada .lp-btn,
.blog-chamada .lp-btn:hover {
	color: var(--lp-branco);
	text-decoration: none;
}

@media (min-width: 768px) {
	.blog-chamada {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--lp-esp-4);
	}

	.blog-chamada-btn {
		flex-shrink: 0;
	}
}

/* ---------- FAQ e fontes ---------- */

.blog-faq {
	margin-top: var(--lp-esp-3);
}

.blog-faq .blog-h2 {
	padding-bottom: var(--lp-esp-2);
}

.blog-fontes {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
}

.blog-fontes h2 {
	font-size: var(--lp-t-texto);
	font-weight: 700;
}

.blog-fontes ol {
	padding-left: var(--lp-esp-4);
	list-style: decimal;
	font-size: var(--lp-t-meta);
	line-height: 1.6;
	color: var(--lp-tinta-2);
}

/* ---------- Cards e lista ---------- */

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

.blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
	color: var(--lp-tinta);
	text-decoration: none;
}

.blog-card-corpo {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	padding: var(--lp-esp-3) var(--lp-margem-m) var(--lp-margem-m);
}

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

.blog-card-resumo {
	font-size: var(--lp-t-meta);
	line-height: 1.55;
	color: var(--lp-suave);
}

.blog-card-meta {
	font-family: var(--lp-f-mono);
	font-size: var(--lp-t-mono-p);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lp-suave);
}

.blog-card:hover .blog-card-titulo {
	color: var(--lp-azul-hover);
}

/* Celular: os cards da grade viram linha com a miniatura (o destaque continua grande) */
.blog-grade-cards .blog-card {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--lp-esp-2);
	padding: var(--lp-esp-3);
}

.blog-grade-cards .blog-capa--card {
	flex: none;
	width: 84px;
	height: 84px;
	padding: 0;
	border-radius: var(--lp-esp-2);
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
}

.blog-grade-cards .blog-capa--card .blog-capa-topo {
	display: none;
}

.blog-grade-cards .blog-capa--card .blog-capa-dado {
	font-size: var(--lp-t-sub);
	white-space: normal;
	text-align: center;
}

.blog-grade-cards .blog-card-corpo {
	padding: 0;
}

.blog-lista-cabeca {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	padding-top: var(--lp-esp-5);
	padding-bottom: var(--lp-esp-4);
}

.blog-h1-lista {
	margin: 0;
	max-width: 900px;
	font-family: var(--lp-f-display);
	font-weight: 400;
	font-size: var(--lp-t-h1-lista);
	line-height: 1;
	letter-spacing: -0.04em;
}

.blog-lista-sub {
	max-width: 700px;
	font-size: var(--lp-t-texto);
	line-height: 1.5;
}

.blog-cats {
	display: flex;
	gap: var(--lp-esp-1);
	margin: 0 calc(-1 * var(--lp-margem-m));
	padding: 0 var(--lp-margem-m);
	overflow-x: auto;
	scrollbar-width: none;
}

.blog-cats::-webkit-scrollbar {
	display: none;
}

.blog-cat {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--lp-toque);
	padding: 0 var(--lp-esp-3);
	border: 1.5px solid var(--lp-linha-3);
	border-radius: var(--lp-raio-pilula);
	color: var(--lp-tinta);
	font-size: var(--lp-t-cat);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.blog-cat:hover {
	border-color: var(--lp-tinta);
}

.blog-cat.is-atual {
	background: var(--lp-tinta);
	border-color: var(--lp-tinta);
	color: var(--lp-branco);
}

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

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

.blog-h2 em,
.blog-h1-lista em,
.blog-faixa-t em {
	letter-spacing: -0.02em;
}

.blog-paginacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lp-esp-3);
	margin-top: var(--lp-esp-3);
	font-size: var(--lp-t-meta);
	color: var(--lp-suave);
}

.blog-vazio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lp-esp-4);
	padding-top: var(--lp-esp-4);
	padding-bottom: var(--lp-esp-6);
}

.blog-vazio p {
	max-width: 600px;
	font-size: var(--lp-t-leitura);
	line-height: 1.55;
}

.blog-relacionados {
	padding: var(--lp-esp-5) 0 var(--lp-esp-6);
	border-top: 1px solid var(--lp-linha);
}

.blog-relacionados .blog-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-4);
}

/* ---------- Faixa de demonstração e barra fixa ---------- */

.blog-faixa {
	padding: var(--lp-esp-6) 0;
	background: var(--lp-azul);
	color: var(--lp-branco);
}

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

.blog-faixa-t {
	margin: 0;
	max-width: 680px;
	font-family: var(--lp-f-display);
	font-weight: 400;
	font-size: var(--lp-t-faixa-m);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.blog-faixa-acoes {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
}

.blog-btn-claro {
	border-color: var(--lp-branco);
	color: var(--lp-branco);
	background: transparent;
}

.blog-btn-claro:hover {
	background: var(--lp-branco);
	color: var(--lp-azul);
}

.blog-barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	gap: var(--lp-esp-1);
	padding: var(--lp-esp-2) var(--lp-margem-m) calc(var(--lp-esp-2) + env(safe-area-inset-bottom));
	background: var(--lp-branco);
	border-top: 1px solid var(--lp-linha);
	box-shadow: var(--lp-sombra-menu);
}

.blog-barra .lp-btn {
	flex: 1;
	min-height: 48px;
}

.blog-barra .lp-btn--azul {
	flex: 2;
}

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

@media (min-width: 768px) {
	.blog-wrap {
		padding: 0 var(--lp-esp-5);
	}

	.blog-cabeca {
		gap: var(--lp-esp-3);
		padding-top: var(--lp-esp-6);
		padding-bottom: var(--lp-esp-5);
	}

	.blog-trilha ol {
		font-size: var(--lp-t-mono);
	}

	.blog-h1 {
		font-size: var(--lp-t-h1-t);
		line-height: 1.04;
		letter-spacing: -0.035em;
	}

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

	.blog-autor-foto {
		width: 48px;
		height: 48px;
		font-size: var(--lp-t-texto);
	}

	.blog-autor-nome {
		font-size: var(--lp-t-texto);
	}

	.blog-autor-meta {
		font-size: var(--lp-t-meta);
	}

	.blog-artigo {
		max-width: 680px;
		margin: 0 auto;
		gap: var(--lp-esp-4);
		font-size: var(--lp-t-leitura);
		line-height: 1.7;
	}

	.blog-lado {
		max-width: 680px;
		margin: var(--lp-esp-5) auto 0;
	}

	.blog-rotulo {
		font-size: var(--lp-t-mono);
	}

	.blog-resposta,
	.blog-muda,
	.blog-exemplo {
		padding: var(--lp-esp-4) var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.blog-resposta p {
		font-size: var(--lp-t-destaque);
	}

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

	.blog-capa-rotulo {
		font-size: var(--lp-t-mono);
	}

	.blog-capa-frase {
		font-size: var(--lp-t-h2);
	}

	.blog-capa--card {
		padding: var(--lp-esp-4);
	}

	.blog-corpo {
		gap: var(--lp-esp-4);
	}

	.blog-corpo h2,
	.blog-h2 {
		font-size: var(--lp-t-h2);
	}

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

	.blog-tabela table {
		font-size: var(--lp-t-tabela);
	}

	.blog-tabela caption {
		padding: var(--lp-esp-4) var(--lp-esp-4) var(--lp-esp-1);
		font-size: var(--lp-t-leitura);
	}

	.blog-tabela thead th {
		padding: var(--lp-esp-2) var(--lp-esp-4);
	}

	.blog-tabela tbody th,
	.blog-tabela td {
		padding: var(--lp-esp-3) var(--lp-esp-4);
	}

	.blog-tabela-nota {
		padding: var(--lp-esp-1) var(--lp-esp-4) var(--lp-esp-4);
	}

	.blog-exemplo {
		gap: var(--lp-esp-2);
	}

	.blog-passos {
		gap: var(--lp-esp-3);
	}

	.blog-passos li {
		gap: var(--lp-esp-3);
	}

	.blog-clent {
		gap: var(--lp-esp-3);
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.blog-clent p {
		font-size: var(--lp-t-destaque);
	}

	.blog-clent-btn {
		align-self: flex-start;
	}

	.blog-compartilhar--fim .blog-comp {
		flex: none;
	}

	/* Cards: grade de 2 colunas, com a capa em cima */
	.blog-grade-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

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

	.blog-grade-cards .blog-card {
		flex-direction: column;
		gap: 0;
		padding: 0;
	}

	.blog-grade-cards .blog-capa--card {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		padding: var(--lp-esp-4);
		border-radius: 0;
		align-items: stretch;
		justify-content: space-between;
	}

	.blog-grade-cards .blog-capa--card .blog-capa-topo {
		display: flex;
	}

	.blog-grade-cards .blog-capa--card .blog-capa-dado {
		font-size: var(--lp-t-capa-card);
		white-space: nowrap;
		text-align: left;
	}

	.blog-grade-cards .blog-card-corpo {
		gap: var(--lp-esp-2);
		padding: var(--lp-esp-4);
	}

	.blog-card-titulo {
		font-size: var(--lp-t-h3);
	}

	/* Destaque: capa e texto lado a lado */
	.blog-card--destaque {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.blog-card--destaque .blog-capa {
		height: 100%;
		min-height: 360px;
		aspect-ratio: auto;
		padding: var(--lp-esp-6);
		border-radius: 0;
	}

	.blog-card--destaque .blog-card-corpo {
		justify-content: center;
		gap: var(--lp-esp-3);
		padding: var(--lp-esp-6);
	}

	.blog-card--destaque .blog-card-titulo {
		font-family: var(--lp-f-display);
		font-weight: 400;
		font-size: var(--lp-t-h2);
		line-height: 1.08;
		letter-spacing: -0.03em;
	}

	.blog-lista-cabeca {
		padding-top: var(--lp-esp-7);
		padding-bottom: var(--lp-esp-5);
	}

	.blog-lista-sub {
		font-size: var(--lp-t-sub);
	}

	.blog-cats {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.blog-destaque {
		padding-bottom: var(--lp-esp-6);
	}

	.blog-ultimos {
		padding-bottom: var(--lp-esp-7);
	}

	.blog-relacionados {
		padding: var(--lp-esp-7) 0;
	}

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

	.blog-faixa-in {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lp-esp-5);
	}

	.blog-faixa-t {
		font-size: var(--lp-t-faixa);
		line-height: 1.02;
		letter-spacing: -0.035em;
	}

	.blog-faixa-acoes {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---------- Desktop: 1000px ou mais (texto + lateral fixa na rolagem) ---------- */

@media (min-width: 1000px) {
	.blog-h1 {
		font-size: var(--lp-t-h1-post);
	}

	.blog-grade {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--lp-largura-lado);
		gap: var(--lp-esp-6);
		align-items: start;
		padding-bottom: var(--lp-esp-7);
	}

	.blog-artigo {
		max-width: none;
		margin: 0;
		font-size: var(--lp-t-leitura-d);
		line-height: 1.65;
	}

	/* Lateral fixa na rolagem com folga do topo; se for mais alta que a tela, rola por dentro (o botão do fim continua alcançável) */
	.blog-lado {
		position: sticky;
		top: var(--lp-esp-5);
		max-height: calc(100vh - 2 * var(--lp-esp-5));
		overflow-y: auto;
		scrollbar-width: thin;
		max-width: none;
		margin: 0;
	}

	/* Na prévia, a barra preta do topo também é fixa: a lateral para logo abaixo dela */
	body:has(.blog-previa) .blog-lado {
		top: calc(var(--lp-esp-7) + var(--lp-esp-3));
		max-height: calc(100vh - var(--lp-esp-7) - 2 * var(--lp-esp-3));
	}

	.blog-sumario--topo {
		display: none;
	}

	.blog-sumario--lado {
		display: flex;
	}

	.blog-grade-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.blog-relacionados .blog-grade-cards .blog-capa--card {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blog-sumario--topo summary svg {
		transition: none;
	}
}