/* =============================================================================
   B2 Rocket Layout — Alex Barbosa
   Identidade: preto, dourado do logo, linguagem técnica.

   Os tokens abaixo comandam o site inteiro. A cor principal e a escura saíram
   do próprio arquivo do logo (#FFD426 no "a" e #C7790A na base do "b"), por
   isso o logo assenta no fundo sem parecer colado.

   O fundo não é #000: preto absoluto com texto branco puro produz halo na
   leitura longa, e este site é um acervo de textos longos. #0B0B0C lê como
   preto e não cansa. Quem quiser o preto absoluto troca uma linha.
   ========================================================================== */

:root{
  /* marca */
  --brl-cor:        #FFD426;   /* dourado do logo: links, botões, destaques */
  --brl-cor-escura: #C7790A;   /* âmbar da base do logo: hover e detalhes */
  --brl-cor-viva:   #FFE066;   /* hover do botão cheio */
  --brl-cor-clara:  rgba(255,212,38,.10);

  /* texto e fundo */
  --brl-texto:      #ECECEE;
  --brl-texto-corpo:#D7D7DC;   /* corpo de artigo: um passo abaixo do branco */
  --brl-texto-fraco:#9A9AA4;
  --brl-fundo:      #0B0B0C;
  --brl-fundo-alt:  #141416;
  --brl-fundo-3:    #1B1B1F;
  --brl-borda:      #26262A;

  /* tipografia */
  --brl-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brl-fonte-titulo: "Space Grotesk", var(--brl-fonte);
  --brl-fonte-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* medidas */
  --brl-largura: 1180px;
  --brl-leitura: 720px;   /* largura de leitura do artigo */
  --brl-raio: 2px;        /* quase reto: canto redondo amolece o visual técnico */
  --brl-gap: 24px;
}

/* ----------------------------------------------------------------- base --- */

*,*::before,*::after{ box-sizing:border-box }

body{
  margin:0;
  font-family:var(--brl-fonte);
  font-size:17px; line-height:1.65;
  color:var(--brl-texto); background:var(--brl-fundo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--brl-fonte-titulo);
  line-height:1.12; margin:0 0 .5em;
  font-weight:600; letter-spacing:-.02em;
}
h1{ font-size:clamp(32px,5vw,54px) }
h2{ font-size:clamp(24px,3.2vw,34px) }
h3{ font-size:19px; letter-spacing:-.01em }
p{ margin:0 0 1em }

a{ color:var(--brl-cor); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px }
img{ max-width:100%; height:auto; display:block }
hr{ border:0; border-top:1px solid var(--brl-borda); margin:40px 0 }

::selection{ background:var(--brl-cor); color:#0B0B0C }

:focus-visible{ outline:2px solid var(--brl-cor); outline-offset:3px }

/* O layout não carrega o style.css do tema, então a classe que o WordPress usa
   para rótulo de leitor de tela precisa existir aqui. Sem ela, o "Buscar no
   site" dos formulários apareceria na tela. */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}

.brl-wrap{ max-width:var(--brl-largura); margin:0 auto; padding:0 20px }
.brl-lead{ font-size:1.14em; color:var(--brl-texto-fraco); line-height:1.6 }

/* Link de pular para o conteúdo: invisível até receber foco pelo teclado. */
.brl-pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brl-cor); color:#0B0B0C; padding:10px 16px; font-weight:600;
}
.brl-pular:focus{ left:8px; top:8px }

/* --------------------------------------------------------------- rótulo ---
   Etiqueta de seção em monoespaçada, com as duas barras de comentário de
   código. É o elemento que mais carrega o tom tecnológico, e custa nada. */

.brl-rotulo{
  display:block; font-family:var(--brl-fonte-mono);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brl-cor); margin:0 0 14px;
}
.brl-rotulo::before{ content:"// "; opacity:.45 }

.brl-mono{ font-family:var(--brl-fonte-mono); font-size:12.5px; letter-spacing:.08em }

/* --------------------------------------------------------------- botões --- */

