/* ==========================================================================
   SuperFinanças — CSS de componentes (o que o theme.json não expressa).
   Tokens vêm dos presets do theme.json (var(--wp--preset--*)).
   Seletores em :where() para baixa especificidade (usuário pode sobrescrever).
   ========================================================================== */

/* ===== Design tokens — padronização ======================================
   Fonte única da verdade. Cores de MARCA vêm da paleta do theme.json
   (var(--wp--preset--color--*)); aqui ficam só o raio e as neutras que a
   paleta não cobre. NÃO cravar hex/raio direto nos componentes — usar estes. */
:root {
	/* Raio (escala consolidada) */
	--bn-radius-xs: 8px;      /* chips, badges, botões, caixas de anúncio, paginação */
	--bn-radius-md: 16px;     /* cards, imagens, mídia, pill (1rem = 16px) */
	--bn-radius-pill: 999px;  /* inputs/botões totalmente arredondados */
	--bn-radius-full: 50%;    /* avatares e circulares */

	/* Cores neutras (fora da paleta de marca) */
	--bn-surface-cream: #faf5e3; /* fundo do pill e do drawer */
	--bn-dark: #1a1a1a;          /* footer e aviso de cookies (unifica #1a1a1a/#121212) */
	--bn-ink-soft: #3b3b3b;      /* texto neutro do pill */
	--bn-up: #6ee7b7;            /* ticker: alta */
	--bn-down: #fca5a5;          /* ticker: baixa */
	/* branco = var(--wp--preset--color--card); areia/escuro/dourado já na paleta */

	/* Escala tipográfica (consolidada) — snap dos font-sizes avulsos.
	   Títulos grandes seguem usando clamp() fluido (não entram aqui). */
	--bn-fs-xs: 0.75rem;    /* eyebrows / labels caixa-alta */
	--bn-fs-sm: 0.875rem;   /* meta, legendas, botões pequenos (= preset small) */
	--bn-fs-base: 1rem;     /* corpo (= preset medium) */
	--bn-fs-md: 1.125rem;   /* títulos de card / ênfase */
	--bn-fs-lg: 1.25rem;    /* subtítulo (= preset large) */
	--bn-fs-xl: 1.5rem;     /* subtítulos de seção */
}

/* ----------------------------------------------------------- Ticker ------ */
:where(.sf-ticker) {
	overflow: hidden;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	border-block: 1px solid color-mix(in oklab, var(--wp--preset--color--gold) 35%, transparent);
}

:where(.sf-ticker__track) {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 2.5rem;
	white-space: nowrap;
	padding-block: 0.5rem;
	will-change: transform;
	animation: sf-ticker-scroll 45s linear infinite;
}

/* Pausa no hover/foco — cortesia de leitura. */
:where(.sf-ticker:hover .sf-ticker__track),
:where(.sf-ticker:focus-within .sf-ticker__track) {
	animation-play-state: paused;
}

:where(.sf-ticker__item) {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: var(--bn-fs-sm);
	line-height: 1;
}

:where(.sf-ticker__label) {
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--gold);
}

:where(.sf-ticker__value) {
	font-variant-numeric: tabular-nums;
}

:where(.sf-ticker__delta) {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
:where(.sf-ticker__delta[data-dir="up"])   { color: var(--bn-up); }
:where(.sf-ticker__delta[data-dir="down"]) { color: var(--bn-down); }

@keyframes sf-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Acessibilidade: sem animação para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
	:where(.sf-ticker__track) {
		animation: none;
		flex-wrap: wrap;
		white-space: normal;
		justify-content: center;
	}
}

/* ------------------------------------------------------- Colunistas ------ */
/* Cabeçalho do carrossel: título + setas prev/next (mesmo padrão de Edições
   Especiais). O scroll nativo fica oculto; navega-se pelas setas (ou swipe). */
.sf-colunistas__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.sf-colunistas__title {
	margin: 0;
}

:where(.sf-colunistas__track) {
	display: flex;
	gap: 1.75rem;
	overflow-x: auto;
	padding-block: 0.5rem 1rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* esconde a barra; navegação por setas */
}
.sf-colunistas__track::-webkit-scrollbar {
	display: none;
}

:where(.sf-colunista) {
	flex: 0 0 auto;
	width: 8.5rem;
	text-align: center;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
}

:where(.sf-colunista__photo) {
	width: 5rem;
	height: 5rem;
	margin-inline: auto;
	border-radius: var(--bn-radius-full);
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--gold);
	background-color: var(--wp--preset--color--muted);
	transition: transform 200ms ease;
}
:where(.sf-colunista:hover .sf-colunista__photo) {
	transform: translateY(-3px);
}

:where(.sf-colunista__name) {
	margin: 0.6rem 0 0.15rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--bn-fs-base);
	line-height: 1.1;
}

:where(.sf-colunista__beat) {
	font-size: var(--bn-fs-xs);
	color: var(--wp--preset--color--muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ------------------------------------------------------- Newsletter ------ */
:where(.sf-newsletter__form) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.5rem;
}

:where(.sf-newsletter__label) {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

:where(.sf-newsletter__input) {
	flex: 1 1 18rem;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--gold) 50%, transparent);
	border-radius: var(--bn-radius-xs);
	background-color: color-mix(in oklab, var(--wp--preset--color--background) 12%, transparent);
	color: var(--wp--preset--color--primary-contrast);
	font: inherit;
	font-size: var(--bn-fs-base);
}
:where(.sf-newsletter__input)::placeholder {
	color: color-mix(in oklab, var(--wp--preset--color--primary-contrast) 60%, transparent);
}
:where(.sf-newsletter__input):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
}

:where(.sf-newsletter__btn) {
	flex: 0 0 auto;
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: var(--bn-radius-xs);
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 200ms ease;
}
:where(.sf-newsletter__btn):hover {
	filter: brightness(1.06);
}

/* ===================================================== Categoria ========= */

/* Layout: conteúdo + sidebar. A sidebar gruda no scroll (desktop). */
:where(.sf-cat-layout) {
	align-items: flex-start;
}
/* min-width:0 impede que as colunas flex estiquem além da base para caber a
   imagem (bug clássico de flexbox) — nada escapa para dentro da sidebar. */
