/* NICHO Blog · Kit B · Magazine · Artigo (SEO, guia "rec-" e análise "fullreview-") e texto da página comum: coluna de 760px e lateral
   de 300px presa ao rolar; cards, botões e tabelas com sombra no lugar da linha em volta (só as divisórias entre itens ficam). */

.nx-artigo__grid {
	display: grid;
	grid-template-columns: minmax(0, 760px) 300px;
	column-gap: 60px;
	justify-content: center;
	align-items: start;
	padding: 24px 24px 80px;
}

.nx-artigo__grid.is-solo {
	grid-template-columns: minmax(0, 760px);
}

.nx-artigo__main {
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
}

/* ---------- Topo: trilha, sobretítulo, título, linha fina, autor e compartilhar ---------- */

.nx-artigo__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nx-artigo__title {
	margin: 0;
	font-size: 48px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.nx-artigo--rec .nx-artigo__title,
.nx-artigo--review .nx-artigo__title {
	font-size: 46px;
}

.nx-artigo__lead {
	margin: 0;
	font-size: 19px;
	line-height: 1.7;
	color: var(--nx-muted);
}

.nx-artigo__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	font-size: 14px;
	color: var(--nx-muted);
}

.nx-artigo__meta a,
.nx-artigo__meta b {
	color: var(--nx-ink);
	font-weight: 700;
	text-decoration: none;
}

.nx-artigo__meta a:hover {
	color: var(--nx-tinta);
}

.nx-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--nx-muted);
}