.brl-btn{
  display:inline-block; padding:13px 24px; border-radius:var(--brl-raio);
  font-family:var(--brl-fonte-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.2;
  border:1px solid var(--brl-cor); color:var(--brl-cor); background:transparent;
  cursor:pointer; text-decoration:none;
  transition:background .18s, color .18s, box-shadow .18s, transform .18s;
}
.brl-btn:hover{
  background:var(--brl-cor-clara); text-decoration:none;
  box-shadow:0 0 26px rgba(255,212,38,.16);
}
.brl-btn-cta{ background:var(--brl-cor); color:#0B0B0C; font-weight:600; border-color:var(--brl-cor) }
.brl-btn-cta:hover{ background:var(--brl-cor-viva); color:#0B0B0C; box-shadow:0 0 32px rgba(255,212,38,.32) }
.brl-btn-fraco{ border-color:var(--brl-borda); color:var(--brl-texto) }
.brl-btn-fraco:hover{ border-color:var(--brl-cor); color:var(--brl-cor) }

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

.brl-hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--brl-borda);
}
.brl-hdr-in{ display:flex; align-items:center; gap:var(--brl-gap); min-height:80px }

/* Barra de leitura: só o artigo a alimenta, pelo JS. */
.brl-progresso{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--brl-cor-escura),var(--brl-cor));
  transition:width .1s linear;
}

/* Altura fixa, não max-height: com height o navegador não depende dos
   atributos width/height do arquivo, que variam conforme o logo trocado no
   Personalizar. */
.brl-logo{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto }
.brl-logo img{ height:39px; width:auto; max-width:300px; object-fit:contain }
@media (max-width:980px){ .brl-logo img{ height:34px } }
.brl-logo-txt{ font-family:var(--brl-fonte-titulo); font-weight:600; font-size:19px; color:var(--brl-texto) }

.brl-nav{ margin-left:auto }
.brl-menu{ display:flex; gap:26px; list-style:none; margin:0; padding:0; align-items:center }
.brl-menu > li > a{
  font-family:var(--brl-fonte-mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brl-texto-fraco); padding:6px 0;
  position:relative; display:inline-block;
}
.brl-menu > li > a:hover,
.brl-menu > li.current-menu-item > a{ color:var(--brl-cor); text-decoration:none }
/* Traço que cresce da esquerda: o lugar certo para um efeito, porque
   acontece sob o dedo e não distrai quem está lendo. */
.brl-menu > li > a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brl-cor); transition:width .2s ease;
}
.brl-menu > li > a:hover::after,
.brl-menu > li.current-menu-item > a::after{ width:100% }

.brl-menu li{ position:relative }
.brl-menu .sub-menu{
  position:absolute; top:100%; left:0; min-width:230px;
  display:none; list-style:none; margin:0; padding:6px 0;
  background:var(--brl-fundo-alt); border:1px solid var(--brl-borda);
  border-radius:var(--brl-raio); box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.brl-menu li:hover > .sub-menu, .brl-menu li:focus-within > .sub-menu{ display:block }
.brl-menu .sub-menu a{
  display:block; padding:10px 16px; color:var(--brl-texto-fraco); font-size:14px;
}
.brl-menu .sub-menu a:hover{ color:var(--brl-cor); background:var(--brl-cor-clara); text-decoration:none }

.brl-burger{
  display:none; background:none; border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  cursor:pointer; width:44px; height:40px; padding:9px 10px; margin-left:auto;
}
.brl-burger span{ display:block; height:1.5px; background:var(--brl-cor); margin:4px 0 }

.brl-gaveta{ display:none; border-bottom:1px solid var(--brl-borda); background:var(--brl-fundo-alt) }
.brl-gaveta[hidden]{ display:none }
.brl-gaveta.is-on{ display:block }
.brl-gaveta ul{ list-style:none; margin:0; padding:4px 20px 18px }
.brl-gaveta li{ border-bottom:1px solid var(--brl-borda) }
.brl-gaveta a{
  display:block; padding:14px 0; color:var(--brl-texto);
  font-family:var(--brl-fonte-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.brl-gaveta .sub-menu{ padding:0 0 8px 14px }
.brl-gaveta .sub-menu a{ text-transform:none; letter-spacing:0; font-size:14px; color:var(--brl-texto-fraco) }

@media (max-width:980px){
  .brl-nav, .brl-hdr-in .brl-btn{ display:none }
  .brl-burger{ display:block }
}

/* --------------------------------------------------------------- seções --- */

.brl-sec{ padding:72px 0; position:relative }
.brl-sec + .brl-sec{ border-top:1px solid var(--brl-borda) }
.brl-sec-topo{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px }
.brl-sec-topo h2{ margin:0 }
.brl-sec-topo p{ margin:10px 0 0; color:var(--brl-texto-fraco); max-width:60ch }
/* No celular o botão ao lado espremia o título numa coluna de três palavras. */
@media (max-width:760px){
  .brl-sec-topo{ flex-direction:column; align-items:flex-start }
}

/* ------------------------------------------------------------------ hero ---
   A grade de fundo e o brilho dourado fazem o trabalho "futurista" aqui, uma
   vez só, no topo. Repetir isso em todas as seções vira ruído. */

.brl-hero{
  position:relative; overflow:hidden;
  padding:clamp(60px,9vw,108px) 0 clamp(52px,7vw,84px);
  border-bottom:1px solid var(--brl-borda);
}
.brl-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
}
.brl-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 70% at 12% 0%, rgba(255,212,38,.13), transparent 68%);
}
.brl-hero > *{ position:relative; z-index:1 }