:where(.sf-cat-main),
:where(.sf-cat-aside) {
	min-width: 0;
}
/* Nenhuma mídia do conteúdo ultrapassa a largura da coluna. */
:where(.sf-cat-main) img,
:where(.sf-cat-main) figure,
:where(.sf-cat-main) .wp-block-post-featured-image {
	max-width: 100%;
	height: auto;
}
:where(.sf-cat-aside) {
	align-self: flex-start;
}
:where(.sf-aside) {
	position: sticky;
	top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Grid de matérias: 3 → 2 → 1 conforme a largura. */
@media (max-width: 1100px) {
	:where(.sf-cat-grid.is-layout-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	:where(.sf-cat-grid.is-layout-grid) {
		grid-template-columns: 1fr;
	}
}

/* Card do grid: imagem + título + "Ler matéria" (sem categoria/data/resumo). */
:where(.sf-cat-grid .wp-block-post-title) {
	margin-top: 0.7rem;
	line-height: 1.15;
}
:where(.sf-cat-grid .wp-block-read-more) {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700; /* Destaque/CTA: Lexend bold */
	text-decoration: none;
}
:where(.sf-cat-grid .wp-block-read-more):hover {
	text-decoration: underline;
}

/* ------------------------------------------------ Post em destaque ------- */
:where(.sf-lead) {
	display: block;
	max-width: 100%;
	text-decoration: none;
	color: inherit;
}
:where(.sf-lead__media) {
	width: 100%;
	max-width: 100%;
	height: clamp(200px, 30vw, 360px); /* destaque mais contido, sem dominar */
	overflow: hidden;
	border-radius: var(--bn-radius-md);
	background-color: var(--wp--preset--color--muted);
}
:where(.sf-lead__img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
:where(.sf-lead:hover .sf-lead__img) {
	transform: scale(1.03);
}
:where(.sf-lead__body) {
	padding-top: 1rem;
}
:where(.sf-lead__eyebrow) {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-xs);
	font-weight: 300; /* Categoria: Lexend light, caixa alta */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}
:where(.sf-lead__title) {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}
:where(.sf-lead:hover .sf-lead__title) {
	color: var(--wp--preset--color--gold);
}
:where(.sf-lead__excerpt) {
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--bn-fs-base);
	line-height: 1.6;
}
:where(.sf-lead__more) {
	display: inline-block;
	margin-top: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Faixa de anúncio entre o destaque e o grid. */
:where(.sf-cat-adbanner) {
	margin-block: 0.5rem;
}
:where(.sf-cat-adbanner:empty) {
	display: none;
}

/* ----------------------------------------------- Sidebar: newsletter ----- */
:where(.sf-aside__news) {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--foreground);
	border-radius: var(--bn-radius-xs);
	padding: 2.25rem 1.5rem;
	text-align: center;
}
:where(.sf-aside__news-title) {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--bn-fs-xl);
	line-height: 1.25;
	color: var(--wp--preset--color--foreground);
}
:where(.sf-aside__news-btn) {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.85rem 2.5rem;
	border-radius: var(--bn-radius-xs);
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	font-weight: 700;
	font-size: var(--bn-fs-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 200ms ease;
}
:where(.sf-aside__news-btn):hover {
	filter: brightness(1.5);
}

/* ----------------------------------------- Sidebar: banner WhatsApp ------ */
:where(.sf-aside__zap) {
	display: block;
	overflow: hidden;
	border-radius: var(--bn-radius-xs);
	line-height: 0;
	transition: filter 200ms ease;
}
:where(.sf-aside__zap):hover {
	filter: brightness(0.97);
}
:where(.sf-aside__zap) img {
	display: block;
	width: 100%;
	height: auto;
}

/* Anúncio da sidebar — esconde a moldura se o SF Ads não devolver nada. */
:where(.sf-aside__ad):empty {
	display: none;
}
/* Banner fixo do sidebar (ex.: 300x600 da Vale) — sem moldura. Bloco simples
   (não flex): centraliza via margin-inline:auto do próprio .bn-html5, evitando
   o bug de width:0 ao resolver % dentro de flex aninhado (.sf-aside é sticky). */
:where(.sf-aside__fixedad) {
	width: 100%;
}

/* ============================================ Destaques (home) =========== */
/* Mosaico do Figma: linha 1 (card grande + estreito), linha 2 (médio + largo).
   Componente fixo → especificidade normal (sem :where) para vencer o heading. */
.bn-dest {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bn-dest__row {
	display: flex;
	gap: 16px;
}
.bn-dest__row1 { height: clamp(240px, 30vw, 300px); }
.bn-dest__row2 { height: clamp(150px, 19vw, 184px); }
.bn-dest__row1 .bn-dest__card:nth-child(1) { flex: 1.95 1 0; }
.bn-dest__row1 .bn-dest__card:nth-child(2) { flex: 1 1 0; }
.bn-dest__row2 .bn-dest__card:nth-child(1) { flex: 1 1 0; }
.bn-dest__row2 .bn-dest__card:nth-child(2) { flex: 1.25 1 0; }

.bn-dest__card {
	position: relative;
	display: block;
	height: 100%;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--bn-radius-xs);
	background-color: var(--wp--preset--color--muted);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: var(--wp--preset--color--card);
}
.bn-dest__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(2, 2, 2, 0.2) 13%, rgba(0, 0, 0, 0.8) 80%);
}
.bn-dest__cat {
	position: absolute;
	top: 16px;
	left: 20px;
	z-index: 2;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	font-size: var(--bn-card-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--card);
}
.bn-dest__body {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.bn-dest__bar {
	display: flex;
}
.bn-dest__bar::before { content: ""; width: 59px; height: 3px; background: var(--wp--preset--color--gold); }
.bn-dest__bar::after  { content: ""; width: 17px; height: 3px; background: var(--wp--preset--color--primary); }
.bn-dest .bn-dest__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--bn-card-title);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--card);
}
.bn-dest .bn-dest__card--lg .bn-dest__title {
	font-size: var(--bn-card-title-lead);
}
.bn-dest__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--bn-card-cta);
	color: var(--wp--preset--color--card);
}
.bn-dest__arrow {
	color: var(--wp--preset--color--gold);
	transition: transform 200ms ease;
}
.bn-dest__card:hover .bn-dest__arrow {
	transform: translateX(4px);
}

/* Mobile (Figma "Planta da Casa" 66:295): mosaico empilhado —
   1) card grande full-width · 2) par 50/50 lado a lado · 3) faixa full-width.
   display:contents dissolve as 2 linhas do desktop numa única grade flex-wrap;
   as alturas vêm das proporções do Figma (aspect-ratio, então escalam no celular). */
