/* ══════════════════════════════════════════════════════════════════════════
   BONONI · CHROME
   Header + nav + mega-menu + barra de progresso + dock inferior + drawer +
   rodape + WhatsApp flutuante.
   ─────────────────────────────────────────────────────────────────────────
   REGRA §5.3 (inegociavel): item de menu NUNCA quebra em duas linhas.
   Como e garantido aqui:
     1. white-space:nowrap em todo link/gatilho do nav
     2. container flex com flex-wrap:nowrap e gap fixo em clamp()
     3. gatilho de dropdown e o caret no mesmo nowrap
     4. hamburguer ANTECIPADO para 1150px (o item real "Gerenciamento BIM"
        tem 17 caracteres; medido com o texto real, nao com placeholder)
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ CORREÇÃO DE BASE ════════════════════════════════════════════════
   O motor aplica .site-main{padding-top:80px} porque o header antigo era
   estatico. O da Bononi e fixo e cada primeira secao ja reserva o proprio
   espaco com var(--head-h). Sem este reset, o hero descia e o header
   flutuava sobre uma faixa creme do body.
   ═══════════════════════════════════════════════════════════════════ */
.site-main{padding-top:0;min-height:0}

/* ══════════════════════════════════════════════════════════════════════
   FAIXA 1 · BARRA DE CONTATO
   Recolhe para cima ao rolar, liberando altura para a barra principal.
   ══════════════════════════════════════════════════════════════════════ */
/* ══ DUAS PARADAS, DOIS TEMAS ════════════════════════════════════════════
   08/08/2026, CORRIGIDO. Eu havia deixado o cromo claro nas DUAS paradas, e
   estava errado: no topo da home a barra fica sobre o hero de video escuro, e o
   estado `over` existe justamente para isso. Uma faixa clara ali briga com o
   video e nao e o que foi pedido.

   Agora:
     over   · topo da home, sobre o hero escuro   -> transparente, texto claro
     solid  · barra rolada, e toda pagina interna -> tema CLARO, maior

   O DEFAULT (sem [data-head]) e o claro, de proposito: pagina interna comeca em
   solid e nao pode piscar escuro antes de o JS rodar. `over` e a excecao.

   Contraste do tema claro conferido nos tokens, e por isso o texto usa os tons
   `-ink`: sobre superficie clara o tom base das disciplinas falha em texto (o
   --c4 da 2,17:1 no papel). Regra do design system, nao preferencia.
      --ink    14,7:1     --c1-ink   5,9:1
      --ink-2   7,2:1     --c4-ink   4,9:1
   ═════════════════════════════════════════════════════════════════════════ */
.bh-top{
  position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-head) + 1);
  height:var(--top-h);
  /* 08/08/2026 · Era `--cream-2` para `--concrete`, os dois QUENTES (42 e 40
     graus, 4,3% e 5,5% de saturacao). A marca esta em 211 graus, entao a faixa
     puxava para o lado oposto da paleta e brigava com o papel da barra
     principal logo abaixo. Agora e a familia do navy: #EFF3F7 para --navy-050,
     ambos em 210 graus. Continua um degrau mais escuro que o papel, que e o que
     faz a faixa ler como base da barra e nao como parte dela. */
  background:linear-gradient(90deg,#EFF3F7,var(--navy-050) 50%,#EFF3F7);
  /* 10/08/2026 · Sem borda embaixo, por pedido. A barra principal logo abaixo ja
     tem o proprio fio, e dois riscos paralelos a 36px de distancia leem como
     moldura em volta do nada. A separacao entre as duas faixas continua
     existindo pela diferenca de tom (navy-050 contra papel). */
  transition:height .38s var(--e-out),background var(--d-mid) var(--e-out),
             border-color var(--d-mid) var(--e-out);
}
/* ── PARADA `over`: o escuro original volta ────────────────────────────── */
:root[data-head="over"] .bh-top{
  background:linear-gradient(90deg,rgba(11,18,26,.72),rgba(27,40,54,.6) 50%,rgba(11,18,26,.72));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
:root[data-head="over"] .bh-top__i{color:var(--navy-200)}
:root[data-head="over"] a.bh-top__i:hover{color:#fff}
:root[data-head="over"] .bh-top__i i,
:root[data-head="over"] .bh-top__l .bh-top__i:first-child i,
:root[data-head="over"] .bh-top__l .bh-top__i:nth-child(3) i,
:root[data-head="over"] .bh-top__r .bh-top__i i{color:var(--c1)}
:root[data-head="over"] .bh-top__div{background:rgba(198,209,220,.2)}
:root[data-head="over"] .bh-top__soc a{color:var(--navy-200)}
:root[data-head="over"] .bh-top__soc a:hover{background:rgba(255,255,255,.1);color:#fff}
:root[data-head="over"] .bh-top__feat{
  background:color-mix(in srgb,var(--c1) 26%,transparent);
  border-color:color-mix(in srgb,var(--c1) 48%,transparent);
  box-shadow:none;
}
:root[data-head="over"] .bh-top__feat:hover{
  background:color-mix(in srgb,var(--c1) 38%,transparent);color:#fff;
}
/* a barra de progresso tambem precisa de trilha visivel no escuro */
:root[data-head="over"] .bh-prog{background:rgba(255,255,255,.12)}
/* ══ BARRA DE PROGRESSO DE LEITURA ═══════════════════════════════════════
   Substitui o filete de quatro cores que eu havia posto aqui. O filete era
   decorativo e ficava igual em toda a pagina; a barra de progresso ocupa o mesmo
   lugar e DIZ ALGO: quanto falta. Uma faixa colorida que nao informa nada e so
   ruido no topo da tela.

   Fica no topo absoluto do cromo, acima das duas faixas. `transform:scaleX` em
   vez de `width` porque escala e composta na GPU e nao dispara layout a cada
   pixel de rolagem.                                                            */
.bh-prog{
  position:fixed;left:0;right:0;top:0;height:3px;
  z-index:calc(var(--z-head) + 2);pointer-events:none;
  background:rgba(41,66,93,.09);
}
.bh-prog span{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--c1-ink),var(--c1) 55%,var(--c4));
  box-shadow:0 0 10px color-mix(in srgb,var(--c1) 55%,transparent);
}
/* MESMA regua do .wrap das secoes (§5.4) */
.bh-top__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.bh-top__l,.bh-top__r{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);min-width:0}
.bh-top__i{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;
  font-size:.79rem;font-weight:500;color:var(--ink-2);
  transition:color var(--d-fast) var(--e-out);
}
/* Cada dado com o seu acento, e nao todos no mesmo azul: telefone em c2 porque
   e o canal aprovado de contato, e-mail em c1, local em c3. E leitura rapida por
   cor, que e o que uma barra de contato precisa. */
.bh-top__i i{font-size:.9em;color:var(--c1-ink);opacity:1}
.bh-top__l .bh-top__i:first-child i{color:var(--c2-ink)}
.bh-top__l .bh-top__i:nth-child(3) i{color:var(--c3-ink)}
.bh-top__r .bh-top__i i{color:var(--c4-ink)}
a.bh-top__i:hover{color:var(--ink)}
.bh-top__div{width:1px;height:18px;background:rgba(41,66,93,.18);flex:none}
/* atalho em destaque: solido na cor da marca, para ser o unico ponto de
   contraste forte da faixa e nao competir com os outros itens */