.brl-hero-in{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:48px; align-items:center }
@media (max-width:900px){ .brl-hero-in{ grid-template-columns:1fr; gap:36px } }

.brl-hero h1{ margin-bottom:.25em }
.brl-hero-cargo{
  font-family:var(--brl-fonte-mono); font-size:clamp(13px,1.6vw,15px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--brl-cor);
  margin:0 0 22px;
}
.brl-hero-txt p{ max-width:56ch; color:var(--brl-texto-fraco); font-size:1.08em }
.brl-hero-acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }

/* Painel de números, no lugar da foto de banco de imagens. */
.brl-painel{ border:1px solid var(--brl-borda); background:var(--brl-fundo-alt); border-radius:var(--brl-raio) }
.brl-painel-topo{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--brl-borda);
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brl-texto-fraco);
}
.brl-painel-topo::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--brl-cor);
  box-shadow:0 0 10px var(--brl-cor);
}
.brl-painel-linha{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:15px 16px }
.brl-painel-linha + .brl-painel-linha{ border-top:1px solid var(--brl-borda) }
.brl-painel-rot{ font-size:14px; color:var(--brl-texto-fraco) }
.brl-painel-val{ font-family:var(--brl-fonte-titulo); font-size:17px; font-weight:600; color:var(--brl-texto) }

/* ---------------------------------------------------------------- cards --- */

.brl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:var(--brl-gap) }

.brl-card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  background:var(--brl-fundo-alt); color:inherit; overflow:hidden;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
a.brl-card:hover{
  border-color:var(--brl-cor); text-decoration:none; transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.brl-card-img{ aspect-ratio:16/9; overflow:hidden; background:var(--brl-fundo-3); border-bottom:1px solid var(--brl-borda) }
.brl-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s, filter .3s; filter:saturate(.85) }
a.brl-card:hover .brl-card-img img{ transform:scale(1.04); filter:saturate(1) }
.brl-card-txt{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1 }
.brl-card h3{ margin:0; color:var(--brl-texto); font-size:18px; line-height:1.3 }
a.brl-card:hover h3{ color:var(--brl-cor) }
.brl-card p{ margin:0; color:var(--brl-texto-fraco); font-size:14.5px; line-height:1.55 }
.brl-card-tag{
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brl-cor-escura);
}

/* Cantos de HUD, só no hover: dá o toque de interface sem poluir a página
   parada. */
.brl-card::before,.brl-card::after{
  content:""; position:absolute; width:11px; height:11px;
  border:1px solid var(--brl-cor); opacity:0; transition:opacity .2s; pointer-events:none;
}
.brl-card::before{ top:5px; left:5px; border-right:0; border-bottom:0 }
.brl-card::after{ bottom:5px; right:5px; border-left:0; border-top:0 }
a.brl-card:hover::before, a.brl-card:hover::after{ opacity:1 }

/* ----------------------------------------------------------- lista índice ---
   O acervo não tem imagem nenhuma. Em vez de fingir cards vazios, ele vira
   índice numerado: é o formato que lista longa sem imagem pede. */