@media (max-width: 768px) {
	.bn-dest {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 12px;
	}
	.bn-dest__row {
		display: contents;
	}
	.bn-dest__card {
		height: auto; /* libera o height:100% do desktop p/ o aspect-ratio valer */
		/* Categoria e corpo saem do position:absolute (desktop) e entram no
		   fluxo normal, em coluna — assim o card consegue CRESCER quando o
		   título tem várias linhas, em vez de body (ancorado embaixo) invadir
		   cat (ancorada em cima). aspect-ratio continua valendo como altura
		   preferencial/mínima; o conteúdo em fluxo normal só a supera quando
		   precisa de mais espaço. */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 20px 18px;
		/* Sem isso, o padding soma por FORA da largura (content-box, padrão do
		   navegador) — nos cards sozinhos (flex:0 0 100%, sem encolher) isso
		   estourava 40px além da borda do container; nos cards do par
		   (flex:1 1 0) o flexbox disfarçava encolhendo pra caber. */
		box-sizing: border-box;
	}
	.bn-dest__card .bn-dest__cat {
		position: static;
	}
	.bn-dest__card .bn-dest__body {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		margin-top: auto; /* empurra pro rodapé quando sobra espaço (título curto) */
		padding-top: 20px; /* espaçamento mínimo garantido em relação à categoria */
	}
	/* 1º — card grande, largura cheia.
	   min-height (não aspect-ratio) no lugar certo: aspect-ratio define um
	   tamanho "definido" que o align-items:stretch da linha usa como teto —
	   títulos longos ficavam cortados (overflow:hidden) em vez de esticar o
	   card, principalmente no par 50/50 (2º e 3º) por dividirem a mesma linha
	   flex. min-height é genuinely "auto com piso": mantém a proporção visual
	   de antes (valores calibrados pra bater com o aspect-ratio anterior nas
	   larguras mobile comuns) mas deixa o conteúdo empurrar o card pra cima
	   do piso quando precisa. */
	.bn-dest__row1 .bn-dest__card:nth-child(1) {
		flex: 0 0 100%;
		min-height: clamp(200px, 68vw, 280px);
	}
	/* 2º e 3º — par do meio, metade cada, lado a lado (mais altos). */
	.bn-dest__row1 .bn-dest__card:nth-child(2),
	.bn-dest__row2 .bn-dest__card:nth-child(1) {
		flex: 1 1 0;
		min-height: clamp(220px, 78vw, 300px);
	}
	/* 4º — faixa full-width, mais baixa. */
	.bn-dest__row2 .bn-dest__card:nth-child(2) {
		flex: 0 0 100%;
		min-height: clamp(140px, 50vw, 200px);
	}
	/* Títulos: 20px (Figma) nos cards full-width; 16px no par estreito, para
	   caber sem cortar mesmo em telas de 360px (onde 20px estouraria). */
	.bn-dest__row1 .bn-dest__card:nth-child(1) .bn-dest__title,
	.bn-dest__row2 .bn-dest__card:nth-child(2) .bn-dest__title {
		font-size: 1.25rem;
	}
	.bn-dest__row1 .bn-dest__card:nth-child(2) .bn-dest__title,
	.bn-dest__row2 .bn-dest__card:nth-child(1) .bn-dest__title {
		font-size: 1rem;
	}
}

/* ====================================== Padronização de cards =========== */
/* Escala tipográfica única para TODO card de post do site (destaque + grids).
   Os tokens abaixo são a fonte única da verdade; ajuste aqui para mudar o site
   inteiro de uma vez. */
:root {
	--bn-card-title: var(--bn-fs-md);                   /* título do card */
	--bn-card-title-lead: clamp(1.375rem, 2vw, 1.625rem); /* card de destaque grande */
	--bn-card-eyebrow: var(--bn-fs-xs);                 /* categoria (caixa alta) */
	--bn-card-meta: var(--bn-fs-sm);                    /* data / resumo */
	--bn-card-cta: var(--bn-fs-sm);                     /* "Leia a matéria" */
}

/* Cards de query loop (.wp-block-post = cada item de um post-template).
   !important para vencer as classes utilitárias .has-*-font-size do core. */
.wp-block-post .wp-block-post-title,
.wp-block-post .wp-block-post-title a {
	font-size: var(--bn-card-title) !important;
	line-height: 1.3;
}
.wp-block-post .wp-block-post-terms {
	font-size: var(--bn-card-eyebrow) !important;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wp-block-post .wp-block-post-terms a {
	color: var(--wp--preset--color--muted-foreground) !important;
}
.wp-block-post .wp-block-post-date,
.wp-block-post .wp-block-post-excerpt {
	font-size: var(--bn-card-meta) !important;
}
.wp-block-post .wp-block-read-more {
	font-size: var(--bn-card-cta) !important;
	font-weight: 700;
}

/* ============================================ Imagens: raio 1rem ========= */
/* Padrão do site: toda imagem de conteúdo/card com 1rem (exceto o hero do post). */
.wp-block-post-featured-image img,
.wp-block-image img,
.wp-block-post-content img {
	border-radius: var(--bn-radius-md) !important;
}

/* Conteúdo do post: nenhuma mídia ultrapassa a coluna (corrige overflow no
   mobile — figures "size-large" trazem width fixo maior que a viewport). */
.wp-block-post-content figure.wp-block-image,
.wp-block-post-content figure,
.wp-block-post-content img,
.wp-block-post-content iframe,
.wp-block-post-content video,
.wp-block-post-content embed,
.wp-block-post-content table,
.wp-block-post-content pre {
	max-width: 100%;
}
.wp-block-post-content figure.wp-block-image {
	width: auto;
	margin-inline: 0;
}
.wp-block-post-content img {
	height: auto;
}
/* Palavras/URLs longas não empurram a coluna no mobile. */
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* ============================================ Cabeçalho (Figma) ========= */
/* Refeito em HTML cru (pattern superfinancas/header) — sem wp-block-group,
   logo NÃO sofre as margens de block-gap que desalinhavam os elementos.
   4 estados do Figma: pré-scroll (logo central), scroll/compacto (logo à
   esquerda), mobile (hambúrguer à direita) e drawer de categorias.
   O header é sticky com top negativo = altura do ticker (--bn-prehead,
   medido no main.js); o ticker rola para fora e a barra do logo gruda. */
:root {
	--bn-wrap-pad: clamp(16px, 4vw, 40px);
	--bn-mast-h: clamp(104px, 9.7vw, 144px); /* pré-scroll ("Header Antes do scroll") */
	--bn-mast-h-compact: 86px;               /* scroll / mobile ("Header Scroll"/"Mobile") */
}
.wp-site-blocks > header,
header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--bn-prehead, 28px));
	z-index: 100;
}
.bn-header {
	background-color: var(--wp--preset--color--background);
	position: relative; /* ancora o menu flutuante (drawer) logo abaixo do header */
}
.bn-prehead {
	position: relative;
	z-index: 1;
}

