/* Auto-hospedadas: terceiro no caminho critico custaria uma requisicao e
   mandaria o IP do visitante para fora. Ambas SIL OFL 1.1. */
@font-face {
  font-family: "Rubik"; src: url("../fontes/rubik-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter"; src: url("../fontes/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter"; src: url("../fontes/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Reset curto, tipografia e foco. Nada de seção mora aqui. */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* O cabecalho e `position: sticky; top: 0`, entao sem isto TODA ancora
     interna aterrissa debaixo dele e a pessoa cai no meio de um paragrafo,
     sem ver o titulo que acabou de pedir. Medido: 73,0 px a 1440, 74,8 a 768
     e 74,8 a 375 — a nav descendo para a linha propria compensa o min-height
     menor, entao UM valor serve nas tres larguras e nao ha media query aqui.
     75 + folga de respiro. */
  scroll-padding-top: 96px;
  /* A barra de rolagem e desenhada pelo navegador, nao pela pagina — e por
     isso ela vinha de fora do kit. Medido antes: scrollbar-color `auto`.
     Grafite-500 no polegar sobre a nevoa da 4,88:1; o grafite-300 daria
     2,16:1 e reprovaria o piso de 3:1 de objeto grafico. So a COR: mexer na
     largura (scrollbar-width) mudaria a medida da coluna de leitura. */
  scrollbar-color: var(--bl-grafite-500) var(--bl-nevoa);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* A selecao tambem e superficie do navegador. Sem regra, o Chromium pinta
   #3264CB com glifo branco — medido em pixel, 5,50:1: passa contraste e nao
   pertence a paleta nenhuma. Numa pagina cujo argumento e que tudo aqui esta
   conferido, o azul do navegador e a unica cor sem procedencia.
   Ambar-300 de fundo com grafite-900 escrito da 9,66:1, e vale nos quatro
   fundos da pagina (branco, nevoa, ambar-100 e o grafite do rodape), porque
   a regra troca os DOIS lados do par. Ambar como preenchimento, nunca como
   texto — a mesma licenca do kit. */
::selection { background: var(--bl-ambar-300); color: var(--bl-grafite-900); }

body {
  margin: 0;
  background: var(--bl-fundo);
  color: var(--bl-texto);
  font-family: var(--bl-fonte-corpo);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--bl-fonte-titulo);
  font-weight: var(--bl-peso-titulo);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 var(--bl-e3);
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem); }
/* 22px sobre 15px de apoio dava 1,47x — degrau fraco demais, e por isso os
   blocos liam chapados. 28px sobre 17px de corpo da 1,65x, e sobre os 15px
   de apoio da 1,87x. */
h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); }
p  { margin: 0 0 var(--bl-e3); max-width: 62ch; text-wrap: pretty; }