.bh-top__feat{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;
  padding:6px 15px;border-radius:var(--r-pill);
  font-size:.76rem;font-weight:600;letter-spacing:-.005em;color:#fff;
  background:var(--navy-600);
  border:1px solid transparent;
  box-shadow:0 6px 14px -8px rgba(41,66,93,.7);
  transition:background var(--d-fast),transform var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out);
}
.bh-top__feat i{color:#fff;opacity:.82}
/* `color:#fff` REPETIDO no hover de proposito. O botao declara branco no estado
   normal, e no hover o fundo fecha em --c1-ink: se qualquer regra generica de
   `a:hover` do projeto (ou de um CSS de secao salvo pelo painel) mudar a cor do
   link, o resultado e texto azul sobre fundo azul, que foi o que apareceu na tela
   do Joao. Fixar a cor aqui torna o estado impossivel de quebrar por fora. */
.bh-top__feat:hover{
  background:var(--c1-ink);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 20px -10px rgba(42,94,153,.75);
}
.bh-top__feat:hover i{color:#fff;opacity:1}
/* Carreira: contorno, e nao preenchido. O atalho solido ao lado e o destaque
   comercial da faixa; dois blocos cheios lado a lado brigariam entre si e o
   olho nao saberia qual e o principal. */
.bh-top__job{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
  padding:5px 13px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;color:var(--c3-ink);
  border:1px solid color-mix(in srgb,var(--c3) 34%,transparent);
  background:color-mix(in srgb,var(--c3) 8%,transparent);
  transition:background var(--d-fast),border-color var(--d-fast),color var(--d-fast);
}
.bh-top__job i{font-size:.9em}
.bh-top__job:hover{background:color-mix(in srgb,var(--c3) 16%,transparent);
  border-color:color-mix(in srgb,var(--c3) 60%,transparent)}
:root[data-head="over"] .bh-top__job{
  color:#C9B6E8;border-color:rgba(201,182,232,.34);background:rgba(201,182,232,.08);
}
:root[data-head="over"] .bh-top__job:hover{background:rgba(201,182,232,.18)}
@media(max-width:900px){.bh-top__job span{display:none}
  .bh-top__job{padding:5px 10px}}

/* ══ REDES SOCIAIS ════════════════════════════════════════════════════════
   10/08/2026, segunda passada · TODAS NO MESMO TOM, por pedido do Joao.
   A versao anterior dava a cor propria a cada rede (Instagram em degrade rosa,
   LinkedIn em azul, Google em quatro cores). Tres tratamentos diferentes lado a
   lado numa faixa de 42px viravam confete: cada icone puxava para um lado e o
   grupo deixava de ler como grupo.

   Agora e UM tom para todas, o azul do Google (#4285F4), que e o tom de terceiro
   mais proximo do azul de projeto da Bononi e por isso o unico que assenta na
   paleta sem brigar: glifo na cor cheia, fundo em 14% dela. O contraste passa a
   ser o mesmo nas tres, e a faixa volta a ter uma cor de acento so.          */
.bh-top__soc a{
  --net:#4285F4;
  color:var(--net);
  background:color-mix(in srgb,var(--net) 14%,transparent);
}
.bh-top__soc a:hover{background:color-mix(in srgb,var(--net) 26%,transparent)}
/* Na faixa escura o fundo abre, e a COR DO GLIFO precisa ser repetida aqui.
   Medido: sem esta linha os tres saiam em --navy-200 (154,172,190), porque a
   regra antiga `:root[data-head="over"] .bh-top__soc a{color:var(--navy-200)}`
   tem 0-2-1 de especificidade e ganha do meu 0-1-1. Repetir a cor no seletor de
   mesmo peso e o que resolve sem `!important`. */
:root[data-head="over"] .bh-top__soc a{
  color:var(--net);
  background:color-mix(in srgb,var(--net) 30%,transparent);
}
/* A cidade tem DUAS copias no markup, e cada uma serve a uma largura: a `--hide`
   aparece acima de 1120px junto do e-mail, e esta `--so` e a do celular, onde o
   e-mail sai e sobra lugar para um dado. Sem este `display:none` as duas
   apareciam juntas no desktop, e a faixa mostrava "Itajai/SC" duas vezes. */
.bh-top__i--so{display:none}

/* Selo de e-mail: ocupa o lugar das redes enquanto elas nao existem no painel. */
.bh-top__sel{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;
  padding:5px 12px 5px 8px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;color:var(--ink-2);
  background:rgba(41,66,93,.05);border:1px solid rgba(41,66,93,.1);
  transition:background var(--d-fast),border-color var(--d-fast),color var(--d-fast);
}
.bh-top__sel i{
  width:20px;height:20px;border-radius:7px;display:grid;place-items:center;
  font-size:.68rem;color:#fff;background:var(--c1-ink);
}
.bh-top__sel:hover{background:rgba(41,66,93,.09);border-color:rgba(41,66,93,.24);color:var(--ink)}
:root[data-head="over"] .bh-top__sel{
  color:var(--navy-100);background:rgba(255,255,255,.08);border-color:rgba(198,209,220,.2);
}
/* Acima de 1120px o selo SAI: ali o e-mail ja aparece por extenso na esquerda da
   faixa, e o mesmo endereco duas vezes na mesma linha e ruido. Declarado DEPOIS
   da regra base de proposito: as duas tem a mesma especificidade e o empate
   resolve por ordem no arquivo, como ja me pegou duas vezes hoje. */
@media(min-width:1121px){.bh-top__sel{display:none}}

.bh-top__soc{display:flex;gap:3px}
.bh-top__soc a{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-3);font-size:.82rem;text-decoration:none;
  transition:background var(--d-fast),color var(--d-fast);
}
.bh-top__soc a:hover{background:rgba(41,66,93,.1);color:var(--c1-ink)}
@media(max-width:1120px){.bh-top__i--hide{display:none}}
@media(max-width:760px){.bh-top{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   FAIXA 2 · BARRA PRINCIPAL
   Grid `auto 1fr auto`: logo | nav CENTRADO | acoes. E o grid que da a
   simetria; com flex + margin-auto o nav encostava no CTA.
   ══════════════════════════════════════════════════════════════════════ */
.bh{
  position:fixed;top:var(--top-h);left:0;right:0;z-index:var(--z-head);
  /* ══ BLOCO DE CONTENCAO ESTAVEL PARA O MEGA-MENU ══════════════════════
     08/08/2026 · `backdrop-filter` cria bloco de contencao para descendentes
     `position:fixed`. Como ele so existe na parada `solid`, a referencia do
     painel MUDAVA de estado para estado, medido:
         over   backdrop-filter none    -> fixed conta da viewport
         solid  backdrop-filter ativo   -> fixed conta do proprio .bh
     Com a mesma regra de `top`, o painel ficava colado em over e 44px abaixo em
     solid, porque em solid o --top-h entrava duas vezes.
     `translateZ(0)` faz .bh ser SEMPRE o bloco de contencao. Assim o painel usa
     `top:100%`, que por definicao e a base do header, e nao ha mais conta nem
     variante por estado para manter em sincronia. */
  transform:translateZ(0);
  transition:top .42s var(--e-out),background var(--d-mid) var(--e-out),
             box-shadow var(--d-mid) var(--e-out);
  /* sem border-bottom: a separacao entre a barra e a pagina fica por conta da
     sombra em `solid`, que ja da o descolamento sem desenhar um risco. */
}
/* .is-top0 saiu: a barra principal nao vai mais sozinha para o topo. Ela segue
   `top:var(--top-h)` sempre, e como o token encolhe em [data-head="solid"], as
   duas faixas compactam juntas. Era isso que faltava para o cromo ler como um
   objeto so em vez de duas peças com vida propria. */
.bh__in{
  position:relative;isolation:isolate;   /* base do ::before da grade */
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  height:var(--bar-h);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  column-gap:clamp(22px,3vw,48px);
  transition:height var(--d-mid) var(--e-out);
}
.bh[data-state="solid"] .bh__in{height:var(--bar-h-sm)}

/* ── as duas paradas do tema claro ──────────────────────────────────────────
   `over` e a home sobre o video: papel translucido com blur, e nao gradiente
   escuro. Mesmo a 88% o ink no papel fica muito acima de AA, entao o texto e
   legivel sobre qualquer quadro do video, o que um header escuro sobre video
   claro nunca garantiria.
   `solid` fecha para 98%. A diferenca entre as duas e pequena de proposito: um
   header que muda demais ao rolar chama atencao para si.                      */
/* `over` volta a ser o gradiente escuro que desce sobre o hero: e o unico jeito
   de o video aparecer inteiro atras da barra. Texto claro, logo branca. */
.bh[data-state="over"]{
  background:linear-gradient(to bottom,rgba(11,18,26,.62),rgba(11,18,26,.2) 62%,transparent);
  box-shadow:none;
}
.bh[data-state="over"] .bh__nav > li > a,
.bh[data-state="over"] .bh__nav > li > button{color:rgba(255,255,255,.9)}
.bh[data-state="over"] .bh__nav > li > a:hover,
.bh[data-state="over"] .bh__nav > li > button:hover,
.bh[data-state="over"] .bh__nav > li > a[aria-current="page"]{color:#fff}
.bh[data-state="over"] .bh__nav > li > a::after,
.bh[data-state="over"] .bh__nav > li > button::after{background:var(--c1)}
.bh[data-state="over"] .bh__srch{
  background:rgba(255,255,255,.08);border-color:rgba(198,209,220,.22);
  color:var(--navy-100);box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.bh[data-state="over"] .bh__srch > i{
  color:#cfe0f2;background:rgba(255,255,255,.12);
}
.bh[data-state="over"] .bh__srch kbd{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:var(--navy-100);
}
.bh[data-state="over"] .bh__srch:hover{
  background:rgba(255,255,255,.14);border-color:rgba(198,209,220,.42);color:#fff;
}
.bh[data-state="over"] .bh__wordmark{color:#fff}

/* a troca de logo por estado vive junto de .bh__logo img, mais abaixo: aqui em
   cima ela perdia a disputa de especificidade. Ver o comentario la. */
.bh[data-state="solid"]{
  background:color-mix(in srgb,var(--paper) 98%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(22px);backdrop-filter:saturate(1.3) blur(22px);
  box-shadow:0 14px 36px -24px rgba(11,18,26,.34);
}
/* A grade de prancha que eu havia posto aqui saiu: no header ela lia como
   quadradinhos e nao como papel milimetrado. Grade funciona em superficie grande
   de secao, nao numa faixa de 100px de altura. */

.bh__prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--c1),var(--navy-200));
  box-shadow:0 0 12px color-mix(in srgb,var(--c1) 60%,transparent);
  transition:width .1s linear;
}

/* ── logo ──────────────────────────────────────────────────────── */
.bh__logo{display:flex;align-items:center;flex:none;text-decoration:none;justify-self:start}
.bh__logo img{
  /* 07/08/2026: subiu de 38..50 para 44..58. Sobrou espaco na barra depois
     de o CTA sair, e a logo era o elemento mais tímido do header. */
  /* 01/09/2026 · Mais 20%, pedido do cliente na 1a analise: "De um modo geral
     a logo pode ser levemente maior (acredito que em torno de 20%)".
     44..58 vira 53..70. A barra do header nao muda de altura: o `.bh__in` e
     grid de altura livre, e a logo ja era o item mais alto dela, entao ela
     cresce dentro do respiro que existia. Medir depois. */
  display:block;height:clamp(53px,4.8vw,70px);width:auto;
  transition:height var(--d-mid) var(--e-out);
}
.bh[data-state="solid"] .bh__logo img{height:clamp(46px,4.1vw,58px)}

/* ══ TROCA DE LOGO POR ESTADO ═════════════════════════════════════════════
   Duas <img> no DOM, uma escondida. Trocar o `src` por JS piscaria no primeiro
   scroll, e a logo errada desaparece por completo no fundo oposto.

   O SELETOR INCLUI `img` DE PROPOSITO. Eu havia escrito `.bh__logo-w{display:none}`
   la em cima, e as duas logos apareciam ao mesmo tempo: `.bh__logo img` tem
   especificidade 0-1-1 (classe + tipo) contra 0-1-0 da classe sozinha, e ainda
   vem depois no arquivo. O `display:block` dela ganhava sempre. Mesmo erro que a
   media query de altura e a regra de alvo de toque me pregaram: em CSS, a
   disputa e de especificidade E de ordem, nas duas ao mesmo tempo.
   ═════════════════════════════════════════════════════════════════════════ */
.bh__logo img.bh__logo-w{display:none}
.bh[data-state="over"] .bh__logo img.bh__logo-w{display:block}
.bh[data-state="over"] .bh__logo img.bh__logo-n{display:none}
.bh__wordmark{font-family:var(--f-disp);font-weight:600;color:#fff;letter-spacing:-.02em;font-size:1.1rem}

/* ── nav centrado ──────────────────────────────────────────────── */
.bh__navwrap{justify-self:center;min-width:0}
.bh__nav{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:clamp(14px,1.6vw,26px);list-style:none;
}
.bh__nav > li{position:relative;display:flex}
/* 29/07/2026 · CAUSA-RAIZ DOS SUBMENUS FEIOS.
   Este seletor era de DESCENDENTE (.bh__nav a), entao alcancava tambem os
   links DENTRO do painel .mega, que fica pendurado em .bh__nav > li. O painel
   e claro (creme) e herdava o tema escuro do header: os tres CTAs ("Ver
   todos", "Ver esta frente", "Falar com a equipe") ficavam com texto BRANCO
   sobre fundo claro e com background:none matando o botao. Isso viola o
   §5.5 do DNA ("o painel nunca herda o tema escuro do resto do site").
   Escopo agora e de FILHO DIRETO: so os itens de primeiro nivel do nav. */
/* 07/08/2026: os dois itens com seta ficavam 3px acima dos simples, porque
   <button> e <a> nao compartilham a linha de base por padrao. align-items no
   li e altura igual nos dois resolvem. */
.bh__nav > li{display:flex;align-items:center;height:40px}
.bh__nav > li > a,.bh__nav > li > button{height:100%;display:inline-flex;align-items:center}
.bh__nav > li > a,.bh__nav > li > button{
  white-space:nowrap;                       /* base da regra §5.3 */
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-sans);font-size:clamp(.85rem,.8rem + .16vw,.94rem);font-weight:500;
  letter-spacing:-.006em;text-decoration:none;
  /* tema claro: ink-2 da 7,2:1 no papel. O text-shadow saiu porque existia para
     salvar branco sobre video, e sombra atras de texto escuro em fundo claro
     so suja o traco. */
  color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:10px 0;
  transition:color var(--d-fast) var(--e-out);
}
.bh__nav > li > a:hover,.bh__nav > li > button:hover,
.bh__nav > li > a[aria-current="page"]{color:var(--ink)}
.bh__nav > li > a[aria-current="page"]{font-weight:600}
.bh__nav > li > a::after,.bh__nav > li > button::after{
  content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:2px;
  background:var(--c1-ink);transform:scaleX(0);transform-origin:center;
  transition:transform var(--d-mid) var(--e-out);
}
.bh__nav > li > a:hover::after,.bh__nav > li > button:hover::after,
.bh__nav > li > a[aria-current="page"]::after,.bh__nav > li.is-open > button::after{transform:scaleX(1)}
.bh__nav .caret{font-size:.6em;opacity:.7;transition:transform var(--d-mid) var(--e-out)}
.bh__nav li.is-open .caret{transform:rotate(180deg)}

/* ── acoes ─────────────────────────────────────────────────────── */
.bh__act{justify-self:end;display:flex;align-items:center;gap:11px;flex:none}
/* ── busca aberta no header ────────────────────────────────────────────
   07/08/2026: era um icone de 40px ao lado do CTA. Com o CTA fora, virou
   campo aparente de 290px. Continua sendo um <button>, nao um <input>:
   ver o porque no comentario do markup.

   O visual e de campo, entao precisa de tres coisas que um botao nao tem
   por padrao: texto alinhado a esquerda, cursor de texto no placeholder e
   um estado de foco que pareca campo focado, nao botao pressionado.       */
.bh__srch{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:11px;cursor:text;
  /* 50px e nao 44: numa barra que subiu para 106 o campo antigo ficava baixo
     demais e parecia sobra. A lupa ganhou um selo proprio no lugar do icone
     solto, que e o que mais muda a leitura de "botao" para "campo". */
  width:310px;height:50px;padding:0 7px 0 7px;
  border-radius:var(--r-pill);text-align:left;
  background:#fff;
  border:1px solid rgba(41,66,93,.14);
  color:var(--ink-3);font-family:inherit;font-size:.87rem;
  box-shadow:inset 0 1px 2px rgba(41,66,93,.05), 0 2px 6px -4px rgba(41,66,93,.18);
  transition:background var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out);
}
/* selo da lupa: quadrado arredondado tingido na cor de projeto */
.bh__srch > i{
  flex:none;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;font-size:13px;
  color:var(--c1-ink);
  background:color-mix(in srgb,var(--c1) 12%,transparent);
  transition:color var(--d-fast),background var(--d-fast);
}
.bh__srch-ph{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* o rotulo curto e exclusivo do celular: no desktop cabe a frase inteira */
.bh__srch-ph--sm{display:none}
.bh__srch kbd{
  flex:none;font-family:var(--f-mono);font-size:.6rem;line-height:1;
  /* --navy-050 no lugar de --cream-2, pelo mesmo motivo da faixa: cream-2 e
     quente e destoava do campo branco em volta. */
  padding:5px 7px;border-radius:7px;color:var(--ink-3);
  background:var(--navy-050);border:1px solid rgba(41,66,93,.12);
  transition:background var(--d-fast),color var(--d-fast);
}
.bh__srch:hover{
  border-color:color-mix(in srgb,var(--c1) 40%,transparent);color:var(--ink-2);
  box-shadow:inset 0 1px 2px rgba(41,66,93,.04), 0 8px 18px -10px rgba(42,94,153,.4);
}
.bh__srch:hover > i{background:color-mix(in srgb,var(--c1) 20%,transparent)}
.bh__srch:hover kbd{background:#fff;color:var(--ink-2)}
/* foco: anel na cor da marca, como campo focado de verdade */
.bh__srch:focus-visible{
  outline:none;color:var(--ink);
  border-color:var(--c1-ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 24%,transparent);
}
.bh__srch:focus-visible > i{color:#fff;background:var(--c1-ink)}

/* Abaixo de 1180px sobra o selo da lupa: e o ponto em que os 310px comecariam a
   empurrar o nav. O selo mantem a area de clique, que o icone solto perdia. */
@media(max-width:1180px){
  .bh__srch{width:auto;padding:7px;gap:0}
  /* `:not()` para o rotulo curto sobreviver: sem ele, este seletor (que casa
     com as duas classes do mesmo span) reesconde o "Pesquisar" do celular. */
  .bh__srch-ph:not(.bh__srch-ph--sm),.bh__srch kbd{display:none}
}
.bh__cta{padding:12px 22px;font-size:.86rem;white-space:nowrap}
@media(max-width:1320px){.bh__search kbd{display:none}.bh__search{padding:10px 12px}}

/* ══ MEGA-MENU (§5.5 · variante A) ═══════════════════════════════════
   Painel LARGO, fundo CLARO mesmo com o site escuro, eyebrow com contador,
   "Ver todos" no canto, grade numerada e preview que troca por hover.
   ══════════════════════════════════════════════════════════════════════ */
.mega{
  /* `top:100%` e a base do .bh, que e o bloco de contencao (ver translateZ ali).
     Colado por DEFINICAO, em qualquer estado e com qualquer altura de barra: nao
     ha soma de tokens para errar nem variante por estado para esquecer, que foi
     exatamente o que aconteceu duas vezes hoje.
     O raio de cima e zero pelo mesmo motivo do encosto: canto reto em cima faz o
     painel parecer que SAI do header em vez de flutuar sob ele. */
  position:fixed;left:50%;top:100%;
  transform:translateX(-50%) translateY(-10px);
  /* §5.4: UM container so. A largura tem de ser a do CONTEUDO do header
     (.bh__in menos os gutters), senao a borda esquerda do painel nao bate
     com a logo. Estava em 1180px fixo e sobrava 14px de cada lado.
     O 100% (e nao 100vw) resolve contra o bloco do fixed, ja sem a barra
     de rolagem, entao nao ha estouro em tela estreita. */
  width:min(calc(var(--wrap) - var(--gut) * 2),calc(100% - var(--gut) * 2));
  /* canto reto em cima, arredondado embaixo: e o que faz o painel parecer que
     SAI do header em vez de flutuar sob ele */
  border-radius:0 0 22px 22px;overflow:hidden;
  background:linear-gradient(180deg,var(--paper),var(--cream));
  border:1px solid color-mix(in srgb,var(--navy-600) 22%,transparent);
  box-shadow:0 46px 96px -36px rgba(11,18,26,.5),inset 0 1px 0 rgba(255,255,255,.8);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--e-out),transform .3s var(--e-out),visibility .24s;
  z-index:calc(var(--z-head) + 2);
}
/* A variante `.bh[data-state="solid"] .mega{top:...}` foi REMOVIDA em
   08/08/2026. Ela existia para recalcular a posicao quando a barra encolhe,
   e ja tinha ficado errada uma vez (esquecia o --top-h depois que as duas
   faixas passaram a andar juntas). Com `top:100%` no painel nao ha o que
   recalcular: a base do header e a base do header em qualquer altura. */
.mega::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--c1) 25%,var(--c3) 50%,var(--c1) 75%,transparent);
}
li.is-open > .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega__in{padding:clamp(22px,2.2vw,30px)}

/* ── Cabecalho do painel ──────────────────────────────────────────────
   Eyebrow com contador ao vivo (§5.5) + a frase de contexto do grupo, que
   antes vivia solta no rodape do card em monoespacada parecendo debug,
   + "Ver todos" como PILULA, nao como texto flutuando. */
.mega__hd{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid rgba(41,66,93,.13);
}
.mega__eye{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--ink-3);
}
.mega__eye b{
  font-family:var(--f-mono);font-weight:600;color:var(--c1-ink);
  padding:3px 9px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c1) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c1) 28%,transparent);
}
.mega__dot{
  width:7px;height:7px;border-radius:50%;background:var(--c1);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent);
  animation:bnPulse 2.8s var(--e-io) infinite;
}
.mega__sub{
  margin-top:9px;font-size:.92rem;line-height:1.4;color:var(--ink-2);max-width:60ch;
}
.mega__all{
  flex:none;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  text-decoration:none;font-size:.83rem;font-weight:600;color:var(--c1-ink);
  padding:9px 15px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c1) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--c1) 26%,transparent);
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast),color var(--d-fast);
}
.mega__all:hover{background:var(--c1-ink);border-color:var(--c1-ink);color:#fff}
.mega__all i{transition:transform var(--d-mid) var(--e-out)}
.mega__all:hover i{transform:translateX(4px)}

/* ── Corpo: as duas colunas SEMPRE terminam na mesma linha ────────────
   29/07/2026 · O defeito que ele apontou: o card da direita tinha 479px de
   conteudo enquanto a lista tinha 203px, sobrando 276px de vazio no painel.
   Agora  align-items:stretch  iguala a altura das duas colunas e
          grid-auto-rows:1fr   faz as linhas da lista dividirem essa altura.
   Resultado: zero vazio, com qualquer quantidade de itens. */
.mega__body{
  display:grid;grid-template-columns:1.34fr .66fr;
  gap:clamp(18px,2vw,26px);align-items:stretch;
}
.mega__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-auto-rows:1fr}
.mega__list > li{display:flex}
/* Com 4 itens ou menos, 2 colunas dariam so 2 linhas: elas esticariam para
   ~150px e o item ficaria boiando no meio do nada. Em 1 coluna sao 4 linhas
   de altura confortavel e cada item ganha a largura inteira para o texto. */