.brl-lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--brl-borda) }
.brl-lista li{ border-bottom:1px solid var(--brl-borda) }
.brl-lista a{
  display:grid; grid-template-columns:62px 1fr auto; align-items:baseline; gap:16px;
  padding:16px 14px; color:var(--brl-texto); position:relative;
  transition:background .18s, padding-left .18s;
}
.brl-lista a::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brl-cor); transform:scaleY(0); transform-origin:top;
  transition:transform .2s ease;
}
.brl-lista a:hover{ background:var(--brl-fundo-alt); text-decoration:none; padding-left:20px }
.brl-lista a:hover::before{ transform:scaleY(1) }
.brl-lista a:hover .brl-lista-tit{ color:var(--brl-cor) }
.brl-lista-num{
  font-family:var(--brl-fonte-mono); font-size:12px; letter-spacing:.1em;
  color:var(--brl-cor-escura);
}
.brl-lista-tit{ font-size:16.5px; line-height:1.4; transition:color .18s }
.brl-lista-cat{
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brl-texto-fraco); white-space:nowrap;
}
@media (max-width:700px){
  .brl-lista a{ grid-template-columns:44px 1fr; gap:12px }
  .brl-lista-cat{ display:none }
}

/* ------------------------------------------------------------- consultor --- */

.brl-consultor-topo{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:48px; align-items:center }
@media (max-width:900px){ .brl-consultor-topo{ grid-template-columns:1fr } }

/* A foto é colorida e informal. Em cinza com um véu dourado ela entra no
   sistema do site em vez de brigar com ele, e volta a cor no hover. */
.brl-retrato{ position:relative; border:1px solid var(--brl-borda); border-radius:var(--brl-raio) }
.brl-retrato img{
  width:100%; filter:grayscale(1) contrast(1.06) brightness(.94);
  transition:filter .45s ease;
}
.brl-retrato:hover img{ filter:grayscale(0) contrast(1) brightness(1) }
.brl-retrato-veu{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,212,38,.20), transparent 52%),
             linear-gradient(0deg, rgba(11,11,12,.55), transparent 45%);
  mix-blend-mode:screen; transition:opacity .45s;
}
.brl-retrato:hover .brl-retrato-veu{ opacity:.25 }
.brl-retrato::before,.brl-retrato::after{
  content:""; position:absolute; width:26px; height:26px;
  border:1px solid var(--brl-cor); pointer-events:none;
}
.brl-retrato::before{ top:-1px; left:-1px; border-right:0; border-bottom:0 }
.brl-retrato::after{ bottom:-1px; right:-1px; border-left:0; border-top:0 }
/* A legenda precisa de fundo próprio: o véu dourado usa mix-blend-mode e
   clareia justamente a faixa de baixo, onde ela fica. */
.brl-retrato-cap{
  position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px;
  background:linear-gradient(0deg, rgba(11,11,12,.92), rgba(11,11,12,0));
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brl-cor); z-index:2;
}

.brl-blocos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--brl-gap) }
.brl-bloco{
  position:relative; padding:26px 24px 26px 26px;
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  background:var(--brl-fundo-alt);
}
.brl-bloco::before{
  content:""; position:absolute; left:-1px; top:18px; bottom:18px; width:2px; background:var(--brl-cor);
}
.brl-bloco h3{ color:var(--brl-texto); margin-bottom:.4em }
.brl-bloco p{ margin:0; color:var(--brl-texto-fraco); font-size:15px }

/* Trajetória: linha do tempo em coluna, com marcador dourado. */
.brl-trilha{ list-style:none; margin:0; padding:0; border-left:1px solid var(--brl-borda) }
.brl-trilha li{ position:relative; padding:0 0 26px 26px }
.brl-trilha li:last-child{ padding-bottom:0 }
.brl-trilha li::before{
  content:""; position:absolute; left:-4.5px; top:7px; width:8px; height:8px;
  background:var(--brl-cor); border-radius:50%; box-shadow:0 0 0 4px var(--brl-fundo), 0 0 14px rgba(255,212,38,.6);
}
.brl-trilha-casa{ font-family:var(--brl-fonte-titulo); font-weight:600; font-size:17px; color:var(--brl-texto) }
.brl-trilha-cargo{ color:var(--brl-texto-fraco); font-size:15px }
.brl-trilha-per{
  font-family:var(--brl-fonte-mono); font-size:11.5px; letter-spacing:.12em;
  color:var(--brl-cor-escura); text-transform:uppercase;
}

/* ------------------------------------------------------------- números --- */
/* A grade com gap de 1px sobre fundo de borda cria as divisórias sem uma
   borda por célula, que dobraria de espessura nos encontros. */

