/* /brand — a identidade em uso: canvas do raio 3D multi-vista, placa clara, lockup
   (raio + TBR + ENERGIA em CSS), amostras de cor, espécimes tipográficos, diagrama da
   grade, matriz de pontos, kit de componentes, diagramas SVG e os exemplos de uso. */

/* ---------------------------------------------------------------- raio 3D (js/brand/bolt.js): um canvas fixo, cada vista recortada por scissor */
.br-bolt3d{position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; display:block}
/* sem WebGL: o raio em CSS aparece dentro das vistas */
.br-bolt-css--ink{background:linear-gradient(115deg,#0C0C0C 0%,#0C0C0C 35%,#4FA845 50%,#94F2CC 58%,#0C0C0C 72%,#0C0C0C 100%); background-size:300% 100%}
.br-frame__box .br-bolt-css{width:52%; height:62%}

/* placa clara (seção 04.1) */
.br-plate--light{
  border-color:#E0E0E0; background-color:#FAFAFA;
  background-image:linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
}
.br-plate--light::after{background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(250,250,250,0) 40%, rgba(250,250,250,.85) 100%)}
.br-plate--light .br-plate__c{color:#8A8A8A}
.br-plate--light .br-plate__c--br{color:#1A6B3D}

/* ---------------------------------------------------------------- 04.1 o símbolo em uso */
.br-uso-simbolo{display:grid; grid-template-columns:calc(400 * var(--u)) 1fr; column-gap:calc(30 * var(--u)); align-items:start}
.br-uso-simbolo .br-plate{height:calc(400 * var(--vhu)); position:sticky; top:calc(70 * var(--u))}
.br-uso-simbolo__txt{display:flex; flex-direction:column; gap:calc(22 * var(--vhu))}
.br-uso-simbolo__txt .br-prosa{width:auto}
.br-uso__frase{font-size:calc(22 * var(--u)); line-height:calc(25 * var(--vhu)); color:#0C0C0C; max-width:calc(420 * var(--u))}
.br-uso-simbolo__txt .br-tensao{width:auto}
.br-rota5{margin-top:calc(34 * var(--vhu))}

/* ---------------------------------------------------------------- lockup em CSS: raio + pilha TBR / ENERGIA (proporções do header) */
.br-lockup{
  display:inline-flex; align-items:stretch; gap:.22em;
  font-size:calc(40 * var(--u)); line-height:1; color:#0C0C0C; white-space:nowrap;
}
.br-lockup__bolt{flex:none; width:.6em; align-self:stretch; background:currentColor; -webkit-mask:var(--bolt-mask) center/contain no-repeat; mask:var(--bolt-mask) center/contain no-repeat}
/* quando o raio do lockup é uma vista 3D (js/brand/bolt.js), a máscara em CSS sai */
.br-lockup__bolt.is-3d{background:none; -webkit-mask:none; mask:none}
.br-lockup__stack{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start}
.br-lockup__word{display:block; width:2em; height:.7em; background:currentColor; -webkit-mask:url(../../assets/logo-tbr.png) center/contain no-repeat; mask:url(../../assets/logo-tbr.png) center/contain no-repeat}
.br-lockup__sub{
  display:block; margin-top:.09em; font-size:.3em;
  font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  letter-spacing:.16em; text-transform:uppercase; line-height:.9;
}
.br-lockup--w{color:#fff}
.br-lockup--v{flex-direction:column; align-items:center; gap:.3em}
.br-lockup--v .br-lockup__bolt{width:1em; height:1.2em; align-self:center}
.br-lockup--v .br-lockup__stack{align-items:center}

/* anatomia da assinatura (04.5): o lockup grande com as cotas embaixo */
.br-anat{--lk:calc(120 * var(--u)); display:flex; flex-direction:column; align-items:flex-start; gap:calc(12 * var(--vhu)); padding:calc(28 * var(--vhu)) calc(28 * var(--u)); border:1px solid #E4E4E4; background:#FAFAFA}
.br-anat .br-lockup{font-size:var(--lk)}
.br-anat__dims{display:flex; gap:0}
.br-anat__dims span{
  display:block; flex:none; border-top:1px solid #0A16C8; padding-top:calc(6 * var(--vhu)); position:relative;
  font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#0A16C8; text-align:center;
}
.br-anat__dims span:nth-child(1){width:calc(.6 * var(--lk))}
.br-anat__dims span:nth-child(2){width:calc(.22 * var(--lk))}
.br-anat__dims span:nth-child(3){width:calc(2 * var(--lk))}
.br-anat__dims span::before, .br-anat__dims span::after{content:''; position:absolute; top:-1px; width:1px; height:calc(6 * var(--vhu)); background:#0A16C8}
.br-anat__dims span::before{left:0}
.br-anat__dims span::after{right:0}

/* ---------------------------------------------------------------- molduras preenchidas */
.br-frame__box{container-type:inline-size}
.br-frame__box.is-filled{background-image:none; background-color:#fff}
.br-frame__box.is-dark{background-color:#0C0C0C; border-color:#0C0C0C}
.br-frame__box.is-grey{background-color:#F5F5F5}
.br-lk-stage{position:absolute; inset:0; display:grid; place-items:center}
.br-lk-stage .br-lockup{font-size:21cqw}
.br-lk-stage .br-lockup--v{font-size:26cqw}
.br-lk-stage .br-lockup--mono{color:#6E6E6E}
.br-lk-stage__tag{position:absolute; left:calc(8 * var(--u)); bottom:calc(6 * var(--vhu)); font-size:calc(6.5 * var(--u)); color:#8A8A8A}

/* diagramas SVG (malha, respiro) */
.br-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.br-svg .g{stroke:#E4E4E4; stroke-width:.06}
.br-svg .g--b{stroke:#CFCFCF; stroke-width:.09}
.br-svg .p{fill:#0C0C0C}
.br-svg .p--soft{fill:#0C0C0C; opacity:.12}
.br-svg .v{fill:#fff; stroke:#0A16C8; stroke-width:.22}
.br-svg .t{font-family:var(--font-mono); font-size:1.05px; fill:#0A16C8; letter-spacing:.05px}
.br-svg .t--k{fill:#6E6E6E}
.br-svg .t--c{text-anchor:middle}
.br-svg .d{stroke:#0A16C8; stroke-width:.09}
.br-svg .dash{fill:none; stroke:#0A16C8; stroke-width:.14; stroke-dasharray:.6 .5}

/* tamanhos mínimos: pixels reais */
.br-min{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:calc(14 * var(--vhu)); padding:calc(10 * var(--u))}
.br-min__row{display:flex; align-items:flex-end; justify-content:space-between; gap:calc(6 * var(--u))}
.br-min__it{display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--vhu))}
.br-min__it i{display:block; background:#0C0C0C; -webkit-mask:var(--bolt-mask) center/contain no-repeat; mask:var(--bolt-mask) center/contain no-repeat}
.br-min__it b{font-family:var(--font-mono); font-weight:500; font-size:calc(6.5 * var(--u)); letter-spacing:.08em; color:#6E6E6E}
.br-min__n{font-size:calc(8.5 * var(--u)); line-height:calc(11 * var(--vhu)); color:#6E6E6E; text-align:center}

/* ---------------------------------------------------------------- cores */
.br-swatches{display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(14 * var(--u)); row-gap:calc(26 * var(--vhu)); margin-top:calc(8 * var(--vhu))}
.br-swatch{display:flex; flex-direction:column; gap:calc(6 * var(--vhu)); align-items:flex-start}
.br-swatch--wide{grid-column:span 2}
.br-swatch__color{width:100%; aspect-ratio:3/2; border:1px solid #E4E4E4; position:relative; overflow:hidden}
.br-swatch__color--energy{aspect-ratio:auto; height:calc(136 * var(--vhu)); cursor:none}
.br-swatch__color--energy canvas.holo, .br-swatch__color--energy canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.br-swatch__color--energy.holo--css{
  background:linear-gradient(115deg,#1A6B3D 0%,#4FA845 22%,#40D17A 40%,#94F2CC 55%,#DBFCEB 62%,#94F2CC 70%,#40D17A 84%,#1A6B3D 100%);
  background-size:300% 100%; animation:br-holo 7s ease-in-out infinite alternate;
}
@keyframes br-holo{from{background-position:0% 50%} to{background-position:100% 50%}}
.br-swatch__name{font-size:calc(12.5 * var(--u)); color:#0C0C0C; margin-top:calc(4 * var(--vhu))}
.br-swatch__hex{font-size:calc(7 * var(--u)); color:#0A16C8}
.br-swatch__papel{font-size:calc(10 * var(--u)); line-height:calc(12.5 * var(--vhu)); color:#5A5A5A}
.br-swatch__stops{display:flex; width:100%; height:calc(8 * var(--vhu)); margin-top:calc(2 * var(--vhu))}
.br-swatch__stops i{flex:1}
.br-anterior{margin-top:calc(40 * var(--vhu)); padding-top:calc(26 * var(--vhu)); border-top:1px solid #E4E4E4}
.br-anterior .br-prosa{margin-top:calc(10 * var(--vhu))}
.br-strip{display:grid; grid-template-columns:repeat(9, 1fr); column-gap:calc(6 * var(--u)); margin-top:calc(18 * var(--vhu))}
.br-strip li{display:flex; flex-direction:column; gap:calc(5 * var(--vhu))}
.br-strip li i{display:block; width:100%; aspect-ratio:1; border:1px solid #E4E4E4}
.br-strip li span{font-size:calc(8.5 * var(--u)); line-height:calc(10.5 * var(--vhu)); color:#0C0C0C}
.br-strip li small{font-family:var(--font-mono); font-size:calc(6.5 * var(--u)); letter-spacing:.06em; color:#8A8A8A}
/* moldura "amostras aplicadas": a paleta sobre claro e sobre escuro */
.br-amostra{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr}
.br-amostra > div{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12cqw}
.br-amostra .dk{background:#0C0C0C}
.br-amostra .br-lockup{font-size:13cqw}
.br-amostra .dots{display:flex; gap:4cqw}
.br-amostra .dots i{display:block; width:6cqw; height:6cqw; border-radius:50%}

/* ---------------------------------------------------------------- tipografia */
.br-specs{display:flex; flex-direction:column; gap:calc(26 * var(--vhu)); margin-top:calc(8 * var(--vhu))}
.br-spec{padding-top:calc(16 * var(--vhu)); border-top:1px solid #0C0C0C}
.br-spec__head{display:flex; flex-wrap:wrap; align-items:center; gap:calc(8 * var(--vhu)) calc(16 * var(--u)); margin-bottom:calc(16 * var(--vhu))}
.br-spec__head b{font-size:calc(14 * var(--u)); font-weight:600; color:#0C0C0C}
.br-spec__head > span{font-size:calc(11 * var(--u)); color:#5A5A5A}
.br-spec__head .mono-label{font-size:calc(7 * var(--u)); color:#8A8A8A}
.br-spec__big{color:#0C0C0C}
.br-spec--display .br-spec__big{font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght); text-transform:uppercase; font-size:calc(64 * var(--u)); line-height:1; transition:font-variation-settings .6s ease; cursor:none}
.br-spec--display .br-spec__big:hover{font-variation-settings:'wdth' 130,'wght' 900}
.br-spec--display .br-spec__abc{font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' 700; text-transform:uppercase; font-size:calc(20 * var(--u)); line-height:1.3; color:#5A5A5A; margin-top:calc(12 * var(--vhu)); word-break:break-all}
.br-spec--mono .br-spec__big{font-family:var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:calc(16 * var(--u)); line-height:1.4}
.br-spec--mono .br-spec__abc{font-family:var(--font-mono); font-weight:500; letter-spacing:.06em; font-size:calc(11 * var(--u)); line-height:1.6; color:#5A5A5A; margin-top:calc(8 * var(--vhu))}
.br-spec--body .br-spec__big{font-size:calc(22 * var(--u)); line-height:calc(28 * var(--vhu)); max-width:calc(620 * var(--u))}
.br-spec--body .br-spec__abc{font-size:calc(12.5 * var(--u)); line-height:calc(16.5 * var(--vhu)); color:#5A5A5A; margin-top:calc(10 * var(--vhu)); max-width:calc(560 * var(--u))}
.br-escala{margin-top:calc(30 * var(--vhu)); border-top:1px solid #E4E4E4}
.br-escala__row{display:grid; grid-template-columns:calc(90 * var(--u)) 1fr; column-gap:calc(16 * var(--u)); align-items:end; padding:calc(16 * var(--vhu)) 0; border-bottom:1px solid #E4E4E4}
.br-escala__f{font-size:calc(7.5 * var(--u)); color:#6E6E6E; padding-bottom:calc(6 * var(--vhu))}
.br-escala__s{display:flex; flex-wrap:wrap; align-items:baseline; gap:calc(22 * var(--u))}
.br-escala__it{display:inline-flex; flex-direction:column; align-items:flex-start; gap:calc(4 * var(--vhu)); line-height:1; color:#0C0C0C}
.br-escala__it small{font-family:var(--font-mono); font-size:calc(6.5 * var(--u)); letter-spacing:.08em; color:#8A8A8A}
.br-escala__it--display{font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght); text-transform:uppercase}
.br-escala__it--mono{font-family:var(--font-mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase}
.br-escala__nota{margin-top:calc(12 * var(--vhu)); font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu)); color:#8A8A8A; width:calc(560 * var(--u))}
/* moldura "hierarquia": a escala em miniatura */
.br-hier{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:5cqw; padding:6cqw 8cqw}
.br-hier span{display:flex; align-items:baseline; gap:4cqw; color:#0C0C0C; line-height:1}
.br-hier span small{font-family:var(--font-mono); font-size:3.2cqw; color:#8A8A8A; letter-spacing:.08em; min-width:12cqw}
.br-hier .d{font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght); text-transform:uppercase}

/* ---------------------------------------------------------------- grade */
.br-griddiag{margin:calc(8 * var(--vhu)) 0 calc(28 * var(--vhu)); border:1px solid #E4E4E4; background:#FAFAFA; padding:calc(14 * var(--vhu)) 0 calc(36 * var(--vhu))}
.br-griddiag__page{position:relative; height:calc(150 * var(--vhu))}
.br-griddiag .col{position:absolute; top:0; bottom:0; background:rgba(10,22,200,.06); border-left:1px solid #0A16C8; border-right:1px solid #0A16C8}
.br-griddiag .col b{position:absolute; left:calc(6 * var(--u)); top:calc(6 * var(--vhu)); font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght); font-weight:normal; font-size:calc(14 * var(--u)); color:#0A16C8}
.br-griddiag .col small, .br-griddiag .edge small{position:absolute; left:0; bottom:calc(-16 * var(--vhu)); font-family:var(--font-mono); font-size:calc(6.5 * var(--u)); letter-spacing:.08em; color:#0A16C8; white-space:nowrap}
.br-griddiag .edge{position:absolute; top:0; bottom:0; width:0; border-left:1px dashed #8A8A8A}
.br-griddiag .edge small{color:#8A8A8A; transform:translateX(-100%)}
.br-griddiag .gut{position:absolute; top:0; bottom:0; left:0; width:calc(28 / 1224 * 100%); background:repeating-linear-gradient(45deg, transparent 0 3px, #E4E4E4 3px 4px)}
.br-griddiag .gut.r{left:auto; right:0}
.br-griddiag--mini{position:absolute; inset:0; margin:0; border:0; padding:8% 0}
.br-griddiag--mini .br-griddiag__page{height:100%}
.br-griddiag--mini .col b{font-size:5cqw}
.br-griddiag--mini .col small, .br-griddiag--mini .edge small{display:none}

/* ---------------------------------------------------------------- iconografia (matriz de pontos) */
.br-dots-row{display:flex; flex-wrap:wrap; gap:calc(26 * var(--vhu)) calc(40 * var(--u)); margin-top:calc(8 * var(--vhu)); align-items:flex-end}
.br-dots-row .br-dots{grid-template-columns:repeat(16, calc(8 * var(--u))); grid-auto-rows:calc(8 * var(--vhu))}
.br-dots-row .br-dots i{width:calc(3 * var(--u)); height:calc(3 * var(--u))}
.br-dots-it{display:flex; flex-direction:column; gap:calc(10 * var(--vhu)); align-items:flex-start; cursor:none}
.br-dots-it small{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A}
.br-dots{display:grid; grid-template-columns:repeat(16, calc(5.4 * var(--u))); grid-auto-rows:calc(5.4 * var(--vhu))}
.br-dots i{display:block; width:calc(2.1 * var(--u)); height:calc(2.1 * var(--u)); border-radius:50%; background:#E2E2E2; align-self:center; justify-self:center}
.br-dots i.on{background:#0C0C0C; transition:background-color .3s ease}
.br-dots.is-anim i.on{animation:br-flash 1.5s var(--d, 0s) infinite}
@keyframes br-flash{0%, 22%, 100%{background:#0C0C0C} 8%{background:var(--c-blue)}}
.br-dots--big{grid-template-columns:repeat(16, 5.4cqw); grid-auto-rows:5.4cqw}
.br-dots--big i{width:2.1cqw; height:2.1cqw}
.br-marks{display:flex; flex-wrap:wrap; align-items:flex-end; gap:calc(16 * var(--vhu)) calc(40 * var(--u)); margin:calc(30 * var(--vhu)) 0 calc(34 * var(--vhu))}
/* 04.4: a assinatura nos dois estados do header */
.br-headers{display:flex; flex-direction:column; gap:calc(10 * var(--vhu)); margin-top:calc(8 * var(--vhu))}
.br-hdr{display:flex; align-items:center; justify-content:space-between; height:calc(46 * var(--vhu)); padding:0 calc(16 * var(--u)); border:1px solid #E4E4E4}
.br-hdr .br-lockup{font-size:calc(23 * var(--u))}
.br-hdr__menu{font-family:var(--font-mono); font-size:calc(8 * var(--u)); letter-spacing:.1em; text-transform:uppercase}
.br-hdr .pill{height:calc(28 * var(--vhu)); padding:0 calc(16 * var(--u)); font-size:calc(7.5 * var(--u))}
.br-hdr--dark{background:#0C0C0C; color:#fff; border-color:#0C0C0C}
.br-hdr--dark .pill{border:1px solid rgba(255,255,255,.45); color:#fff}
.br-hdr--light{background:#fff; color:#111}
.br-hdr--light .pill{background:#111; color:#fff}
.br-headers small{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A}
.br-marks__it{display:flex; flex-direction:column; gap:calc(8 * var(--vhu)); align-items:flex-start}
.br-marks__it small{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A}
.br-marker{display:block; width:calc(8 * var(--u)); height:calc(8 * var(--u))}
.br-marker circle{fill:#0C0C0C}
.br-hairdemo{position:relative; width:calc(200 * var(--u)); height:1px; background:#E4E4E4}
.br-hairdemo i{position:absolute; left:0; top:0; height:1px; width:100%; background:#0C0C0C; transform:scaleX(.55); transform-origin:left center; animation:br-hair 2.4s ease-in-out infinite alternate}
@keyframes br-hair{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.br-boltfilter{display:block; width:calc(26 * var(--u)); height:calc(31 * var(--u)); background:linear-gradient(135deg,#1A6B3D,#94F2CC); -webkit-mask:var(--bolt-mask) center/contain no-repeat; mask:var(--bolt-mask) center/contain no-repeat; opacity:.75}
/* moldura "grade do ícone": a matriz numerada */
.br-icongrid{position:absolute; inset:0; display:grid; place-items:center}
.br-icongrid .br-dots{grid-template-columns:repeat(16, 5cqw); grid-auto-rows:5cqw}
.br-icongrid .br-dots i{width:2cqw; height:2cqw}
.br-icongrid .br-dots i.on{background:#0A16C8}
.br-icongrid small{position:absolute; left:6cqw; bottom:5cqw; font-family:var(--font-mono); font-size:3cqw; letter-spacing:.1em; color:#8A8A8A}
.br-elem{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9cqw}
.br-elem .br-hairdemo{width:60cqw}
.br-elem .br-marker{width:6cqw; height:6cqw}
.br-elem .br-boltfilter{width:14cqw; height:17cqw}

/* ---------------------------------------------------------------- design system */
.br-kit{display:flex; flex-direction:column; gap:calc(18 * var(--vhu)); margin-top:calc(8 * var(--vhu)); padding:calc(24 * var(--vhu)) calc(24 * var(--u)); border:1px solid #E4E4E4; background:#FAFAFA}
.br-kit__row{display:flex; flex-wrap:wrap; align-items:center; gap:calc(12 * var(--vhu)) calc(18 * var(--u))}
.br-kit__row .pill{height:calc(32 * var(--vhu)); padding:0 calc(20 * var(--u)); font-size:calc(8 * var(--u))}
.br-kit__hair{display:grid; grid-template-columns:calc(40 * var(--u)) auto 1fr; align-items:center; column-gap:calc(16 * var(--u)); padding-top:calc(12 * var(--vhu)); border-top:1px solid #E4E4E4}
.br-kit__hair .n{font-size:calc(9.5 * var(--u)); color:#B0B0B0}
.br-kit__hair .display{font-size:calc(22 * var(--u)); color:#0C0C0C}
.br-kit__hair .hair{height:1px; background:#0C0C0C; transform-origin:left center; animation:br-hair 2.4s ease-in-out infinite alternate}
.br-tokens{margin-top:calc(26 * var(--vhu))}
.br-apps{margin-top:calc(26 * var(--vhu))}
/* molduras: kit em miniatura e as páginas */
.br-kit--mini{position:absolute; inset:0; margin:0; border:0; padding:6cqw 7cqw; gap:5cqw; justify-content:center; background:#fff}
.br-kit--mini .br-kit__row{gap:3cqw 4cqw}
.br-kit--mini .pill{height:9cqw; padding:0 5cqw; font-size:2.6cqw}
.br-kit--mini .br-chip{height:6cqw; padding:0 3cqw; font-size:2.3cqw}
.br-kit--mini .mono-label{font-size:2.5cqw}
.br-kit--mini .br-kit__hair{grid-template-columns:8cqw auto 1fr; column-gap:4cqw; padding-top:3cqw}
.br-kit--mini .br-kit__hair .n{font-size:3cqw}
.br-kit--mini .br-kit__hair .display{font-size:6cqw}
.br-pages{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:5cqw; padding:8cqw 9cqw}
.br-pages li{display:flex; flex-direction:column; gap:1.5cqw}
.br-pages .bar{display:flex; align-items:center; gap:1.6cqw; height:8cqw; padding:0 3cqw; border:1px solid #D6D6D6; border-radius:2cqw; background:#fff}
.br-pages .bar i{width:1.8cqw; height:1.8cqw; border-radius:50%; background:#D6D6D6}
.br-pages .bar b{margin-left:2cqw; font-family:var(--font-mono); font-weight:500; font-size:2.6cqw; letter-spacing:.06em; color:#0C0C0C}
.br-pages .t{font-size:2.4cqw; color:#8A8A8A}

/* ---------------------------------------------------------------- usos: pode e não pode, com o lockup de verdade */
.us{position:absolute; inset:0; display:grid; place-items:center}
.us .br-lockup{font-size:17cqw}
.us--respiro .us__box{display:block; padding:.3em; border:1px dashed #0A16C8; font-size:17cqw}
.us--respiro .br-lockup{font-size:1em}
.us--foto{background:radial-gradient(ellipse 70% 60% at 30% 30%, #4A4A4A 0%, #1A1A1A 55%, #0C0C0C 100%)}
.us--simbolo{display:flex; align-items:center; justify-content:center; gap:8cqw}
.us__fav{display:grid; place-items:center; width:16cqw; height:16cqw; border:1px solid #D6D6D6; border-radius:3cqw; background:#fff}
.us__fav .bolt{width:8cqw; height:9.6cqw}
.us__chip{display:inline-flex; align-items:center; gap:2.5cqw; height:12cqw; padding:0 5cqw; background:#0C0C0C; color:#fff; font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' 760; font-size:5cqw}
.us__chip .bolt{width:5cqw; height:6cqw; background:#fff}
.us .bolt{display:block; background:#0C0C0C; -webkit-mask:var(--bolt-mask) center/contain no-repeat; mask:var(--bolt-mask) center/contain no-repeat}
.us .bolt--l{width:14cqw; height:16.8cqw}
.us--esticar .br-lockup{transform:scaleX(1.55)}
.us--recolor .br-lockup{color:#7A3DDC}
.us--efeito .br-lockup{color:#0C0C0C; filter:drop-shadow(0 .1em .08em rgba(0,0,0,.55))}
.us--efeito .br-lockup__bolt{background:linear-gradient(135deg,#FFFFFF 0%,#94F2CC 30%,#4FA845 60%,#1A6B3D 100%)}
.us--efeito .br-lockup__word{background:linear-gradient(180deg,#666 0%,#0C0C0C 60%)}
.us--poluido{background:repeating-linear-gradient(45deg,#8A8A8A 0 6%,#3A3A3A 6% 12%,#B0B0B0 12% 18%)}
.us--refazer .us__retype{display:block; font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:.62em; line-height:.95; color:#0C0C0C; align-self:center}

/* calendário, matriz de pontos no escuro etc. reaproveitam manual.css */