/*
 * Hotsite CBN 2026 — Nipro Renal
 *
 * A linguagem visual é a dos folders e catálogos impressos da Divisão Renal,
 * desdobrada para tela. Os quatro sinais que se repetem em todas as peças e
 * que este arquivo reproduz:
 *
 *   1. foto sangrando, régua vermelha, faixa branca com o nome do produto;
 *   2. título em navy com um filete vermelho curto embaixo;
 *   3. bloco navy sólido, texto branco, filete vermelho dentro;
 *   4. tabela com cabeçalho navy e caixa-alta espaçada.
 *
 * Cores amostradas dos próprios PDFs: navy #174593, vermelho #E73B32.
 * Tipografia DIN Pro, que é a dos impressos (ver class-nipro-cbn-fontes.php).
 *
 * Tudo sob .ncbn e com prefixo próprio: o hotsite pode acabar dentro de uma
 * página do tema, e classe genérica herdada é o que quebra layout sem aviso.
 */

.ncbn {
	--ncbn-primaria: #174593;
	--ncbn-escura: #123670;
	--ncbn-destaque: #E73B32;

	--ncbn-navy-fundo: #0E2A57;
	--ncbn-tinta: #16233F;
	--ncbn-tinta-2: #4A5568;
	--ncbn-tinta-3: #77839A;
	--ncbn-fundo: #FFFFFF;
	--ncbn-cinza: #F2F5FA;
	--ncbn-borda: #DDE4EF;

	/* Largura do bloco. 100% ocupa a tela; o valor vem das Configurações. */
	--ncbn-max: 100%;
	/* Medida de leitura: um parágrafo de 120 caracteres não se lê, então o
	   texto corrido tem limite próprio mesmo com o layout em largura total. */
	--ncbn-medida: 74ch;
	--ncbn-sombra: 0 2px 4px rgba(18, 54, 112, .06), 0 12px 32px rgba(18, 54, 112, .10);

	/* Cai em DIN Pro quando o cliente sobe os arquivos licenciados; sem
	   eles, num grotesco de x-alto parecido. */
	--ncbn-fonte: "DIN Pro", "DINPro", "DIN Next LT Pro", "D-DIN",
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	box-sizing: border-box;
	color: var(--ncbn-tinta);
	background: var(--ncbn-fundo);
	font-family: var(--ncbn-fonte);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ncbn *,
.ncbn *::before,
.ncbn *::after { box-sizing: inherit; }

.ncbn-body { margin: 0; background: #fff; }

/*
 * Escape do contêiner do tema.
 *
 * Quando o hotsite entra por shortcode numa página comum, o tema o embrulha
 * num contêiner centrado com largura máxima — e a "largura total" vira a
 * largura do conteúdo do tema. Isto tira o bloco de dentro dele.
 *
 * `--ncbn-vw` é escrito pelo JS com o clientWidth real; `100vw` é só o
 * fallback, e inclui a barra de rolagem — o que sozinho criaria alguns
 * pixels de rolagem horizontal na direita.
 */
.ncbn--embutido {
	width: var(--ncbn-vw, 100vw);
	max-width: var(--ncbn-vw, 100vw);
	margin-left: calc(50% - (var(--ncbn-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--ncbn-vw, 100vw) / 2));
}

.ncbn img { max-width: 100%; height: auto; display: block; }

.ncbn a { color: var(--ncbn-primaria); }

.ncbn-wrap {
	width: 100%;
	max-width: var(--ncbn-max);
	margin: 0 auto;
	padding-left: clamp(18px, 4vw, 64px);
	padding-right: clamp(18px, 4vw, 64px);
}

/* =================================================================== topo */

.ncbn-topo {
	background: var(--ncbn-primaria);
	color: #fff;
	position: sticky;
	/* Quando a tarja preta do WordPress está na tela, a barra gruda abaixo
	   dela e não atrás: o valor chega em --ncbn-topo-y (@see corpo.php). */
	top: var(--ncbn-topo-y, 0px);
	z-index: 30;
	/* O filete vermelho do impresso vira a base da barra. */
	border-bottom: 3px solid var(--ncbn-destaque);
}

.ncbn-topo__in {
	/* O respiro da barra vive numa variável porque o menu precisa cancelá-lo
	   para encostar na régua vermelha. Escrito duas vezes, um dia sairiam
	   dessincronizados e a aba ficaria flutuando. */
	--ncbn-topo-respiro: 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: var(--ncbn-topo-respiro);
	padding-bottom: var(--ncbn-topo-respiro);
}

/* Especificidade deliberada: `.ncbn a` (0,1,1) vence uma classe só, e a
   marca sairia navy sobre navy. Vale para todo link em fundo escuro. */
.ncbn-topo .ncbn-marca {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	text-decoration: none;
	color: #fff;
}

.ncbn-marca__img { max-height: 30px; width: auto; }

.ncbn-marca__txt {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
}

.ncbn-marca__sub {
	font-size: 13px;
	font-weight: 300;
	letter-spacing: .04em;
	color: #A9C8EE;
}

.ncbn-topo__dir { display: flex; align-items: center; }

/* ============================================================ menu do topo */

/*
 * Agrupado, e não linear: as seções são sete e os nomes são longos
 * ("Soluções para hemodiálise"). Enfileiradas não cabem em barra nenhuma,
 * e abreviar cada uma criaria um segundo nome para o mesmo produto.
 */
.ncbn-menu {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin-right: auto;
	margin-left: 14px;
	/* A barra é `align-items: center`, então sem isto o menu fica centrado e
	   o realce do item vira uma pílula solta no meio do azul. Esticado — e
	   com o respiro da barra cancelado, porque `stretch` só alcança a caixa
	   de conteúdo — ele lê como aba: preenche a barra de ponta a ponta e
	   encosta na régua vermelha. */
	align-self: stretch;
	margin-block: calc(var(--ncbn-topo-respiro) * -1);
}

/*
 * O item ocupa a altura da barra, e não só a do texto. Duas coisas dependem
 * disso: a marca de seção atual encosta na régua vermelha em vez de flutuar,
 * e a área de clique cobre a barra inteira.
 */
.ncbn-menu__item {
	display: flex;
	align-items: stretch;
}

/* O item de conversão só existe dentro do painel do celular. */

.ncbn-topo .ncbn-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #C8DCF2;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}

.ncbn-topo .ncbn-menu__link:hover,
.ncbn-topo .ncbn-menu__link:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* Aberto, o item vira a aba da gaveta: mesmo branco, encostado nela. */
.ncbn-topo .ncbn-menu__link[aria-expanded="true"] {
	background: #fff;
	color: var(--ncbn-primaria);
}

/* A seção em que se está: filete vermelho no pé do item, o mesmo sinal
   que o título de bloco usa no corpo da página. */
.ncbn-topo .ncbn-menu__link.is-atual {
	color: #fff;
	box-shadow: inset 0 -3px 0 var(--ncbn-destaque);
}

.ncbn-menu__seta {
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}

.ncbn-menu__link[aria-expanded="true"] .ncbn-menu__seta { transform: translateY(1px) rotate(-135deg); }

/*
 * A gaveta é de largura total e pendura na barra, não no rótulo — por isso
 * o item fica `static` e quem resolve o `absolute` é a `.ncbn-topo`, que já
 * é `sticky` (elemento posicionado). Como caixa solta ela começava num x
 * arbitrário, fora da grade da página, e trazia uma segunda régua vermelha
 * logo abaixo da régua do cabeçalho.
 */
.ncbn-menu__item--tem-lista { position: static; }

.ncbn-menu__lista {
	display: none;
	position: absolute;
	/*
	 * `100%` sozinho resolve na caixa de **padding** do cabeçalho, que não
	 * inclui a borda — a gaveta nascia 3px acima e cobria a régua vermelha
	 * de ponta a ponta enquanto estivesse aberta. Os 3px devolvem a régua.
	 */
	top: calc(100% + 3px);
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: 4px solid var(--ncbn-destaque);
	box-shadow: 0 18px 40px rgba(18, 54, 112, .22);
	padding-block: 26px 28px;
}

.ncbn-menu__item--tem-lista.is-aberto .ncbn-menu__lista { display: block; }

/* Mesma grade dos cartões da home — sete itens em 4 + 3. */
.ncbn-menu__grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px 14px;
}

.ncbn-menu .ncbn-menu__secao {
	display: block;
	padding: 11px 13px;
	border-left: 3px solid transparent;
	text-decoration: none;
	color: var(--ncbn-primaria);
	transition: background .15s ease, border-color .15s ease;
}

.ncbn-menu .ncbn-menu__secao:hover,
.ncbn-menu .ncbn-menu__secao:focus-visible {
	background: #EEF3FA;
	border-left-color: var(--ncbn-destaque);
}

.ncbn-menu .ncbn-menu__secao.is-atual {
	background: #EEF3FA;
	border-left-color: var(--ncbn-destaque);
}

.ncbn-menu__secao-chapeu {
	display: block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6A7E9B;
}

/* A seta diz que o item sai do hotsite, antes do clique. */
.ncbn-menu__fora {
	font-size: .82em;
	opacity: .7;
	margin-left: 2px;
}

/*
 * No cartão de seção a seta vive dentro de um span de bloco, e os 2px são
 * o espaço todo. No item do menu o pai é flex com `gap: 8px`, então os dois
 * se somam e a seta descola do rótulo. É a regra de sempre: a classe carrega
 * uma decisão de espaçamento que só vale com os vizinhos dela.
 */
.ncbn-topo .ncbn-menu__link--fora {
	gap: 4px;
}

.ncbn-topo .ncbn-menu__link--fora .ncbn-menu__fora {
	margin-left: 0;
}

.ncbn-menu__secao-nome {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 3px;
}

/* As três barras, só no celular. */
.ncbn-menu__botao {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	background: none;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
}

.ncbn-menu__barras,
.ncbn-menu__barras::before,
.ncbn-menu__barras::after {
	display: block;
	width: 17px;
	height: 2px;
	background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
}

.ncbn-menu__barras { position: relative; }
.ncbn-menu__barras::before,
.ncbn-menu__barras::after { content: ""; position: absolute; left: 0; }
.ncbn-menu__barras::before { top: -6px; }
.ncbn-menu__barras::after { top: 6px; }

.ncbn-menu__botao[aria-expanded="true"] .ncbn-menu__barras { background: transparent; }
.ncbn-menu__botao[aria-expanded="true"] .ncbn-menu__barras::before { transform: translateY(6px) rotate(45deg); }
.ncbn-menu__botao[aria-expanded="true"] .ncbn-menu__barras::after { transform: translateY(-6px) rotate(-45deg); }

/* Texto que só o leitor de tela lê. */
.ncbn-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Três colunas antes de a quarta ficar estreita demais para o nome. */
@media (max-width: 1180px) {
	.ncbn-menu__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}



.ncbn-topo__cta {
	display: inline-block;
	padding: 9px 18px;
	background: var(--ncbn-destaque);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease;
}

.ncbn-topo .ncbn-topo__cta { color: #fff; }
.ncbn-topo__cta:hover { background: #C42B23; }

.ncbn-topo__evento {
	text-align: right;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.4;
	color: #C6D8F0;
}

.ncbn-topo__evento strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	color: #fff;
}

/* ============================================================ tipografia */

.ncbn-h1 {
	margin: 0 0 16px;
	font-size: clamp(30px, 4.6vw, 50px);
	line-height: 1.08;
	letter-spacing: -.015em;
	font-weight: 700;
	color: var(--ncbn-primaria);
}

/* O título de seção com o filete vermelho curto — o sinal mais repetido
   dos impressos, presente em toda página interna. */
.ncbn-h2 {
	position: relative;
	margin: 0 0 26px;
	padding-bottom: 12px;
	font-size: clamp(21px, 2.5vw, 27px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--ncbn-primaria);
}

.ncbn-h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 3px;
	background: var(--ncbn-destaque);
}

.ncbn-h3 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ncbn-primaria);
}

