/*
Theme Name: LexFlow
Theme URI: https://lexflowcrm.com.br/blog/
Author: LexFlow
Author URI: https://lexflowcrm.com.br/
Description: Tema de blocos do blog do LexFlow com o visual do LexFlow 2.0: Public Sans e IBM Plex Mono, um único azul de ação, bordas hairline em vez de sombra e o mesmo cabeçalho e rodapé do site.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lexflow
*/

/* ==========================================================================
   Atalhos para os tokens do theme.json (copiados de lexflow-design/tokens).
   ========================================================================== */

:root {
	--lf-brand: var(--wp--preset--color--brand);
	--lf-brand-ink: var(--wp--preset--color--brand-ink);
	--lf-brand-soft: var(--wp--preset--color--brand-soft);
	--lf-brand-line: rgba(13, 110, 253, 0.28);
	--lf-bg: var(--wp--preset--color--bg);
	--lf-surface: var(--wp--preset--color--surface);
	--lf-surface-2: var(--wp--preset--color--surface-2);
	--lf-line: var(--wp--preset--color--line);
	--lf-line-2: var(--wp--preset--color--line-2);
	--lf-text: var(--wp--preset--color--text);
	--lf-text-2: var(--wp--preset--color--text-2);
	--lf-muted: var(--wp--preset--color--muted);
	--lf-mono: var(--wp--preset--font-family--ibm-plex-mono);
	--lf-ease: cubic-bezier(0.2, 0.8, 0.3, 1);
	--lf-header-h: 64px;
	/* Detalhes azuis de fundo, os mesmos do site: grade fina e brilho. */
	--lf-grid-line: rgba(13, 110, 253, 0.09);
	--lf-glow: rgba(13, 110, 253, 0.2);
	--lf-beam: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.28) 20%, #0d6efd 50%, rgba(13, 110, 253, 0.28) 80%, transparent);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--lf-brand-soft);
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--lf-brand-line);
	outline-offset: 2px;
}

/* Cabeçalho, conteúdo e rodapé encostam um no outro: a separação é a borda. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Rótulo mono em caixa alta (rótulo de campo e de KPI no app). */
.lf-eyebrow {
	margin: 0;
	font-family: var(--lf-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lf-brand);
}

.lf-eyebrow a {
	color: inherit;
}

/* ==========================================================================
   Botões: peso 650, raio 9, sem sombra e sem estado de press.
   ========================================================================== */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.12s var(--lf-ease), border-color 0.12s var(--lf-ease), color 0.12s var(--lf-ease);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	border: 1px solid var(--lf-line);
	background: var(--lf-surface);
	color: var(--lf-text);
	padding: 11px 20px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	border-color: var(--lf-brand-line);
	background: var(--lf-surface);
	color: var(--lf-brand);
}

/* ==========================================================================
   Cabeçalho (o mesmo do site): 64px, branco, borda hairline, fixo no topo.
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.lf-header {
	background: var(--lf-surface);
	border-bottom: 1px solid var(--lf-line);
}

.lf-header__bar {
	min-height: var(--lf-header-h);
	gap: 32px;
}

.lf-header .lf-logo,
.lf-footer .lf-logo {
	margin: 0;
	flex: none;
}

.lf-logo img {
	display: block;
	width: auto;
	height: 26px;
	border-radius: 0;
}

.lf-nav {
	flex: 1;
	gap: 4px;
}

.lf-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lf-text-2);
	transition: background-color 0.12s var(--lf-ease), color 0.12s var(--lf-ease);
}

.lf-nav .wp-block-navigation-item__content:hover {
	background: var(--lf-bg);
	color: var(--lf-text);
}

.lf-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--lf-text);
	font-weight: 600;
}

/* "Entrar" e "Solicitar demonstração" só entram no menu do celular. */
.lf-nav .lf-only-mobile {
	display: none;
}

.lf-header__actions {
	flex: none;
	gap: 8px;
}

.lf-header__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 13.5px;
}

.lf-header__actions .is-style-outline > .wp-block-button__link {
	padding: 0 16px;
}

/* Botão do menu no celular: 36px, borda hairline, raio 8. */
.lf-nav .wp-block-navigation__responsive-container-open {
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lf-line);
	border-radius: 8px;
	color: var(--lf-text-2);
}

