/* ==========================================================================
   SEÇÕES — Redesign 2026
   ==========================================================================

   Componentes de página montados no Elementor (containers e widgets nativos)
   e vestidos aqui por classe. A estrutura fica editável no editor; a
   aparência fica no sistema. Nenhum valor de cor, tipo, espaço ou raio é
   inventado: tudo vem de design-system.css e do Kit.

   Convenção: classe no container = bloco (bfd-hero, bfd-numeros...);
   classe no widget = papel dentro do bloco (bfd-eyebrow, bfd-numero...).
   ========================================================================== */

/* --------------------------------------------------------------- seção -- */

/* Ritmo vertical. Sobrescreve as variáveis de padding que o Elementor lê,
   então vale para container cheio e para o miolo do container boxed. */
.bfd-secao {
	--padding-top: var( --bf-secao );
	--padding-bottom: var( --bf-secao );
}

.bfd-secao--navy {
	background: var( --bf-navy-900 );
}

.bfd-secao--paper {
	background: var( --bf-paper );
	color: var( --bf-paper-ink );
}

.bfd-secao--paper p {
	color: var( --bf-paper-ink );
}

/* Faixa curta: seções que são tira (logos) respiram menos embaixo. */
.bfd-secao--curta {
	--padding-bottom: clamp( 24px, 3vw, 40px );
}

.bfd-secao--sem-topo {
	--padding-top: 0;
}

/* Containers que o JSON já configura (padding zero, gap 20) recebem aqui
   propriedades reais, não variáveis: o valor gravado por elemento tem
   especificidade maior que a classe, e a variável perderia. */

/* Duas colunas: o Elementor cuida da direção (row/column por breakpoint);
   aqui só o alinhamento vertical e o vão. */
.bfd-colunas.e-con {
	column-gap: clamp( 32px, 6vw, 96px );
	row-gap: var( --bf-space-lg );
	align-items: center;
}

.bfd-colunas--topo {
	align-items: flex-start;
}

.bfd-coluna.e-con {
	row-gap: var( --bf-space-sm );
	min-width: 0;
}

/* Cabeçalho de seção: eyebrow + título + lead, com respiro antes do miolo. */
.bfd-cabeca.e-con {
	row-gap: var( --bf-space-sm );
	margin-block-end: clamp( 36px, 5vw, 64px );
}

/* ------------------------------------------------------------ cabeçalho -- */

.bfd-cabecalho {
	position: sticky;
	top: 0;
	z-index: 50;
	--padding-top: 0;
	--padding-bottom: 0;
	min-height: 72px;
	background: color-mix( in srgb, var( --bf-ink ) 82%, transparent );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	border-bottom: 1px solid var( --bf-line );
}

.bfd-cabecalho > .e-con-inner {
	align-items: center;
	justify-content: space-between;
	min-height: 72px;
}

.bfd-logo img {
	width: 132px;
	height: auto;
}

/* Menu: links em mist, o atual em branco com o traço em sky. O seletor
   inclui :hover e :focus com a mesma força porque o Elementor Pro repõe o
   padding de fábrica (13px 20px) nesses estados, o que fazia o item pular. */
.bfd-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item,
.bfd-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.bfd-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: var( --bf-mist );
	padding: 6px 0;
	position: relative;
	transition: color 0.2s;
}

.bfd-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.bfd-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus,
.bfd-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active {
	color: var( --bf-white );
}

.bfd-menu .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var( --bf-sky );
}

.bfd-menu .elementor-nav-menu--main .elementor-nav-menu {
	gap: var( --bf-space-md );
}

.bfd-menu .elementor-nav-menu--main .elementor-nav-menu li {
	margin: 0;
}

/* Hambúrguer (o widget do Elementor desenha o ícone; aqui só cor e tamanho). */
.bfd-menu .elementor-menu-toggle {
	color: var( --bf-white );
	background: transparent;
	border: 0;
	width: 44px;
	height: 44px;
}

.bfd-menu .elementor-menu-toggle:hover,
.bfd-menu .elementor-menu-toggle.elementor-active {
	color: var( --bf-sky );
	background: transparent;
}

/* Menu aberto no celular: painel opaco colado na barra. */
.bfd-menu .elementor-nav-menu--dropdown {
	background: var( --bf-ink );
	border-top: 1px solid var( --bf-line );
	border-bottom: 1px solid var( --bf-line );
}