.ncbn-lead {
	max-width: var(--ncbn-medida);
	margin: 0 0 16px;
	font-size: clamp(17px, 1.9vw, 21px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--ncbn-tinta-2);
}

.ncbn-chapeu {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ncbn-destaque);
}

.ncbn-nota {
	font-size: 14px;
	font-weight: 300;
	color: var(--ncbn-tinta-3);
}

.ncbn-tag {
	display: inline-block;
	/* align-self impede que o stretch do cartão flex estique a pílula de
	   ponta a ponta; em fluxo normal não muda nada. */
	align-self: flex-start;
	padding: 5px 12px;
	background: var(--ncbn-destaque);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.3;
}

.ncbn-secao-bloco { padding-top: 56px; }

.ncbn-faixa-cinza { background: var(--ncbn-cinza); margin-top: 56px; }
.ncbn-faixa-cinza .ncbn-secao-bloco { padding-top: 48px; padding-bottom: 48px; }

/* ================================================= capa: foto + régua */

/*
 * A estrutura da capa dos catálogos: foto sangrando, régua vermelha de
 * ponta a ponta, faixa branca com o nome do produto. O scrim navy sobre a
 * foto existe porque na tela o texto vive em cima dela, e não embaixo.
 */
.ncbn-capa { position: relative; }