.lf-nav .wp-block-navigation__responsive-container-open svg {
	width: 20px;
	height: 20px;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 16px clamp(16px, 4vw, 24px) 24px;
	background: var(--lf-surface);
	animation: lf-pop 0.16s var(--lf-ease) both;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 4px;
	align-items: stretch;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	height: 48px;
	padding: 0 12px;
	font-size: 16px;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open .lf-only-mobile {
	display: flex;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open .lf-nav-cta {
	margin-top: 12px;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open .lf-nav-cta > .wp-block-navigation-item__content {
	justify-content: center;
	background: var(--lf-brand);
	color: #fff;
	font-weight: 650;
}

@media (max-width: 599px) {
	.lf-header .lf-header__actions.wp-block-buttons {
		display: none;
	}
	.lf-header .lf-header__bar {
		gap: 16px;
	}
	.lf-header .lf-nav.wp-block-navigation {
		justify-content: flex-end;
	}
}

@keyframes lf-pop {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes lf-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Abertura (listagens e artigo): o neutro do produto clareando até o branco,
   com a grade azul esmaecida e um brilho que flutua devagar — o mesmo fundo
   da abertura do site. Grade presa à janela para alinhar entre as seções.
   ========================================================================== */

.lf-hero,
.lf-article-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, var(--lf-bg) 0%, var(--lf-bg) 55%, var(--lf-surface) 100%);
}

.lf-hero::before,
.lf-article-hero::before,
.lf-related::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(to right, var(--lf-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lf-grid-line) 1px, transparent 1px);
	background-size: 44px 44px;
	background-attachment: fixed;
	-webkit-mask-image: radial-gradient(ellipse 80% 85% at 68% 32%, #000 22%, transparent 76%);
	mask-image: radial-gradient(ellipse 80% 85% at 68% 32%, #000 22%, transparent 76%);
}

.lf-hero::after,
.lf-article-hero::after {
	content: "";
	position: absolute;
	top: 2%;
	right: 2%;
	z-index: -1;
	width: min(920px, 95vw);
	height: 520px;
	pointer-events: none;
	background: radial-gradient(closest-side, var(--lf-glow), transparent);
	animation: lf-drift 22s ease-in-out infinite;
}

@keyframes lf-drift {
	0%,
	100% {
		transform: translate(0, 0);
	}
	33% {
		transform: translate(28px, -18px);
	}
	66% {
		transform: translate(-12px, 10px);
	}
}

.lf-hero {
	padding-top: clamp(56px, 8vw, 96px);
	padding-bottom: clamp(40px, 5vw, 56px);
}

.lf-hero__inner > * {
	margin-block: 0;
}

.lf-hero .lf-hero__title {
	margin-top: 14px;
	max-width: 760px;
	font-size: clamp(38px, 5.4vw, 60px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.lf-hero .lf-hero__lead {
	margin-top: 18px;
	max-width: 620px;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	color: var(--lf-text-2);
}

.lf-hero .lf-hero__lead p {
	margin: 0;
}

.lf-hero .lf-hero__tools {
	margin-top: 36px;
	gap: 16px 24px;
}

.lf-hero .lf-search,
.lf-hero__inner > .wp-block-buttons {
	margin-top: 28px;
}

.lf-hero .lf-hero__tools .lf-search {
	margin-top: 0;
}

.lf-hero--404 {
	padding-bottom: clamp(64px, 9vw, 112px);
}

/* Categorias como chips (o filtro do app). */
.lf-cats.wp-block-categories-list,
ul.lf-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lf-cats li {
	margin: 0;
}

/* Blog ainda sem artigo: o bloco escreve "Nenhuma categoria"; os chips somem. */
.lf-cats .cat-item-none {
	display: none;
}

.lf-cats a {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--lf-line);
	border-radius: 8px;
	background: var(--lf-surface);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--lf-text-2);
	transition: border-color 0.12s var(--lf-ease), color 0.12s var(--lf-ease);
}

.lf-cats a:hover {
	border-color: var(--lf-brand-line);
	color: var(--lf-brand);
}

.lf-cats .current-cat > a {
	border-color: var(--lf-brand-line);
	background: var(--lf-brand-soft);
	color: var(--lf-brand);
	font-weight: 600;
}

/* Busca: campo de 40px com a lupa dentro. */
.lf-search {
	width: min(100%, 320px);
}

.lf-search .wp-block-search__inside-wrapper {
	height: 40px;
	padding: 3px;
	border: 1px solid var(--lf-line);
	border-radius: 9px;
	background: var(--lf-surface);
	transition: border-color 0.12s var(--lf-ease);
}

.lf-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--lf-brand);
}

.lf-search .wp-block-search__input {
	padding: 0 10px;
	border: 0;
	background: transparent;
	font-size: 14.5px;
	color: var(--lf-text);
	outline: none;
}

.lf-search .wp-block-search__input::placeholder {
	color: var(--lf-muted);
}

.lf-search .wp-block-search__button {
	margin: 0;
	padding: 0 10px;
	border-radius: 7px;
	background: transparent;
	color: var(--lf-muted);
}

.lf-search .wp-block-search__button:hover {
	background: var(--lf-bg);
	color: var(--lf-brand);
}

.lf-search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Lista de artigos: cartões com capa. A capa é desenhada em CSS (os artigos
   não têm imagem): fundo na cor da categoria (paleta fechada de etiquetas do
   produto), grade fina e uma mini folha, como as telas do app no site. Se o
   post tiver imagem destacada, a imagem entra no lugar da capa.
   ========================================================================== */

.lf-section {
	padding-top: clamp(40px, 6vw, 64px);
	padding-bottom: clamp(72px, 10vw, 112px);
}

.lf-section-head {
	margin-bottom: 28px;
}

.lf-section-head > * {
	margin-block: 0;
}

.lf-section-head .lf-section-head__title {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: -0.03em;
}

.lf-posts > * {
	margin-block: 0;
}

.lf-cards.wp-block-post-template {
	gap: 22px;
}

.lf-cards > li {
	--lf-cover: #0d6efd;
	display: flex;
	margin: 0;
}

/* Cor da capa pela categoria (as do blog-lexflow); o resto fica no azul. */
.lf-cards > li.category-captacao-e-relacionamento { --lf-cover: #0d6efd; }
.lf-cards > li.category-marketing-juridico { --lf-cover: #d63384; }
.lf-cards > li.category-gestao-do-escritorio { --lf-cover: #17b3d1; }
.lf-cards > li.category-departamento-juridico { --lf-cover: #0f7a67; }
.lf-cards > li.category-contratos { --lf-cover: #12855b; }
.lf-cards > li.category-societario-imoveis-e-documentos { --lf-cover: #8a6d1f; }
.lf-cards > li.category-processos-e-prazos { --lf-cover: #e6a700; }
.lf-cards > li.category-tecnologia-e-ia { --lf-cover: #6f42c1; }

.lf-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 20px;
	overflow: hidden;
	border: 1px solid var(--lf-line);
	border-radius: 12px;
	background: var(--lf-surface);
	transition: border-color 0.16s var(--lf-ease), transform 0.16s var(--lf-ease), box-shadow 0.16s var(--lf-ease);
}

.lf-card:hover {
	border-color: color-mix(in srgb, var(--lf-cover) 35%, var(--lf-line));
	box-shadow: var(--wp--preset--shadow--lf);
	transform: translateY(-2px);
}

/* A capa. */
.lf-card::before {
	content: "";
	display: block;
	flex: none;
	height: 136px;
	margin: -20px -22px 18px;
	border-bottom: 1px solid var(--lf-line-2);
	background:
		radial-gradient(closest-side, color-mix(in srgb, var(--lf-cover) 26%, transparent), transparent) 110% -40% / 70% 160% no-repeat,
		linear-gradient(to right, color-mix(in srgb, var(--lf-cover) 11%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(to bottom, color-mix(in srgb, var(--lf-cover) 11%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
		color-mix(in srgb, var(--lf-cover) 6%, var(--lf-surface));
}

/* A mini folha sobre a capa: título em barras e uma linha na cor da categoria. */
.lf-card::after {
	content: "";
	position: absolute;
	top: 30px;
	left: 22px;
	width: 132px;
	height: 78px;
	border: 1px solid color-mix(in srgb, var(--lf-cover) 22%, var(--lf-line));
	border-radius: 8px;
	background:
		linear-gradient(var(--lf-cover), var(--lf-cover)) 12px 14px / 34px 4px no-repeat,
		linear-gradient(#101623, #101623) 12px 26px / 92px 6px no-repeat,
		linear-gradient(#e5e8ee, #e5e8ee) 12px 41px / 104px 4px no-repeat,
		linear-gradient(#e5e8ee, #e5e8ee) 12px 51px / 78px 4px no-repeat,
		linear-gradient(#eef1f5, #eef1f5) 12px 61px / 54px 4px no-repeat,
		#fff;
	box-shadow: 0 1px 1px rgba(16, 22, 35, 0.03), 0 6px 18px color-mix(in srgb, var(--lf-cover) 14%, transparent);
	transition: transform 0.28s var(--lf-ease);
	pointer-events: none;
}

.lf-card:hover::after {
	transform: translateY(-3px) rotate(-1.2deg);
}

.lf-card:has(> .lf-card__image)::before,
.lf-card:has(> .lf-card__image)::after {
	display: none;
}

.lf-card > * {
	margin-block: 0;
}

.lf-card .lf-card__image {
	margin: -20px -22px 18px;
	border-bottom: 1px solid var(--lf-line-2);
}

.lf-card .lf-card__image img {
	border-radius: 0;
}

.lf-card__terms,
.lf-crumbs__terms,
.lf-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lf-card__terms .wp-block-post-terms__separator,
.lf-crumbs__terms .wp-block-post-terms__separator,
.lf-tags .wp-block-post-terms__separator {
	display: none;
}

/* Chip mono do produto, com o ponto na cor da categoria. */
.lf-card__terms a,
.lf-tags a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--lf-cover, #0d6efd) 10%, transparent);
	font-family: var(--lf-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--lf-cover, #0d6efd) 80%, #101623);
}

.lf-card__terms a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--lf-cover);
}

.lf-tags a {
	background: var(--lf-line-2);
	color: var(--lf-text-2);
}

.lf-tags a::before {
	content: "#";
	opacity: 0.6;
}

.lf-card .lf-card__title {
	margin-top: 14px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.lf-card__title a {
	color: var(--lf-text);
	transition: color 0.12s var(--lf-ease);
}

/* O cartão inteiro clica: o link do título cobre o cartão. */
.lf-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lf-card:hover .lf-card__title a {
	color: var(--lf-brand);
}

/* A categoria continua clicável por cima do link do cartão. */
.lf-card__terms {
	position: relative;
	z-index: 2;
}

.lf-card .lf-card__excerpt {
	margin-top: 8px;
}

.lf-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.lf-card .lf-card__date {
	margin-top: auto;
	padding-top: 18px;
}

/* Destaque: em cada página do blog, o primeiro artigo ocupa a linha toda,
   com a capa grande à esquerda. */
.lf-posts--feature .lf-cards > li:first-child {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.lf-posts--feature .lf-cards > li:first-child .lf-card {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: 36px;
		padding: 0 36px 0 0;
	}

	.lf-posts--feature .lf-cards > li:first-child .lf-card::before {
		grid-column: 1;
		grid-row: 1 / -1;
		height: auto;
		min-height: 300px;
		margin: 0;
		border-right: 1px solid var(--lf-line-2);
		border-bottom: 0;
		background-size: 70% 160%, 26px 26px, 26px 26px, auto;
		background-position: 120% -30%, 0 0, 0 0, 0 0;
	}

	.lf-posts--feature .lf-cards > li:first-child .lf-card::after {
		top: 50%;
		left: 26%;
		width: 230px;
		height: 136px;
		margin-top: -68px;
		background:
			linear-gradient(var(--lf-cover), var(--lf-cover)) 20px 24px / 56px 6px no-repeat,
			linear-gradient(#101623, #101623) 20px 44px / 160px 10px no-repeat,
			linear-gradient(#e5e8ee, #e5e8ee) 20px 72px / 180px 6px no-repeat,
			linear-gradient(#e5e8ee, #e5e8ee) 20px 88px / 136px 6px no-repeat,
			linear-gradient(#eef1f5, #eef1f5) 20px 104px / 96px 6px no-repeat,
			#fff;
	}

	.lf-posts--feature .lf-cards > li:first-child .lf-card > * {
		grid-column: 2;
	}

	.lf-posts--feature .lf-cards > li:first-child .lf-card__terms {
		margin-top: 40px;
	}

	.lf-posts--feature .lf-cards > li:first-child .lf-card__title {
		font-size: clamp(24px, 2.4vw, 30px);
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: -0.03em;
	}

	.lf-posts--feature .lf-cards > li:first-child .lf-card__excerpt {
		margin-top: 12px;
		font-size: 16px;
	}

	.lf-posts--feature .lf-cards > li:first-child .lf-card__date {
		padding-bottom: 36px;
	}
}

.lf-pagination {
	margin-top: 48px;
	gap: 6px;
	font-size: 14px;
}

.lf-pagination .page-numbers,
.lf-pagination .wp-block-query-pagination-previous,
.lf-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--lf-line);
	border-radius: 8px;
	background: var(--lf-surface);
	font-weight: 600;
	color: var(--lf-text-2);
}

.lf-pagination .page-numbers {
	padding: 0 8px;
	font-family: var(--lf-mono);
	font-size: 13px;
	font-weight: 500;
}

.lf-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.lf-pagination a:hover {
	border-color: var(--lf-brand-line);
	color: var(--lf-brand);
}

.lf-pagination .page-numbers.current {
	border-color: var(--lf-brand-line);
	background: var(--lf-brand-soft);
	color: var(--lf-brand);
}

.lf-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 6px;
}

/* Sem artigo: painel tracejado sobre a grade fina. */
.lf-empty {
	margin: 0;
	padding: 64px 24px;
	border: 1px dashed var(--lf-line);
	border-radius: 12px;
	background:
		linear-gradient(to right, var(--lf-grid-line) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(to bottom, var(--lf-grid-line) 1px, transparent 1px) 0 0 / 22px 22px,
		var(--lf-surface-2);
	font-size: 16px;
	text-align: center;
	color: var(--lf-text-2);
}

/* ==========================================================================
   Artigo: a abertura (trilha, título, autor e data) fica na faixa com grade e
   brilho; o corpo segue na coluna de 720px.
   ========================================================================== */

.lf-article-hero {
	padding-top: clamp(48px, 7vw, 88px);
	padding-bottom: clamp(32px, 5vw, 56px);
}

.lf-article {
	padding-top: 8px;
	padding-bottom: 8px;
}

.lf-article__head > * {
	margin-block: 0;
}

.lf-crumbs {
	gap: 10px;
	font-family: var(--lf-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lf-crumbs > * {
	margin: 0;
}

.lf-crumbs__home a {
	color: var(--lf-muted);
}

.lf-crumbs__home a:hover {
	color: var(--lf-brand);
}

.lf-crumbs__terms::before {
	content: "/";
	color: var(--lf-muted);
}

.lf-crumbs__terms a {
	color: var(--lf-brand);
}

.lf-article__head .lf-article__title {
	margin-top: 18px;
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.lf-meta {
	margin-top: 28px;
	gap: 12px;
	font-size: 14px;
}

.lf-meta > * {
	margin: 0;
}

.lf-meta__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Avatar sem foto (gradiente neutro do produto) antes do nome. */
.lf-meta__author::before {
	content: "";
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(140deg, #3f4d63, #8996ab);
}

.lf-meta__date::before,
.lf-meta__time::before {
	content: "·";
	margin-right: 12px;
	color: var(--lf-muted);
}

.lf-meta__time {
	font-family: var(--lf-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lf-muted);
}

.lf-meta__author:empty + .lf-meta__date::before {
	content: none;
}

.lf-article .lf-article__image {
	margin-top: 8px;
}

.lf-article__image img {
	border: 1px solid var(--lf-line);
}

/* Barra de leitura: fio azul logo abaixo do cabeçalho (lexflow.js). */
.lf-progress {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 101;
	height: 2px;
	background: var(--lf-brand);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* Corpo do artigo. */
.lf-prose {
	margin-top: 40px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.75;
	color: var(--lf-text);
}

.lf-prose > * {
	margin-block-start: 1.15em;
	margin-block-end: 0;
}

.lf-prose > :first-child {
	margin-block-start: 0;
}

.lf-prose > h2 {
	margin-block-start: 2.1em;
	font-size: var(--wp--preset--font-size--xl);
}

/* Traço azul acima de cada seção do texto. */
.lf-prose > h2::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: var(--lf-brand);
}

.lf-prose > h3 {
	margin-block-start: 1.7em;
}

.lf-prose > h4 {
	margin-block-start: 1.5em;
}

.lf-prose > h2 + *,
.lf-prose > h3 + *,
.lf-prose > h4 + * {
	margin-block-start: 0.6em;
}

.lf-prose a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-decoration-color: var(--lf-brand-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.12s var(--lf-ease);
}

.lf-prose a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

.lf-prose :where(ul, ol) {
	padding-left: 1.3em;
}

.lf-prose li + li {
	margin-top: 0.45em;
}

.lf-prose li::marker {
	color: var(--lf-brand);
}

.lf-prose :where(.wp-block-quote, blockquote) {
	margin-inline: 0;
	padding: 16px 20px;
	border-left: 3px solid var(--lf-brand);
	border-radius: 0 12px 12px 0;
	background: var(--lf-brand-soft);
}

.lf-prose :where(.wp-block-quote, blockquote) > * {
	margin-block: 0;
}

.lf-prose :where(.wp-block-quote, blockquote) > * + * {
	margin-top: 0.6em;
}

.lf-prose ol > li::marker {
	font-family: var(--lf-mono);
	font-size: 0.85em;
	font-weight: 600;
}

.lf-prose strong {
	font-weight: 700;
}

.lf-prose :where(p, li) code {
	padding: 0.12em 0.38em;
	border-radius: 4px;
	background: var(--lf-line-2);
	font-family: var(--lf-mono);
	font-size: 0.86em;
}

.lf-prose hr,
.lf-prose .wp-block-separator {
	margin-block: 2.4em;
	border: 0;
	border-top: 1px solid var(--lf-line);
	opacity: 1;
}

.lf-prose .wp-block-quote cite,
.lf-prose .wp-block-pullquote cite {
	display: block;
	margin-top: 8px;
	font-family: var(--lf-mono);
	font-size: 11px;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lf-muted);
}

/* Tabela no padrão DataTable do app: cabeçalho mono em --surface2. Vale para
   o bloco Tabela e para a tabela de HTML clássico colada no conteúdo. */
.lf-prose .wp-block-table {
	overflow-x: auto;
}

.lf-prose > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Especificidade acima da do bloco Tabela do WordPress (.wp-block-table td,
   th), que desenha borda preta de 1px em toda célula e 3px sob o thead. */
.lf-prose table,
.lf-prose .wp-block-table table {
	width: 100%;
	border: 1px solid var(--lf-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.55;
}

.lf-prose table :is(th, td),
.lf-prose .wp-block-table :is(th, td) {
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid var(--lf-line-2);
	text-align: left;
	vertical-align: top;
}

.lf-prose .wp-block-table thead,
.lf-prose .wp-block-table tfoot {
	border: 0;
}

.lf-prose table th,
.lf-prose .wp-block-table th {
	border-top: 0;
	background: var(--lf-surface-2);
	font-family: var(--lf-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lf-muted);
}

.lf-prose thead th:first-child {
	border-top-left-radius: 11px;
}

.lf-prose thead th:last-child {
	border-top-right-radius: 11px;
}

.lf-prose thead + tbody tr:first-child td {
	border-top: 1px solid var(--lf-line);
}

.lf-prose .wp-block-table figcaption {
	margin: 10px 0 0;
}

.lf-prose .wp-block-image img {
	border: 1px solid var(--lf-line);
}

.lf-article > .lf-tags {
	margin-top: 36px;
}

/* ==========================================================================
   Chamada no fim do artigo: a faixa escura do site (tokens do tema escuro do
   2.0), com a grade e o brilho azuis.
   ========================================================================== */

.lf-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: 64px;
	padding: clamp(28px, 5vw, 44px);
	border: 1px solid #232c39;
	border-radius: 16px;
	background: #0c1016;
	color: #e8edf5;
}

.lf-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(to right, rgba(76, 147, 255, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(76, 147, 255, 0.08) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 15%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 90% at 85% 20%, #000 15%, transparent 75%);
}

.lf-cta::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -15%;
	z-index: -1;
	width: 520px;
	height: 420px;
	background: radial-gradient(closest-side, rgba(76, 147, 255, 0.22), transparent);
	animation: lf-drift 20s ease-in-out infinite;
}

.lf-cta > * {
	margin-block: 0;
}

.lf-cta .lf-eyebrow {
	color: #4c93ff;
}

.lf-cta .lf-cta__title {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #e8edf5;
}

.lf-cta .lf-cta__text {
	margin-top: 12px;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.6;
	color: #a9b4c4;
}

.lf-cta .lf-cta__actions {
	margin-top: 26px;
	gap: 10px;
}

.lf-cta .is-style-outline > .wp-block-button__link {
	border-color: #232c39;
	background: #141a23;
	color: #e8edf5;
}

.lf-cta .is-style-outline > .wp-block-button__link:hover,
.lf-cta .is-style-outline > .wp-block-button__link:focus {
	border-color: rgba(76, 147, 255, 0.34);
	background: #141a23;
	color: #7db0ff;
}

/* ==========================================================================
   "Leia também": volta ao neutro, com a grade azul e os mesmos cartões.
   Sem artigo relacionado, a seção some.
   ========================================================================== */

.lf-related {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: clamp(64px, 9vw, 104px);
	padding-top: clamp(48px, 6vw, 72px);
	padding-bottom: clamp(72px, 10vw, 112px);
	background: linear-gradient(180deg, var(--lf-surface) 0%, var(--lf-bg) 30%, var(--lf-bg) 100%);
}

.lf-related::before {
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 15%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 15%, transparent 75%);
}

.lf-related > * {
	margin-block: 0;
}

.lf-related .lf-related__title {
	margin-bottom: 28px;
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: -0.03em;
}

.lf-related:not(:has(.lf-card)) {
	display: none;
}

/* ==========================================================================
   Rodapé (o mesmo do site).
   ========================================================================== */

.lf-footer {
	position: relative;
	padding-top: 64px;
	padding-bottom: 40px;
	border-top: 1px solid var(--lf-line);
	background: var(--lf-surface);
}

.lf-footer > *,
.lf-footer__top > *,
.lf-footer__brand > *,
.lf-footer__cols > *,
.lf-footer__col > * {
	margin-block: 0;
}

.lf-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 40px;
}

.lf-footer .lf-logo img {
	height: 24px;
}

.lf-footer__brand .lf-footer__about {
	margin-top: 16px;
	max-width: 300px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--lf-text-2);
}

.lf-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.lf-footer__col .lf-footer__label {
	font-family: var(--lf-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lf-muted);
}

.lf-footer__col .lf-footer__links {
	margin-top: 16px;
	padding: 0;
	list-style: none;
}

.lf-footer__links li + li {
	margin-top: 12px;
}

.lf-footer__links a {
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--lf-text-2);
	transition: color 0.12s var(--lf-ease);
}

.lf-footer__links a:hover {
	color: var(--lf-brand);
}

.lf-footer .lf-footer__bottom {
	margin-top: 56px;
	padding-top: 24px;
	gap: 16px;
	border-top: 1px solid var(--lf-line-2);
}

.lf-footer__copy {
	margin: 0;
	font-size: 13px;
	color: var(--lf-muted);
}

.lf-footer .lf-social.wp-block-social-links {
	gap: 8px;
	margin: 0;
}

.lf-footer .lf-social.wp-block-social-links .wp-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--lf-line);
	border-radius: 8px;
	background: transparent;
	color: var(--lf-text-2);
	transition: border-color 0.12s var(--lf-ease), color 0.12s var(--lf-ease);
}

.lf-footer .lf-social.wp-block-social-links .wp-social-link:hover {
	border-color: var(--lf-brand-line);
	color: var(--lf-brand);
	transform: none;
}

.lf-footer .lf-social.wp-block-social-links .wp-block-social-link-anchor {
	padding: 0;
	color: inherit;
}

.lf-footer .lf-social.wp-block-social-links .wp-block-social-link-anchor svg {
	width: 15px;
	height: 15px;
}

/* Fio azul no topo do rodapé, como no site. */
.lf-footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--lf-beam);
}

@media (max-width: 900px) {
	.lf-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.lf-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lf-footer .lf-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Revelação ao rolar (assets/js/lexflow.js): o bloco sobe 16px e aparece
   quando entra na tela. `lf-js` só é posto com JavaScript e sem "reduzir
   movimento"; se o script não rodar, `lf-ready` (2,5 s) mostra tudo.
   ========================================================================== */

.lf-js:not(.lf-ready) :is(.lf-hero__inner > *, .lf-article__head > *, .lf-section-head > *, .lf-cards > li, .lf-related__title, .lf-cta, .lf-empty):not(.lf-in) {
	opacity: 0;
	transform: translateY(16px);
}

.lf-js :is(.lf-hero__inner > *, .lf-article__head > *, .lf-section-head > *, .lf-cards > li, .lf-related__title, .lf-cta, .lf-empty) {
	transition: opacity 0.5s var(--lf-ease), transform 0.5s var(--lf-ease);
}

@media (prefers-reduced-motion: reduce) {
	.lf-hero::after,
	.lf-article-hero::after,
	.lf-cta::after {
		animation: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}