/* ==========================================================================
   BUFFALO DIGITAL — DESIGN SYSTEM (Fase 1 + Redesign 2026)
   ==========================================================================

   Divisão de responsabilidades (inalterada desde a Fase 1):

   - COR e TIPOGRAFIA vivem no Kit Global do Elementor (Global Colors /
     Global Fonts), editáveis pela interface. Este arquivo apenas os apelida
     com nomes legíveis e NÃO os redefine.

   - ESPAÇAMENTO, RAIO e o EIXO DE LARGURA da fonte não têm token nativo no
     Elementor. Ficam aqui, como custom properties, e são a fonte de verdade.

   O que o Redesign 2026 acrescentou: a fonte variável auto-hospedada, a
   largura tipográfica por papel (título expandido, corpo normal), o botão
   único, e as classes utilitárias que as páginas usam (eyebrow, título de
   seção, número, legenda). Componentes de seção ficam em secoes.css.

   Regras da casa: sem !important, sem overflow-x:hidden, sem hacks de
   compensação. Se algo precisar de força bruta, a causa está errada.
   ========================================================================== */

/* --- Fonte variável (peso 100-900, largura 62%-125%) ---------------------- */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url( "../fonts/archivo-variable-latin.woff2" ) format( "woff2" );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url( "../fonts/archivo-variable-latin-ext.woff2" ) format( "woff2" );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* --- Apelidos legíveis dos tokens do Kit Global (somente leitura) ------
	   Os nomes antigos (navy-700, navy-500, gray-100) continuam existindo
	   para o CSS das fases anteriores não quebrar; o valor por trás mudou
	   no Kit. Os nomes novos dizem o papel. */
	--bf-ink:      var( --e-global-color-ink,       #0b1426 ); /* fundo da página                   */
	--bf-navy-900: var( --e-global-color-secondary, #0f1b31 ); /* seção alternada                   */
	--bf-navy-700: var( --e-global-color-primary,   #172745 ); /* superfície de card (slate)        */
	--bf-slate:    var( --bf-navy-700 );
	--bf-navy-500: var( --e-global-color-navy500,   #4f7dff ); /* botão e foco (electric)           */
	--bf-electric: var( --bf-navy-500 );
	--bf-blue-400: var( --e-global-color-accent,    #5475aa ); /* bordas e apoio                    */
	--bf-blue-200: var( --e-global-color-blue200,   #8cb3ff ); /* eyebrow, links, destaque (sky)    */
	--bf-sky:      var( --bf-blue-200 );
	--bf-gray-100: var( --e-global-color-gray100,   #eef1f7 ); /* superfície clara (paper)          */
	--bf-paper:    var( --bf-gray-100 );
	--bf-white:    var( --e-global-color-text,      #ffffff ); /* texto sobre navy                  */
	--bf-mist:     var( --e-global-color-mist,      #a9b6cf ); /* texto de apoio sobre navy         */

	/* Derivados: nunca cores novas, sempre misturas dos tokens acima. */
	--bf-electric-deep: color-mix( in srgb, var( --bf-electric ) 78%, #000 );
	--bf-line:          color-mix( in srgb, var( --bf-sky ) 16%, transparent );
	--bf-line-strong:   color-mix( in srgb, var( --bf-sky ) 32%, transparent );
	--bf-paper-ink:     var( --bf-navy-900 );
	--bf-paper-muted:   color-mix( in srgb, var( --bf-navy-900 ) 72%, var( --bf-paper ) );
	--bf-paper-line:    color-mix( in srgb, var( --bf-navy-900 ) 14%, transparent );

	/* --- Eixo de largura da Archivo, por papel ---------------------------- */
	--bf-wdth-display: 118;
	--bf-wdth-h2:      112;
	--bf-wdth-h3:      106;
	--bf-wdth-botao:   105;
	--bf-wdth-eyebrow: 112;
	--bf-wdth-numero:  125;

	/* --- Escala de espaçamento (grade de 4 px) ---------------------------- */
	--bf-space-3xs:  4px;
	--bf-space-2xs:  8px;
	--bf-space-xs:  12px;
	--bf-space-sm:  20px;
	--bf-space-md:  32px;
	--bf-space-lg:  48px;
	--bf-space-xl:  72px;
	--bf-space-2xl: 96px;

	/* Ritmo vertical entre seções: um valor só, fluido. */
	--bf-secao: clamp( 64px, 7.5vw, 104px );

	/* --- Escala de raio ---------------------------------------------------- */
	--bf-radius-none: 0;
	--bf-radius-xs:   6px;    /* botões e campos                              */
	--bf-radius-sm:   8px;
	--bf-radius-md:  14px;    /* cards, molduras de imagem e vídeo            */
	--bf-radius-lg:  24px;
	--bf-radius-pill: 999px;  /* chips de filtro                              */

	/* --- Gutters de container (espelham o Kit) ------------------------------ */
	--bf-gutter-desktop: 20px;
	--bf-gutter-tablet:  20px;
	--bf-gutter-mobile:  16px;

	--bf-ease: cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
	background: var( --bf-ink );
	-webkit-font-smoothing: antialiased;
}

/* Largura tipográfica por tag. Aparência é do sistema, a tag é do conteúdo:
   um H2 pequeno (eyebrow) e um H2 grande obedecem à mesma regra de largura. */
h1,
.elementor-widget-heading h1.elementor-heading-title {
	font-variation-settings: "wdth" var( --bf-wdth-display );
	text-wrap: balance;
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
	font-variation-settings: "wdth" var( --bf-wdth-h2 );
	text-wrap: balance;
}

h3,
h4,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
	font-variation-settings: "wdth" var( --bf-wdth-h3 );
}

p {
	max-width: 62ch;
}

/* ==========================================================================
   BOTÃO — um só para o site inteiro
   O Kit (Theme Style › Buttons) dá cor, raio e padding. Aqui entra o que o
   Kit não controla: largura da fonte, transição e a variante "ghost".
   ========================================================================== */

.elementor-button,
.elementor-form .elementor-button,
.bfd-botao {
	font-variation-settings: "wdth" var( --bf-wdth-botao );
	letter-spacing: 0.01em;
	transition: background-color 0.2s var( --bf-ease ), border-color 0.2s var( --bf-ease ), color 0.2s var( --bf-ease ), transform 0.2s var( --bf-ease );
}

.elementor-button:active {
	transform: translateY( 1px );
}

.elementor-button .elementor-button-content-wrapper {
	align-items: center;
	gap: var( --bf-space-2xs );
}

/* Variante ghost: só borda. Sobre navy usa a linha clara; sobre paper, a
   linha escura. */
.bfd-botao-ghost .elementor-button {
	background: transparent;
	border: 1px solid var( --bf-line-strong );
	color: var( --bf-white );
	padding-block: 14px;
}

.bfd-botao-ghost .elementor-button:hover,
.bfd-botao-ghost .elementor-button:focus-visible {
	background: transparent;
	border-color: var( --bf-sky );
	color: var( --bf-white );
}

.bfd-secao--paper .bfd-botao-ghost .elementor-button {
	border-color: var( --bf-paper-line );
	color: var( --bf-paper-ink );
}

/* ==========================================================================
   CLASSES UTILITÁRIAS DAS PÁGINAS
   Aplicadas nos widgets pelo campo "Classes CSS" do Elementor.
   ========================================================================== */

/* Eyebrow: nome da seção. A tag continua H2 (é o título da seção para o
   buscador); o tipo é pequeno e largo, com o traço à esquerda. */
.bfd-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: var( --bf-space-xs );
	margin: 0;
	font-family: var( --e-global-typography-eyebrow-font-family ), sans-serif;
	font-size: var( --e-global-typography-eyebrow-font-size );
	font-weight: var( --e-global-typography-eyebrow-font-weight );
	letter-spacing: var( --e-global-typography-eyebrow-letter-spacing );
	line-height: var( --e-global-typography-eyebrow-line-height );
	text-transform: uppercase;
	font-variation-settings: "wdth" var( --bf-wdth-eyebrow );
	color: var( --bf-sky );
	text-wrap: initial;
}

.bfd-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.bfd-secao--paper .bfd-eyebrow .elementor-heading-title {
	color: var( --bf-electric-deep );
}

/* Título de seção: a frase grande abaixo do eyebrow. A tag é <p>, porque a
   hierarquia já está no eyebrow (H2). Tipo do slot H2 do Kit. */
.bfd-titulo .elementor-heading-title {
	font-family: var( --e-global-typography-secondary-font-family ), sans-serif;
	font-size: var( --e-global-typography-secondary-font-size );
	font-weight: var( --e-global-typography-secondary-font-weight );
	line-height: var( --e-global-typography-secondary-line-height );
	letter-spacing: var( --e-global-typography-secondary-letter-spacing );
	font-variation-settings: "wdth" var( --bf-wdth-h2 );
	text-wrap: balance;
	max-width: 22ch;
}

.bfd-secao--paper .bfd-titulo .elementor-heading-title,
.bfd-secao--paper h1,
.bfd-secao--paper h2,
.bfd-secao--paper h3 {
	color: var( --bf-paper-ink );
}

/* Lead: texto de apoio grande e leve, no slot "accent" do Kit. */
.bfd-lead,
.bfd-lead p {
	font-family: var( --e-global-typography-accent-font-family ), sans-serif;
	font-size: var( --e-global-typography-accent-font-size );
	font-weight: var( --e-global-typography-accent-font-weight );
	line-height: var( --e-global-typography-accent-line-height );
	color: var( --bf-mist );
	max-width: 58ch;
}

.bfd-secao--paper .bfd-lead,
.bfd-secao--paper .bfd-lead p {
	color: var( --bf-paper-muted );
}

/* Texto corrido de apoio (parágrafos das seções). */
.bfd-texto p {
	color: var( --bf-mist );
	font-size: 1.125rem;
	max-width: 56ch;
}

.bfd-texto p strong {
	color: var( --bf-white );
	font-weight: 500;
}

/* Número de impacto + legenda. O "+" fica em sky. */
.bfd-numero .elementor-heading-title {
	font-family: var( --e-global-typography-display-font-family ), sans-serif;
	font-size: var( --e-global-typography-display-font-size );
	font-weight: var( --e-global-typography-display-font-weight );
	line-height: var( --e-global-typography-display-line-height );
	letter-spacing: var( --e-global-typography-display-letter-spacing );
	font-variation-settings: "wdth" var( --bf-wdth-numero );
	font-variant-numeric: tabular-nums;
	color: var( --bf-white );
}

.bfd-numero .elementor-heading-title::first-letter {
	color: var( --bf-sky );
}

.bfd-legenda .elementor-heading-title {
	font-family: var( --e-global-typography-caption-font-family ), sans-serif;
	font-size: var( --e-global-typography-caption-font-size );
	font-weight: 400;
	line-height: var( --e-global-typography-caption-line-height );
	color: var( --bf-mist );
	max-width: 18ch;
}

/* Citação em destaque (barra à esquerda). */
.bfd-citacao p {
	margin: 0;
	padding-left: var( --bf-space-sm );
	border-left: 2px solid var( --bf-sky );
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	font-variation-settings: "wdth" 104;
	color: var( --bf-white );
	max-width: 30ch;
}

/* Statement de abertura (Quem somos): H1 em tipo de leitura, não de display. */
.bfd-statement .elementor-heading-title {
	font-size: clamp( 1.5rem, 3vw, 2.375rem );
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.015em;
	font-variation-settings: "wdth" 108;
	max-width: 30ch;
}

.bfd-statement .elementor-heading-title em {
	font-style: normal;
	color: var( --bf-sky );
}

/* ==========================================================================
   NAVEGAÇÃO POR TECLADO (Fase 3)
   ========================================================================== */

.bfd-pular {
	position: absolute;
	left: var( --bf-space-sm );
	top: calc( var( --bf-space-sm ) * -1 );
	z-index: 9999;
	transform: translateY( -120% );
	padding: var( --bf-space-sm ) var( --bf-space-md );
	background: var( --bf-navy-900 );
	color: var( --bf-white );
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var( --bf-radius-xs );
}

.bfd-pular:focus {
	top: var( --bf-space-sm );
	transform: translateY( 0 );
}

#conteudo:focus {
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not( [tabindex="-1"] ):focus-visible {
	outline: 2px solid var( --bf-sky );
	outline-offset: 3px;
	border-radius: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-button,
	.bfd-botao {
		transition: none;
	}
}