/* ---- Masthead ---- */
.bn-mast {
	position: relative;
	background-color: var(--wp--preset--color--background);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.bn-mast__row,
.bn-search__wrap,
.bn-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: var(--bn-wrap-pad);
}
/* Pré-scroll: 3 zonas (hambúrguer | logo centrado | ferramentas). */
.bn-mast__row {
	height: var(--bn-mast-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	transition: height 0.35s ease;
}

/* Hambúrguer (3 traços dourados) — Figma 30×17. */
.bn-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 30px;
	height: 17px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.bn-burger span {
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--gold);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}
/* Menu aberto: as 3 barras viram um X no mesmo lugar. */
.bn-header.is-drawer .bn-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.bn-header.is-drawer .bn-burger span:nth-child(2) {
	opacity: 0;
}
.bn-header.is-drawer .bn-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
.bn-burger--left {
	justify-self: start;
}
.bn-burger--right {
	display: none; /* só no mobile, dentro das ferramentas */
}

/* Zona esquerda do header (zona "1fr" do grid): hambúrguer + pill da IA, só
   no estado pré-scroll (Figma "Header Antes do scroll"). Some inteiro no
   mobile (ver media query) — no compacto a pill "muda de lado" (ver .bn-pill--top/--compact). */
.bn-mast__left {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.8vw, 28px);
}

/* Ícones de redes sociais — header (ferramentas, sempre nas duas posições do
   scroll) e drawer (só mobile). Some sozinho quando nenhuma rede está
   configurada (bn_render_social_icons retorna ''). */
.bn-mast__social {
	display: flex;
	align-items: center;
	gap: 12px;
}
.bn-mast__social a {
	display: inline-flex;
	color: var(--wp--preset--color--gold);
}
.bn-mast__social svg {
	display: block;
	width: 24px;
	height: 24px;
}
.bn-mast__social a:hover {
	filter: brightness(0.85);
}
/* No header (ferramentas) some no mobile — lá as redes ficam só no drawer
   (Figma "Header Mobile" não tem ícones na barra). */
@media (max-width: 900px) {
	.bn-mast__social--header {
		display: none;
	}
}

/* Pill da IA tem 2 posições conforme o estado (não é só reposicionar — muda
   de zona): pré-scroll fica junto do hambúrguer (--top), compacto/mobile
   fica nas ferramentas, antes das redes (--compact).
   Especificidade dupla (.bn-pill.bn-pill--compact) de propósito: precisa
   vencer a regra base .bn-pill (display:inline-flex), que vem depois no
   arquivo e empataria em especificidade com um single-class. */
.bn-pill.bn-pill--compact {
	display: none;
}
@media (max-width: 900px) {
	.bn-pill.bn-pill--compact {
		display: inline-flex;
	}
}

/* Marca / logo — centralizada na barra (zona "auto" do grid). */
.bn-brand {
	justify-self: center;
	display: flex;
	align-items: center;
	line-height: 0;
}
/* the_custom_logo() injeta margens próprias no link — zera para a marca
   medir só a imagem e centralizar certo. */
.bn-brand a,
.bn-brand .custom-logo-link {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}
.bn-brand img,
.bn-brand .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 50px; /* Figma: logo 306×50 no pré-scroll */
	border-radius: 0 !important;
	transition: max-height 0.35s ease;
}
.bn-brand--text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -0.01em;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}
.bn-brand--text .bn-brand__a { color: var(--wp--preset--color--primary); }
.bn-brand--text .bn-brand__b { color: var(--wp--preset--color--secondary); }
.bn-brand--text .bn-brand__c { color: var(--wp--preset--color--gold); }
/* No rodapé a marca flui normalmente (sem o posicionamento do cabeçalho). */
.bn-foot .bn-brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* Ferramentas à direita: pill IA · busca · (hambúrguer no mobile). */
.bn-mast__tools {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Pill da IA — Figma: 38px alto, bg var(--bn-surface-cream), borda rgba(0,0,0,.07), raio 16. */
.bn-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--bn-radius-md);
	background: var(--bn-surface-cream);
	color: var(--bn-ink-soft);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: var(--bn-fs-sm);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.1s ease;
}
.bn-pill__ico { flex: 0 0 auto; }
.bn-pill:hover { filter: brightness(0.97); }
.bn-pill:active { transform: scale(0.98); }
.bn-pill__ico {
	display: inline-flex;
	color: var(--wp--preset--color--gold);
}
.bn-pill__short { display: none; }

/* Busca (ícone dourado) — Figma 32×32. */
.bn-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
}

/* ---- Estado COMPACTO (scroll): hambúrguer + logo à esquerda, ferramentas à direita ---- */
/* Estado compacto SÓ no desktop (≥901px). No mobile o header já nasce compacto
   (altura/logo reduzidos pela media query ≤900px), então o scroll NÃO deve mexer
   no grid nem no espaçamento — senão a largura/spacing "pula" ao rolar. */
@media (min-width: 901px) {
	.bn-header.is-compact .bn-mast__row {
		height: var(--bn-mast-h-compact);
		grid-template-columns: auto auto 1fr;
		column-gap: clamp(24px, 4vw, 51px);
	}
	.bn-header.is-compact .bn-brand {
		justify-self: start;
	}
	.bn-header.is-compact .bn-brand img,
	.bn-header.is-compact .bn-brand .custom-logo {
		max-height: 31px; /* Figma: logo 190×31 no scroll */
	}
	/* Pill da IA troca de zona: some perto do hambúrguer, aparece nas
	   ferramentas (antes das redes sociais) — Figma "Header Scroll". */
	.bn-header.is-compact .bn-pill--top {
		display: none;
	}
	.bn-header.is-compact .bn-pill--compact {
		display: inline-flex;
	}
}

/* ---- Menu flutuante de categorias — Figma "Menu aberto" (1:37) ----
   Card flutuante abaixo do header (não mais drawer de altura cheia). Ancorado no
   .bn-header (position:relative) → acompanha o header sticky. O hambúrguer vira X
   no mesmo lugar (animação acima). Opção B: o card nasce sob o botão ativo —
   à esquerda no desktop, à direita no compacto/mobile (ver media query). */