.brl-numeros{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px; background:var(--brl-borda);
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio); overflow:hidden;
}
.brl-numero{ background:var(--brl-fundo-alt); padding:24px 22px }
.brl-numero-val{
  font-family:var(--brl-fonte-titulo); font-weight:700; line-height:1;
  font-size:clamp(30px,4vw,42px); color:var(--brl-cor);
}
.brl-numero-val small{ font-size:.5em; margin-left:4px; color:var(--brl-texto-fraco); font-weight:500 }
.brl-numero-rot{
  display:block; margin-top:12px;
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brl-texto-fraco); line-height:1.5;
}

/* ------------------------------------------------------ linha do tempo --- */

.brl-gantt{ display:flex; flex-direction:column }
.brl-gantt-linha{
  display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px;
  align-items:center; padding:14px 0; border-top:1px solid var(--brl-borda);
}
.brl-gantt-linha:first-child{ border-top:0 }
.brl-gantt-rot{ display:flex; flex-direction:column; gap:3px }
.brl-gantt-casa{ font-family:var(--brl-fonte-titulo); font-weight:600; font-size:16px; color:var(--brl-texto) }
.brl-gantt-cargo{ font-size:13.5px; color:var(--brl-texto-fraco); line-height:1.4 }
.brl-gantt-per{
  font-family:var(--brl-fonte-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brl-cor-escura); margin-top:2px;
}
.brl-gantt-faixa{ position:relative; height:30px }
.brl-gantt-barra{
  position:absolute; top:9px; height:12px; border-radius:6px;
  background:linear-gradient(90deg,var(--brl-cor-escura),var(--brl-cor));
  box-shadow:0 0 20px rgba(255,212,38,.22);
}
/* A passagem atual não termina: a ponta direita fica acesa. */
.is-atual .brl-gantt-barra::after{
  content:""; position:absolute; right:-3px; top:-3px; width:18px; height:18px;
  border-radius:50%; background:var(--brl-cor); box-shadow:0 0 18px rgba(255,212,38,.75);
}
.brl-gantt-eixo{ border-top:1px solid var(--brl-borda); padding:6px 0 0 }
.brl-gantt-eixo .brl-gantt-faixa{ height:22px }
.brl-gantt-ano{
  position:absolute; top:2px; transform:translateX(-50%);
  font-family:var(--brl-fonte-mono); font-size:11px; color:var(--brl-texto-fraco);
}
@media (max-width:820px){
  .brl-gantt-linha{ grid-template-columns:1fr; gap:10px; padding:16px 0 }
  .brl-gantt-faixa{ height:22px }
  .brl-gantt-barra{ top:5px }
  .brl-gantt-eixo .brl-gantt-rot{ display:none }
}

/* ---------------------------------------------------------- barras ------- */

.brl-barras{ display:flex; flex-direction:column; gap:16px }
.brl-barra-linha{ display:grid; grid-template-columns:210px minmax(0,1fr) 96px; gap:20px; align-items:center }
.brl-barra-rot{ font-size:15.5px; color:var(--brl-texto) }
.brl-barra-rot small{
  display:block; font-family:var(--brl-fonte-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brl-texto-fraco); margin-top:3px;
}
.brl-barra-trilho{
  display:block; height:10px; border-radius:5px;
  background:var(--brl-fundo-3); border:1px solid var(--brl-borda); overflow:hidden;
}
.brl-barra-fill{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--brl-cor-escura),var(--brl-cor));
}
.brl-barra-val{ font-family:var(--brl-fonte-titulo); font-weight:600; font-size:20px; color:var(--brl-cor); text-align:right }
.brl-barra-val small{
  font-family:var(--brl-fonte-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brl-texto-fraco); margin-left:6px;
}
@media (max-width:700px){
  .brl-barra-linha{ grid-template-columns:1fr 78px; gap:10px 14px }
  .brl-barra-rot{ grid-column:1/-1 }
}

/* ---------------------------------------------------------- vitrine ------ */
/* Doze cards numa home que é de conteúdo: o card é compacto de propósito, para
   a vitrine ser uma faixa e não tomar a página. */

.brl-vitrine{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px }

.brl-item{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  background:var(--brl-fundo-alt); color:inherit; overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.brl-item:hover{ border-color:var(--brl-cor); text-decoration:none; transform:translateY(-2px) }

.brl-item-pos{
  position:absolute; top:8px; left:8px; z-index:2;
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.08em;
  background:rgba(11,11,12,.82); color:var(--brl-cor);
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio); padding:3px 7px;
}
/* Imagem de produto costuma vir com fundo claro próprio: contain sobre uma
   superfície neutra evita o corte no logotipo. */