/* Pílulas brancas com sombra ("body" vence a regra geral de sombra do style.css). */
body .nx-artigo .nx-share :is(button, a) {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 2px;
	background: #FFFFFF;
	box-shadow: var(--nx-sombra-leve);
	color: var(--nx-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.15s, color 0.15s;
}

body .nx-artigo .nx-share :is(button, a):is(:hover, :active, :focus-visible) {
	outline: none;
	box-shadow: var(--nx-sombra);
	color: var(--nx-tinta);
}

.nx-artigo__main > .nx-ad {
	margin: 0 auto;
}

/* Foto de destaque (artigo e guia) */
.nx-artigo__img {
	margin: 0;
}

.nx-artigo__img img {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: 0;
	background: var(--nx-img);
}

/* Sumário "Neste artigo" (artigo comum) */
.nx-artigo__toc {
	padding: 24px;
	border-radius: 0;
	background: var(--nx-tint-8);
}

.nx-artigo__toc summary {
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.nx-artigo__toc ol {
	margin: 12px 0 0;
	padding-left: 22px;
	font-size: 16px;
	line-height: 2;
}

.nx-artigo__toc a {
	color: var(--nx-ink);
	text-decoration: none;
}

.nx-artigo__toc a:hover {
	color: var(--nx-tinta);
	text-decoration: underline;
}

/* ---------- Guia (rec-): aviso curto e "Os caminhos mais usados" ---------- */

.nx-a-abre {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nx-artigo__nota-aviso {
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid var(--nx-accent);
	background: #FFFFFF;
	font-size: 14px;
	line-height: 1.5;
	color: var(--nx-muted);
}

.nx-artigo__caminhos {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px;
	border-radius: 0;
	background: var(--nx-tint-8);
}

.nx-artigo__caminhos ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

/* Divisória entre os caminhos (linha entre itens, não em volta). */
.nx-artigo__caminhos a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid color-mix(in oklab, var(--nx-accent) 14%, #FFFFFF);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--nx-ink);
	text-decoration: none;
}

.nx-artigo__caminhos a:hover {
	color: var(--nx-tinta);
}

/* ---------- Análise (fullreview-): ficha com a foto e a nota ---------- */

.nx-a-ficha {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 28px;
	border-radius: 0;
	background: #FFFFFF;
	box-shadow: var(--nx-sombra);
}

.nx-a-ficha.is-sem-foto {
	grid-template-columns: minmax(0, 1fr);
}

.nx-a-ficha__img {
	margin: 0;
	height: 220px;
	overflow: hidden;
	border-radius: 0;
	background: var(--nx-img);
}

.nx-a-ficha__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nx-a-ficha__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.nx-a-ficha__nota {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
}

.nx-a-ficha__nota strong {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--nx-ink);
}

.nx-a-ficha__nota strong span {
	font-size: 18px;
	font-weight: 600;
	color: var(--nx-muted);
}

/* ---------- Fim do guia e da análise: aviso e "Voltar ao guia" ---------- */

.nx-artigo__aviso {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	border-radius: 0;
	background: var(--nx-cinza);
	font-size: 13px;
	line-height: 1.6;
	color: var(--nx-muted);
}

.nx-artigo__aviso strong {
	color: var(--nx-ink);
}

body .nx-artigo .nx-artigo__voltar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	box-shadow: var(--nx-sombra);
	color: var(--nx-ink);
	text-decoration: none;
	transition: box-shadow 0.15s;
}

.nx-artigo__voltar span {
	font-size: 13px;
	color: var(--nx-muted);
}

.nx-artigo__voltar strong {
	font-size: 17px;
	line-height: 1.3;
}

body .nx-artigo .nx-artigo__voltar:is(:hover, :active, :focus-visible) {
	outline: none;
	box-shadow: var(--nx-sombra-forte);
	color: var(--nx-ink);
}

body .nx-artigo .nx-artigo__voltar:hover strong {
	color: var(--nx-tinta);
}

/* ---------- Texto do post (também o da página comum) ---------- */

.nx-artigo__content {
	font-size: 17px;
	line-height: 1.7;
	color: var(--nx-ink);
	overflow-wrap: break-word;
}

.nx-artigo__content > * {
	margin-top: 0;
	margin-bottom: 20px;
}

.nx-artigo__content > *:last-child {
	margin-bottom: 0;
}

.nx-artigo__content h2 {
	margin: 44px 0 16px;
	font-size: 32px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
	scroll-margin-top: 24px;
}

.nx-artigo--rec .nx-artigo__content h2,
.nx-artigo--review .nx-artigo__content h2 {
	font-size: 30px;
}

.nx-artigo__content h3 {
	margin: 32px 0 12px;
	font-size: 21px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.02em;
	scroll-margin-top: 24px;
}

.nx-artigo__content h4 {
	margin: 24px 0 10px;
	font-size: 18px;
	font-weight: 700;
	scroll-margin-top: 24px;
}

.nx-artigo__content > h2:first-child,
.nx-artigo__content > h3:first-child {
	margin-top: 0;
}

.nx-artigo__content a {
	color: var(--nx-ink);
	text-decoration-color: var(--nx-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.nx-artigo__content a:hover {
	color: var(--nx-tinta);
}

/* Listas com o "ok" na cor do site */
.nx-artigo__content ul:not([class]) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.nx-artigo__content ul:not([class]) > li {
	position: relative;
	padding-left: 24px;
	font-size: 16px;
	line-height: 1.5;
}

.nx-artigo__content ul:not([class]) > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	background: var(--nx-tinta);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nx-artigo__content ol:not([class]) {
	padding-left: 22px;
}

.nx-artigo__content ol:not([class]) > li + li {
	margin-top: 6px;
}

.nx-artigo__content img {
	border-radius: 0;
}

.nx-artigo__content figure {
	margin-left: 0;
	margin-right: 0;
}

.nx-artigo__content figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--nx-muted);
}

.nx-artigo__content blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--nx-accent);
	font-size: 19px;
	line-height: 1.6;
}

/* Tabelas: caixa branca com sombra; só as divisórias entre as linhas. */
.nx-artigo__content.single-article-content .wp-block-table,
.nx-artigo__content.single-article-content > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	box-shadow: var(--nx-sombra-leve);
}

.nx-artigo__content.single-article-content > table {
	display: table;
	overflow: hidden;
}

.nx-artigo__content table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.nx-artigo__content th,
.nx-artigo__content td {
	padding: 12px;
	border: 0;
	border-top: 1px solid var(--nx-cinza);
	text-align: left;
	vertical-align: top;
	color: var(--nx-muted);
}

.nx-artigo__content thead th,
.nx-artigo__content tr:first-child > * {
	border-top: 0;
}

.nx-artigo__content thead {
	border: 0;
}