.bfd-menu .elementor-nav-menu--dropdown .elementor-item {
	font-size: 1.125rem;
	color: var( --bf-mist );
	padding: 14px var( --bf-gutter-mobile );
	border-bottom: 1px solid var( --bf-line );
}

.bfd-menu .elementor-nav-menu--dropdown .elementor-item:hover,
.bfd-menu .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
	color: var( --bf-white );
	background: transparent;
}

.bfd-cabecalho .bfd-cta .elementor-button {
	padding-block: 11px;
	padding-inline: 16px;
	font-size: 0.875rem;
}

/* ----------------------------------------------------------------- hero -- */

/* O container tem vídeo de fundo (Vimeo) com imagem de reserva; em celular o
   Elementor mostra só a imagem. Aqui: altura, véu e o movimento lento da
   imagem quando ela está sozinha. A barra fica por cima (margem negativa). */
.bfd-hero {
	--padding-top: 0;
	--padding-bottom: 0;
	min-height: min( 100svh, 1000px );
	margin-top: -72px;
	justify-content: flex-end;
	overflow: hidden;
	isolation: isolate;
}

/* O miolo boxed dentro do hero: é ele que leva o respiro de cima (barra) e
   de baixo. Cresce com o conteúdo; a seção garante a altura mínima. */
.bfd-hero > .bfd-hero-miolo {
	position: relative;
	z-index: 2;
	width: 100%;
}

.bfd-hero > .bfd-hero-miolo > .e-con-inner {
	padding-block-start: 120px;
	padding-block-end: clamp( 40px, 6vw, 80px );
}

.bfd-hero > .elementor-background-video-container {
	opacity: 0.85;
	filter: none;
	z-index: 0;
}

.bfd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient( 180deg, color-mix( in srgb, var( --bf-ink ) 60%, transparent ) 0%, color-mix( in srgb, var( --bf-ink ) 25%, transparent ) 35%, color-mix( in srgb, var( --bf-ink ) 50%, transparent ) 65%, color-mix( in srgb, var( --bf-ink ) 97%, transparent ) 100% );
}

.bfd-hero .bfd-eyebrow .elementor-heading-title {
	max-width: none;
	flex-wrap: wrap;
}

.bfd-hero-ctas .elementor-widget-button {
	max-width: 100%;
}

.bfd-hero-ctas .elementor-button {
	white-space: normal;
}

.bfd-hero h1.elementor-heading-title {
	max-width: 14ch;
}

.bfd-hero-ctas.e-con {
	gap: var( --bf-space-xs );
	flex-wrap: wrap;
	margin-top: var( --bf-space-sm );
}

@media ( max-width: 767px ) {
	.bfd-hero > .bfd-hero-miolo > .e-con-inner {
		padding-block-start: 104px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bfd-hero > .elementor-background-video-container {
		display: none;
	}
}

/* -------------------------------------------------------------- números -- */

.bfd-numeros.e-con {
	gap: 0;
	padding: 0;
	border: 1px solid var( --bf-line );
	border-radius: var( --bf-radius-md );
	overflow: hidden;
}

.bfd-numero-item.e-con {
	row-gap: var( --bf-space-xs );
	padding: clamp( 24px, 3vw, 40px );
	border-right: 1px solid var( --bf-line );
}

.bfd-numero-item:last-child {
	border-right: 0;
}

@media ( max-width: 767px ) {
	.bfd-numero-item {
		border-right: 0;
		border-bottom: 1px solid var( --bf-line );
	}

	.bfd-numero-item:last-child {
		border-bottom: 0;
	}
}

/* ------------------------------------------------------------- A Buffalo -- */

.bfd-marca img {
	width: 88px;
	height: 88px;
	padding: 22px;
	border: 1px solid var( --bf-line-strong );
	border-radius: 50%;
	object-fit: contain;
}

.bfd-pilares.e-con {
	gap: 0;
	margin-top: var( --bf-space-sm );
	border-top: 1px solid var( --bf-line );
}

.bfd-pilar.e-con {
	row-gap: var( --bf-space-2xs );
	padding: var( --bf-space-sm ) var( --bf-space-sm ) 0 0;
	margin-top: -1px;
	border-top: 2px solid transparent;
}

.bfd-pilar:first-child {
	border-top-color: var( --bf-sky );
}

.bfd-pilar-k .elementor-heading-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --bf-mist );
	opacity: 0.8;
}

