/* Shortcode [diretoria_bni]: ajuste as variáveis no Custom CSS do Elementor.
   Os seletores de texto usam ".diretoria-bni .x" para vencer os estilos globais do Kit do Elementor. */
.diretoria-bni {
	--diretoria-cor: #CF2030;
	--diretoria-cor-suave: #fcf2f3;
	--diretoria-texto: #1a1a1a;
	--diretoria-texto-suave: #595959;
	--diretoria-etiqueta-fundo: #ececec;
	--diretoria-etiqueta-texto: #333333;
	--diretoria-foto-fundo: #f2f2f2;
	--diretoria-foto-anel: #e5e5e5;
	--diretoria-foto-raio: 50%; /* 12px = cantos arredondados */
	--diretoria-foto: 120px;
	--diretoria-foto-da: 140px;
	--diretoria-foto-da-mobile: 110px;
	--diretoria-foto-executiva: 180px;
	--diretoria-card-largura-executiva: 320px;
	--diretoria-card-largura: 160px;
	--diretoria-card-largura-dc: 144px;
	--diretoria-gap: 24px;
	--diretoria-bloco-gap: 32px;
	--diretoria-area-gap: 48px;
	--diretoria-painel-borda: #e5e5e5;
	--diretoria-painel-raio: 12px;
	--diretoria-corporativa-fundo: #f6f6f6;
	--diretoria-header-offset: 100px;

	color: var(--diretoria-texto);
}

@supports (background: color-mix(in srgb, red 6%, white)) {
	.diretoria-bni { --diretoria-cor-suave: color-mix(in srgb, var(--diretoria-cor) 6%, white); }
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.diretoria-bni__nav) { scroll-behavior: smooth; }
}

.diretoria-bni *,
.diretoria-bni *::before,
.diretoria-bni *::after {
	box-sizing: border-box;
}

/* Navegação */
.diretoria-bni .diretoria-bni__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 var(--diretoria-bloco-gap);
}

.diretoria-bni .diretoria-bni__nav a {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--diretoria-cor);
	border-radius: 999px;
	background: #fff;
	color: var(--diretoria-cor);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.diretoria-bni .diretoria-bni__nav a:hover,
.diretoria-bni .diretoria-bni__nav a:focus-visible {
	background: var(--diretoria-cor);
	color: #fff;
}

.diretoria-bni .diretoria-bni__nav--das a {
	padding: 4px 12px;
	border-color: var(--diretoria-foto-anel);
	color: var(--diretoria-texto);
	font-size: 13px;
}

/* Seções */
.diretoria-bni__secao,
.diretoria-bni__area {
	scroll-margin-top: var(--diretoria-header-offset);
}

.diretoria-bni__secao + .diretoria-bni__secao {
	margin-top: calc(var(--diretoria-bloco-gap) * 2);
}

.diretoria-bni__secao--corporativa {
	padding: calc(var(--diretoria-bloco-gap) * 1.5) 16px;
	background: var(--diretoria-corporativa-fundo);
}

.diretoria-bni__cabecalho {
	margin: 0 0 var(--diretoria-bloco-gap);
	text-align: center;
}

.diretoria-bni .diretoria-bni__titulo {
	margin: 0;
	color: var(--diretoria-cor);
	line-height: 1.2;
}

.diretoria-bni .diretoria-bni__titulo::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 12px auto 0;
	background: var(--diretoria-cor);
}

.diretoria-bni .diretoria-bni__subtitulo {
	max-width: 640px;
	margin: 12px auto 0;
	color: var(--diretoria-texto-suave);
	font-size: 15px;
	line-height: 1.5;
}

/* Grades: flex para centralizar a última linha incompleta */
.diretoria-bni__grade {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--diretoria-gap);
}

.diretoria-bni__grade > .diretoria-bni__card {
	flex: 0 0 var(--diretoria-card-largura);
	min-width: 0;
}

@media (max-width: 479px) {
	.diretoria-bni__grade > .diretoria-bni__card {
		flex-basis: calc(50% - var(--diretoria-gap) / 2);
	}
}

/* Painel do DA (DA + seus DCs): empilhado no mobile, 2 colunas a partir de 900px */
.diretoria-bni__area {
	display: grid;
	gap: var(--diretoria-gap);
	padding: 12px;
	border: 1px solid var(--diretoria-painel-borda);
	border-radius: var(--diretoria-painel-raio);
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.diretoria-bni__area + .diretoria-bni__area {
	margin-top: var(--diretoria-area-gap);
}

.diretoria-bni .diretoria-bni__dcs-titulo {
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--diretoria-painel-borda);
	color: var(--diretoria-texto-suave);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}