/*
 * Altura e enquadramento vêm por variável, escrita no elemento pelo PHP:
 * a global das Configurações, sobrescrita pela da página. Variável e não
 * `style="min-height"` porque o valor do celular vive numa media query, e
 * regra inline não atravessa media query nenhuma.
 */
.ncbn-capa__foto {
	position: relative;
	min-height: var(--ncbn-capa-h, 340px);
	background-color: var(--ncbn-primaria);
	background-size: cover;
	background-position: center var(--ncbn-capa-foco, 38%);
	border-bottom: 5px solid var(--ncbn-destaque);
	display: flex;
	align-items: flex-end;
}

.ncbn-capa__foto::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(18, 54, 112, .94) 0%,
		rgba(18, 54, 112, .80) 38%,
		rgba(18, 54, 112, .24) 68%,
		rgba(18, 54, 112, .10) 100%
	);
}

.ncbn-capa__in {
	position: relative;
	width: 100%;
	padding-top: 54px;
	padding-bottom: 44px;
}

.ncbn-capa__texto { max-width: 40rem; }

.ncbn-capa .ncbn-h1,
.ncbn-capa .ncbn-lead { color: #fff; }

.ncbn-capa .ncbn-chapeu { color: #FF9C95; }

.ncbn-capa .ncbn-lead { font-weight: 300; color: #E2ECF8; }

.ncbn-capa__estande {
	display: inline-block;
	margin-top: 18px;
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, .45);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

/*
 * A faixa branca sob a régua, como na capa impressa.
 *
 * `padding-block` e não o shorthand: estes blocos também são `.ncbn-wrap`, e
 * `padding: 26px 0 0` zeraria a lateral que o wrap dá — em largura total o
 * texto encostaria na borda da tela.
 */
.ncbn-capa__faixa { padding-block: 26px 0; }

.ncbn-capa__resumo {
	max-width: var(--ncbn-medida);
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	color: var(--ncbn-tinta-2);
}

/* ================================================================ cards */

.ncbn-cards { display: grid; gap: 26px; }

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

/*
 * O cartão de produto é a capa do folder em miniatura: foto, régua
 * vermelha, faixa branca com o nome. É o que faz a home parecer a
 * prateleira de catálogos que ela é.
 */
.ncbn .ncbn-card {
	--card-cor: var(--ncbn-primaria);
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ncbn-borda);
	text-decoration: none;
	color: inherit;
	transition: box-shadow .18s ease, transform .18s ease;
}

.ncbn-card:hover,
.ncbn-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--ncbn-sombra);
}