.bn-drawer {
	position: absolute;
	box-sizing: border-box; /* 363px = largura total (Figma), padding incluído */
	top: calc(100% + 8px);
	left: max(var(--bn-wrap-pad), calc((100% - 80rem) / 2));
	z-index: 140;
	width: min(363px, calc(100vw - 2 * var(--bn-wrap-pad)));
	max-height: calc(100vh - var(--bn-mast-h) - 3rem);
	padding: 1.25rem 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	background: var(--bn-surface-cream);
	border: 1px solid rgba(0, 0, 0, 0.07); /* Figma */
	border-radius: 30px;                    /* Figma */
	box-shadow: 5px 2px 76.4px rgba(0, 0, 0, 0.13); /* Figma */
	overflow-y: auto;
	/* fechado: invisível e levemente recolhido sob o botão */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top left;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
/* Redes sociais no drawer — só no mobile (Figma "Menu aberto Mobile"). No
   desktop ("Menu aberto") elas já estão visíveis no header, atrás do card. */
.bn-drawer__social {
	display: none;
}
.bn-drawer .bn-cats {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bn-drawer .bn-cats a {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300; /* Lexend Light */
	font-size: var(--bn-fs-base);
	line-height: 1.4;
	text-transform: lowercase;
	text-decoration: underline;
	color: var(--wp--preset--color--foreground);
}
.bn-drawer .bn-cats a:hover {
	color: var(--wp--preset--color--gold);
}
.bn-header.is-drawer .bn-drawer {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---- Mobile (≤900): logo à esquerda · pill "Nossa IA" · busca · hambúrguer à direita ---- */
@media (max-width: 900px) {
	.bn-mast__row {
		height: var(--bn-mast-h-compact);
		grid-template-columns: auto 1fr;
	}
	.bn-brand {
		justify-self: start;
		min-width: 0; /* deixa a logo encolher para não estourar a viewport */
		max-width: clamp(90px, 34vw, 190px); /* mesmo teto da imagem — vale pro texto também */
	}
	/* A logo escala com a largura (o frame mobile do Figma é 506px; em celulares
	   reais ~360–414px ela precisa encolher) mantendo a proporção. 34vw (em vez
	   de um valor fixo) deixa mais folga pra pill/busca/hambúrguer em telas bem
	   estreitas (~320-360px), onde as ferramentas — mesmo compactas — ainda
	   precisam de espaço real. */
	.bn-brand img,
	.bn-brand .custom-logo {
		max-height: 31px;
		max-width: clamp(90px, 34vw, 190px);
	}
	/* Fallback de texto (sem logo configurado no Personalizar): tinha
	   font-size fixo (clamp com piso de 1.5rem) e white-space:nowrap sem
	   nenhum limite de largura — em telas estreitas o texto estourava a
	   coluna do grid e ficava cortado no meio da palavra. Agora encolhe de
	   verdade com a largura da tela, e ganha reticências como rede de
	   segurança caso ainda não caiba (ex.: nome de site muito longo). */
	.bn-brand--text {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: clamp(1rem, 5.5vw, 1.5rem);
	}
	.bn-burger--left {
		display: none;
	}
	.bn-burger--right {
		display: flex;
	}
	/* Sem redes sociais na barra do mobile (Figma "Header Mobile") — elas ficam
	   só dentro do menu lateral. Esconde a zona inteira (não só o hambúrguer)
	   pra não sobrar uma coluna vazia no grid de 2 colunas do mobile. */
	.bn-mast__left {
		display: none;
	}
	/* No drawer mobile as redes aparecem (escondidas no desktop), antes da lista. */
	.bn-drawer__social {
		display: flex;
		order: -1;
	}
	/* Opção B: no compacto/mobile o hambúrguer fica à direita → o card nasce à direita. */
	.bn-drawer {
		left: auto;
		right: max(var(--bn-wrap-pad), calc((100% - 80rem) / 2));
		transform-origin: top right;
	}
	.bn-pill__full { display: none; }
	.bn-pill__short { display: inline; }
	/* Ferramentas (pill + busca + hambúrguer) tinham tamanho FIXO no mobile —
	   em telas bem estreitas (~320-360px) isso não deixava espaço suficiente
	   pra logo (que encolhe por vw) e as duas zonas ficavam sobrepostas.
	   Agora escala com clamp()/vw: no limite inferior (telas pequenas) fica
	   compacto o bastante pra caber; no limite superior (perto de 900px)
	   volta ao tamanho normal do Figma mobile. */
	.bn-pill {
		height: clamp(32px, 9vw, 38px);
		padding-inline: clamp(8px, 3vw, 12px);
		gap: clamp(5px, 1.8vw, 8px);
		font-size: clamp(0.75rem, 3.2vw, var(--bn-fs-sm));
	}
	.bn-pill__ico svg {
		width: clamp(15px, 4vw, 18px);
		height: clamp(15px, 4vw, 18px);
	}
	.bn-search-btn {
		width: clamp(26px, 7vw, 32px);
		height: clamp(26px, 7vw, 32px);
	}
	.bn-search-btn svg {
		width: clamp(18px, 5.5vw, 22px);
		height: clamp(18px, 5.5vw, 22px);
	}
	.bn-burger {
		width: clamp(24px, 7vw, 30px);
	}
	.bn-burger span {
		width: clamp(24px, 7vw, 30px);
	}
	.bn-mast__tools {
		gap: clamp(6px, 2.2vw, 10px);
	}
}

/* ---- Busca (overlay sob a barra) ---- */
.bn-search {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 120;
	background: var(--wp--preset--color--background);
	box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.4);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 0.9rem;
}
.bn-search[hidden] {
	display: none;
}
.bn-search__form {
	display: flex;
	gap: 8px;
}
.bn-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--bn-radius-pill);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	font-size: var(--bn-fs-base);
}
.bn-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
}
.bn-search__submit {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: var(--bn-radius-full);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.bn-brand,
	.bn-brand img,
	.bn-mast__row,
	.bn-drawer,
	.bn-drawer-backdrop {
		transition: none;
	}
}

/* ============================================ Rodapé ===================== */
.bn-foot .bn-foot__h {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--bn-fs-sm);
	margin: 0 0 1rem;
}
.bn-foot .bn-cats {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bn-foot .bn-cats a {
	color: var(--wp--preset--color--card);
	font-size: var(--bn-fs-sm);
	text-decoration: none;
}
.bn-foot .bn-cats a:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}
/* Logo do site no rodapé: a marca é escura e sumiria no fundo escuro —
   renderiza em branco (monocromático) para ficar legível. */
.bn-foot .bn-brand img,
.bn-foot .bn-brand .custom-logo {
	max-height: 44px;
	filter: brightness(0) invert(1);
}
.bn-foot .bn-brand--text {
	color: var(--wp--preset--color--card);
}
/* Marca do rodapé em texto — legível sobre o dourado (o logo em imagem clara
   sumia no fundo). Cores escuras de alto contraste. */