.bfd-pilar h3.elementor-heading-title {
	font-size: 1.25rem;
}

.bfd-pilar .bfd-texto p {
	font-size: 0.9375rem;
}

@media ( max-width: 767px ) {
	.bfd-pilar.e-con {
		padding-right: 0;
		padding-bottom: var( --bf-space-sm );
	}
}

/* --------------------------------------------------------------- atuação -- */

.bfd-mapa img {
	width: min( 560px, 100% );
	margin-inline: auto;
	filter: saturate( 1.15 );
	position: relative;
	z-index: 1;
}

.bfd-mapa {
	position: relative;
}

.bfd-mapa::before {
	content: "";
	position: absolute;
	inset: 10% 5%;
	z-index: 0;
	background: radial-gradient( closest-side, color-mix( in srgb, var( --bf-electric ) 35%, transparent ), transparent 70% );
	filter: blur( 30px );
}

.bfd-numeros-linha.e-con {
	gap: var( --bf-space-sm ) clamp( 24px, 4vw, 56px );
	margin-top: var( --bf-space-sm );
	flex-wrap: wrap;
}

.bfd-numeros-linha > .e-con {
	row-gap: var( --bf-space-2xs );
}

/* Cada número ocupa só a própria largura, lado a lado. */
.bfd-numeros-linha > .e-con {
	--width: auto;
	width: auto;
	flex: 0 0 auto;
}

.bfd-numeros-linha .bfd-numero .elementor-heading-title {
	font-size: clamp( 2.5rem, 4.6vw, 4rem );
}

@media ( max-width: 767px ) {
	.bfd-mapa img {
		width: min( 320px, 70% );
	}
}

/* --------------------------------------------------------------- imagens -- */

/* Moldura de foto (Quem somos): cantos, borda fina e o P&B da identidade. */
.bfd-still img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var( --bf-radius-md );
	border: 1px solid var( --bf-line );
	filter: grayscale( 1 ) contrast( 1.05 );
	opacity: 0.88;
}

.bfd-still .widget-image-caption,
.bfd-still figcaption {
	margin-top: var( --bf-space-xs );
	font-size: 0.8125rem;
	color: var( --bf-mist );
	text-align: left;
}

/* --------------------------------------------------------------- equipe -- */

.bfd-equipe.e-con {
	gap: clamp( 24px, 3vw, 40px );
	align-items: flex-start;
}

.bfd-pessoa.e-con {
	row-gap: var( --bf-space-xs );
}

.bfd-face img {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var( --bf-line-strong );
	filter: grayscale( 1 );
}

.bfd-pessoa h3.elementor-heading-title {
	font-size: 1.5rem;
	margin-top: var( --bf-space-2xs );
}

.bfd-cargo .elementor-heading-title {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --bf-sky );
}

.bfd-pessoa .bfd-texto p {
	font-size: 1rem;
}