.ncbn-card__foto {
	position: relative;
	aspect-ratio: 16 / 10;
	max-width: 100%;
	background-color: var(--card-cor);
	background-size: cover;
	background-position: center 40%;
	border-bottom: 4px solid var(--ncbn-destaque);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 14px;
}

.ncbn-card__corpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 22px 24px 24px;
}

.ncbn-card__chapeu {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ncbn-tinta-3);
}

.ncbn-card__titulo {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--card-cor);
	line-height: 1.15;
}

.ncbn-card__lead {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--ncbn-tinta);
}

.ncbn-card__resumo {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	color: var(--ncbn-tinta-2);
}

.ncbn-card__cta {
	margin-top: auto;
	padding-top: 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ncbn-destaque);
}

.ncbn-card__cta::after { content: " →"; }

/* Cartão de categoria: sem foto, com a barra navy no topo. */
.ncbn .ncbn-card--liso { border-top: 4px solid var(--card-cor); }
.ncbn-card--liso .ncbn-card__titulo { font-size: 21px; }

.ncbn .ncbn-card--compacto { border-top: 3px solid var(--card-cor); }
.ncbn-card--compacto .ncbn-card__corpo { padding: 16px 18px 18px; gap: 4px; }
.ncbn-card--compacto .ncbn-card__titulo { font-size: 17px; }

/* ====================================================== bloco navy */

/*
 * O retângulo navy com filete vermelho dentro — o mesmo do "Desafio
 * aceito / Resultados alcançados" do catálogo Diamax.
 */
.ncbn .ncbn-bloco-navy {
	display: block;
	padding: 36px 40px;
	background: var(--ncbn-primaria);
	color: #fff;
	text-decoration: none;
}

.ncbn-bloco-navy__chapeu {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #FF9C95;
}

.ncbn-bloco-navy__titulo {
	margin: 0;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.ncbn-bloco-navy__sub {
	margin: 6px 0 0;
	font-size: 19px;
	font-weight: 300;
	color: #DCE8F7;
}

.ncbn-bloco-navy__regua {
	width: 120px;
	height: 4px;
	margin: 22px 0;
	background: var(--ncbn-destaque);
}

.ncbn-bloco-navy__pe {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: #A9C8EE;
}

.ncbn-bloco-navy__cta {
	display: inline-block;
	margin-top: 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.ncbn-bloco-navy__cta::after { content: " →"; }

/*
 * As linhas do bloco viram <span> quando ele ganha foto (dentro de <a>, um
 * <p> por linha vira marcação frágil). Declarar block aqui mantém as duas
 * marcações — a com <p> do bloco de conversão e a com <span> do simpósio —
 * com o mesmo espaçamento.
 */
.ncbn-bloco-navy__chapeu,
.ncbn-bloco-navy__titulo,
.ncbn-bloco-navy__sub,
.ncbn-bloco-navy__pe { display: block; }

.ncbn-bloco-navy__regua { display: block; }

/*
 * Com foto, duas colunas: texto à esquerda, retrato à direita, tudo dentro do
 * mesmo link. `minmax(0,1fr)` porque o título tem clamp e cresceria a coluna.
 */
/* `.ncbn .ncbn-bloco-navy` declara display:block com dois níveis — classe
   única perde para ela e a grade nunca chega a existir. Mesma armadilha do
   `.ncbn img`. */
.ncbn .ncbn-bloco-navy--com-foto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 200px;
	gap: 36px;
	align-items: center;
}

.ncbn .ncbn-bloco-navy__foto {
	display: block;
	align-self: stretch;
	position: relative;
	/* Sangra nos três lados que toca. `margin-block` sozinho cancelava só o
	   padding de cima e de baixo, e sobrava uma faixa navy de 40px à direita
	   do retrato — que é justamente onde ele deveria encostar. */
	margin: -36px -40px -36px 0;
}

/* A régua vermelha embaixo do retrato é o sinal da capa dos catálogos. */
.ncbn .ncbn-bloco-navy__foto::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 5px;
	background: var(--ncbn-destaque);
}