.bn-foot__brand {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
}
.bn-foot__brand-a { color: var(--wp--preset--color--foreground); }
.bn-foot__brand-b { color: var(--wp--preset--color--primary); }
/* Colunas do rodapé: distribuição equilibrada que preenche a largura
   (antes: marca 40% + dois blocos espremidos, com vazio à direita). */
.bn-foot__cols {
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}
.bn-foot__cols > .wp-block-column:first-child {
	flex: 1.4 1 0 !important;
}
.bn-foot__cols > .bn-foot__col {
	flex: 1 1 0 !important;
}
.bn-foot__nota {
	margin-top: 2.5rem;
	max-width: 80rem;
	font-size: var(--bn-fs-xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}
.bn-foot__nota p {
	margin: 0 0 0.6rem;
}
.bn-foot__nota a {
	color: inherit;
	text-decoration: underline;
}

/* ============================================ Post: hero full-bleed ===== */
.bn-post-hero {
	margin: 0 !important;
}
.bn-post-hero img {
	display: block;
	width: 100%;
	height: 415px;
	object-fit: cover;
	filter: grayscale(1);
	opacity: 0.4;
	border-radius: 0 !important;
	background-color: var(--wp--preset--color--muted);
}
@media (max-width: 600px) {
	.bn-post-hero img {
		height: 260px;
	}
}

/* ============================================ Bio do autor ============== */
.bn-authorbio {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.75rem;
	border-top: 2px solid var(--wp--preset--color--gold);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.bn-authorbio__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.bn-authorbio__av img {
	width: 64px;
	height: 64px;
	border-radius: var(--bn-radius-full) !important;
	object-fit: cover;
	display: block;
}
.bn-authorbio__by {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-xs);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted-foreground);
}
.bn-authorbio__name {
	display: inline-block;
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--bn-fs-md);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.bn-authorbio__desc {
	margin: 0.4rem 0 0;
	font-size: var(--bn-fs-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--muted-foreground);
}

/* ============================================ Post: paginação H2 ======== */
/* Botão "Continuar lendo" — chamada principal para a próxima página. */
.bn-postpages__continue {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
}
.bn-postpages__continue a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: filter 0.2s ease;
}
.bn-postpages__continue a:hover {
	filter: brightness(1.06);
}
.bn-postpages__arrow {
	transition: transform 0.2s ease;
}
.bn-postpages__continue a:hover .bn-postpages__arrow {
	transform: translateX(3px);
}
.bn-postpages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
}
.bn-postpages__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted-foreground);
	margin-right: 0.35rem;
}
.bn-postpages .bn-pg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--bn-radius-xs);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-sm);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}
.bn-postpages a {
	text-decoration: none;
}
.bn-postpages a:hover .bn-pg {
	border-color: var(--wp--preset--color--foreground);
}
.bn-postpages > .bn-pg {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}

/* Rodapé empilha cedo no mobile (colunas do core já fazem isso). */
@media (max-width: 600px) {
	.bn-foot__nota {
		margin-top: 1.75rem;
	}
}

/* ====================================== Home: seções/blocos ============== */
.bn-edesp,
.bn-block {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bn-block__head,
.bn-edesp__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	padding-top: 0.9rem;
	border-top: 2px solid var(--wp--preset--color--gold);
}
.bn-sec-title {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--foreground);
}
.bn-sec-title a {
	color: inherit;
	text-decoration: none;
}
.bn-sec-title em {
	font-style: italic;
}
.bn-block__all {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--bn-fs-sm);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	white-space: nowrap;
}
.bn-block__all:hover {
	text-decoration: underline;
}

/* Bloco de categoria: 3 cards (imagem + título). */
.bn-block__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.bn-block__card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.bn-block__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--bn-radius-md);
	background-color: var(--wp--preset--color--muted);
}
.bn-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--bn-radius-md) !important;
	transition: transform 400ms ease;
}
.bn-block__card:hover .bn-block__media img {
	transform: scale(1.04);
}
.bn-block__title {
	margin: 0.7rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--bn-card-title);
	line-height: 1.3;
	color: var(--wp--preset--color--foreground);
}
.bn-block__card:hover .bn-block__title {
	color: var(--wp--preset--color--gold);
}
@media (max-width: 800px) {
	.bn-block__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 520px) {
	.bn-block__grid {
		grid-template-columns: 1fr;
	}
}

/* Carrossel Edições Especiais */
.bn-edesp__nav,
.sf-colunistas__nav {
	display: flex;
	gap: 0.5rem;
}
.bn-carobtn {
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--bn-radius-full);
	background: transparent;
	color: var(--wp--preset--color--foreground);
	font-size: var(--bn-fs-xl);
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}
.bn-carobtn:hover {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}
.bn-edesp__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}
.bn-edesp__track::-webkit-scrollbar {
	display: none;
}
/* Banner de imagem (subido no Personalizar). */
.bn-edesp__banner {
	flex: 0 0 auto;
	width: clamp(280px, 72vw, 820px);
	scroll-snap-align: start;
	display: block;
	border-radius: var(--bn-radius-md);
	overflow: hidden;
	background-color: var(--wp--preset--color--muted);
}
.bn-edesp__banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bn-radius-md);
}
.bn-edesp__card {
	position: relative;
	flex: 0 0 auto;
	width: clamp(260px, 32vw, 360px);
	aspect-ratio: 4 / 3;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--bn-radius-md);
	background-color: var(--wp--preset--color--muted);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: var(--wp--preset--color--card);
}
.bn-edesp__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.82) 95%);
}
.bn-edesp__cat {
	position: absolute;
	top: 14px;
	left: 16px;
	z-index: 2;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	font-size: var(--bn-card-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--card);
}
.bn-edesp__title {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	z-index: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--bn-fs-md);
	line-height: 1.25;
	color: var(--wp--preset--color--card);
}

/* ====================================== Footer: fundo escuro ============= */
/* Fundo cinza 90% (escuro) + fontes brancas. Cai no cinza por padrão; o
   controle "Footer" do Personalizar ainda pode sobrescrever a cor. */
.bn-foot.has-gold-background-color,
.bn-foot {
	background-color: var(--bn-footer-bg, var(--bn-dark)) !important;
	color: var(--wp--preset--color--card) !important;
}