.nx-artigo__content th,
.nx-artigo__content td:first-child {
	color: var(--nx-ink);
	font-weight: 700;
}

.nx-artigo__content .wp-block-table figcaption {
	padding: 0 12px 12px;
}

/* Perguntas (details): divisória embaixo de cada uma */
.nx-artigo__content details {
	padding: 18px 0;
	border-bottom: 1px solid var(--nx-cinza);
	margin-bottom: 0;
}

.nx-artigo__content details summary {
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.nx-artigo__content details > :not(summary) {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--nx-muted);
}

.nx-artigo__content details + :not(details) {
	margin-top: 20px;
}

/* Botões do editor (Gutenberg) e dos blocos de CTA (simples, lista, imagem + botão): pílula na cor do site
   (ou na cor do próprio bloco) e seta que anda ao passar o mouse. */
:is(.nx-artigo__content, .nx-pagina__texto) .button,
:is(.nx-artigo__content, .nx-pagina__texto) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 58px;
	padding: 0 34px;
	border: 0;
	border-radius: 2px;
	background: var(--nx-accent);
	box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--nx-accent) 70%, transparent);
	color: var(--nx-btn-text, var(--nx-on-accent, #FFFFFF)) !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	transition: background 0.15s, box-shadow 0.2s, transform 0.2s;
}

:is(.nx-artigo__content, .nx-pagina__texto) .button:hover,
:is(.nx-artigo__content, .nx-pagina__texto) .wp-block-button__link:hover {
	background: var(--nx-accent-hover);
	box-shadow: 0 14px 28px -10px color-mix(in oklab, var(--nx-accent) 80%, transparent);
	color: var(--nx-btn-text, var(--nx-on-accent-hover, #FFFFFF)) !important;
	transform: translateY(-1px);
}

:is(.nx-artigo__content, .nx-pagina__texto) .button svg {
	flex-shrink: 0;
	fill: currentColor;
	transition: transform 0.2s;
}

:is(.nx-artigo__content, .nx-pagina__texto) .button:hover svg {
	transform: translateX(4px);
}

/* Lista de CTAs: botões empilhados, largura toda e com o mesmo tamanho. */
:is(.nx-artigo__content, .nx-pagina__texto) .cta-block-content-list {
	gap: 12px;
	margin: 32px 0;
}

:is(.nx-artigo__content, .nx-pagina__texto) .cta-block-list {
	min-height: 60px !important;
	padding: 16px 28px !important;
	border-radius: 2px !important;
	font-size: 16px !important;
}

/* Bloco "imagem + botão": card branco com sombra, como os cards do kit. */
.nx-artigo__content.single-article-content .block-content.block-content-default {
	padding: 28px;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	box-shadow: var(--nx-sombra);
	color: var(--nx-ink);
}

.nx-artigo__content.single-article-content .block-content.block-content-default:is(:hover, :active) {
	box-shadow: var(--nx-sombra-forte);
}

.nx-artigo__content .block-content.block-content-default .block-content-img a,
.nx-artigo__content .block-content.block-content-default .block-content-img a img {
	border-radius: 0;
}

.nx-artigo__content .block-content.block-content-default .block-content-title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--nx-ink);
}

.nx-artigo__content .block-content.block-content-default .block-content-text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--nx-muted);
}

.nx-artigo__content .block-content.block-content-default .button {
	width: 100%;
}

.nx-artigo__content .block-content.block-content-default .block-content-small {
	color: var(--nx-muted);
}

/* Grupo de botões do editor: faixa clara na cor do site com o botão no meio (o "Conheça o app recomendado" do desenho). */
.nx-artigo__content .wp-block-buttons {
	justify-content: center;
	padding: 24px;
	border-radius: 0;
	background: var(--nx-tint-8);
}

.nx-artigo__content .nx-ad--inline {
	margin: 28px auto;
}

/* ---------- Lateral ---------- */

.nx-artigo__side {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 4px 8px 16px;
	margin: -4px -8px 0;
	scrollbar-width: thin;
}

body .nx-artigo .nx-artigo__box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	box-shadow: var(--nx-sombra);
}