@media ( max-width: 820px ) {
	.bfd-equipe.e-con {
		gap: var( --bf-space-lg );
	}

	.bfd-pessoa {
		align-items: center;
		text-align: center;
	}

	.bfd-pessoa .elementor-widget-container,
	.bfd-pessoa .bfd-texto p {
		text-align: center;
	}

	.bfd-pessoa .bfd-texto p {
		max-width: 34ch;
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------ banda CTA -- */

.bfd-cta-banda.e-con {
	padding: clamp( 28px, 4vw, 48px );
	gap: var( --bf-space-md );
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background: var( --bf-navy-900 );
	border: 1px solid var( --bf-line );
	border-radius: var( --bf-radius-md );
}

.bfd-cta-banda h2.elementor-heading-title {
	font-size: clamp( 1.375rem, 2.4vw, 1.875rem );
	max-width: 24ch;
}

/* ------------------------------------------------------------- abertura -- */

/* Título de página interna (Cases, Quem somos, Contato). */
.bfd-abertura {
	--padding-top: clamp( 56px, 8vw, 96px );
	--padding-bottom: clamp( 40px, 6vw, 72px );
}

.bfd-abertura .bfd-trilha {
	margin-bottom: var( --bf-space-2xs );
}

/* -------------------------------------------------------------- contato -- */

/* O formulário vira uma grade de duas colunas: campos de 50% lado a lado,
   mensagem, consentimento, aviso e botão ocupando a linha inteira. O
   Elementor monta os campos com flex e larguras percentuais; com gap entre
   eles dois de 50% não cabem numa linha, por isso a grade. */
.bfd-contato .bfd-form .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px 20px;
}

.bfd-contato .bfd-form .elementor-field-group {
	margin: 0;
	padding: 0;
	width: auto;
	max-width: none;
	flex: none;
}

.bfd-contato .bfd-form .elementor-field-group.elementor-col-100 {
	grid-column: 1 / -1;
}

/* Aviso e botão dividem a última linha: aviso à esquerda, botão à direita. */
.bfd-contato .bfd-form .elementor-field-group.elementor-field-type-html {
	grid-column: 1 / 2;
	align-self: center;
}

.bfd-contato .bfd-form .elementor-field-group.elementor-field-type-submit {
	grid-column: 2 / 3;
	justify-self: end;
	align-self: center;
	margin: 0;
}

.bfd-contato .bfd-form .elementor-field-type-submit .elementor-button {
	width: auto;
}

.bfd-contato .bfd-form .elementor-field-textual {
	min-height: 52px;
}

.bfd-contato .bfd-form .elementor-field-type-html {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --bf-paper-muted );
	max-width: 44ch;
	margin-top: var( --bf-space-2xs );
}

@media ( max-width: 600px ) {
	.bfd-contato .bfd-form .elementor-form-fields-wrapper {
		grid-template-columns: 1fr;
	}

	.bfd-contato .bfd-form .elementor-field-group,
	.bfd-contato .bfd-form .elementor-field-type-html,
	.bfd-contato .bfd-form .elementor-field-type-submit {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

.bfd-contato .bfd-form .elementor-field-label {
	color: var( --bf-paper-muted );
	font-variation-settings: "wdth" var( --bf-wdth-eyebrow );
	margin-bottom: 8px;
}

.bfd-contato .bfd-form .elementor-field-label .elementor-mark-required::after {
	color: var( --bf-electric-deep );
}

.bfd-contato .bfd-form .elementor-field-textual {
	font-size: 1rem;
}

.bfd-contato .bfd-form .elementor-field-textual:focus {
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --bf-electric ) 20%, transparent );
	outline: none;
}

.bfd-contato .bfd-form textarea.elementor-field-textual {
	min-height: 140px;
}

/* O texto do consentimento é frase, não rótulo: sem caixa alta nem
   espaçamento de eyebrow, que o Kit aplica a todo label do formulário. */
.bfd-contato .bfd-form .elementor-field-type-acceptance .elementor-field-option label,
.bfd-contato .bfd-form .elementor-field-type-acceptance .elementor-field-subgroup label {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var( --bf-paper-muted );
	line-height: 1.5;
	display: inline;
}

.bfd-contato .bfd-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	gap: var( --bf-space-2xs );
	align-items: flex-start;
}

.bfd-contato .bfd-form .elementor-field-type-acceptance input {
	margin-top: 4px;
	accent-color: var( --bf-electric );
}

.bfd-contato .bfd-form .elementor-button {
	background: var( --bf-paper-ink );
	color: var( --bf-white );
}

.bfd-contato .bfd-form .elementor-button:hover {
	background: var( --bf-electric-deep );
}

.bfd-contato .bfd-form .elementor-message {
	font-size: 0.9375rem;
	color: var( --bf-paper-ink );
}

.bfd-contato .bfd-form .elementor-message.elementor-message-danger {
	color: #a12727;
}

/* --------------------------------------------------------------- rodapé -- */

.bfd-rodape {
	--padding-top: var( --bf-space-xl );
	--padding-bottom: var( --bf-space-md );
	background: var( --bf-ink );
	border-top: 1px solid var( --bf-line );
}

.bfd-rodape-colunas.e-con {
	gap: var( --bf-space-lg );
	align-items: flex-start;
}

.bfd-rodape-coluna.e-con {
	row-gap: var( --bf-space-xs );
	min-width: 0;
}

.bfd-rodape .bfd-logo img {
	width: 128px;
}

