/* /brand — casca da página: hero, seções em fluxo sobre a grade da home (4 colunas de
   280u com calha de 16u dentro de --gutter), cabeçalhos, trilho de capítulos e o quadro
   final. Os blocos do manual (capítulo, seção, vagas, molduras) estão em manual.css; a
   identidade em uso (raio, lockups, cores, tipos, diagramas) em identidade.css. */

/* ---------------------------------------------------------------- gate pré-boot */
html:not(.is-ready):not(.is-shot) .br-rv{visibility:hidden}
html:not(.is-ready):not(.is-shot) .br-hero__stats,
html:not(.is-ready):not(.is-shot) .br-hero__cadeia,
html:not(.is-ready):not(.is-shot) .br-hero__dica{visibility:hidden}

/* ---------------------------------------------------------------- seção */
.br-sec{
  position:relative; z-index:3;
  padding:calc(118 * var(--vhu)) var(--gutter) calc(118 * var(--vhu));
}
.br-sec--dark{background:#0C0C0C; color:#fff}
.br-sec--light{background:#fff; color:#0C0C0C}
.br-sec--grey{background:#F5F5F5; color:#0C0C0C}

.br-grid{display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u))}

/* ---------------------------------------------------------------- cabeçalho de seção (label · h2 · lead) */
.br-head{display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u))}
.br-head__label{grid-column:1; grid-row:1; align-self:start; font-size:calc(8 * var(--u)); color:#6E6E6E}
.br-sec--dark .br-head__label{color:#8A8A8A}
.br-head__h2{grid-column:2 / span 3; grid-row:1; font-size:calc(52 * var(--u)); line-height:calc(58 * var(--vhu)); color:#0C0C0C}
.br-sec--dark .br-head__h2{color:#fff}
.br-head__h2 span{display:block; width:fit-content}
.br-head__h2 .dim{color:#A9A9A9}
.br-sec--dark .br-head__h2 .dim{color:#555}
.br-head__lead{
  grid-column:2 / span 2; grid-row:2;
  width:calc(500 * var(--u)); margin-top:calc(34 * var(--vhu));
  font-size:calc(13 * var(--u)); line-height:calc(17.4 * var(--vhu)); color:#2E2E2E;
}
.br-sec--dark .br-head__lead{color:#C2C2C2}

/* ---------------------------------------------------------------- pílula e chips */
.br-pill{
  border:1px solid #DADADA; color:#0C0C0C; height:calc(32 * var(--vhu)); padding:0 calc(20 * var(--u));
  font-size:calc(9 * var(--u)); transition:background-color .25s ease, color .25s ease, border-color .25s ease; cursor:none;
}
.br-pill:hover{background:#0C0C0C; color:#fff; border-color:#0C0C0C}
.br-sec--dark .br-pill{border-color:rgba(255,255,255,.45); color:#fff}
.br-sec--dark .br-pill:hover{background:#fff; color:#0C0C0C; border-color:#fff}

/* estado de uma seção ou de uma vaga: rótulo mono com um quadrado de cor (sem cápsula) */
.br-chip{
  display:inline-flex; align-items:center; gap:calc(6 * var(--u));
  font-family:var(--font-mono); font-size:calc(7 * var(--u)); font-weight:500; line-height:1;
  letter-spacing:.1em; text-transform:uppercase; color:#6E6E6E; white-space:nowrap;
}
.br-chip::before{content:''; flex:none; width:calc(5 * var(--u)); height:calc(5 * var(--u)); background:currentColor}
.br-chip--definido{color:#0C0C0C}
.br-chip--preliminar{color:#0C0C0C}
.br-chip--preliminar::before{background:transparent; box-shadow:inset 0 0 0 1px currentColor}
.br-chip--em-uso{color:#1A6B3D}
.br-chip--proposta{color:#0A16C8}
.br-chip--vaga{color:#8A8A8A}
.br-chip--vaga::before{background:transparent; box-shadow:inset 0 0 0 1px currentColor}
.br-chip--n{color:#0C0C0C}
.br-chip--n::before{display:none}
.br-sec--dark .br-chip{color:#9A9A9A}
.br-sec--dark .br-chip--definido, .br-sec--dark .br-chip--preliminar, .br-sec--dark .br-chip--n{color:#fff}
.br-sec--dark .br-chip--em-uso{color:#94F2CC}
.br-sec--dark .br-chip--proposta{color:#8F9BFF}
.br-sec--dark .br-chip--vaga{color:#6E6E6E}

/* ================================================================= HERO */
#br-hero{
  position:relative; z-index:2;
  min-height:100vh;
  background:#0C0C0C; color:#fff;
  padding:calc(126 * var(--vhu)) var(--gutter) calc(56 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
  grid-template-rows:1fr auto;
  overflow:clip;
}
#br-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 74% 46%, rgba(79,168,69,.16) 0%, rgba(79,168,69,0) 70%),
    radial-gradient(ellipse 40% 45% at 18% 30%, rgba(10,22,200,.22) 0%, rgba(10,22,200,0) 70%);
}
#br-hero > *{position:relative}
.br-hero__copy{grid-column:1 / span 2; grid-row:1; align-self:start; padding-right:calc(30 * var(--u))}
.br-hero__eyebrow{font-size:calc(8 * var(--u)); color:#8A8A8A; margin-bottom:calc(24 * var(--vhu))}
.br-hero__title{font-size:calc(58 * var(--u)); line-height:calc(62 * var(--vhu)); color:#fff}
.br-hero__title .ln{display:block; width:fit-content}
/* a segunda linha é a logo: o wordmark TBR com uma luz orgânica saindo do fundo */
.br-hero__title .ln--logo{margin-top:calc(18 * var(--vhu)); line-height:1}
.br-hero__logo{position:relative; display:inline-block; padding:calc(10 * var(--vhu)) 0 calc(8 * var(--vhu))}
.br-hero__word{
  position:relative; z-index:1; display:block;
  width:calc(380 * var(--u)); height:calc(133 * var(--u));
  background:#fff;
  -webkit-mask:url(../../assets/logo-tbr.png) center/contain no-repeat; mask:url(../../assets/logo-tbr.png) center/contain no-repeat;
  filter:drop-shadow(0 0 calc(14 * var(--u)) rgba(148,242,204,.28));
}
/* a luz: manchas difusas que derivam devagar, cada uma no seu ritmo, e uma máscara radial
   que dissolve tudo no fundo (nada de fio, nada de borda) */
.br-hero__light{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:calc(980 * var(--u)); height:calc(600 * var(--u));
  pointer-events:none; z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
}
.br-hero__glow{position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%; filter:blur(calc(30 * var(--u))); will-change:transform}
.br-hero__glow--a{
  width:calc(640 * var(--u)); height:calc(300 * var(--u));
  background:radial-gradient(ellipse at 50% 50%, rgba(148,242,204,.46) 0%, rgba(79,168,69,.22) 38%, rgba(79,168,69,0) 72%);
  animation:br-drift-a 14s ease-in-out infinite alternate;
}
.br-hero__glow--b{
  width:calc(400 * var(--u)); height:calc(230 * var(--u));
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.58) 0%, rgba(219,252,235,.26) 36%, rgba(219,252,235,0) 72%);
  animation:br-drift-b 9.5s ease-in-out infinite alternate;
}
.br-hero__glow--c{
  width:calc(520 * var(--u)); height:calc(360 * var(--u));
  background:radial-gradient(ellipse at 50% 50%, rgba(64,209,122,.26) 0%, rgba(26,107,61,.16) 42%, rgba(26,107,61,0) 74%);
  animation:br-drift-c 18s ease-in-out infinite alternate;
}
.br-hero__glow--d{
  width:calc(560 * var(--u)); height:calc(220 * var(--u));
  background:radial-gradient(ellipse at 50% 50%, rgba(10,22,200,.20) 0%, rgba(10,22,200,.08) 45%, rgba(10,22,200,0) 74%);
  animation:br-drift-d 23s ease-in-out infinite alternate;
}
@keyframes br-drift-a{0%{transform:translate(-7%,-5%) rotate(-9deg) scale(1)} 50%{transform:translate(5%,6%) rotate(5deg) scale(1.14)} 100%{transform:translate(9%,-7%) rotate(-2deg) scale(.94)}}
@keyframes br-drift-b{0%{transform:translate(4%,3%) scale(.9)} 50%{transform:translate(-6%,-4%) scale(1.12)} 100%{transform:translate(3%,-8%) scale(1)}}
@keyframes br-drift-c{0%{transform:translate(10%,6%) rotate(12deg) scale(1.05)} 50%{transform:translate(-8%,2%) rotate(-6deg) scale(.9)} 100%{transform:translate(2%,-9%) rotate(4deg) scale(1.1)}}
@keyframes br-drift-d{0%{transform:translate(-14%,8%) rotate(-14deg)} 50%{transform:translate(12%,-6%) rotate(8deg)} 100%{transform:translate(-4%,-12%) rotate(-4deg)}}
@media (prefers-reduced-motion: reduce){ .br-hero__glow{animation:none} }
html:not(.is-ready):not(.is-shot) .br-hero__logo{visibility:hidden}
.br-hero__lead{
  margin-top:calc(30 * var(--vhu)); width:calc(470 * var(--u));
  font-size:calc(13 * var(--u)); line-height:calc(17.4 * var(--vhu)); color:#C2C2C2;
}
.br-hero__stats{
  margin-top:calc(34 * var(--vhu));
  display:flex; flex-wrap:wrap; gap:calc(14 * var(--vhu)) calc(26 * var(--u));
  padding-top:calc(16 * var(--vhu)); border-top:1px solid #262626;
}
.br-hero__stats li{display:flex; flex-direction:column; gap:calc(5 * var(--vhu))}
.br-hero__stats b{
  font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-weight:normal; font-size:calc(24 * var(--u)); line-height:1; color:#fff;
}
.br-hero__stats b.is-uso{color:#94F2CC}
.br-hero__stats b.is-prop{color:#8F9BFF}
.br-hero__stats span{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A}
.br-hero__fonte{margin-top:calc(18 * var(--vhu)); width:calc(470 * var(--u)); font-size:calc(9.5 * var(--u)); line-height:calc(12.5 * var(--vhu)); color:#6E6E6E}

/* a placa: o raio 3D dentro de uma moldura de prancheta técnica */
.br-hero__placa{grid-column:3 / span 2; grid-row:1; align-self:start; justify-self:stretch}
.br-plate{
  position:relative; height:calc(430 * var(--vhu));
  border:1px solid #2A2A2A;
  background-color:#0F0F0F;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:calc(24 * var(--u)) calc(24 * var(--u));
  background-position:center center;
  overflow:hidden;
  cursor:grab;
}
.br-plate.is-dragging{cursor:grabbing}
.br-plate::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,255,255,0) 40%, rgba(15,15,15,.75) 100%);
}
.br-plate__c{position:absolute; font-size:calc(7 * var(--u)); color:#7A7A7A; z-index:2}
.br-plate__c--tl{left:calc(12 * var(--u)); top:calc(10 * var(--vhu))}
.br-plate__c--tr{right:calc(12 * var(--u)); top:calc(10 * var(--vhu))}
.br-plate__c--bl{left:calc(12 * var(--u)); bottom:calc(10 * var(--vhu))}
.br-plate__c--br{right:calc(12 * var(--u)); bottom:calc(10 * var(--vhu)); color:#94F2CC}
/* sem WebGL: o raio em CSS (máscara + gradiente holográfico do header) assume a placa */
.br-bolt-css{
  display:none; position:absolute; left:50%; top:50%;
  width:calc(200 * var(--u)); height:calc(240 * var(--u));
  transform:translate(-50%,-50%);
  -webkit-mask:var(--bolt-mask) center/contain no-repeat; mask:var(--bolt-mask) center/contain no-repeat;
  background:linear-gradient(115deg,#4FA845 0%,#1A6B3D 20%,#fff 45%,#94F2CC 60%,#40D17A 80%,#4FA845 100%);
  background-size:300% 100%; animation:logo-holo 9s cubic-bezier(.45,0,.2,1) infinite;
}
html.no-bolt3d .br-bolt-css{display:block}
.br-hero__dica{margin-top:calc(10 * var(--vhu)); text-align:right; font-size:calc(7 * var(--u)); color:#6E6E6E}

/* a ordem de decisão, no pé do hero */
.br-hero__cadeia{
  grid-column:1 / span 4; grid-row:2;
  margin-top:calc(56 * var(--vhu));
  display:flex; align-items:center; gap:calc(11 * var(--u));
  font-size:calc(7.5 * var(--u)); color:#6E6E6E;
}
.br-hero__cadeia b{font-weight:500; color:#5A5A5A; white-space:nowrap}
.br-hero__cadeia b.is-done{color:#fff}
.br-hero__cadeia b.is-done::before{content:''; display:inline-block; width:calc(5 * var(--u)); height:calc(5 * var(--u)); background:#94F2CC; margin-right:calc(6 * var(--u)); vertical-align:middle}
.br-hero__cadeia i{font-style:normal; display:block; flex:1; height:1px; background:#333; transform-origin:left center}

/* ================================================================= SUMÁRIO */
.br-sumario{margin-top:calc(80 * var(--vhu)); border-top:1px solid #E8E8E8}
.br-sumario li{
  position:relative;
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u)); align-items:start;
  padding:calc(24 * var(--vhu)) 0 calc(26 * var(--vhu));
  border-bottom:1px solid #E8E8E8;
  cursor:none;
}
.br-sumario li > *{grid-row:1}
.br-sumario .hair{position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#0C0C0C; transform:scaleX(0); transform-origin:left center}
.br-sumario .n{grid-column:1; font-size:calc(9.5 * var(--u)); color:#B0B0B0; transition:color .3s ease}
.br-sumario .t{grid-column:2; font-size:calc(28 * var(--u)); line-height:calc(30 * var(--vhu)); color:#0C0C0C}
.br-sumario .t a{color:inherit}
.br-sumario .d{grid-column:3; font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu)); color:#5A5A5A; transition:color .3s ease}
.br-sumario .p{grid-column:4; justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:calc(9 * var(--vhu))}
.br-sumario li:hover .n, .br-sumario li:hover .d{color:#0C0C0C}
.br-legenda{
  margin-top:calc(44 * var(--vhu)); padding-left:calc(296 * var(--u));
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u)); row-gap:calc(22 * var(--vhu));
}
.br-legenda li{display:flex; flex-direction:column; gap:calc(8 * var(--vhu)); align-items:flex-start; font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu)); color:#5A5A5A}

/* ================================================================= TRILHO DE CAPÍTULOS */
.br-rail{
  position:fixed; right:calc(10 * var(--u)); top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:calc(6 * var(--vhu));
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  mix-blend-mode:difference; color:#fff;
}
.br-rail.is-on{opacity:1; pointer-events:auto}
.br-rail a{
  display:flex; align-items:center; gap:calc(6 * var(--u));
  font-size:calc(7 * var(--u)); color:rgba(255,255,255,.45); transition:color .25s ease;
}
.br-rail a i{display:block; width:calc(12 * var(--u)); height:1px; background:currentColor; transform-origin:right center; transition:transform .25s ease}
.br-rail a.is-active{color:#fff}
.br-rail a.is-active i{transform:scaleX(1.6)}
.br-rail a span{display:none}
.br-rail:hover a.is-active span, .br-rail a:hover span{display:inline}
.is-shot .br-rail{display:none}

/* ================================================================= O QUE FALTA */
#br-falta{position:relative; overflow:clip}
#br-falta .br-head{position:relative; z-index:2}
.br-falta__plate{
  position:absolute; right:calc(-40 * var(--u)); top:calc(40 * var(--vhu));
  width:calc(520 * var(--u)); height:calc(520 * var(--vhu)); z-index:1; pointer-events:none;
}
.br-falta__placar{
  position:relative; z-index:2;
  margin-top:calc(80 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.br-placar{grid-column:1 / span 3; border-top:1px solid #2A2A2A}
.br-placar__row{
  display:grid; grid-template-columns:calc(44 * var(--u)) calc(180 * var(--u)) 1fr calc(150 * var(--u));
  column-gap:calc(16 * var(--u)); align-items:center;
  padding:calc(13 * var(--vhu)) 0; border-bottom:1px solid #2A2A2A;
}
.br-placar__n{font-size:calc(9.5 * var(--u)); color:#555}
.br-placar__t{font-size:calc(14 * var(--u)); line-height:1; color:#fff}
.br-placar__bar{position:relative; height:calc(6 * var(--vhu)); background:#1E1E1E; overflow:hidden}
.br-placar__bar i{position:absolute; top:0; bottom:0; left:0; transform-origin:left center; transform:scaleX(0)}
.br-placar__bar .uso{background:#4FA845}
.br-placar__bar .prop{background:#3D4BFF}
.br-placar__num{font-family:var(--font-mono); font-size:calc(7.5 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A; text-align:right; white-space:nowrap}
.br-placar__num b{font-weight:500; color:#fff}
.br-placar__legend{grid-column:1 / span 3; display:flex; gap:calc(18 * var(--u)); margin-top:calc(12 * var(--vhu)); font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A}
.br-placar__legend i{display:inline-block; width:calc(10 * var(--u)); height:calc(6 * var(--vhu)); margin-right:calc(6 * var(--u)); vertical-align:middle}
.br-placar__totais{grid-column:4; display:flex; flex-direction:column; gap:calc(14 * var(--vhu)); padding-top:calc(4 * var(--vhu))}
.br-placar__totais li{display:flex; flex-direction:column; gap:calc(4 * var(--vhu))}
.br-placar__totais b{font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght); font-weight:normal; font-size:calc(34 * var(--u)); line-height:1; color:#fff}
.br-placar__totais b.is-uso{color:#94F2CC}
.br-placar__totais b.is-prop{color:#8F9BFF}
.br-placar__totais span{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A}

.br-falta__decisoes, .br-falta__proximos, .br-falta__vagas{
  position:relative; z-index:2;
  margin-top:calc(96 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.br-falta__h{grid-column:1; align-self:start; position:sticky; top:calc(70 * var(--u))}
.br-falta__h b{
  display:block; font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' 760; font-weight:normal;
  font-size:calc(17 * var(--u)); line-height:calc(19 * var(--vhu)); text-transform:uppercase; color:#fff;
}
.br-falta__h p{margin-top:calc(12 * var(--vhu)); font-size:calc(11 * var(--u)); line-height:calc(14 * var(--vhu)); color:#8A8A8A; width:calc(240 * var(--u))}
.br-falta__list{grid-column:2 / span 3; border-top:1px solid #2A2A2A}
.br-dec{
  position:relative;
  display:grid; grid-template-columns:calc(44 * var(--u)) calc(230 * var(--u)) 1fr; column-gap:calc(16 * var(--u)); align-items:start;
  padding:calc(22 * var(--vhu)) 0 calc(24 * var(--vhu)); border-bottom:1px solid #2A2A2A; cursor:none;
}
.br-dec .hair{position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#fff; transform:scaleX(0); transform-origin:left center}
.br-dec .n{font-size:calc(9.5 * var(--u)); color:#555}
.br-dec .f{font-family:var(--font-mono); font-size:calc(7.5 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8F9BFF; display:block; margin-bottom:calc(6 * var(--vhu))}
.br-dec .t{font-size:calc(20 * var(--u)); line-height:calc(22 * var(--vhu)); color:#fff}
.br-dec .d{font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu)); color:#B0B0B0; width:calc(440 * var(--u))}

/* todas as vagas, agrupadas por capítulo, numa corrida de itens separados por fio */
.br-vagas-all{grid-column:2 / span 3; display:flex; flex-direction:column; gap:calc(28 * var(--vhu))}
.br-vagas-all__cap{display:grid; grid-template-columns:calc(230 * var(--u)) 1fr; column-gap:calc(16 * var(--u)); align-items:start; padding-top:calc(16 * var(--vhu)); border-top:1px solid #2A2A2A}
.br-vagas-all__cap > b{font-family:var(--font-mono); font-weight:500; font-size:calc(8 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#fff; padding-top:calc(6 * var(--vhu))}
.br-vagas-all__cap > b small{display:block; margin-top:calc(5 * var(--vhu)); color:#6E6E6E}
.br-vagas-all__list{display:flex; flex-wrap:wrap; gap:calc(9 * var(--vhu)) 0}
.br-vagas-all__list a{
  display:inline-flex; align-items:center; gap:calc(7 * var(--u));
  padding:0 calc(12 * var(--u)); border-left:1px solid #2A2A2A;
  font-size:calc(10 * var(--u)); line-height:calc(13 * var(--vhu)); color:#B0B0B0; white-space:nowrap;
  transition:color .25s ease; cursor:none;
}
.br-vagas-all__list a::before{content:''; flex:none; width:calc(5 * var(--u)); height:calc(5 * var(--u)); box-shadow:inset 0 0 0 1px #555}
.br-vagas-all__list a.is-proposta::before{background:#3D4BFF; box-shadow:none}
.br-vagas-all__list a.is-em-uso::before{background:#4FA845; box-shadow:none}
.br-vagas-all__list a:hover{color:#fff}
.br-vagas-all__list a small{font-family:var(--font-mono); font-size:calc(6.5 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#6E6E6E}