/* Divisória entre os itens da lista. */
.nx-artigo__box a {
	padding: 9px 0;
	border-top: 1px solid var(--nx-cinza);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--nx-ink);
	text-decoration: none;
}

.nx-artigo__box a:hover {
	color: var(--nx-tinta);
}

.nx-artigo__box-nome {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.nx-artigo__box-nota {
	font-size: 14px;
	color: var(--nx-muted);
}

/* ---------- Leia também / Artigos recentes ---------- */

.nx-artigo__final {
	padding: 56px 0 88px;
	border-top: 1px solid var(--nx-cinza);
}

.nx-artigo__final-in {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1168px;
	margin: 0 auto;
	padding: 0 24px;
}

.nx-artigo__final .nx-grid {
	gap: 28px;
}

.nx-artigo__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	color: var(--nx-ink);
	text-decoration: none;
}

.nx-artigo__card-img {
	height: 170px;
	transition: transform 0.2s;
}

.nx-artigo__card:hover .nx-artigo__card-img {
	transform: translateY(-3px);
}

.nx-artigo__card-title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
}

.nx-artigo__card:hover {
	color: var(--nx-tinta);
}

/* ---------- Telas médias e celular ---------- */

@media (max-width: 1240px) {
	.nx-artigo__grid {
		column-gap: 48px;
	}
}

@media (max-width: 1100px) {
	.nx-artigo__grid {
		grid-template-columns: minmax(0, 1fr) 280px;
		column-gap: 40px;
	}
}

@media (max-width: 960px) {
	.nx-artigo__grid {
		grid-template-columns: minmax(0, 760px);
		row-gap: 40px;
	}

	.nx-artigo__side {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		margin: 0;
	}

	.nx-a-ficha {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 24px;
	}

	.nx-a-ficha__img {
		height: 180px;
	}

	.nx-artigo__img img {
		height: 320px;
	}
}

@media (max-width: 640px) {
	.nx-artigo__grid {
		padding: 16px 16px 56px;
	}

	.nx-artigo__main {
		gap: 28px;
	}

	.nx-artigo__title,
	.nx-artigo--rec .nx-artigo__title,
	.nx-artigo--review .nx-artigo__title {
		font-size: 32px;
	}

	.nx-artigo__lead {
		font-size: 17px;
	}

	.nx-artigo__img img {
		height: 220px;
	}

	.nx-artigo__toc,
	.nx-artigo__caminhos {
		padding: 20px;
	}

	.nx-a-ficha {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 20px;
	}

	.nx-a-ficha__img {
		height: 190px;
	}

	.nx-a-ficha__nota strong {
		font-size: 38px;
	}

	.nx-artigo__content {
		font-size: 16px;
	}

	.nx-artigo__content h2,
	.nx-artigo--rec .nx-artigo__content h2,
	.nx-artigo--review .nx-artigo__content h2 {
		font-size: 26px;
	}

	.nx-artigo__content h3 {
		font-size: 19px;
	}

	:is(.nx-artigo__content, .nx-pagina__texto) .button,
	:is(.nx-artigo__content, .nx-pagina__texto) .wp-block-button__link {
		max-width: 100%;
		padding: 12px 24px;
		white-space: normal;
	}

	:is(.nx-artigo__content, .nx-pagina__texto) .cta-block-list {
		min-height: 54px !important;
		padding: 12px 16px 12px 22px !important;
		border-radius: 0 !important;
		font-size: 15px !important;
	}

	.nx-artigo__content.single-article-content .block-content.block-content-default {
		padding: 18px;
	}

	.nx-artigo__content .wp-block-buttons {
		padding: 18px;
	}

	body .nx-artigo .nx-artigo__box {
		padding: 22px;
	}

	.nx-artigo__final {
		padding: 40px 0 56px;
	}

	.nx-artigo__final-in {
		padding: 0 16px;
	}

	.nx-artigo__card-img {
		height: 200px;
	}
}

/* ---------- Magazine: títulos em Oswald e caixa alta, como no desenho ---------- */

.nx-artigo__title,
.nx-artigo__content h2,
.nx-artigo__final .nx-h2,
.nx-a-ficha__nota strong {
	font-family: var(--nx-font-titulo);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.nx-artigo__content h2 {
	line-height: 1.1;
}