.brl-item-img{ display:block; aspect-ratio:16/9; background:var(--brl-fundo-3); border-bottom:1px solid var(--brl-borda) }
.brl-item-img img{ width:100%; height:100%; object-fit:cover }

.brl-item-txt{ display:flex; flex-direction:column; gap:6px; padding:14px 14px 16px; flex:1 }
.brl-item-nome{ font-family:var(--brl-fonte-titulo); font-weight:600; font-size:15.5px; color:var(--brl-texto); line-height:1.25 }
.brl-item:hover .brl-item-nome{ color:var(--brl-cor) }
.brl-item-tag{ font-size:13px; color:var(--brl-texto-fraco); line-height:1.4 }

.brl-item-nota{
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.06em;
  color:var(--brl-cor-escura); display:flex; align-items:center; gap:6px;
}
.brl-item-nota::before{ content:"★"; font-size:12px; letter-spacing:0 }
.brl-item-nota small{ color:var(--brl-texto-fraco); letter-spacing:.08em }

.brl-item-preco{ margin-top:auto; padding-top:10px; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px }
.brl-item-preco strong{ font-family:var(--brl-fonte-titulo); font-size:18px; color:var(--brl-texto) }
.brl-item-preco del{ font-size:12.5px; color:var(--brl-texto-fraco) }
.brl-item-ver{ font-family:var(--brl-fonte-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brl-cor); font-weight:500 }
.brl-item-preco em{
  font-style:normal; font-family:var(--brl-fonte-mono); font-size:10.5px; letter-spacing:.06em;
  color:#0B0B0C; background:var(--brl-cor); border-radius:var(--brl-raio); padding:2px 6px;
}

.brl-vitrine-nota{
  margin:18px 0 0; font-family:var(--brl-fonte-mono); font-size:11px;
  letter-spacing:.06em; color:var(--brl-texto-fraco);
}

/* --------------------------------------------------------- produtos ------ */

.brl-produtos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--brl-gap) }
.brl-produto{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px;
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  background:var(--brl-fundo-alt); padding:30px 28px;
  transition:border-color .2s, transform .2s;
}
.brl-produto::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 100% at 100% 0%, rgba(255,212,38,.13), transparent 62%);
}
.brl-produto:hover{ border-color:var(--brl-cor); transform:translateY(-3px) }
.brl-produto > *{ position:relative; z-index:1 }
.brl-produto-linha{
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brl-cor);
}
.brl-produto h3{ margin:0; font-size:23px; color:var(--brl-texto) }
.brl-produto p{ margin:0; color:var(--brl-texto-fraco); font-size:15px }
.brl-produto-itens{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.brl-produto-itens li{
  font-family:var(--brl-fonte-mono); font-size:11px; letter-spacing:.06em;
  color:var(--brl-texto-fraco); border:1px solid var(--brl-borda);
  border-radius:999px; padding:5px 11px;
}
.brl-produto-link{ margin-top:auto; padding-top:6px }

/* --------------------------------------------------------- formação ------ */

.brl-form{ list-style:none; margin:0; padding:0; border-top:1px solid var(--brl-borda) }
.brl-form li{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px;
  padding:18px 0; border-bottom:1px solid var(--brl-borda);
}
.brl-form-per{
  font-family:var(--brl-fonte-mono); font-size:11.5px; letter-spacing:.12em;
  color:var(--brl-cor-escura); padding-top:3px;
}
.brl-form-curso{ font-family:var(--brl-fonte-titulo); font-weight:600; font-size:17px; display:block }
.brl-form-casa{ color:var(--brl-texto-fraco); font-size:14.5px }
@media (max-width:700px){
  .brl-form li{ grid-template-columns:1fr; gap:4px }
}

/* ---------------------------------------------------------------- posts --- */

.brl-post-topo{ padding:56px 0 26px; border-bottom:1px solid var(--brl-borda); margin-bottom:40px }
/* Em px, não em ch: a unidade ch se resolve pelo tamanho de fonte DO
   ELEMENTO, e num div de 17px "28ch" dá 240px, o que quebrava o h1 de 54px em
   uma palavra por linha. */
.brl-post-cab{ max-width:880px }
.brl-post-topo h1{ margin-bottom:0 }

/* O artigo ocupa a mesma largura do cabeçalho do site. A coluna de leitura
   continua existindo, mas agora pelo trilho da direita: é ele que segura a
   linha num comprimento legível em vez de uma margem vazia dos dois lados. */
.brl-post-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start }
@media (max-width:1040px){ .brl-post-grid{ grid-template-columns:1fr; gap:40px } }