.mega__list--slim{grid-template-columns:1fr}

.mega__i{
  flex:1;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:11px;
  padding:13px 13px;border-radius:14px;text-decoration:none;
  background:#fff;border:1px solid rgba(41,66,93,.09);
  box-shadow:0 1px 2px rgba(11,18,26,.03);
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast),
             box-shadow var(--d-fast),transform var(--d-fast) var(--e-out);
}
.mega__i:hover,.mega__i.is-on{
  background:color-mix(in srgb,var(--mi) 6%,#fff);
  border-color:color-mix(in srgb,var(--mi) 34%,transparent);
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--mi) 60%,transparent);
}
.mega__i:hover{transform:translateY(-1px)}
.mega__n{
  font-family:var(--f-mono);font-size:.64rem;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;opacity:.75;transition:color var(--d-fast),opacity var(--d-fast);
}
.mega__i.is-on .mega__n{color:var(--mii);opacity:1}
.mega__ico{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:14px;
  color:var(--mii);background:color-mix(in srgb,var(--mi) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--mi) 26%,transparent);
  transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast);
}
.mega__i:hover .mega__ico,.mega__i.is-on .mega__ico{background:var(--mi);color:#fff;border-color:var(--mi)}
.mega__tx{min-width:0}
/* Titulo tambem em clamp, nao em nowrap+ellipsis: "Gerenciamento de Projetos
   em BIM" estourava por 9px e saia cortado. Assim ele quebra em 2 linhas
   limpas, e nomes maiores que o cliente venha a cadastrar tambem. */
.mega__tx b{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-family:var(--f-disp);font-size:.93rem;font-weight:600;
  letter-spacing:-.018em;color:var(--ink);line-height:1.25;margin-bottom:3px;
}
/* Antes: nowrap + ellipsis cortava a frase no meio da palavra ("do...",
   "evoluindo...", "espaco,..."). O resumo agora e curto na origem e, se
   alguem editar para um texto maior, quebra limpo em ate 2 linhas. */
.mega__tx span{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:.79rem;line-height:1.4;color:var(--ink-3);
}
.mega__arw{
  font-size:.74rem;color:var(--mi);opacity:0;
  transition:opacity var(--d-fast),transform var(--d-fast);
}
.mega__i:hover .mega__arw,.mega__i.is-on .mega__arw{opacity:1;transform:translateX(3px)}

/* ── Preview ao vivo (variante A) ─────────────────────────────────────
   Malha de planta ao fundo para o card ter materia visual propria: sem ela
   ele era so texto esticado. Os CTAs ficam ancorados no rodape via
   margin-top:auto, entao o card preenche a altura sem inchar o texto. */
.mega__pv{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:13px;
  padding:clamp(18px,1.9vw,22px);border-radius:16px;
  background:linear-gradient(158deg,color-mix(in srgb,var(--mi) 11%,#fff),var(--paper) 62%);
  border:1px solid color-mix(in srgb,var(--mi) 24%,transparent);
  transition:background .4s var(--e-out),border-color .4s var(--e-out);
}
.mega__pv::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(color-mix(in srgb,var(--mi) 17%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--mi) 17%,transparent) 1px,transparent 1px);
  background-size:var(--grid-step) var(--grid-step);
  -webkit-mask-image:radial-gradient(118% 80% at 88% 4%,#000,transparent 70%);
          mask-image:radial-gradient(118% 80% at 88% 4%,#000,transparent 70%);
}
.mega__pv > *{position:relative;z-index:1}
.mega__pv-ico{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:20px;
  color:#fff;background:linear-gradient(140deg,var(--mi),color-mix(in srgb,var(--mi) 70%,#000 14%));
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--mi) 72%,transparent);
}
.mega__pv-t{
  font-family:var(--f-disp);font-size:1.04rem;font-weight:600;letter-spacing:-.022em;
  line-height:1.28;color:var(--ink);
}
.mega__pv-d{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
  font-size:.845rem;line-height:1.6;color:var(--ink-2);
}
/* Ancorados no rodape: e o que faz as duas colunas fecharem na mesma linha.
   Lado a lado, nao empilhados: empilhado custava 90px de altura do card, o que
   empurrava as linhas da lista para 102px com so 46px de conteudo dentro.
   O WhatsApp vira botao quadrado de icone, entao a acao principal domina. */
.mega__pv-act{margin-top:auto;padding-top:4px;display:flex;align-items:stretch;gap:8px}
.mega__pv-go{
  flex:1;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;border-radius:var(--r-pill);text-decoration:none;
  font-size:.83rem;font-weight:600;color:#fff;background:var(--navy-600);
  white-space:nowrap;
  box-shadow:0 10px 22px -12px rgba(41,66,93,.7);
  transition:background var(--d-fast),transform var(--d-fast) var(--e-out);
}
.mega__pv-go:hover{background:var(--navy-700);transform:translateY(-1px)}
.mega__pv-go i{transition:transform var(--d-mid) var(--e-out)}
.mega__pv-go:hover i{transform:translateX(4px)}
.mega__pv-wa{
  flex:none;width:44px;
  display:inline-grid;place-items:center;font-size:1rem;
  border-radius:var(--r-pill);text-decoration:none;color:var(--wa-d);
  background:color-mix(in srgb,var(--wa) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--wa) 34%,transparent);
  transition:background var(--d-fast),border-color var(--d-fast),transform var(--d-fast) var(--e-out);
}
.mega__pv-wa:hover{background:color-mix(in srgb,var(--wa) 20%,#fff);transform:translateY(-1px)}

/* Abaixo de 1240px o preview sai e a lista vira coluna unica: o painel
   inteiro cabe sem esmagar o texto. */
@media(max-width:1240px){
  .mega__body{grid-template-columns:1fr}
  .mega__pv{display:none}
  .mega__list{grid-template-columns:1fr;grid-auto-rows:auto}
}

/* ── BREAKPOINT DO HAMBURGUER ────────────────────────────────────────
   Conta com o texto REAL, 6 itens:
     Gerenciamento BIM 137 + Solucoes 64 + Projetos 57 + Metodo 53
     + Sobre 41 + Conteudos 76             = 428px de texto
     + 5 gaps de 26px                      = 130px
     + logo 132 + busca 108 + CTA 176      = 416px
     + gutters 88 + folgas do grid 80      = 168px
                                     TOTAL = 1142px
   Hamburguer em 1180px deixa folga. Item novo no nav = REFAZER a conta.
   ══════════════════════════════════════════════════════════════════ */
.bh__burger{display:none}
@media(max-width:1180px){
  .bh__navwrap{display:none}
  .bh__in{grid-template-columns:auto 1fr auto}
  .bh__burger{
    display:grid;place-items:center;width:44px;height:44px;flex:none;
    border-radius:12px;cursor:pointer;
    border:1px solid rgba(198,209,220,.26);background:rgba(255,255,255,.07);
  }
}
@media(max-width:640px){.bh__cta span{display:none}.bh__cta::after{content:"Contato"}.bh__search kbd{display:none}}

.bh__burger-l{position:relative;width:20px;height:13px}
.bh__burger-l span{
  position:absolute;left:0;width:20px;height:1.7px;border-radius:2px;background:var(--paper);
  transition:transform var(--d-mid) var(--e-out),opacity var(--d-fast);transform-origin:center;
}
.bh__burger-l span:nth-child(1){top:0}
.bh__burger-l span:nth-child(2){top:5.6px}
.bh__burger-l span:nth-child(3){top:11.2px}
.bh__burger.is-open .bh__burger-l span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.bh__burger.is-open .bh__burger-l span:nth-child(2){opacity:0;transform:scaleX(0)}
.bh__burger.is-open .bh__burger-l span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER MOBILE  ·  refeito em 10/08/2026
   ──────────────────────────────────────────────────────────────────────────
   O que estava errado, medido em 375x812 antes de mexer:

     1. BURACO DE 54px ACIMA DA BARRA. `.bh` usa `top:var(--top-h)`, e --top-h
        vale 54px (44 em solid) porque reserva a faixa de contato. So que a
        faixa de contato tem `display:none` abaixo de 760px: a barra ficava
        empurrada para baixo por um espaco que nao existia, mostrando o fundo da
        pagina como uma tarja no topo da tela.
     2. HAMBURGUER INVISIVEL. As tres barras eram `background:var(--paper)`,
        quase branco, e a barra em mobile e clara: branco sobre branco. A
        moldura do botao tambem era a variante escura (branco a 7%), entao
        sobrava um retangulo claro vazio no canto. Era o unico controle de
        navegacao do celular, e estava apagado.
     3. --head-h ERRADO POR 64px. Vale calc(--top-h + --bar-h) = 150px, mas a
        barra media 86 e a faixa nao existia: todo hero reservava 64px a mais.

   A CORRECAO E NA VARIAVEL, nao no componente: zerando --top-h no celular, a
   barra sobe, --head-h encolhe e todos os heros se ajustam sozinhos, porque
   todos ja reservam --head-h. Uma variavel, tres consequencias.

   COR POR currentColor, e nao por estado repetido: o botao declara `color` uma
   vez por parada (claro/escuro) e a lupa e as tres barras herdam. Era a
   duplicacao que tinha deixado o hamburguer para tras quando a barra virou
   clara.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* 1 · A FAIXA DE CONTATO VOLTA AO CELULAR, em 34px.
     10/08/2026 · Ela estava escondida, e a altura reservada era zero. Agora ela
     existe de novo, compacta e com o que cabe em 375px: telefone com o icone
     verde do WhatsApp de um lado, cidade e o selo de e-mail (ou as redes, quando
     existirem) do outro. `--top-h` volta a valer, e como `--head-h` e a soma, o
     hero se reajusta sozinho. Os tres seletores sao necessarios porque
     `[data-head]` e escrito no <html> pelo JS e vence `:root` sozinho, e media
     query nao adiciona especificidade. */
  :root,
  :root[data-head="over"],
  :root[data-head="solid"]{
    /* 42px: com 36 o telefone encostava nas bordas de cima e de baixo da faixa.
       Agora sobram 11px de respiro para cada lado do texto de 20px. */
    --top-h:42px;
    /* 01/09/2026 · A logo do celular subiu de 47 para 56px (mais 20%, pedido do
       cliente), entao a barra sobe junto: 56 numa barra de 72 deixa 8px de cada
       lado, e logo encostando na borda le como erro de alinhamento. Em 80/72 ela
       fica com 12px em repouso e 8 depois de rolar, que e a mesma folga
       proporcional de antes. */
    --bar-h:80px;
    --bar-h-sm:72px;
  }
  .bh{top:var(--top-h)}

  /* A faixa segue o header: CLARA nas duas paradas. Na home o estado nasce
     `over`, e as regras de `over` pintam a faixa de escuro, o que deixaria uma
     tarja navy em cima de uma barra de papel. No celular o video nao esta mais
     atras do cromo, entao `over` nao tem por que existir aqui. */
  .bh-top,
  :root[data-head="over"] .bh-top{
    display:block;height:var(--top-h);
    background:linear-gradient(90deg,#EFF3F7,var(--navy-050) 52%,#EFF3F7);
    /* sem borda embaixo: a barra de baixo ja tem o fio das quatro disciplinas,
       e dois riscos paralelos a 34px de distancia leem como moldura */
  }
  :root[data-head="over"] .bh-top__i{color:var(--ink-2)}
  /* o telefone e um link de WhatsApp: o icone vai no verde do canal, e nao no
     azul de projeto. Cor de canal e o que faz o dedo achar sem ler. */
  .bh-top__l .bh-top__i:first-child i,
  :root[data-head="over"] .bh-top__l .bh-top__i:first-child i{color:#25D366}
  :root[data-head="over"] .bh-top__i--so i{color:var(--c3-ink)}
  /* MESMA REGUA nas duas faixas. A barra usa `--gut` e a faixa de cima usava 14px
     fixos: a diferenca de 4px deixava telefone e logo desalinhados na vertical, e
     era o que o Joao viu. Agora as duas leem o mesmo token. */
  .bh-top__in{
    height:100%;
    padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right));
    padding-block:4px;
  }
  .bh-top__l,.bh-top__r{gap:12px;min-width:0}
  /* fora: e-mail longo, horario, o atalho solido e o de carreira. Em 375px eles
     nao caberiam sem virar tres linhas de texto de 10px. */
  .bh-top__feat,.bh-top__job,.bh-top__div{display:none}
  .bh-top__i{font-size:.7rem;gap:6px}
  .bh-top__i i{font-size:.86em}
  /* a cidade aparece SO no celular por este seletor: a versao `--hide` continua
     escondida abaixo de 1120px */
  .bh-top__i--so{display:inline-flex}
  .bh-top__i--hide{display:none}
  /* o e-mail vira selo de icone: o endereco inteiro nao cabe */
  .bh-top__sel{padding:4px;gap:0}
  .bh-top__sel span{display:none}
  .bh-top__sel i{width:22px;height:22px}
  .bh-top__soc a{width:26px;height:26px;border-radius:8px}

  /* 2 · A BARRA. Compacta, translucida e com fio na base. A altura de 64px cai
     para 56 ao rolar: o suficiente para dar sensacao de resposta sem que a
     pagina pule. */
  .bh__in{
    column-gap:12px;
    padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right));
  }
  .bh[data-state="solid"]{
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
    box-shadow:0 10px 26px -20px rgba(11,18,26,.5);
  }
  /* fio das quatro disciplinas na base da barra: e a assinatura tecnica do
     site, aqui em 1px e com as pontas dissolvidas, para ler como acabamento e
     nao como enfeite. So na parada solid, senao cortaria o video do hero. */
  .bh[data-state="solid"]::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,var(--c1),var(--c4) 34%,var(--c3) 67%,var(--c2));
    opacity:.5;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  }

  /* 3 · LOGO MAIOR. Subiu de 30 para 36px (34 quando a barra encolhe ao rolar).
     Numa barra de 64px a logo de 30 sobrava espaco em cima e embaixo e lia como
     timida; 36 e o maior valor que ainda deixa 14px de folga vertical. */
  /* 47px, valor pedido. A barra sobe de 64 para 68 e a versao rolada de 56 para
     62 junto: com 47px de logo numa barra de 56 sobrariam 4,5px de cada lado, e
     logo encostando na borda le como erro de alinhamento. Em 68/62 ela fica com
     10,5px em cima e embaixo em repouso e 7,5 depois de rolar. */
  /* 01/09/2026 · 47 vira 56, os mesmos 20% do desktop. A conta do comentario
     acima continua valendo, so muda a folga: 56px de logo na barra de 68 deixa
     6px de cada lado em repouso, e por isso a barra sobe para 72/66. */
  .bh__logo img{height:56px}
  .bh[data-state="solid"] .bh__logo img{height:56px}

  /* 4 · BUSCA E MENU NUM CONTROLE SO ══════════════════════════════════════
     Eram dois botoes soltos de 42px, iguais e separados por 9px: dois objetos
     disputando o mesmo canto. Agora sao UM modulo, com fio divisorio no meio,
     como um par de teclas. E isso que da a leitura de instrumento em vez de
     dois botoes genericos:
       · a moldura e do modulo, e nao de cada botao
       · o fio de 1px no meio separa as duas funcoes
       · o brilho de 1px no topo (inset) da relevo sem sombra
       · cada metade acende na cor da marca quando pressionada
     O alvo de toque continua em 42px por 42, que e o que importa no dedo.    */
  .bh__act{
    display:flex;align-items:stretch;gap:0;
    border-radius:14px;overflow:hidden;
    background:#fff;
    border:1px solid rgba(41,66,93,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
               0 1px 2px rgba(41,66,93,.05),
               0 8px 18px -14px rgba(41,66,93,.4);
  }
  /* A BUSCA VOLTA A SER UM CAMPO, e nao um selo de lupa. Ela ja tinha a palavra
     escrita no desktop; no celular eu havia escondido tudo e sobrado o icone, que
     e o formato que ninguem reconhece como "posso digitar aqui". Agora ela ocupa o
     espaco que a barra tem de sobra e volta a dizer "Pesquisar". */
  /* NAO ESTICA MAIS. Com `flex:1` ela ocupava toda a folga da barra e sobrava
     uma area branca vazia de 60px depois da palavra: campo largo e vazio parece
     caixa quebrada, e nao convite para digitar. Agora ela tem a largura do
     proprio conteudo mais o respiro. */
  .bh__srch{
    flex:none;min-width:0;width:44px;height:44px;padding:0;
    display:grid;place-items:center;gap:0;border-radius:0;
    background:none;border:0;box-shadow:none;
    color:var(--ink-3);text-align:left;
    border-right:1px solid rgba(41,66,93,.13);
    transition:background var(--d-fast) var(--e-out),color var(--d-fast);
  }
  .bh__srch > i{
    width:auto;height:auto;background:none;border-radius:0;flex:none;
    font-size:16px;color:var(--c1-ink);
  }
  /* o rotulo volta a existir, com o texto curto: "Buscar servicos, metodo,
     conteudos" nao cabe em 375px, e reticencias no meio de um placeholder e pior
     que um placeholder curto. O texto completo segue no aria-label do botao. */
  /* `font-size:0` no span e o tamanho real no ::after: o texto longo continua no
     DOM (e o nome acessivel do botao), e na tela aparece a palavra curta. Trocar
     por `content` sem zerar o span imprimiria os dois textos, um atras do outro. */
  /* DOIS ROTULOS NO MARKUP, e nao um `content` no ::after. A versao com
     `font-size:0` no span mais o texto no pseudo-elemento deixava o span com
     LARGURA ZERO (medido: busca de 42px, exatamente o tamanho do icone), porque
     a caixa do pseudo nao dimensionava o pai colapsado. Dois spans resolvem sem
     truque: o longo sai no celular, o curto sai no desktop, e cada um e texto de
     verdade. */
  .bh__srch-ph:not(.bh__srch-ph--sm){display:none}
  /* a palavra "Pesquisar" sai: em 375px ela custava 68px e empurrava o
     modulo por cima da logo. Fica so a lupa, do tamanho do botao de menu. */
  .bh__srch-ph--sm{display:none}
  .bh__srch kbd{display:none}
  .bh__burger{
    width:46px;height:44px;flex:none;padding:0;
    display:grid;place-items:center;border-radius:0;
    background:none;border:0;color:var(--ink);box-shadow:none;
    transition:background var(--d-fast) var(--e-out),color var(--d-fast);
  }
  .bh__srch:active,.bh__burger:active{
    background:color-mix(in srgb,var(--c1) 14%,transparent);color:var(--c1-ink);
  }
  /* logo a esquerda, modulo encostado na direita, e o vao no meio e do vao */
  .bh__in{grid-template-columns:auto minmax(0,1fr);column-gap:10px}
  .bh__act{justify-self:end}
  /* a lupa perde o selo interno: dentro de um botao de 42px, selo dentro de
     selo vira ruido */
  .bh__srch > i{
    width:auto;height:auto;background:none;border-radius:0;
    font-size:15px;color:currentColor;
  }
  /* `:not()` para o rotulo curto sobreviver: sem ele, este seletor (que casa
     com as duas classes do mesmo span) reesconde o "Pesquisar" do celular. */
  .bh__srch-ph:not(.bh__srch-ph--sm),.bh__srch kbd{display:none}
  .bh__burger-l{width:18px;height:12px}
  .bh__burger-l span{width:18px;height:1.8px;background:currentColor}
  .bh__burger-l span:nth-child(2){top:5.1px}
  .bh__burger-l span:nth-child(3){top:10.2px}
  .bh__burger.is-open .bh__burger-l span:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
  .bh__burger.is-open .bh__burger-l span:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}
  /* aberto: o botao assume a cor da marca, para o X nao ficar orfao na tela */
  .bh__burger.is-open{
    background:color-mix(in srgb,var(--c1) 14%,transparent);
    border-color:color-mix(in srgb,var(--c1) 40%,transparent);
    color:var(--c1-ink);
  }

  /* 5 · A PARADA SOBRE O HERO ESCURO (home). Uma declaracao de `color` por
     parada, e os icones seguem. */
  .bh[data-state="over"] .bh__srch,
  .bh[data-state="over"] .bh__burger{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.24);
    color:#fff;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  .bh[data-state="over"] .bh__srch > i{color:#fff;background:none}

  /* 6 · A barra de progresso: 5px no celular (eram 2). No dedo, 2px de fio no
     topo da tela e um detalhe que ninguem percebe; 5 le como indicador. */
  .bh-prog{height:5px}
}