/* ====================================== Aviso de cookies ================= */
.bn-cookie {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: calc(100% - 2rem);
	max-width: 680px;
	padding: 0.85rem 1.1rem;
	border-radius: var(--bn-radius-xs);
	background: var(--bn-dark); /* preto neutro — verde só em lugares pontuais (copa) */
	color: var(--wp--preset--color--card);
	box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-sm);
	line-height: 1.5;
}
.bn-cookie[hidden] {
	display: none;
}
.bn-cookie__txt {
	margin: 0;
}
.bn-cookie__txt a {
	color: var(--wp--preset--color--gold);
}
.bn-cookie__ok {
	flex: 0 0 auto;
	padding: 0.55rem 1.3rem;
	border: 0;
	border-radius: var(--bn-radius-pill);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--foreground);
	font-family: inherit;
	font-weight: 700;
	font-size: var(--bn-fs-sm);
	cursor: pointer;
	transition: filter 0.2s ease;
}
.bn-cookie__ok:hover {
	filter: brightness(1.06);
}
@media (max-width: 520px) {
	.bn-cookie {
		flex-direction: column;
		align-items: flex-start;
		bottom: 0.5rem;
	}
}

/* ====================================== Banners [sf_banner] ============== */
.bn-ad {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--bn-radius-md);
	padding: 0.45rem 0.75rem 0.7rem;
}
.bn-ad__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}
.bn-ad__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}
.bn-ad__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 24px;
	padding: 0 9px;
	border: 0;
	border-radius: var(--bn-radius-pill);
	background: rgba(0, 0, 0, 0.06);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-sm);
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}
.bn-ad__close:hover {
	background: rgba(0, 0, 0, 0.12);
}
.bn-ad__close-ico {
	flex: 0 0 auto;
	display: block;
}
.bn-ad__close-txt {
	white-space: nowrap;
}
.bn-ad__slot {
	min-height: var(--bn-ad-h, 60px);
}
/* Conteúdo estático (banner_html5/imagem) não estoura a moldura. */
.bn-ad__slot iframe,
.bn-ad__slot img {
	display: block;
	max-width: 100%;
	margin-inline: auto;
	border: 0;
}
.bn-ad.is-closed,
.bn-ad.is-empty,
.sf-ads-in-content.is-empty {
	display: none !important;
}
/* Criativo HTML5 (src) — iframe de tamanho fixo escalado ao container (--s via JS). */
.bn-html5 {
	position: relative;
	width: 100%;
	margin-inline: auto;
	overflow: hidden;
}
.bn-html5 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--w);
	height: var(--h);
	max-width: none;
	border: 0;
	transform-origin: top left;
	transform: scale(var(--s, 1));
}

/* Inline — no fluxo do conteúdo. */
.bn-ad--inline {
	max-width: 970px;
	margin: clamp(1.5rem, 3vw, 2.5rem) auto;
}

/* Âncoras fixas — layout do Figma (6:77 horizontal / 6:90 lateral):
   card branco arredondado (18px) com sombra suave segurando o criativo, e uma
   aba "✕ Fechar" saindo do canto superior-esquerdo (sem rótulo "Publicidade"). */
.bn-ad--anchor {
	position: fixed;
	z-index: 150;
	background: var(--wp--preset--color--card);
	border: 0;
	/* canto superior-esquerdo reto (0) onde encaixa a aba; os outros 3 com 18px. */
	border-radius: 0 18px 18px 18px;
	box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.30);
	padding: 16px;
}
.bn-ad--anchor .bn-ad__slot {
	min-height: 0;
}
/* Sem "Publicidade" no anchor — só a aba Fechar. */
.bn-ad--anchor .bn-ad__label {
	display: none;
}
/* A barra vira o contexto de posicionamento da aba, acima do card. */
.bn-ad--anchor .bn-ad__bar {
	position: absolute;
	left: 0;
	bottom: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}
/* Aba: branca, cantos de cima 18px, sobrepõe ~8px no topo do card (sela a emenda). */
.bn-ad--anchor .bn-ad__close {
	height: 32px;
	padding: 0 16px;
	transform: translateY(8px);
	border-radius: 18px 18px 0 0;
	background: var(--wp--preset--color--card);
	box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.16);
	color: #202020;
}
.bn-ad--anchor .bn-ad__close:hover {
	background: var(--wp--preset--color--card);
	color: #000;
}
.bn-ad--bottom {
	left: 50%;
	transform: translateX(-50%);
	bottom: 12px;
	width: calc(100% - 24px);
	max-width: 620px; /* criativo "home" (1920×583) ≈ 180px; o max-height:180 trava */
	transition: bottom 0.3s ease;
}
/* Garante o popup inferior compacto (~180px de banner). */
.bn-ad--bottom .bn-ad__slot {
	max-height: 180px;
	overflow: hidden;
}
/* Com o aviso de cookies visível, a âncora inferior sobe para não sobrepor. */
.bn-has-cookie .bn-ad--bottom {
	bottom: 96px;
}
.bn-ad--top {
	left: 50%;
	transform: translateX(-50%);
	top: 12px;
	width: calc(100% - 24px);
	max-width: 760px;
}
.bn-ad--left {
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 180px;
}
.bn-ad--right {
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 180px;
}
/* Rails laterais só onde há margem em branco (telas largas). */
@media (max-width: 1480px) {
	.bn-ad--left,
	.bn-ad--right {
		display: none !important;
	}
}
@media (max-width: 600px) {
	.bn-ad--bottom,
	.bn-ad--top {
		width: calc(100% - 16px);
		bottom: 8px;
	}
}

/* Banner "puro" — sem moldura, sem rótulo "Publicidade", sem botão fechar.
   Usado nos banners fixos da Vale (header, sidebar, canto). */
.bn-ad--bare {
	position: relative; /* âncora para o botão fechar avulso (.bn-ad__xclose) */
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
/* Só zera a reserva quando o próprio criativo já reserva espaço via aspect-ratio
   (.bn-html5, usado pelos estáticos com src — ex.: Vale). Banners "bare" que
   carregam por AJAX (ex.: slot do SF Ads, sem src) precisam manter a reserva
   de --bn-ad-h (default 60px, ou a passada via atributo height) — senão ficam
   com altura 0 antes do load e o IntersectionObserver nunca os considera
   visíveis (área 0 = nunca "intersecting"), travando o lazy-load pra sempre. */
.bn-ad--bare .bn-ad__slot:has(.bn-html5) {
	min-height: 0;
}
/* Bare SEM .bn-html5 = carrega por AJAX/SDK externo (slot do SF Ads, ex.:
   Desenrola) — reserva só uma tira mínima (o bastante pro IntersectionObserver
   considerar "visível" e disparar o load), em vez da altura cheia do criativo.
   Evita um "buraco" grande na página enquanto aguarda a resposta ou quando o
   ad server falha (ver watchForVisibleAd em main.js, que detecta a falha e
   esconde a caixa rapidamente). */
.bn-ad--bare .bn-ad__slot:not(:has(.bn-html5)) {
	min-height: 8px;
}

/* Botão fechar "avulso" — flutua sobre o criativo (canto superior direito),
   sem moldura nem rótulo. Usado no popup de canto da Vela e em bares com
   close="yes". Fica "em cima" do banner. */
.bn-ad__xclose {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.85);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transition: background 0.15s ease;
}
.bn-ad__xclose:hover {
	background: #000;
}
.bn-ad__xclose svg {
	display: block;
}
@media (max-width: 600px) {
	.bn-ad__xclose {
		top: -8px;
		right: -8px;
		width: 22px;
		height: 22px;
	}
}