/* Imagens de marca alinham à esquerda com o texto da coluna (o widget de
   imagem do Elementor centraliza por padrão). */
.elementor-widget.bfd-logo,
.elementor-widget.bfd-logo .elementor-widget-container,
.elementor-widget.bfd-marca,
.elementor-widget.bfd-marca .elementor-widget-container,
.elementor-widget.bfd-still,
.elementor-widget.bfd-still .elementor-widget-container {
	text-align: left;
}

.elementor-widget.bfd-logo img,
.elementor-widget.bfd-marca img {
	margin-inline: 0;
}

.bfd-rodape .bfd-texto p {
	font-size: 0.9375rem;
	max-width: 34ch;
	margin-top: var( --bf-space-2xs );
}

.bfd-rodape-titulo .elementor-heading-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --bf-mist );
	opacity: 0.75;
	margin-bottom: var( --bf-space-2xs );
}

.bfd-rodape-links ul,
.bfd-rodape-links p {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --bf-space-2xs );
	font-size: 0.9375rem;
	color: var( --bf-mist );
}

.bfd-rodape-links a {
	color: var( --bf-mist );
	text-decoration: none;
	transition: color 0.2s;
}

.bfd-rodape-links a:hover,
.bfd-rodape-links a:focus-visible {
	color: var( --bf-white );
}

/* Ícones sociais: linha fina, sem anel. */
.bfd-social .elementor-social-icons-wrapper {
	gap: var( --bf-space-2xs );
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.bfd-social .elementor-social-icon {
	background: transparent;
	border: 1px solid var( --bf-line );
	width: 40px;
	height: 40px;
	border-radius: var( --bf-radius-xs );
	margin: 0;
	transition: border-color 0.2s, color 0.2s;
}

.bfd-social .elementor-social-icon i,
.bfd-social .elementor-social-icon svg {
	color: var( --bf-mist );
	fill: var( --bf-mist );
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.bfd-social .elementor-social-icon:hover {
	border-color: var( --bf-sky );
}

.bfd-social .elementor-social-icon:hover i,
.bfd-social .elementor-social-icon:hover svg {
	color: var( --bf-white );
	fill: var( --bf-white );
}

.bfd-rodape-base.e-con {
	padding-top: var( --bf-space-sm );
	gap: var( --bf-space-sm );
	margin-top: var( --bf-space-lg );
	border-top: 1px solid var( --bf-line );
	justify-content: space-between;
	flex-wrap: wrap;
}

.bfd-rodape-base p,
.bfd-rodape-base .elementor-heading-title {
	font-size: 0.8125rem;
	color: var( --bf-mist );
	opacity: 0.75;
}

/* Lista de redes: ícone fino em sky + nome, uma por linha. */
.bfd-social-lista .elementor-icon-list-items {
	display: grid;
	gap: var( --bf-space-2xs );
}

.bfd-social-lista .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

.bfd-social-lista .elementor-icon-list-item a {
	display: inline-flex;
	align-items: center;
	gap: var( --bf-space-xs );
	color: var( --bf-mist );
	font-size: 0.9375rem;
	transition: color 0.2s;
}

.bfd-social-lista .elementor-icon-list-item a:hover .elementor-icon-list-text,
.bfd-social-lista .elementor-icon-list-item a:focus-visible .elementor-icon-list-text {
	color: var( --bf-white );
}

.bfd-social-lista .elementor-icon-list-icon {
	width: 18px;
	display: inline-flex;
}

.bfd-social-lista .elementor-icon-list-icon i,
.bfd-social-lista .elementor-icon-list-icon svg {
	color: var( --bf-sky );
	fill: var( --bf-sky );
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.bfd-social-lista .elementor-icon-list-text {
	color: var( --bf-mist );
	padding: 0;
	transition: color 0.2s;
}

/* O bloco legal (inc/rodape-legal.php) entra depois do rodapé; casa com ele. */
.bfd-rodape-legal {
	background: var( --bf-ink );
	color: var( --bf-mist );
}

/* --------------------------------------------------------------- mobile -- */

@media ( max-width: 767px ) {
	.bfd-colunas.e-con {
		row-gap: var( --bf-space-lg );
	}

	.bfd-cabeca.e-con {
		margin-block-end: var( --bf-space-md );
	}
}