/* Entre 760 e 1180 a faixa de contato AINDA existe e o hamburguer ja apareceu:
   nessa janela o botao continua na barra clara, entao ele tambem precisa de cor
   de tinta escura. Era o mesmo bug do celular, num intervalo que ninguem olha. */
@media(min-width:761px) and (max-width:1180px){
  .bh__burger{background:rgba(41,66,93,.055);border-color:rgba(41,66,93,.12);color:var(--ink)}
  .bh__burger-l span{background:currentColor}
  .bh[data-state="over"] .bh__burger{
    background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   DRAWER MOBILE  ·  refeito do zero em 10/08/2026
   ──────────────────────────────────────────────────────────────────────────
   TEMA CLARO, e a unica superficie escura e o cabecalho da logo. Foi pedido, e
   funciona: o menu de um site tecnico e uma FERRAMENTA, e ferramenta se le
   melhor em papel. O navy sobrou onde importa, no topo, e ali ele faz o papel
   de cabecalho de documento.

   A COR E O INDICE. Cada linha carrega `--k` (o tom) e `--ki` (a versao de
   tinta) vindos do PHP, e a mesma variavel pinta tres coisas: o selo do icone,
   o fio da esquerda quando ativo e o fundo do contador. Nao ha um `if` de cor
   em nenhum lugar deste arquivo, e adicionar um item colorido novo e passar
   `style="--k:..."` no markup. Cor aqui nao e enfeite: e como o dedo acha a
   linha certa sem ler as sete.

   AS CINCO CAMADAS, de cima para baixo:
     1. cabecalho navy   logo grande, fechar, e os tres numeros autorizados
     2. acoes            WhatsApp (verde) e busca
     3. navegacao        sete linhas, duas com acordeao de escopos
     4. ir direto        seis atalhos em cartao, dois por linha
     5. disciplinas      doze pilulas coloridas lidas do banco
        conteudos        os tres ultimos artigos com capa
        contato          telefone, e-mail, horario
     6. rodape           redes e cidade

   OTIMIZACAO: zero imagem nova, zero fonte nova, zero JS novo. O acordeao usa
   `grid-template-rows: 0fr -> 1fr`, que anima altura sem JS e sem numero
   magico. Tudo o que se move e `transform` ou `opacity`, compostos na GPU.
   ══════════════════════════════════════════════════════════════════════════ */
.bd-bd{
  position:fixed;inset:0;z-index:var(--z-bd);background:rgba(11,18,26,.55);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity var(--d-mid),visibility var(--d-mid);
}
.bd-bd.is-open{opacity:1;visibility:visible}

.bdrawer{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);
  width:100%;                       /* 100% no celular, como pedido */
  display:flex;flex-direction:column;
  background:linear-gradient(184deg,#FFFFFF 0%,#F7FAFD 32%,#EFF5FB 68%,#E9F1F9 100%);
  transform:translateX(100%);
  transition:transform .42s var(--e-out);
  will-change:transform;
}
/* Acima de 760px a faixa de contato existe e a tela e larga: um painel de tela
   inteira ali viraria uma pagina em branco com sete links. */
@media(min-width:761px){.bdrawer{width:min(100%,440px);box-shadow:-30px 0 60px -30px rgba(11,18,26,.4)}}
.bdrawer.is-open{transform:translateX(0)}

/* ══ 1 · CABECALHO NAVY ═══════════════════════════════════════════════════ */
.bdrawer__top{
  position:relative;flex:none;overflow:hidden;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 14px;
  background:linear-gradient(150deg,var(--navy-800),var(--navy-700) 52%,var(--navy-900));
}
/* malha de prancha, o substrato tecnico da marca */
.bdrawer__top-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(198,209,220,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(198,209,220,.08) 1px,transparent 1px);
  background-size:var(--grid-step) var(--grid-step);
  -webkit-mask-image:radial-gradient(110% 120% at 88% 0%,#000,transparent 76%);
  mask-image:radial-gradient(110% 120% at 88% 0%,#000,transparent 76%);
}
/* fio das quatro disciplinas fechando o cabecalho: a assinatura do site */
.bdrawer__top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--c1),var(--c4) 34%,var(--c3) 67%,var(--c2));
  opacity:.85;
}
.bdrawer__top-r{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.bdrawer__brand{display:block;text-decoration:none;min-width:0}
/* Logo GRANDE: 46px contra os 27 de antes. Numa tela que virou menu inteiro, a
   logo e a unica coisa que diz onde o visitante esta. */
.bdrawer__brand img{height:46px;width:auto;display:block}
.bdrawer__brand strong{font-family:var(--f-disp);font-size:1.2rem;color:#fff}
.bdrawer__x{
  flex:none;width:44px;height:44px;border-radius:13px;cursor:pointer;
  display:grid;place-items:center;font-size:17px;
  color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background var(--d-fast),transform var(--d-fast) var(--e-out);
}
.bdrawer__x:active{background:rgba(255,255,255,.2);transform:scale(.94)}

/* ── ESTEIRA DE CLIENTES ──────────────────────────────────────────────────
   Substituiu os numeros grandes. Duas copias da lista deslizando 50%: no fim do
   ciclo a copia 2 esta exatamente onde a copia 1 comecou, entao o loop nao tem
   costura. `transform` e composto na GPU e a animacao nao dispara layout.
   As pontas se apagam por mascara, para os nomes nascerem e morrerem no nada em
   vez de baterem na borda.                                                   */
.bdrawer__cli{position:relative;margin-top:15px}
/* --navy-200 e nao --navy-300: medido, o 300 dava 3,30:1 contra este navy e
   reprovava em AA para texto pequeno. */
.bdrawer__cli-l{
  margin:0 0 8px;font-family:var(--f-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy-200);
}
.bdrawer__cli-w{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 88%,transparent);
}
.bdrawer__cli-t{
  list-style:none;margin:0;padding:0;display:flex;width:max-content;
  animation:bdCli 42s linear infinite;
}
/* O espacamento e MARGEM DO ITEM, e nao `gap` do container: com gap, o total
   mede 2 copias mais (2n-1) espacos, e translateX(-50%) cairia meio espaco fora
   do lugar, dando um tranco a cada volta. Com margem, cada copia mede
   exatamente o mesmo e o -50% e exato. */
.bdrawer__cli-t li{
  flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px;
  margin-right:7px;
  border-radius:var(--r-pill);white-space:nowrap;
  font-size:.73rem;font-weight:500;color:#EAF1F8;
  background:rgba(255,255,255,.07);border:1px solid rgba(198,209,220,.16);
}
/* Assume logo monocromatica: as doze estao pendentes no banco e a esteira e de
   nomes. Quando as reais chegarem, esta e a linha a revisar (logo colorida sobre
   navy pode nao querer virar branca). */
.bdrawer__cli-t li img{height:20px;width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.9}
@keyframes bdCli{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* o cursor por cima pausa: quem quer LER um nome consegue */
.bdrawer__cli-w:hover .bdrawer__cli-t{animation-play-state:paused}

/* ══ CORPO ════════════════════════════════════════════════════════════════ */
.bdrawer__body{
  flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  /* padding-top ZERO de proposito: quem da o respiro de cima e o proprio bloco
     de acoes fixas (.bdrawer__fix), e isso e o que permite ao `sticky` dele
     encostar no cabecalho navy. Com padding aqui, a caixa de padding do
     container empurrava o vidro 16px para baixo e abria uma fresta. */
  padding:0 16px 22px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
/* rotulo de secao: o mesmo eyebrow tecnico do resto do site */
.bdrawer__lbl{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 9px;font-family:var(--f-mono);font-size:.63rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.bdrawer__lbl a{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--c1-ink);font-weight:700;
}

/* ══ 2 · ACOES FIXAS ══════════════════════════════════════════════════════
   Sticky no topo do proprio scroll, com um vidro por baixo: as duas acoes ficam
   na tela enquanto o resto do menu passa. Num painel com ~1700px de conteudo,
   quem rolava ate as disciplinas ficava sem nenhuma saida de conversao a mao.
   O -16px de margem lateral com +16px de padding faz o vidro sangrar de borda a
   borda sem tirar os cartoes do alinhamento do corpo.                        */
/* 10/08/2026 · A FRESTA DE 16px. Este bloco tinha `margin-top:-16px` para
   cancelar o padding do corpo e encostar no cabecalho navy, e a margem NAO
   funcionava: medido, o corpo comeca em 145 e o vidro em 161.

   O motivo e o `position:sticky`: em `sticky`, o navegador nao deixa o elemento
   subir acima da CAIXA DE PADDING do container que rola. Com `padding-top:16px`
   no corpo, essa caixa comeca 16px abaixo, e `top:0` prendia o vidro ali,
   anulando a margem negativa.

   Sobrava uma fresta de 16px descoberta entre o navy e o vidro, e como o corpo
   rola por baixo, o que passava por ali aparecia como uma tira: pilulas de
   disciplina cortadas surgindo do nada abaixo do cabecalho.

   A correcao e mover o respiro de cima do CORPO para DENTRO do vidro: o corpo
   perde o padding-top (ver .bdrawer__body), a caixa de padding passa a comecar
   em 145, e `top:0` gruda o vidro encostado no navy. Nao ha mais fresta. */
.bdrawer__fix{
  position:sticky;top:0;z-index:5;
  margin:0 -16px 18px;padding:16px 16px 12px;
  background:linear-gradient(180deg,
    color-mix(in srgb,#fff 92%,transparent) 0%,
    color-mix(in srgb,#fff 88%,transparent) 62%,
    color-mix(in srgb,#F7FAFD 0%,transparent) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
}
.bdrawer__prime{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:14px 15px;border-radius:16px;text-decoration:none;margin-bottom:9px;
  background:var(--wa-grad);color:#fff;
  box-shadow:0 14px 30px -16px rgba(14,124,111,.7);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast);
}
.bdrawer__prime:active{transform:scale(.99)}
.bdrawer__prime > i:first-child{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  font-size:20px;background:rgba(255,255,255,.18);
}
.bdrawer__prime span{display:flex;flex-direction:column;gap:1px;min-width:0}
.bdrawer__prime strong{
  font-family:var(--f-disp);font-size:.98rem;font-weight:600;letter-spacing:-.02em;
}
.bdrawer__prime small{font-size:.74rem;opacity:.92}
.bdrawer__prime .arw{font-size:.82rem;opacity:.9}

.bdrawer__second{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  width:100%;padding:12px 13px;border-radius:16px;cursor:pointer;text-align:left;
  margin-bottom:20px;font-family:inherit;
  background:#fff;border:1px solid rgba(41,66,93,.11);
  box-shadow:0 2px 3px rgba(41,66,93,.03),0 14px 26px -20px rgba(41,66,93,.3);
}
.bdrawer__second > i:first-child{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:14px;color:var(--c1-ink);
  background:color-mix(in srgb,var(--c1) 12%,transparent);
}
.bdrawer__second span{display:flex;flex-direction:column;gap:1px;min-width:0}
.bdrawer__second strong{
  font-family:var(--f-disp);font-size:.94rem;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);
}
.bdrawer__second small{font-size:.73rem;color:var(--ink-3)}
.bdrawer__second kbd{
  font-family:var(--f-mono);font-size:.62rem;padding:5px 8px;border-radius:7px;
  color:var(--ink-3);background:var(--navy-050);border:1px solid rgba(41,66,93,.12);
}
.bdrawer__second{margin-bottom:0}
.bdrawer__second:active{background:var(--cream)}

/* ══ RESPONSAVEL TECNICO ══════════════════════════════════════════════════
   Segunda passada, 10/08/2026. A primeira versao era foto redonda pequena mais
   tres linhas de texto num cartao branco: correto e sem nenhuma presenca, num
   menu onde a pessoa E o produto.

   Agora e um CARTAO DE CREDENCIAL em navy, a mesma superficie do cabecalho do
   menu, entao os dois se leem como um par: a marca em cima, quem responde por
   ela logo abaixo. Ele tem fio de acento no topo, malha de prancha por dentro,
   retrato de 72px com anel conico em duas cores da marca, e o "ver a trajetoria"
   como rodape separado por um fio, com o icone em selo proprio.

   O TEXTO E O MESMO da assinatura de /sobre, palavra por palavra. Nada aqui foi
   inventado, e o que nao existe (CREA) nao aparece.                          */
.bdrawer__resp{
  position:relative;display:block;overflow:hidden;
  margin-bottom:20px;padding:16px;border-radius:18px;text-decoration:none;
  background:linear-gradient(152deg,var(--navy-800),var(--navy-700) 58%,var(--navy-900));
  border:1px solid rgba(198,209,220,.14);
  box-shadow:0 20px 40px -26px rgba(11,18,26,.7);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast);
}
.bdrawer__resp:active{transform:scale(.99)}
/* fio de acento no topo: mesma assinatura do cabecalho do menu */
.bdrawer__resp::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--c1),var(--c2) 58%,var(--c3));
  opacity:.9;
}
.bdrawer__resp-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(198,209,220,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(198,209,220,.07) 1px,transparent 1px);
  background-size:var(--grid-step) var(--grid-step);
  -webkit-mask-image:radial-gradient(110% 120% at 92% 0%,#000,transparent 74%);
          mask-image:radial-gradient(110% 120% at 92% 0%,#000,transparent 74%);
}
.bdrawer__resp-hd{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:14px;align-items:center;
}
.bdrawer__resp-f{
  position:relative;flex:none;width:72px;height:72px;border-radius:50%;
  padding:2.5px;display:block;
  background:conic-gradient(from 210deg,var(--c1),var(--c2) 40%,var(--c1) 72%,var(--c3));
}
.bdrawer__resp-f::after{      /* halo frio atras do selo */
  content:"";position:absolute;inset:-9px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c1) 34%,transparent),transparent 78%);
}
.bdrawer__resp-f img{
  width:100%;height:100%;border-radius:50%;display:block;object-fit:cover;
  border:2px solid var(--navy-800);
}
.bdrawer__resp-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.bdrawer__resp-t b{
  font-family:var(--f-disp);font-size:1.1rem;font-weight:700;
  letter-spacing:-.026em;color:#fff;
}
/* `font-family` SO no rotulo do cargo, e nao em todo `i` do cartao: a primeira
   versao aplicava a mono em qualquer <i> descendente, e o <i> do icone de seta e
   um glifo do Font Awesome. Trocar a familia dele fazia o icone virar quadrado
   vazio na tela. Este seletor de filho direto resolve na raiz. */