/* Canto inferior esquerdo — fixo em todas as páginas, fora do limite de 3
   âncoras do Desenrola (não usa .bn-ad--anchor). Menor no mobile. */
.bn-ad--corner {
	position: fixed;
	z-index: 150;
	left: 14px;
	bottom: 12px;
	width: 300px;
}
.bn-has-cookie .bn-ad--corner {
	bottom: 96px;
}
@media (max-width: 600px) {
	.bn-ad--corner {
		left: 8px;
		bottom: 8px;
		width: 160px;
	}
	.bn-has-cookie .bn-ad--corner {
		bottom: 84px;
	}
}

/* ====================================== Banners fixos (Vale) ============= */
/* Margem em cima E embaixo — evita banners colados quando aparecem em
   sequência (ex.: header + antes-dos-destaques, ou dois no meio do feed). */
.bn-topbanner {
	max-width: 80rem;
	margin: clamp(1.5rem, 3vw, 2.5rem) auto;
	padding-inline: var(--bn-wrap-pad);
	text-align: center;
}
.bn-topbanner__label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}
/* Bloco simples (não flex): .bn-html5 se centraliza sozinho via margin-inline:auto.
   Flex aqui quebra width:100% do .bn-html5 (o iframe é position:absolute, sem
   tamanho intrínseco, então o item flex colapsa para 0 com justify-content:center). */
.bn-topbanner__in {
	width: 100%;
}
.bn-topbanner__in iframe,
.bn-topbanner__in img {
	max-width: 100%;
	border: 0;
}

/* Desenrola grande abaixo dos destaques (home): ocupa toda a largura do wrapper
   (80rem). O .bn-ad--inline normalmente limita a 970px — aqui liberamos. */
.bn-topbanner--desenrola .bn-ad--inline {
	max-width: 100%;
	margin: 0;
}

/* ====================================== Edição Especial ================== */
/* Hero full-width: imagem destacada da página ao fundo + título sobreposto. */
.bn-ee-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(240px, 32vw, 420px);
	background-color: var(--wp--preset--color--primary);
	background-size: cover;
	background-position: center;
	text-align: center;
}
.bn-ee-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.bn-ee-hero--nobg::before {
	background: linear-gradient(180deg, color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent), var(--wp--preset--color--primary));
}
.bn-ee-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 80rem;
	padding: clamp(2rem, 5vw, 4rem) var(--bn-wrap-pad);
}
.bn-ee-hero__eyebrow {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	font-size: var(--bn-fs-sm);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.bn-ee-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--card);
}

/* Lista de cards (estilo G1: imagem à esquerda, conteúdo à direita). */
.bn-ee-list {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.bn-ee-card {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 1.25rem;
	align-items: start;
	text-decoration: none;
	color: inherit;
}
.bn-ee-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--bn-radius-md);
	background-color: var(--wp--preset--color--muted);
}
.bn-ee-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--bn-radius-md) !important;
	transition: transform 400ms ease;
}
.bn-ee-card:hover .bn-ee-card__media img {
	transform: scale(1.04);
}
.bn-ee-card__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	font-size: var(--bn-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}
.bn-ee-card__title {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.25;
	color: var(--wp--preset--color--foreground);
}
.bn-ee-card:hover .bn-ee-card__title {
	color: var(--wp--preset--color--gold);
}
.bn-ee-card__excerpt {
	margin: 0.5rem 0 0;
	font-size: var(--bn-fs-sm);
	line-height: 1.55;
	color: var(--wp--preset--color--muted-foreground);
}
.bn-ee-card__more {
	display: inline-block;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--bn-fs-sm);
	color: var(--wp--preset--color--foreground);
}
.bn-ee-card:hover .bn-ee-card__more {
	text-decoration: underline;
}

/* Anúncio entre as matérias (a cada 3). */
.bn-ee-ad {
	margin: 0.25rem 0;
}
.bn-ee-ad:empty {
	display: none;
}

/* Mensagem vazia / sem tag. */
.bn-ee-empty {
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--bn-fs-base);
}

/* Paginação. */
.bn-ee-pag {
	margin-top: 2.5rem;
}
.bn-ee-pag .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bn-ee-pag .page-numbers li {
	margin: 0;
}
.bn-ee-pag a.page-numbers,
.bn-ee-pag span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--bn-radius-xs);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--bn-fs-sm);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.bn-ee-pag a.page-numbers:hover {
	border-color: var(--wp--preset--color--foreground);
}
.bn-ee-pag .page-numbers.current {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}

/* Mobile: card empilha (imagem em cima). */
@media (max-width: 600px) {
	.bn-ee-card {
		grid-template-columns: 1fr;
	}
	.bn-ee-card__media {
		aspect-ratio: 16 / 9;
	}
}

/* ====================================== Página de autor ================== */
/* Cabeçalho centralizado: avatar + nome + bio. Abaixo: grid + sidebar (reusa
   .sf-cat-layout da página de categoria). Reúne posts do autor E coautor
   (Co-Authors Plus filtra a query do arquivo de autor). */
.bn-author-head {
	max-width: 48rem;
	margin: 0 auto;
	padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
	text-align: center;
	border-bottom: 2px solid var(--wp--preset--color--gold);
}
.bn-author-head__av {
	display: inline-block;
	line-height: 0;
}
.bn-author-head__av img {
	width: 120px;
	height: 120px;
	border-radius: var(--bn-radius-full) !important;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--gold);
	background-color: var(--wp--preset--color--muted);
}
.bn-author-head__eyebrow {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	font-size: var(--bn-fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}
.bn-author-head__name {
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--foreground);
}
.bn-author-head__bio {
	margin: 0.85rem auto 0;
	max-width: 42rem;
	font-size: var(--bn-fs-base);
	line-height: 1.65;
	color: var(--wp--preset--color--muted-foreground);
}