.ncbn .ncbn-bloco-navy__foto img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
	object-position: center 22%;
}

/* ===================================================== vídeo do simpósio */

/*
 * Largura limitada: em tela cheia um 16:9 passa de 700px de altura e vira o
 * assunto da home, empurrando o resto para baixo. Aqui ele é apoio do bloco
 * do simpósio.
 */
.ncbn-simposio-video {
	max-width: 760px;
	margin: 22px 0 0;
}

.ncbn-simposio-video__titulo {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ncbn-tinta-3);
}

.ncbn .ncbn-simposio-video video {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-top: 5px solid var(--ncbn-destaque);
}

.ncbn-simposio-video__legenda {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 300;
	color: var(--ncbn-tinta-2);
}

/* ============================================================ destaques */

.ncbn-destaques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ncbn-borda);
}

.ncbn-destaques li {
	padding: 22px 24px 22px 0;
	border-top: 3px solid var(--ncbn-destaque);
	margin-top: -1px;
}

.ncbn-destaques strong {
	display: block;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ncbn-primaria);
	line-height: 1.1;
}

.ncbn-destaques span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 300;
	color: var(--ncbn-tinta-3);
}

/* ============================================================== grupos */

.ncbn-grupos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px 36px;
}

.ncbn-grupo { min-width: 0; }

.ncbn-grupo__texto {
	max-width: var(--ncbn-medida);
	margin: 0 0 12px;
	font-weight: 300;
	color: var(--ncbn-tinta-2);
}

.ncbn-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Marcador vermelho, como o dos folders. */
.ncbn-lista li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 300;
	color: var(--ncbn-tinta-2);
}

.ncbn-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .68em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ncbn-destaque);
}

/* ========================================================== materiais */

/*
 * O bloco de download é o que a pessoa veio buscar, então ele vem antes do
 * texto na página de produto e tem peso de cartão, não de lista de links.
 */
/*
 * Um abaixo do outro, nunca lado a lado. Em duas colunas o bloco virava uma
 * grade de retângulos quase iguais — ícone, tipo e título mudam pouco entre um
 * catálogo e um folheto —, e a última linha ficava com um órfão à esquerda
 * sempre que a conta dava ímpar. Em coluna a leitura é uma varredura só.
 *
 * A largura é limitada: um cartão com ícone, duas linhas curtas e uma seta
 * esticado numa tela de 1440px afasta a seta do título e ninguém lê o par.
 */
.ncbn-materiais {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	max-width: 620px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ncbn .ncbn-materiais a {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--ncbn-borda);
	border-left: 4px solid var(--ncbn-destaque);
	text-decoration: none;
	color: var(--ncbn-tinta);
	transition: box-shadow .16s ease, background .16s ease;
}

.ncbn-materiais a:hover,
.ncbn-materiais a:focus-visible {
	background: var(--ncbn-cinza);
	box-shadow: var(--ncbn-sombra);
}

.ncbn-material__icone {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--ncbn-destaque);
}

.ncbn-material__txt { flex: 1; min-width: 0; }

.ncbn-material__tipo {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ncbn-tinta-3);
}

.ncbn-material__titulo {
	display: block;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ncbn-primaria);
}

.ncbn-material__seta {
	flex: none;
	font-size: 20px;
	color: var(--ncbn-destaque);
}

/* ================================================================ ficha */

/* Tabela com cabeçalho navy e caixa-alta espaçada, como a de
   ESPECIFICAÇÕES dos folders. */
.ncbn-ficha-tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.ncbn-ficha-tabela caption {
	padding: 12px;
	background: var(--ncbn-primaria);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.ncbn-ficha-tabela th {
	width: 34%;
	padding: 13px 18px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ncbn-primaria);
	background: var(--ncbn-cinza);
	border: 1px solid var(--ncbn-borda);
	vertical-align: top;
}