.bdrawer__resp-t > i{
  font-style:normal;font-family:var(--f-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--c1-dark,#8FBBEA);
}
.bdrawer__resp-cr{
  position:relative;display:block;margin-top:13px;
  font-size:.8rem;line-height:1.45;color:var(--navy-200);
}
.bdrawer__resp-go{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(198,209,220,.15);
}
.bdrawer__resp-go > span{
  font-family:var(--f-disp);font-size:.88rem;font-weight:600;
  letter-spacing:-.02em;color:#fff;
}
.bdrawer__resp-go > i{
  flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  font-size:12px;color:#fff;
  background:color-mix(in srgb,var(--c1) 34%,transparent);
  border:1px solid color-mix(in srgb,var(--c1) 52%,transparent);
  transition:transform var(--d-fast) var(--e-out),background var(--d-fast);
}
.bdrawer__resp:active .bdrawer__resp-go > i{transform:translateX(3px);background:var(--c1)}
/* ══ 3 · NAVEGACAO ════════════════════════════════════════════════════════
   Linha e cabecalho de acordeao compartilham TUDO: mesma altura, mesmo raio,
   mesma superficie. Se um virasse cartao e o outro nao, a lista pareceria
   montada por duas pessoas.                                                 */
.bdrawer__nav{margin-bottom:20px}
.bdrawer__link,.bdrawer__acc-h{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:56px;padding:9px 12px;border-radius:14px;
  margin-bottom:7px;cursor:pointer;text-align:left;text-decoration:none;
  font-family:var(--f-disp);font-size:.97rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);
  background:#fff;border:1px solid rgba(41,66,93,.09);
  box-shadow:0 1px 2px rgba(41,66,93,.03);
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),
             transform var(--d-fast) var(--e-out),box-shadow var(--d-fast);
}
.bdrawer__link:active,.bdrawer__acc-h:active{transform:scale(.99)}
/* SELO do icone, e nao icone solto: e o que da o mesmo peso visual a sete
   linhas de larguras diferentes, e o lugar onde a cor da linha aparece. */