/* DCs mais estreitos para caber 5 por linha ao lado do DA */
.diretoria-bni__grade--dcs {
	--diretoria-gap: 16px;
	--diretoria-card-largura: var(--diretoria-card-largura-dc);
}

@media (min-width: 900px) {
	.diretoria-bni__area {
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
		padding: 20px;
	}

	.diretoria-bni .diretoria-bni__dcs-titulo {
		text-align: left;
	}

	.diretoria-bni__grade--dcs {
		justify-content: flex-start;
	}
}

/* Card */
.diretoria-bni__card {
	padding: 12px 8px 16px;
	border-radius: 8px;
	text-align: center;
	overflow-wrap: anywhere;
	transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
	.diretoria-bni__grade > .diretoria-bni__card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.diretoria-bni__card { transition: none; }
	.diretoria-bni__grade > .diretoria-bni__card:hover { transform: none; }
}

.diretoria-bni__foto {
	width: var(--diretoria-foto);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 auto 12px;
	border: 2px solid var(--diretoria-foto-anel);
	border-radius: var(--diretoria-foto-raio);
	overflow: hidden;
	background: var(--diretoria-foto-fundo);
}

.diretoria-bni .diretoria-bni__foto img.diretoria-bni__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: center top;
}

.diretoria-bni__iniciais {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--diretoria-cor);
	font-size: 2rem;
	font-weight: 700;
}

.diretoria-bni .diretoria-bni__nome {
	margin: 0;
	color: var(--diretoria-texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.diretoria-bni .diretoria-bni__cargo {
	margin: 2px 0 0;
	color: var(--diretoria-cor);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

.diretoria-bni .diretoria-bni__equipe {
	margin: 8px 0 0;
	line-height: 1;
}

.diretoria-bni .diretoria-bni__etiqueta {
	display: inline-block;
	max-width: 100%;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--diretoria-etiqueta-fundo);
	color: var(--diretoria-etiqueta-texto);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
}

.diretoria-bni .diretoria-bni__cidade,
.diretoria-bni .diretoria-bni__extra {
	margin: 4px 0 0;
	color: var(--diretoria-texto-suave);
	font-size: 12px;
	line-height: 1.35;
}

.diretoria-bni .diretoria-bni__empresa {
	margin: 4px 0 0;
	color: var(--diretoria-texto-suave);
	font-size: 13px;
	line-height: 1.35;
}

/* Card do DA */
.diretoria-bni__card--da {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 24px 20px;
	border-left: 4px solid var(--diretoria-cor);
	background: var(--diretoria-cor-suave);
}

.diretoria-bni__card--da .diretoria-bni__foto {
	width: var(--diretoria-foto-da-mobile);
	border: 3px solid var(--diretoria-cor);
}

.diretoria-bni .diretoria-bni__card--da .diretoria-bni__nome { font-size: 18px; }
.diretoria-bni__card--da .diretoria-bni__iniciais { font-size: 2.5rem; }

@media (min-width: 900px) {
	.diretoria-bni__card--da { max-width: none; }
	.diretoria-bni__card--da .diretoria-bni__foto { width: var(--diretoria-foto-da); }
}

/* Diretoria Executiva: primeiro bloco, card em destaque e sempre centralizado */
.diretoria-bni__secao--executiva:not(:last-child) {
	margin-bottom: calc(var(--diretoria-bloco-gap) * 2);
}

.diretoria-bni__secao--executiva .diretoria-bni__grade > .diretoria-bni__card {
	flex: 0 1 var(--diretoria-card-largura-executiva);
	padding: 28px 20px;
	border-top: 4px solid var(--diretoria-cor);
	background: var(--diretoria-cor-suave);
}

.diretoria-bni__secao--executiva .diretoria-bni__foto {
	width: var(--diretoria-foto-executiva);
	border: 3px solid var(--diretoria-cor);
}

.diretoria-bni .diretoria-bni__secao--executiva .diretoria-bni__nome { font-size: 20px; }
.diretoria-bni .diretoria-bni__secao--executiva .diretoria-bni__cargo { font-size: 15px; }
.diretoria-bni__secao--executiva .diretoria-bni__iniciais { font-size: 3rem; }

.diretoria-bni__aviso {
	padding: 8px 12px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	font-size: .875rem;
}