.brl-trilho{ position:sticky; top:96px; display:flex; flex-direction:column; gap:18px }
@media (max-width:1040px){ .brl-trilho{ position:static } }
.brl-trilho-card{
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  background:var(--brl-fundo-alt); padding:22px;
}
.brl-trilho-card h3{ font-size:16px; margin-bottom:.5em }
.brl-trilho-card p{ margin:0 0 14px; color:var(--brl-texto-fraco); font-size:14.5px; line-height:1.55 }
.brl-trilho-autor{ display:flex; align-items:center; gap:14px; margin-bottom:16px }
.brl-trilho-autor img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); border:1px solid var(--brl-borda);
}
.brl-trilho-nome{ font-family:var(--brl-fonte-titulo); font-weight:600; font-size:16px }
.brl-trilho-cargo{
  font-family:var(--brl-fonte-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brl-cor-escura);
}
.brl-post-meta{
  display:flex; flex-wrap:wrap; gap:18px; margin:18px 0 0;
  font-family:var(--brl-fonte-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brl-texto-fraco);
}
.brl-post-meta a{ color:var(--brl-cor-escura) }
.brl-post-capa{ margin:0 0 36px }
.brl-post-capa img{ border:1px solid var(--brl-borda); border-radius:var(--brl-raio); width:100% }

.brl-prosa{ padding-bottom:64px; color:var(--brl-texto-corpo); font-size:18px; line-height:1.78 }
/* Parágrafo e lista param antes da borda da coluna: linha muito longa cansa
   mesmo num site largo. Imagem, tabela e código usam a coluna inteira. */
.brl-prosa > p,.brl-prosa > ul,.brl-prosa > ol,.brl-prosa > blockquote,
.brl-prosa > h2,.brl-prosa > h3{ max-width:72ch }
.brl-prosa h2{ margin-top:1.7em; color:var(--brl-texto) }
.brl-prosa h3{ margin-top:1.5em; color:var(--brl-texto); font-size:21px }
.brl-prosa a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.brl-prosa img{ border-radius:var(--brl-raio); margin:30px 0; border:1px solid var(--brl-borda) }
.brl-prosa ul,.brl-prosa ol{ padding-left:22px }
.brl-prosa li{ margin-bottom:.5em }
.brl-prosa ul li::marker{ color:var(--brl-cor) }
.brl-prosa blockquote{
  margin:30px 0; padding:6px 0 6px 22px;
  border-left:2px solid var(--brl-cor); color:var(--brl-texto-fraco); font-style:normal;
}
.brl-prosa code{
  font-family:var(--brl-fonte-mono); font-size:.88em;
  background:var(--brl-fundo-3); border:1px solid var(--brl-borda);
  border-radius:var(--brl-raio); padding:2px 6px; color:var(--brl-cor);
}
.brl-prosa pre{
  background:var(--brl-fundo-alt); border:1px solid var(--brl-borda);
  border-radius:var(--brl-raio); padding:18px; overflow:auto;
}
.brl-prosa pre code{ background:none; border:0; padding:0; color:var(--brl-texto-corpo) }
.brl-prosa table{ width:100%; border-collapse:collapse; margin:28px 0; font-size:15.5px }
.brl-prosa th,.brl-prosa td{ border:1px solid var(--brl-borda); padding:10px 12px; text-align:left }
.brl-prosa th{ background:var(--brl-fundo-alt); font-family:var(--brl-fonte-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brl-texto-fraco) }
.brl-prosa iframe,.brl-prosa video{ max-width:100%; border-radius:var(--brl-raio) }

/* Rodapé do artigo: o que ler em seguida. */
.brl-pos-artigo{ border-top:1px solid var(--brl-borda); padding:56px 0 }

/* ---------------------------------------------------------- paginação ----- */