.bdrawer__link > i:first-child,.bdrawer__acc-h > i:first-child{
  flex:none;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;font-size:15px;
  color:var(--ki,var(--c1-ink));
  background:color-mix(in srgb,var(--k,var(--c1)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--k,var(--c1)) 20%,transparent);
  transition:background var(--d-fast),color var(--d-fast);
}
.bdrawer__link > span,.bdrawer__acc-h > span{flex:1;min-width:0}
.bdrawer__link .chev,.bdrawer__acc-h .chev{
  flex:none;font-size:.7em;color:var(--ink-3);
  transition:transform var(--d-mid) var(--e-out),color var(--d-fast);
}
.bdrawer__link[aria-current="page"]{
  background:color-mix(in srgb,var(--k,var(--c1)) 8%,#fff);
  border-color:color-mix(in srgb,var(--k,var(--c1)) 30%,transparent);
  box-shadow:inset 3px 0 0 var(--ki,var(--c1-ink)),0 1px 2px rgba(41,66,93,.04);
}
.bdrawer__link[aria-current="page"] > i:first-child{
  background:var(--ki,var(--c1-ink));color:#fff;border-color:transparent;
}
/* contador de subitens: diz de antemao o tamanho do que vai abrir */
.bdrawer__n{
  flex:none;font-family:var(--f-mono);font-size:.63rem;font-weight:700;
  min-width:21px;height:21px;padding:0 6px;border-radius:7px;
  display:grid;place-items:center;
  color:var(--ki,var(--c1-ink));
  background:color-mix(in srgb,var(--k,var(--c1)) 14%,transparent);
}
.bdrawer__acc.on > .bdrawer__acc-h{
  background:color-mix(in srgb,var(--k,var(--c1)) 9%,#fff);
  border-color:color-mix(in srgb,var(--k,var(--c1)) 30%,transparent);
  margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.bdrawer__acc.on > .bdrawer__acc-h > i:first-child{
  background:var(--ki,var(--c1-ink));color:#fff;border-color:transparent;
}
.bdrawer__acc.on > .bdrawer__acc-h .chev{transform:rotate(180deg);color:var(--ki,var(--c1-ink))}
.bdrawer__acc.on > .bdrawer__acc-h .bdrawer__n{background:var(--ki,var(--c1-ink));color:#fff}

/* altura animada sem JS e sem numero magico */
.bdrawer__acc-b{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-mid) var(--e-out);
}
.bdrawer__acc.on > .bdrawer__acc-b{grid-template-rows:1fr}
.bdrawer__acc-in{
  overflow:hidden;min-height:0;padding:0 9px 9px;margin-bottom:7px;
  background:#fff;
  border:1px solid color-mix(in srgb,var(--k,var(--c1)) 30%,transparent);border-top:0;
  border-radius:0 0 14px 14px;
}

/* chips de escopo, dois por linha */
.bdrawer__chips{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:9px}
.bdrawer__chip{
  display:flex;align-items:center;gap:8px;min-height:46px;
  padding:8px 10px;border-radius:11px;text-decoration:none;
  font-size:.76rem;line-height:1.24;font-weight:500;color:var(--ink-2);
  background:var(--cream);
  border:1px solid rgba(41,66,93,.08);
  border-left:3px solid var(--k,var(--c1));
  transition:background var(--d-fast) var(--e-out),color var(--d-fast);
}
.bdrawer__chip i{font-size:12px;color:var(--k,var(--c1));flex:none}
.bdrawer__chip:active{background:#fff;color:var(--ink)}
.bdrawer__all{
  display:flex;align-items:center;justify-content:space-between;
  min-height:46px;margin-top:8px;padding:9px 12px;border-radius:11px;text-decoration:none;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;font-weight:700;
  color:var(--ki,var(--c1-ink));
  background:color-mix(in srgb,var(--k,var(--c1)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--k,var(--c1)) 22%,transparent);
}

/* ══ 4 · IR DIRETO ════════════════════════════════════════════════════════ */
.bdrawer__rotas{margin-bottom:20px}
.bdrawer__rotas-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bdrawer__rota{
  display:flex;flex-direction:column;gap:9px;min-height:88px;
  padding:12px;border-radius:14px;text-decoration:none;
  background:#fff;border:1px solid rgba(41,66,93,.09);
  box-shadow:0 1px 2px rgba(41,66,93,.03);
  font-family:var(--f-disp);font-size:.86rem;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);line-height:1.22;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast),
             border-color var(--d-fast);
}
.bdrawer__rota i{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:14px;color:var(--ki,var(--c1-ink));
  background:color-mix(in srgb,var(--k,var(--c1)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--k,var(--c1)) 20%,transparent);
}
.bdrawer__rota:active{
  transform:scale(.98);border-color:color-mix(in srgb,var(--k,var(--c1)) 40%,transparent);
}

/* ══ 5 · DISCIPLINAS ══════════════════════════════════════════════════════
   Doze pilulas com o ponto na cor da disciplina. Nao levam a lugar nenhum de
   proposito: nao existe pagina por disciplina. Estao aqui porque respondem em
   dois segundos a primeira pergunta da incorporadora, "voces coordenam o quê".*/
.bdrawer__disc{margin-bottom:20px}
.bdrawer__disc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bdrawer__disc li{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);background:#fff;border:1px solid rgba(41,66,93,.1);
}
.bdrawer__disc li i{
  width:6px;height:6px;border-radius:2px;flex:none;background:var(--k,var(--c1));
  box-shadow:0 0 7px color-mix(in srgb,var(--k,var(--c1)) 55%,transparent);
}

/* ══ ULTIMOS CONTEUDOS ════════════════════════════════════════════════════
   Segunda passada, 10/08/2026. Eram tres linhas brancas com miniatura de 74px:
   corretas e indistinguiveis de qualquer lista de qualquer site.

   O que entrou, e por que cada peca:
     CAPA MAIOR      92x70 com anel interno e um veu na cor da linha por cima.
                     A capa e o que faz escolher artigo, e em 74px ela era um
                     selo, nao uma imagem.
     NUMERO NA CAPA  01, 02, 03 em mono no canto: diz que a lista tem ORDEM, e
                     que a primeira e a mais recente.
     CANTO DE COR    3px na esquerda, girando entre tres acentos da marca. Sai do
                     `--k` no markup, entao nao custa consulta de categoria.
     SETA            aparece deslizando no toque, e e o unico movimento aqui.
   ═════════════════════════════════════════════════════════════════════════ */
.bdrawer__posts{margin-bottom:20px}
.bdrawer__post{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 11px 9px 9px;border-radius:14px;text-decoration:none;
  background:#fff;border:1px solid rgba(41,66,93,.09);
  box-shadow:0 1px 2px rgba(41,66,93,.03);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast),
             border-color var(--d-fast);
}
.bdrawer__post + .bdrawer__post{margin-top:8px}
/* canto de cor na esquerda, no lugar de uma borda inteira colorida: menos peso,
   mesma funcao de indice visual */
.bdrawer__post::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--k,var(--c1));
  transition:top var(--d-fast) var(--e-out),bottom var(--d-fast) var(--e-out);
}
.bdrawer__post:active{
  transform:scale(.99);
  border-color:color-mix(in srgb,var(--k,var(--c1)) 40%,transparent);
}
.bdrawer__post:active::before{top:6px;bottom:6px}

.bdrawer__post-c{
  position:relative;flex:none;width:92px;height:70px;border-radius:11px;
  overflow:hidden;display:block;
  box-shadow:inset 0 0 0 1px rgba(41,66,93,.1);
}
.bdrawer__post-c img,.bdrawer__post-ph{
  width:100%;height:100%;display:block;object-fit:cover;
}
.bdrawer__post-ph{
  display:grid;place-items:center;font-size:17px;
  color:var(--ki,var(--c1-ink));
  background:color-mix(in srgb,var(--k,var(--c1)) 12%,transparent);
}
/* veu na cor da linha: liga a capa ao canto de cor e uniformiza doze fotos de
   temperaturas diferentes sem lavar nenhuma */
.bdrawer__post-c::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,
    color-mix(in srgb,var(--k,var(--c1)) 22%,transparent),
    rgba(11,18,26,.55) 88%);
}
.bdrawer__post-c b{
  position:absolute;left:7px;bottom:5px;z-index:1;
  font-family:var(--f-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.06em;color:#fff;
  text-shadow:0 1px 6px rgba(11,18,26,.8);
}
.bdrawer__post-t{
  font-family:var(--f-disp);font-size:.87rem;font-weight:600;line-height:1.3;
  letter-spacing:-.018em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bdrawer__post > i{
  flex:none;font-size:.72rem;color:var(--ki,var(--c1-ink));opacity:.55;
  transition:transform var(--d-fast) var(--e-out),opacity var(--d-fast);
}
.bdrawer__post:active > i{transform:translateX(3px);opacity:1}
/* ══ CONTATO ══════════════════════════════════════════════════════════════ */
.bdrawer__ct{
  padding:6px 13px 11px;border-radius:14px;
  background:#fff;border:1px solid rgba(41,66,93,.09);
}
.bdrawer__ct .bdrawer__lbl{margin-top:9px}
.bdrawer__ct a{
  display:flex;align-items:center;gap:12px;min-height:48px;
  padding:5px 0;text-decoration:none;
}
.bdrawer__ct a i{
  flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:13px;color:var(--c2-ink);
  background:color-mix(in srgb,var(--c2) 12%,transparent);
}
.bdrawer__ct a + a i{color:var(--c1-ink);background:color-mix(in srgb,var(--c1) 12%,transparent)}
.bdrawer__ct strong{display:block;font-size:.88rem;font-weight:600;color:var(--ink)}
.bdrawer__ct small{display:block;font-size:.7rem;color:var(--ink-3)}
.bdrawer__ct-h{
  display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:10px;
  border-top:1px solid rgba(41,66,93,.09);
  font-size:.76rem;color:var(--ink-2);
}
.bdrawer__ct-h i{width:34px;text-align:center;color:var(--c4-ink)}

/* ══ 6 · RODAPE ═══════════════════════════════════════════════════════════ */
.bdrawer__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 12px);
  border-top:1px solid rgba(41,66,93,.1);
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.bdrawer__loc{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);
}
.bdrawer__loc i{color:var(--c1-ink)}
.bdrawer__socials{display:flex;gap:8px;margin:0}
.bdrawer__socials a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  color:var(--ink-2);background:#fff;
  border:1px solid rgba(41,66,93,.1);text-decoration:none;font-size:15px;
  transition:color var(--d-fast),border-color var(--d-fast);
}
.bdrawer__socials a:active{color:var(--c1-ink);border-color:color-mix(in srgb,var(--c1) 40%,transparent)}

/* ══ ENTRADA ESCALONADA ═══════════════════════════════════════════════════
   Cada bloco entra 60ms depois do anterior. E o que faz o painel parecer que se
   MONTA, em vez de aparecer pronto: 300ms de diferenca total, imperceptivel
   como espera e decisivo na impressao de acabamento.                        */
.bdrawer.is-open .bdrawer__cli  {animation:bdIn .5s var(--e-out) both .05s}
.bdrawer.is-open .bdrawer__resp {animation:bdIn .5s var(--e-out) both .17s}
.bdrawer.is-open .bdrawer__prime {animation:bdIn .5s var(--e-out) both .10s}
.bdrawer.is-open .bdrawer__second{animation:bdIn .5s var(--e-out) both .15s}
.bdrawer.is-open .bdrawer__nav   {animation:bdIn .5s var(--e-out) both .20s}
.bdrawer.is-open .bdrawer__rotas {animation:bdIn .5s var(--e-out) both .26s}
.bdrawer.is-open .bdrawer__disc  {animation:bdIn .5s var(--e-out) both .31s}
.bdrawer.is-open .bdrawer__posts {animation:bdIn .5s var(--e-out) both .35s}
.bdrawer.is-open .bdrawer__ct    {animation:bdIn .5s var(--e-out) both .39s}
.bdrawer.is-open .bdrawer__foot  {animation:bdIn .5s var(--e-out) both .43s}
@keyframes bdIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .bdrawer{transition:none}
  .bdrawer__acc-b{transition:none}
  .bdrawer.is-open .bdrawer__cli,.bdrawer.is-open .bdrawer__resp,
  .bdrawer.is-open .bdrawer__prime,
  .bdrawer.is-open .bdrawer__second,.bdrawer.is-open .bdrawer__nav,
  .bdrawer.is-open .bdrawer__rotas,.bdrawer.is-open .bdrawer__disc,
  .bdrawer.is-open .bdrawer__posts,.bdrawer.is-open .bdrawer__ct,
  .bdrawer.is-open .bdrawer__foot{animation:none}
  .bdrawer__cli-t{animation:none}
  .bdrawer__link:active,.bdrawer__acc-h:active,.bdrawer__rota:active,.bdrawer__resp:active,
  .bdrawer__prime:active,.bdrawer__post:active,.bdrawer__x:active{transform:none}
}