.ncbn-ficha-tabela td {
	padding: 13px 18px;
	font-weight: 300;
	color: var(--ncbn-tinta-2);
	border: 1px solid var(--ncbn-borda);
}

.ncbn-tabela-rolagem { overflow-x: auto; }

/* ========================================================= palestrante */

/*
 * Uma coluna por padrão: sem foto não há o que pôr à esquerda, e reservar
 * a faixa de 300px jogaria o texto para o meio do bloco.
 */
.ncbn-palestrante {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
	padding: 30px;
	background: var(--ncbn-cinza);
	border-left: 4px solid var(--ncbn-destaque);
}

.ncbn-palestrante--com-foto {
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}

/*
 * ⚠️ `.ncbn .ncbn-palestrante__foto` e não só a classe: o reset tem
 * `.ncbn img { max-width: 100% }`, que é (0,1,1) e vence uma classe sozinha
 * (0,1,0). É a mesma armadilha que já pegou o logo do rodapé e a marca do
 * topo.
 */
.ncbn .ncbn-palestrante__foto {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 30%;
	margin: 0;
	border-bottom: 4px solid var(--ncbn-destaque);
	background: #DCE4EF;
}

.ncbn-palestrante__nome {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	color: var(--ncbn-primaria);
	line-height: 1.2;
}

/* O nome abre o minicurrículo, então a lista respira embaixo dele. */
.ncbn-palestrante__texto .ncbn-lista { margin-top: 20px; }

.ncbn-palestrante__cargo {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ncbn-tinta-3);
}

/* =========================================================== migalha */

.ncbn-migalha {
	padding-top: 18px;
	padding-bottom: 4px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ncbn-tinta-3);
}

.ncbn-migalha a { color: var(--ncbn-tinta-3); text-decoration: none; }
.ncbn-migalha a:hover { color: var(--ncbn-destaque); }
.ncbn-migalha span { margin: 0 8px; }
.ncbn-migalha strong { color: var(--ncbn-primaria); font-weight: 700; }

/* =========================================================== cadastro */

/* Coluna única: a página é o formulário. A largura é a mesma que a coluna
   da direita tinha, então o cartão não mudou de tamanho — mudou de lugar. */
.ncbn-cadastro__grid {
	max-width: 520px;
	margin-inline: auto;
	padding-block: 52px 72px;
}

.ncbn-cadastro__fim { max-width: var(--ncbn-medida); }

.ncbn-cadastro__form {
	padding: 32px;
	background: #fff;
	border: 1px solid var(--ncbn-borda);
	border-top: 5px solid var(--ncbn-destaque);
	box-shadow: var(--ncbn-sombra);
}

.ncbn-cadastro__form .ncbn-h2 { margin-bottom: 18px; }

/* ========================================================== formulário */

.ncbn-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ncbn-campo { margin: 0; min-width: 0; }
.ncbn-campo--full { grid-column: 1 / -1; }

/* O campo depois dos chips de interesse precisa de respiro — sem isso o
   rótulo encosta na última fileira de chips. */
.ncbn-fieldset + .ncbn-campo { margin-top: 20px; }

.ncbn-campo label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ncbn-tinta-2);
}

.ncbn-campo label span { color: var(--ncbn-destaque); }

.ncbn-form input[type="text"],
.ncbn-form input[type="email"],
.ncbn-form input[type="tel"],
.ncbn-form select,
.ncbn-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
	font-weight: 400;
	color: var(--ncbn-tinta);
	background: #fff;
	border: 1px solid var(--ncbn-borda);
	border-radius: 0;
	appearance: none;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.ncbn-form textarea { resize: vertical; font-weight: 300; }

.ncbn-form input:focus,
.ncbn-form select:focus,
.ncbn-form textarea:focus {
	outline: none;
	border-color: var(--ncbn-primaria);
	box-shadow: 0 0 0 3px rgba(23, 69, 147, .15);
}

.ncbn-form select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23174593' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
	padding-right: 36px;
}

.ncbn-fieldset {
	margin: 20px 0 0;
	padding: 0;
	border: 0;
}

.ncbn-fieldset legend {
	padding: 0;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ncbn-tinta-2);
}

.ncbn-fieldset legend span { color: var(--ncbn-destaque); }

.ncbn-fieldset legend em {
	font-style: normal;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ncbn-tinta-3);
}

.ncbn-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ncbn-chip { position: relative; }

.ncbn-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ncbn-chip span {
	display: inline-block;
	padding: 9px 15px;
	border: 1px solid var(--ncbn-borda);
	font-size: 14px;
	font-weight: 500;
	color: var(--ncbn-tinta-2);
	background: #fff;
	cursor: pointer;
	transition: all .14s ease;
}

.ncbn-chip input:checked + span {
	background: var(--ncbn-primaria);
	border-color: var(--ncbn-primaria);
	color: #fff;
}