.brl-pag{ display:flex; flex-wrap:wrap; gap:8px; margin-top:44px; justify-content:center }
.brl-pag a,.brl-pag span{
  display:inline-block; min-width:42px; text-align:center;
  padding:10px 12px; border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  font-family:var(--brl-fonte-mono); font-size:12.5px; color:var(--brl-texto-fraco);
}
.brl-pag a:hover{ border-color:var(--brl-cor); color:var(--brl-cor); text-decoration:none }
.brl-pag .current{ border-color:var(--brl-cor); color:#0B0B0C; background:var(--brl-cor); font-weight:600 }

/* ------------------------------------------------------------- formulário --
   Só o campo de busca. O site não tem formulário de contato: o canal é o
   e-mail, por decisão do dono. */

.brl-busca{ display:flex; gap:10px; max-width:520px }
.brl-busca input[type=search],.brl-busca input[type=text]{
  flex:1; background:var(--brl-fundo-alt); border:1px solid var(--brl-borda);
  border-radius:var(--brl-raio); color:var(--brl-texto); padding:13px 14px;
  font-family:var(--brl-fonte); font-size:15px;
}
.brl-busca input::placeholder{ color:#6C6C76 }
.brl-busca input:focus{ outline:none; border-color:var(--brl-cor); box-shadow:0 0 0 3px var(--brl-cor-clara) }

.brl-email{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--brl-fonte-mono); font-size:clamp(15px,2.4vw,20px); letter-spacing:.02em;
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  padding:16px 22px; background:var(--brl-fundo-alt); color:var(--brl-cor);
  transition:border-color .2s, box-shadow .2s;
}
.brl-email:hover{ border-color:var(--brl-cor); text-decoration:none; box-shadow:0 0 30px rgba(255,212,38,.14) }

/* ---------------------------------------------------------------- faixa --- */

.brl-faixa{
  position:relative; overflow:hidden;
  border:1px solid var(--brl-borda); border-radius:var(--brl-raio);
  background:var(--brl-fundo-alt); padding:clamp(32px,5vw,56px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center;
}
.brl-faixa::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 100% 0%, rgba(255,212,38,.12), transparent 62%);
}
.brl-faixa > *{ position:relative; z-index:1 }
.brl-faixa h2{ margin:0 0 .35em }
.brl-faixa p{ margin:0; color:var(--brl-texto-fraco); max-width:54ch }
@media (max-width:760px){ .brl-faixa{ grid-template-columns:1fr } }

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

.brl-ft{ background:var(--brl-fundo-alt); border-top:1px solid var(--brl-borda); padding:56px 0 24px; margin-top:0 }
.brl-ft-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px }
@media (max-width:760px){ .brl-ft-top{ grid-template-columns:1fr } }
.brl-ft-logo img{ height:34px; width:auto; margin-bottom:16px; object-fit:contain }
.brl-ft-sobre p{ color:var(--brl-texto-fraco); font-size:15px; max-width:40ch }
.brl-ft h4{
  font-family:var(--brl-fonte-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.2em; color:var(--brl-cor); margin:0 0 14px;
}
.brl-ft-menu{ list-style:none; margin:0; padding:0 }
.brl-ft-menu li{ margin-bottom:9px }
.brl-ft-menu a{ color:var(--brl-texto-fraco); font-size:15px }
.brl-ft-menu a:hover{ color:var(--brl-cor) }
.brl-ft-txt{ color:var(--brl-texto-fraco); font-size:15px }
.brl-ft-txt p{ margin:0 0 8px }
.brl-ft-bot{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  border-top:1px solid var(--brl-borda); margin-top:40px; padding-top:20px;
  font-family:var(--brl-fonte-mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--brl-texto-fraco);
}
.brl-ft-bot p{ margin:0 }
.brl-ft-bot a{ color:var(--brl-texto-fraco) }
.brl-ft-bot a:hover{ color:var(--brl-cor) }

/* ------------------------------------------------------------ busca e 404 --- */

.brl-vazio{ padding:40px 0 0; max-width:60ch }
.brl-vazio p{ color:var(--brl-texto-fraco) }

.brl-404{ padding:clamp(70px,12vw,130px) 0; max-width:60ch }
.brl-404 .brl-codigo{
  font-family:var(--brl-fonte-mono); font-size:clamp(60px,14vw,140px); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--brl-cor-escura); margin:0 0 18px;
}

/* --------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .brl-lista a:hover{ padding-left:14px }
  a.brl-card:hover{ transform:none }
}