/* ══ DOCK INFERIOR (mobile) ══════════════════════════════════════════ */
/* ══ DOCK INFERIOR ═══════════════════════════════════════════════════════
   11/08/2026 · Tres mudancas, todas de comportamento, nenhuma de estilo:

   1. As cinco colunas voltaram a ter cinco ocupantes. Com o portfolio
      oculto sobraram quatro itens numa grade de cinco: a coluna vazia
      empurrava tudo para a esquerda e o botao de WhatsApp, que e o centro
      visual da peca, ficava 43px fora do centro (medido). O quinto item
      voltou na view, e nao a grade que encolheu: com quatro itens o meio
      cai ENTRE dois deles, e nao existe centro para o FAB ocupar.
   2. RECOLHE ao descer, VOLTA ao subir. O dock come 72px de tela em cada
      rolagem, e num artigo de 1.300 palavras isso e o tempo todo. Descer e
      ler; subir e procurar. Ele so aparece quando ha intencao de navegar.
   3. SOME quando o rodape aparece, pela mesma razao do botao flutuante: la
      embaixo ja existe a CTA grande, e dois "falar" na mesma tela competem
      entre si em vez de somar.                                              */
.bdock{
  position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  z-index:var(--z-dock);display:none;grid-template-columns:repeat(5,1fr);align-items:center;
  transition:transform var(--d-mid) var(--e-out),opacity var(--d-fast) var(--e-out);
  height:62px;padding:0 6px;border-radius:24px;overflow:visible;
  background:linear-gradient(180deg,rgba(252,251,249,.93),rgba(234,231,224,.89));
  -webkit-backdrop-filter:saturate(1.7) blur(22px);backdrop-filter:saturate(1.7) blur(22px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 20px 44px -14px rgba(11,18,26,.34),
             0 8px 18px -10px rgba(11,18,26,.24);
}
.bdock::before{
  content:"";position:absolute;left:26px;right:26px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--navy-600),transparent);opacity:.75;
}
/* 11/08/2026 · `.bdock.is-down` e `.bdock.is-hidden` foram REMOVIDOS junto com
   o JS que os aplicava (blocos 5 e 5b de bononi-chrome.js). O menu fixo do
   celular nao recolhe mais: ele reserva 84px no body, e recolher deixava esse
   espaco vazio no fim da pagina em vez de ocupado.
   Se algum dia voltar a fazer sentido recolher, o recolhimento tem de vir COM
   a devolucao do padding do body, e sem mudar a altura do documento durante a
   rolagem, senao a pagina pula. */
@media(prefers-reduced-motion:reduce){
  .bdock{transition:none}
}
.bdock__i{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  height:100%;text-decoration:none;color:var(--ink-3);
  transition:color var(--d-mid) var(--e-out),transform var(--d-fast) var(--e-bounce);
}
.bdock__i i{font-size:18px;line-height:1;transition:transform var(--d-mid) var(--e-bounce)}
.bdock__i span{font-size:9.5px;font-weight:700;white-space:nowrap;letter-spacing:.01em}
.bdock__i:active{transform:scale(.9)}
.bdock__i.is-active{color:var(--navy-600)}
.bdock__i.is-active i{transform:translateY(-2px) scale(1.1)}
.bdock__i.is-active::before{
  content:"";position:absolute;top:4px;left:50%;width:46px;height:46px;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--navy-600) 22%,transparent),transparent 68%);
}
.bdock__i.is-active::after{
  content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;transform:translateX(-50%);
  border-radius:50%;background:var(--navy-600);
  box-shadow:0 0 10px 1px color-mix(in srgb,var(--navy-600) 45%,transparent);
}
/* FAB central de WhatsApp, elevado */
.bdock__cta{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;transform:translateY(-18px)}
.bdock__cta-in{
  position:relative;width:57px;height:57px;border-radius:50%;display:grid;place-items:center;
  font-size:25px;color:#fff;
  background:radial-gradient(120% 120% at 32% 22%,#38E07F,var(--wa) 55%,var(--wa-d));
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 14px 28px -6px rgba(18,140,126,.6),0 0 0 6px rgba(250,248,244,.94),
             inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform var(--d-fast) var(--e-out);
}
.bdock__cta-in::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(37,211,102,.5);animation:bdockPulse 2.6s ease-out infinite;
}
.bdock__cta-l{font-size:9.5px;font-weight:800;color:var(--wa-d)}
.bdock__cta:active .bdock__cta-in{transform:scale(.93)}
@keyframes bdockPulse{0%{transform:scale(.86);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}

@media(max-width:860px){
  .bdock{display:grid}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  /* ══ O DOCK CHEGA QUANDO A HERO ACABA ══════════════════════════════════════
     12/08/2026 · Ele nascia visivel sobre a hero, e por pedido nao nasce mais: a
     primeira tela e a abertura, e barra de navegacao ali disputa com ela. Quem
     decide o momento e bononi-chrome.js, que compara a rolagem com a altura da
     hero e poe `is-on`.

     Ele SOBE, e nao apenas aparece: 130% de deslocamento para baixo garante que
     nem a sombra fique visivel antes da hora (a sombra tem 44px de espalhamento,
     entao 100% deixaria um rastro escuro na borda). E `pointer-events:none`
     enquanto escondido, senao ele continuaria capturando toque numa faixa de
     62px em que nao ha nada visivel.

     O padding do body NAO acompanha, de proposito: os 84px ficam reservados
     desde o inicio. Reservar so quando ele aparece empurraria a pagina inteira
     no meio da rolagem, que e pior que reservar espaco no fim de uma pagina
     onde o dock vai estar visivel de qualquer forma. */
  .bdock{
    transform:translateY(130%);opacity:0;pointer-events:none;
    transition:transform .44s var(--e-out),opacity .26s var(--e-out);
  }
  .bdock.is-on{transform:none;opacity:1;pointer-events:auto}
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  .bdock{transition:none}
}
/* esconde o dock quando a pagina tem barra de acao propria. E devolve o padding
   do body junto: esconder o dock sem devolver os 84px e o que abria a faixa
   vazia no fim da pagina. Nenhuma pagina usa `.action-bar` hoje, mas a dupla
   fica correta para quando usar. */
body:has(.action-bar) .bdock{display:none}
body:has(.action-bar){padding-bottom:0}

/* ══ WHATSAPP FLUTUANTE (desktop) ════════════════════════════════════ */
.bwa{
  position:fixed;right:22px;bottom:22px;z-index:1070;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;color:#fff;text-decoration:none;
  background:radial-gradient(120% 120% at 32% 22%,#38E07F,var(--wa) 55%,var(--wa-d));
  box-shadow:0 16px 34px -10px rgba(18,140,126,.62),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform var(--d-mid) var(--e-bounce),opacity var(--d-mid) var(--e-out);
}
.bwa:hover{transform:scale(1.07)}
.bwa.is-hidden{opacity:0;transform:scale(.6) translateY(14px);pointer-events:none}
.bwa::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(37,211,102,.45);animation:bdockPulse 2.8s ease-out infinite;
}
@media(max-width:860px){.bwa{display:none}}

/* ══ COMMAND PALETTE (busca) ═════════════════════════════════════════
   09/08/2026 · Saiu daqui para public/bononi-search.css. O painel deixou
   de ser escuro e passou a ser a superficie mais CLARA da tela, com uma
   cor por tipo de resultado. Este arquivo continua dono do resto do
   cromo; a busca virou componente proprio, com CSS e JS proprios.       */


/* ══ RODAPE ══════════════════════════════════════════════════════════ */
.bf{position:relative;background:var(--navy-950);color:var(--navy-100);overflow:clip}
.bf::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(155,180,210,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(155,180,210,.05) 1px,transparent 1px);
  background-size:var(--grid-step) var(--grid-step);
  mask-image:linear-gradient(to bottom,#000,transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 62%);
}
.bf__in{position:relative;z-index:1}

/* faixa de CTA colada no topo do rodape */
/* ══ FAIXA DE CTA ═════════════════════════════════════════════════════════
   08/08/2026, refeita. Era h2 + p + dois botoes num flex justify-between:
   correto e sem intencao nenhuma. Ela fecha TODAS as paginas do site, entao e o
   ultimo argumento que o visitante le, e era o mais fraco.                   */
.bf__cta{
  position:relative;z-index:1;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-600) 55%,var(--navy-800));
  border-bottom:1px solid rgba(255,255,255,.11);
}
/* Filete das quatro disciplinas: o mesmo vocabulario do resto do site.
   10/08/2026 · Eram quatro BLOCOS de cor de 3px com corte seco entre eles, na
   fronteira exata com a secao clara de cima. Quatro retangulos coloridos
   emendados leem como elemento solto, nao como assinatura, e foi o primeiro
   item que o Joao apontou como bugado. Agora e gradiente continuo de 2px, com
   as pontas desaparecendo na mascara: as quatro cores continuam la e a faixa
   passa a ser um fio, nao uma barra. */
.bf__cta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--c1),var(--c4) 34%,var(--c3) 67%,var(--c2));
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
/* grade de prancha, mascarada para sumir antes de encostar no texto */
.bf__cta-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:var(--grid-step) var(--grid-step);
  -webkit-mask-image:radial-gradient(72% 108% at 88% 12%,#000,transparent 74%);
  mask-image:radial-gradient(72% 108% at 88% 12%,#000,transparent 74%);
}
.bf__cta-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;gap:clamp(24px,4vw,64px);
  padding-block:clamp(40px,5.2vw,66px);
}
@media(max-width:900px){.bf__cta-in{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}}

.bf__cta h2{
  font-size:clamp(1.42rem,1.05rem + 1.5vw,2.3rem);color:#fff;max-width:24ch;
  letter-spacing:var(--ls-h2);margin-top:9px;text-wrap:balance;
}
/* 10/08/2026 · O <em> aqui estava INVISIVEL, e nao apenas apagado.
   bononi-base.css pinta `h2 em` com degrade recortado no glifo
   (background-clip:text + text-fill-color:transparent) a partir de --s-accent.
   Sem tema declarado, --s-accent caia no valor de superficie clara, --navy-600,
   que e exatamente a cor de fundo desta faixa: as palavras eram pintadas com a
   cor do proprio fundo. Trocar `color` nao resolvia nada, porque com
   text-fill-color transparente o `color` nem participa da pintura.
   A causa foi corrigida no markup (data-sec="ink" na faixa). Este bloco fica
   como o acabamento: o degrade padrao de superficie escura vai de branco a
   --navy-100 e quase nao se distingue do resto da manchete; aqui ele termina no
   azul claro da marca, que da 7,54:1 contra o fundo e volta a LER como enfase. */
.bf__cta h2 em{
  font-style:normal;
  background:linear-gradient(96deg,#fff,#C7DFF7 78%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.bf__cta-l{color:var(--navy-100);font-size:var(--t-sm);max-width:48ch;margin-top:12px}

/* A lista `bf__cta-steps` (os tres passos numerados) foi removida em
   11/08/2026, por pedido. O CSS dela saiu junto: regra orfa em arquivo
   inlinado em toda pagina e peso que ninguem ve.
   Se voltar a fazer sentido, era grade de tres colunas iguais que virava
   uma coluna abaixo de 760px, com o numero em selo de 24px. */

/* ── ações ───────────────────────────────────────────────────────────────
   O principal deixa de ser um botao de pilula e vira um cartao com duas linhas:
   a acao e o que esperar dela. Ordem preservada, WhatsApp solido e formulario
   secundario, que e a ordem pedida pelo cliente. */
.bf__cta-act{display:flex;flex-direction:column;gap:13px;align-items:stretch}
.bf__cta-main{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:16px 18px;border-radius:var(--r-lg);text-decoration:none;
  background:#fff;color:var(--ink);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.bf__cta-main > i:first-child{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  font-size:18px;color:#fff;background:var(--wa-grad);
}
.bf__cta-main span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bf__cta-main strong{
  font-family:var(--f-disp);font-size:1rem;font-weight:600;letter-spacing:-.02em;
}
.bf__cta-main small{font-size:.78rem;color:var(--ink-3)}
.bf__cta-arw{color:var(--c1-ink);font-size:.82rem;transition:transform var(--d-fast) var(--e-out)}
.bf__cta-main:hover{transform:translateY(-2px);box-shadow:0 24px 50px -22px rgba(0,0,0,.7)}
.bf__cta-main:hover .bf__cta-arw{transform:translateX(4px)}

.bf__cta-alt{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 18px;border-radius:var(--r-pill);text-decoration:none;
  font-size:.88rem;font-weight:500;color:#fff;
  border:1px solid rgba(255,255,255,.3);
  transition:background var(--d-fast),border-color var(--d-fast);
}
.bf__cta-alt:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

@media(prefers-reduced-motion:reduce){
  .bf__cta-main,.bf__cta-arw{transition:none}
  .bf__cta-main:hover{transform:none}
  .bf__cta-main:hover .bf__cta-arw{transform:none}
}

.bf__cols{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3.4vw,54px);
  padding-block:clamp(42px,5.4vw,68px);
}
@media(max-width:960px){.bf__cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bf__cols{grid-template-columns:1fr;gap:30px}}
/* 01/09/2026 · Mais 20% no rodape tambem, pelos mesmos motivos do header. */
.bf__brand img{height:41px;width:auto;display:block;margin-bottom:16px}
.bf__brand p{font-size:var(--t-sm);color:var(--navy-200);line-height:1.62;max-width:38ch}
.bf__legal{margin-top:16px;font-family:var(--f-mono);font-size:.7rem;line-height:1.75;color:var(--navy-300);letter-spacing:.02em}
.bf h3{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--navy-300);margin-bottom:15px;
}
.bf__list{display:flex;flex-direction:column;gap:10px}
.bf__list a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-sm);color:var(--navy-100);text-decoration:none;
  transition:color var(--d-fast),transform var(--d-fast) var(--e-out);
}
.bf__list a:hover{color:#fff;transform:translateX(3px)}
.bf__list a i{font-size:.8em;color:var(--c1);width:14px;text-align:center}
.bf__socials{display:flex;gap:9px;margin-top:16px}
.bf__socials a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(198,209,220,.14);
  color:var(--navy-100);text-decoration:none;font-size:15px;
  transition:background var(--d-fast),transform var(--d-fast) var(--e-out);
}
.bf__socials a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