.ncbn-chip input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(23, 69, 147, .25);
}

.ncbn-consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 20px;
	font-size: 13.5px;
	font-weight: 300;
	color: var(--ncbn-tinta-2);
	line-height: 1.5;
}

.ncbn-consent input { margin-top: 3px; flex: none; }

.ncbn-btn {
	display: inline-block;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

.ncbn-btn--primario {
	background: var(--ncbn-destaque);
	border-color: var(--ncbn-destaque);
	color: #fff;
}

.ncbn-btn--primario:hover { background: #C42B23; border-color: #C42B23; }

.ncbn-btn--linha {
	background: transparent;
	border-color: var(--ncbn-primaria);
	color: var(--ncbn-primaria);
}

.ncbn-btn--linha:hover { background: var(--ncbn-primaria); color: #fff; }

.ncbn-btn--bloco { display: block; width: 100%; margin-top: 24px; }

/* ============================================================== avisos */

.ncbn-alerta {
	margin: 0 0 20px;
	padding: 15px 18px;
	font-size: 14.5px;
	font-weight: 400;
	border-left: 4px solid;
	background: var(--ncbn-cinza);
}

.ncbn-alerta ul { margin: 8px 0 0; padding-left: 20px; font-weight: 300; }

.ncbn-alerta--erro { border-color: var(--ncbn-destaque); background: #FCEFEE; color: #8E2019; }
.ncbn-alerta--ok { border-color: #1F8A4C; background: #EDF8F1; color: #15633A; }
.ncbn-alerta--aviso { border-color: #D9A407; background: #FFF8E6; color: #7A5B12; }

/* ========================================================== comercial */

.ncbn-comercial { padding-block: 40px 64px; }
.ncbn-comercial__in { max-width: 720px; margin: 0 auto; }

.ncbn-comercial .ncbn-form {
	margin-top: 26px;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--ncbn-borda);
	border-top: 5px solid var(--ncbn-destaque);
	box-shadow: var(--ncbn-sombra);
}

/* ============================================================== rodapé */

.ncbn-rodape {
	margin-top: 64px;
	padding: 44px 0 30px;
	background: var(--ncbn-navy-fundo);
	color: #C6D8F0;
	font-size: 13.5px;
	font-weight: 300;
	border-top: 5px solid var(--ncbn-destaque);
}

.ncbn-rodape__nota,
.ncbn-rodape__legal { max-width: var(--ncbn-medida); }

.ncbn-rodape__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 28px;
}

/*
 * ⚠️ `.ncbn .ncbn-rodape__logo` e não só a classe: o reset tem
 * `.ncbn img { max-width: 100% }`, que é (0,1,1) e vence uma classe
 * sozinha (0,1,0). Sem o prefixo, um logo largo ocupava a coluna inteira
 * do rodapé em vez dos 220px. É a mesma armadilha que já tinha pintado a
 * marca do topo de navy sobre navy.
 */
.ncbn .ncbn-rodape__logo {
	display: block;
	max-height: 42px;
	max-width: 220px;
	width: auto;
	height: auto;
	margin: 0 0 14px;
}

.ncbn-rodape__marca {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #fff;
}

.ncbn-rodape__marca span {
	font-size: 13px;
	font-weight: 300;
	letter-spacing: .02em;
	color: #9FC0EA;
}

.ncbn-rodape__nota { margin: 0; line-height: 1.7; }

.ncbn-rodape a { color: #9FC0EA; }

.ncbn-rodape__legal {
	margin: 30px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 11.5px;
	line-height: 1.65;
	color: #8FA8C6;
}

/* ========================================================= responsivo */

/*
 * Abaixo de 900px o menu vira painel. O limite é o texto, não o aparelho:
 * "Produtos" + "Simpósio" + o botão vermelho + a marca deixam de caber na
 * barra aí, e a última coisa que se quer é o menu quebrando em duas linhas
 * numa barra grudada no topo.
 */
@media (max-width: 900px) {
	.ncbn-menu__botao { display: inline-flex; }

	.ncbn-menu {
		display: none;
		position: absolute;
		/* Mesma razão do desktop: sem os 3px o painel começa por cima da
		   régua vermelha do cabeçalho. */
		top: calc(100% + 3px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding-block: 6px 16px;
		background: var(--ncbn-escura);
		border-bottom: 4px solid var(--ncbn-destaque);
		box-shadow: 0 20px 40px rgba(8, 24, 52, .34);
		max-height: calc(100vh - 68px);
		overflow-y: auto;
	}

	.ncbn-topo.is-menu-aberto .ncbn-menu { display: flex; }

	.ncbn-menu__item { display: block; }

	.ncbn-topo .ncbn-menu__link {
		width: 100%;
		justify-content: space-between;
		padding: 15px clamp(18px, 4vw, 64px);
		font-size: 13px;
	}

	.ncbn-topo .ncbn-menu__link.is-atual { box-shadow: inset 3px 0 0 var(--ncbn-destaque); }

	/* No desktop o item aberto vira a aba branca da gaveta. Aqui não há
	   gaveta branca — o painel é navy —, e a aba chegava como uma tarja
	   clara atravessada no meio do menu escuro. */
	.ncbn-topo .ncbn-menu__link[aria-expanded="true"] {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}

	/* No painel a gaveta abre empurrando, e não flutuando sobre o resto. */
	.ncbn-menu__lista {
		position: static;
		background: none;
		border-bottom: 0;
		box-shadow: none;
		padding-block: 0 10px;
	}

	.ncbn-menu__grade { grid-template-columns: 1fr; gap: 0; }

	.ncbn-menu .ncbn-menu__secao {
		padding-top: 10px;
		padding-bottom: 10px;
		color: #DCE8F7;
	}

	.ncbn-menu .ncbn-menu__secao:hover,
	.ncbn-menu .ncbn-menu__secao:focus-visible,
	.ncbn-menu .ncbn-menu__secao.is-atual { background: rgba(255, 255, 255, .1); }

	.ncbn-menu__secao-chapeu { color: #8FB2DD; }

	/* A conversão fica na barra, ao lado das três barras: no celular ela é o
	   caminho mais curto do hotsite e não pode depender de abrir o menu.
	   Encolhe para caber com a marca — o rótulo é conteúdo e não se abrevia,
	   então quem cede é o botão, e o espaço entre os três itens junto. */
	.ncbn-topo__in { gap: 10px; }

	.ncbn-topo__cta--solto {
		padding: 8px 12px;
		font-size: 11px;
		letter-spacing: .06em;
	}

	/* A barra passa a ser a âncora do painel. */
	.ncbn-topo__in { position: static; }
}

@media (max-width: 980px) {
	.ncbn-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ncbn-palestrante { grid-template-columns: 1fr; gap: 18px; }
	.ncbn .ncbn-palestrante__foto { max-width: 200px; }
	.ncbn .ncbn-bloco-navy { padding: 30px 28px; }

	/* O recuo negativo da foto casa com o padding do bloco. Com 36px aqui, ela
	   vazava 6px para fora em cima e embaixo. */
	.ncbn .ncbn-bloco-navy__foto { margin: -30px -28px -30px 0; }
}

@media (max-width: 400px) {
	.ncbn-topo__in { gap: 8px; }

	.ncbn-topo__cta--solto {
		padding: 7px 9px;
		font-size: 10px;
		letter-spacing: .03em;
	}

	/* A marca cede o resto. Abaixo de ~340px ela, o hambúrguer e o botão não
	   cabem no gutter de 18px, e o que transborda é sempre a ponta direita —
	   ou seja, a conversão. O logotipo sobrevive a 26px; ela, não a um corte. */
	.ncbn-marca__img { max-height: 26px; }
	.ncbn-marca__txt { font-size: 19px; letter-spacing: .1em; }
	.ncbn-marca__sub { font-size: 11px; }
	.ncbn-topo .ncbn-marca { gap: 6px; }
}

@media (max-width: 680px) {
	/* Uma coluna: o retrato sobe para o topo, em faixa, e o recuo negativo
	   some junto com o padding maior do bloco. */
	.ncbn .ncbn-bloco-navy--com-foto { grid-template-columns: minmax(0, 1fr); gap: 22px; }

	/* O retrato vai para cima do texto — e a régua vermelha do pé dele fica
	   entre foto e título, que é a capa dos catálogos. */
	.ncbn .ncbn-bloco-navy__foto { order: -1; margin: -30px -28px 0; }

	.ncbn .ncbn-bloco-navy__foto img { min-height: 0; height: 210px; }

	.ncbn { font-size: 16px; }
	.ncbn-wrap { padding-left: 18px; padding-right: 18px; }
	.ncbn-cards--2,
	.ncbn-cards--3 { grid-template-columns: 1fr; }
	.ncbn-form__grid { grid-template-columns: 1fr; }
	.ncbn-cadastro__form,
	.ncbn-comercial .ncbn-form { padding: 22px; }
	.ncbn-capa__foto { min-height: var(--ncbn-capa-h-mob, 280px); }
	.ncbn-capa__in { padding-top: 36px; padding-bottom: 32px; }
	.ncbn-secao-bloco { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.ncbn * { transition: none !important; animation: none !important; }
}

/* Painel de ?ncbn_diag=1 — só admin o vê. */
.ncbn-diag {
	margin: 0;
	padding: 20px clamp(18px, 4vw, 64px);
	background: #10192B;
	color: #9FE8A0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-all;
}