a { color: inherit; text-underline-offset: .18em; }
:focus-visible {
  outline: 3px solid var(--bl-ambar-700);   /* 4,80:1 — o unico ambar que passa AA */
  outline-offset: 3px;
  border-radius: 3px;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* O <strong> herda `bold` do navegador, que e 700 — e a Inter so tem 400 e
   600 em disco. O navegador ja entregava 600; a regra so para de mentir.
   Vale para os precos da tabela de investimento, que sao todos <strong>. */
strong, b { font-weight: 600; }

/* rotulo pequeno acima do titulo, com o tracking do logotipo */
.bl-eyebrow {
  font-family: var(--bl-fonte-titulo);
  font-size: .8125rem;
  font-weight: var(--bl-peso-titulo);
  letter-spacing: var(--bl-track-marca);
  text-transform: uppercase;
  color: var(--bl-texto-fraco);
  margin: 0 0 var(--bl-e2);
}
/* Na margem o eyebrow deixa de ser chapeu e vira etiqueta da secao: alinha
   com a altura de maiuscula do <h2>, nao com a linha acima dele. */
@media (min-width: 720px) {
  .bl-registro > .bl-eyebrow.bl-margem { margin-top: .5rem; }
}

/* Cabeca de secao: o titulo, e a linha de apoio quando houver. O eyebrow
   nao mora mais aqui — ele foi para a margem, e o <h2> passou a comecar a
   coluna de leitura em vez de ficar embaixo de um chapeu. */
.bl-cabeca > :last-child { margin-bottom: 0; }

/* ===== a anotacao de procedencia ====================================
   Mora aqui, e nao numa secao, porque e o unico componente que atravessa
   a pagina inteira. Sempre a mesma forma: de onde veio, o que foi lido, e
   a data em que foi conferido. Nunca aponta para arquivo de projeto de
   cliente — a citacao e a fonte PUBLICA, que alias e o argumento.

   MANUTENCAO: publicar "conferido em" cria dever. So entra afirmacao com
   fonte publica e checagem barata de repetir. Data velha e pior que data
   nenhuma — quem mexer aqui reconfere antes de publicar. */
.bl-fonte {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  max-width: 28ch;
  font-family: var(--bl-fonte-mono);
  font-size: .75rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  color: var(--bl-texto-fraco);      /* 4,88:1 na nevoa, 5,22:1 no branco */
}
/* A marca de referencia e a forma do cursor da marca, recortada do proprio
   path do simbolo (marca/svg/ballitech-simbolo-livre.svg, quadrilatero
   215.5,181 617.5,350 362.5,474 362.5,347 normalizado na caixa 402x293).
   Preenchimento, nunca texto: ambar-500 da 2,17:1 escrito no branco e
   reprovaria. Como preenchimento e legitimo, e e a primeira vez que o
   ambar estrutura em vez de decorar — ele passa a significar "aqui ha
   procedencia". Da dono a --bl-acento, que tinha zero usos. */
.bl-fonte__marca {
  position: absolute; left: 0; top: .42em;
  width: .625rem; height: .4556rem;
  background: var(--bl-acento);
  clip-path: polygon(0% 0%, 100% 57.68%, 36.57% 100%, 36.57% 56.66%);
}
.bl-fonte__nome {
  display: block;
  color: var(--bl-grafite-700);      /* 9,37:1 na nevoa, 10,02:1 no branco */
  font-weight: 700;
  letter-spacing: .01em;
}
.bl-fonte__escopo { display: block; }
.bl-fonte__data { display: block; margin-top: .35em; }
@media (max-width: 719px) {
  /* Coluna estreita: a nota desce e vira rodape da afirmacao. */
  .bl-fonte { max-width: none; margin-top: var(--bl-e2); }
  .bl-fonte__nome, .bl-fonte__escopo, .bl-fonte__data { display: inline; }
  .bl-fonte__escopo::before, .bl-fonte__data::before { content: " · "; }
}

.bl-botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; padding: .95em 1.6em; border-radius: 10px;
  font-family: var(--bl-fonte-titulo); font-weight: var(--bl-peso-titulo);
  font-size: .9375rem;
  letter-spacing: .01em; text-decoration: none; border: 2px solid transparent;
  /* `box-shadow` saiu da lista: nao ha uma unica declaracao de sombra em
     site/css/ — a transicao animava propriedade que vale `none` nos tres
     botoes da pagina (medido). E a pagina nao ganha sistema de sombra agora:
     esta direcao tirou moldura de cartao, e inventar profundidade para um
     elemento so seria abstracao com um cliente. */
  cursor: pointer; transition: transform .18s ease;
}
@media (prefers-reduced-motion: reduce) { .bl-botao { transition: none; } }
/* `hover` so vale onde existe ponteiro que PAIRA. No celular o navegador
   dispara o estado no toque e ele fica: o botao continua 2px acima depois
   que o dedo saiu, e nada avisa que o toque pegou. */
@media (hover: hover) {
  .bl-botao:hover { transform: translateY(-2px); }
}
/* So geometria, de proposito: `filter: brightness()` sobre o ambar mexeria
   na razao de contraste do botao principal, e a confirmacao de toque nao
   vale esse risco. Funciona com e sem hover — do -2px do hover para +1px, ou
   de 0 para +1px no toque. Com movimento reduzido a transicao ja e `none` na
   regra acima e o salto e instantaneo, que continua sendo resposta. */
.bl-botao:active { transform: translateY(1px) scale(.98); }

/* CTA: fundo ambar-500 com texto grafite-900 = 6,89:1. Branco daria 2,17:1. */
.bl-botao--principal {
  background: var(--bl-cta-fundo);
  color: var(--bl-cta-texto);
}
.bl-botao--contorno {
  background: transparent;
  color: var(--bl-grafite-900);
  border-color: var(--bl-grafite-700);
}

.bl-so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Sem esta regra o atalho nunca aparecia: quem chega de teclado tabulava
   para uma caixa de 1x1 px clipada e nao via destino nenhum. O `:focus`
   visivel e o proposito inteiro de um skip link — clipado ele e so um
   item a mais na ordem de tabulacao. Cor crua e nao semantica: o tema e
   fixo em claro, mas token de tema inverteria isto se um dia mudar. */
.bl-so-leitor:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
  top: var(--bl-e2); left: var(--bl-e2); z-index: 100;
  padding: .7em 1.2em; border-radius: 6px; text-decoration: none;
  background: var(--bl-grafite-900); color: var(--bl-branco);
}

/* Estado inicial da revelacao. Guardado por html.js: sem JS nada some. */
html.js [data-revelar] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .52s cubic-bezier(.22,.61,.36,1),
              transform .52s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(min(var(--i, 0) * 60ms, 240ms));
}
html.js [data-revelar].visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-revelar] { opacity: 1; transform: none; transition: none; }
}