.bf__bottom{
  border-top:1px solid rgba(198,209,220,.12);
  padding-block:20px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.bf__bottom p,.bf__bottom a{font-size:.79rem;color:var(--navy-300);text-decoration:none}
.bf__bottom a:hover{color:var(--navy-100)}
.bf__by{display:inline-flex;align-items:center;gap:7px}
.bf__by i{color:var(--c1)}

/* impressao: nada de chrome */
@media print{.bh,.bdock,.bdrawer,.bd-bd,.bwa,.bsc,.bf__cta{display:none!important}}

/* ══════════════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO · 30/07/2026
   Este arquivo tinha 42 declaracoes de animacao/transicao e NENHUM bloco
   prefers-reduced-motion: header, drawer, dock, mega-menu e o botao de
   WhatsApp animavam mesmo para quem pediu ao sistema operacional para nao
   animar. Os outros CSS do site ja cobriam isso; o chrome ficou de fora.
   Correcao de acessibilidade, independente da camada de movimento nova.

   Nao e um "desliga tudo": transicoes de COR continuam (elas nao causam
   desconforto vestibular e sao o que da retorno de clique). O que sai e
   deslocamento, escala, rotacao e pulso.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .bh,.bh-top,.bh__in,.bh__logo img,.mega,.mega__i,.mega__ico,.mega__arw,
  .mega__all,.mega__all i,.mega__pv,.mega__pv-go,.mega__pv-wa,
  .bdrawer,.bd-bd,.bdock,.bdock__cta,.bwa,.bsc,.bf__cta{
    transition-property:background-color,border-color,color,opacity,box-shadow !important;
    transition-duration:.12s !important;
  }
  /* pulsos e entradas: sem movimento */
  .mega__dot,.bdock__cta,.bwa__pulse,.bh-top__dot{animation:none !important}
  .bdrawer,.bsc,.mega{animation:none !important}
  /* deslocamentos de hover ficam no lugar */
  .mega__i:hover,.mega__pv-go:hover,.mega__pv-wa:hover,
  .bdock__i:hover,.bwa:hover,.bsc__r:hover,.bf__cta:hover,
  .bh__nav > li > a:hover,.bh__nav > li > button:hover{transform:none !important}
  .mega__i:hover .mega__arw,.mega__all:hover i{transform:none !important}
  /* o header nao desliza para fora da tela */
  .bh-top.is-up{transform:none !important}
}

/* Rede de seguranca de acessibilidade: qualquer alvo de toque dentro do
   drawer respeita 38px de altura minima. Depois de dimensionar cada bloco
   sobravam dois links abaixo disso (medido), e caçar um a um e trabalho
   que volta a cada bloco novo. */
/* Piso geral de 38px. Os componentes que precisam de mais declaram o seu, e
   por isso esta regra usa :not: sem ela ela vinha depois no arquivo e
   rebaixava o cabecalho de acordeao de 48 para 41px (medido). */
.bdrawer a:not([class*="__"]),.bdrawer button:not([class*="__"]){min-height:38px}
.bdrawer__link,.bdrawer__acc-h{min-height:48px}
.bdrawer .bdrawer__top a{min-height:0}

/* ══════════════════════════════════════════════════════════════════════════
   CARTAO DO DESENVOLVEDOR (rodape)                              10/08/2026
   ──────────────────────────────────────────────────────────────────────────
   Superficie ESCURA, e nao o papel do site. Aqui quem fala e outra marca: o
   cartao precisa se distinguir do rodape da Bononi para ninguem confundir os
   dois, e escuro sobre escuro com moldura clara resolve isso sem inventar cor.

   A saida principal e o WhatsApp, e ele e o unico bloco verde da tela: numa
   caixa com foto, texto, quatro itens e tres numeros, o botao so ganha se for a
   unica coisa colorida.
   ══════════════════════════════════════════════════════════════════════════ */
.bjc-bd{
  position:fixed;inset:0;z-index:calc(var(--z-bd) + 8);background:rgba(6,10,15,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--d-mid);
}
.bjc-bd.is-on{opacity:1}
.bjc{
  position:fixed;inset:0;z-index:calc(var(--z-drawer) + 8);
  display:grid;place-items:center;padding:18px;
  overflow-y:auto;overscroll-behavior:contain;
}
.bjc__card{
  position:relative;width:min(100%,440px);max-height:calc(100dvh - 36px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:24px 22px 20px;border-radius:24px;
  background:linear-gradient(158deg,var(--navy-800),var(--navy-900) 62%,#0A1017);
  border:1px solid rgba(198,209,220,.16);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .42s var(--e-out),opacity .3s var(--e-out);
}
.bjc.is-on .bjc__card{transform:none;opacity:1}
.bjc__x{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  font-size:14px;color:var(--navy-100);
  background:rgba(255,255,255,.08);border:1px solid rgba(198,209,220,.2);
  transition:background var(--d-fast),color var(--d-fast);
}
.bjc__x:hover{background:rgba(255,255,255,.18);color:#fff}

.bjc__hd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:center;
  padding-right:38px}
.bjc__f{position:relative;flex:none;width:72px;height:72px;display:block}
.bjc__f img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(198,209,220,.28);
}
/* o ponto verde: diz "disponivel" sem escrever, e o texto ao lado confirma */
.bjc__f i{
  position:absolute;right:2px;bottom:2px;width:15px;height:15px;border-radius:50%;
  background:#22C55E;border:2.5px solid var(--navy-900);
}
.bjc__eye{
  display:flex;align-items:center;gap:7px;margin:0 0 3px;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy-300);
}
.bjc__id h2{
  margin:0;font-family:var(--f-disp);font-size:1.42rem;font-weight:700;
  letter-spacing:-.03em;color:#fff;line-height:1.1;
}
.bjc__role{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:5px 0 0;font-size:.84rem;color:var(--navy-200);
}
.bjc__role em{
  font-style:normal;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#4ADE80;
}
.bjc__role em::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#22C55E;
  box-shadow:0 0 9px #22C55E;
}
.bjc__tx{margin:16px 0 0;font-size:.88rem;line-height:1.62;color:var(--navy-100)}
.bjc__tx strong{color:#fff;font-weight:600}

/* ══ A CHAVE ══════════════════════════════════════════════════════════════════
   12/08/2026 · "Virar a chave" e a frase, e o desenho e uma CHAVE que gira de
   verdade, em quatro tempos, porque e a sequencia que conta a historia:

     1. ela ENTRA pela esquerda, deitada (-40 graus), e para
     2. GIRA meio grau alem do destino e volta, que e o peso mecanico de uma
        fechadura: chave que gira exato no primeiro tento parece adesivo
     3. no instante em que ela para, um ANEL de luz sai dela: o clique
     4. so depois a palavra acende em dourado, com halo e o fio por baixo

   O atraso inicial e 420ms: tempo de o cartao chegar e o olho pousar na frase.
   Efeito que dispara junto com a entrada se perde no meio dela.

   TODA a animacao e enfeite: a frase e o sentido dela existem parados. O estado
   final (chave girada, palavra dourada) esta na REGRA BASE e o `@keyframes` sai
   dele para ele, entao sem animacao (prefers-reduced-motion, navegador antigo) a
   chave aparece virada, nunca no meio do caminho.                              */
.bjc__chave{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:15px 0 0;
  font-family:var(--f-disp);font-size:1.06rem;font-weight:600;
  letter-spacing:-.015em;line-height:1.3;color:#fff;
}
.bjc__key{
  flex:none;position:relative;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  color:var(--c4);font-size:.86rem;
  background:color-mix(in srgb,var(--c4) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c4) 34%,transparent);
}
.bjc__key i{display:block;transform:rotate(45deg)}
/* o anel do clique: nasce na chave e se abre para fora */
.bjc__key::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--c4) 75%,transparent);
  opacity:0;pointer-events:none;
}
.bjc__chave-p{
  position:relative;color:var(--c4);
  text-shadow:0 0 22px color-mix(in srgb,var(--c4) 42%,transparent);
}
/* o fio de luz por baixo da palavra */
.bjc__chave-p::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--c4),color-mix(in srgb,var(--c4) 20%,transparent));
  transform-origin:left center;
}
/* Só anima quando o cartao abre, e so uma vez. `both` guarda o estado final.
   Os quatro tempos, em ordem, com o atraso somando a leitura:
     420ms  a chave entra e gira (760ms de curso)
     1080ms o anel do clique, exatamente quando ela para
     1120ms a palavra acende, e o fio cresce logo atras                        */
.bjc.is-on .bjc__key i{ animation:bjcGira .76s cubic-bezier(.22,.9,.24,1) .42s both }
.bjc.is-on .bjc__key{ animation:bjcPlaca .5s var(--e-out) .42s both }
.bjc.is-on .bjc__key::after{ animation:bjcClique .52s var(--e-out) 1.08s both }
.bjc.is-on .bjc__chave-p{ animation:bjcAcende .6s var(--e-out) 1.12s both }
.bjc.is-on .bjc__chave-p::after{ animation:bjcFio .5s var(--e-out) 1.18s both }

@keyframes bjcGira{
  0%  { transform:translateX(-13px) rotate(-40deg);opacity:0 }
  30% { transform:translateX(0) rotate(-40deg);opacity:1 }   /* entrou, parada */
  76% { transform:translateX(0) rotate(54deg) }              /* passa do ponto */
  100%{ transform:translateX(0) rotate(45deg) }              /* assenta */
}
@keyframes bjcPlaca{
  from{ background:rgba(198,209,220,.08);border-color:rgba(198,209,220,.18) }
  to  { background:color-mix(in srgb,var(--c4) 14%,transparent);
        border-color:color-mix(in srgb,var(--c4) 34%,transparent) }
}
@keyframes bjcClique{
  from{ opacity:.9;transform:scale(.5) }
  to  { opacity:0;transform:scale(1.55) }
}
@keyframes bjcAcende{
  from{ color:var(--navy-200);text-shadow:0 0 0 transparent }
  to  { color:var(--c4);text-shadow:0 0 22px color-mix(in srgb,var(--c4) 42%,transparent) }
}
@keyframes bjcFio{
  from{ transform:scaleX(0) } to{ transform:scaleX(1) }
}

/* ── o padrao de cada entrega ─────────────────────────────────────────── */
/* O bloco `.bjc__pad` (o padrao de cada entrega, quatro itens numerados) saiu
   em 12/08/2026, por pedido, markup e estilo. Ele ficava entre a promessa e a
   CTA e competia com as duas, e os tres numeros logo abaixo dizem o mesmo com
   um terco da altura. O array $_jcPadrao do footer saiu junto. */

/* ── os tres numeros ──────────────────────────────────────────────────── */
.bjc__num{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
}
.bjc__num li{
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:12px 8px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(198,209,220,.12);
}
.bjc__num b{
  display:inline-flex;align-items:baseline;gap:3px;
  font-family:var(--f-disp);font-size:1.22rem;font-weight:700;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums;
}
.bjc__num b i{font-size:.68rem;color:var(--c4)}
.bjc__num span{
  font-family:var(--f-mono);font-size:.55rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy-300);line-height:1.3;
}

/* ── a saida ──────────────────────────────────────────────────────────── */
.bjc__wa{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  margin-top:17px;padding:14px 16px;border-radius:16px;text-decoration:none;
  background:var(--wa-grad);color:#fff;
  box-shadow:0 16px 34px -16px rgba(14,124,111,.85);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast);
}
.bjc__wa:hover{transform:translateY(-2px);box-shadow:0 22px 44px -18px rgba(14,124,111,.95)}
.bjc__wa > i:first-child{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  font-size:20px;background:rgba(255,255,255,.2);
}
.bjc__wa span{display:flex;flex-direction:column;gap:1px;min-width:0}
.bjc__wa strong{font-family:var(--f-disp);font-size:1rem;font-weight:600;letter-spacing:-.02em}
.bjc__wa small{font-size:.76rem;opacity:.92}
.bjc__wa-a{font-size:.84rem;opacity:.9;transition:transform var(--d-fast) var(--e-out)}
.bjc__wa:hover .bjc__wa-a{transform:translateX(4px)}
.bjc__site{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;padding:8px;text-decoration:none;
  font-size:.78rem;color:var(--navy-300);
}
.bjc__site:hover{color:#fff;text-decoration:underline}
.bjc__site i{font-size:.7rem}

@media(prefers-reduced-motion:reduce){
  .bjc__card{transition:none}
  /* a chave nao gira, ela JA esta girada: o estado final e o padrao da regra
     base, entao matar a animacao aqui nao apaga nada */
  .bjc.is-on .bjc__key,.bjc.is-on .bjc__key i,.bjc.is-on .bjc__key::after,
  .bjc.is-on .bjc__chave-p,.bjc.is-on .bjc__chave-p::after{animation:none}
  .bjc__wa,.bjc__wa-a{transition:none}
  .bjc__wa:hover{transform:none}
  .bjc__wa:hover .bjc__wa-a{transform:none}
}