/* gerado por _ferramentas/barra.py: menu da home e banner das internas, para
   paginas que nao carregam css/style.css. Nao editar a mao. */
:root{--azul:#14304C;--azul-escuro:#315275;--mercurio:#FAF9F5;--branco:#FFFFFF;--fio:rgba(20,48,76,.30);--sans:'IBM Plex Sans Condensed',sans-serif;--mono:'IBM Plex Mono',monospace;--lado:clamp(28px,4vw,64px);--fundo:#336699;--color-primary:#14304C;--mid-gray:#315275;--border-gray:#A3B5C8}
.veu-menu{position:fixed;inset:0;z-index:980;
  /* 24/09: o mesmo vidro azul da abertura (rgba 51,102,153 a 80% + desfoque), e
     nunca mais alto que a tela: o que nao couber rola dentro do proprio veu. */
  background:rgba(51,102,153,.86);
  -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);
  color:var(--mercurio);display:flex;flex-direction:column;justify-content:flex-start;
  padding:104px var(--lado) 40px;gap:0;transform:translateY(-101%);
  counter-reset:vm;overflow-y:auto;max-height:100vh;
  transition:transform .6s cubic-bezier(.76,0,.24,1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .veu-menu{background:var(--fundo)} }
.veu-menu.aberto{transform:none}
/* cada item: indice mono a esquerda, nome a direita, fio embaixo. E o
   mesmo idioma dos rotulos de secao, na escala dos titulos. */
.veu-menu a{counter-increment:vm;display:flex;align-items:baseline;gap:22px;
  padding:11px 0;border-bottom:1px solid rgba(250,249,245,.20);
  font-family:var(--sans);font-weight:500;
  font-size:clamp(20px,2vw,28px);line-height:1.2;letter-spacing:-.012em;
  transition:padding-left .35s cubic-bezier(.4,0,.2,1),color .35s}
.veu-menu a::before{content:"[ " counter(vm,decimal-leading-zero) " ]";
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  color:rgba(250,249,245,.55);flex:none;min-width:64px}
.veu-menu a:first-of-type{border-top:1px solid rgba(250,249,245,.20)}
.veu-menu a:hover{color:var(--branco);padding-left:10px}
@media (max-width:880px){
  .veu-menu{padding-top:104px}
  .veu-menu a{gap:14px;padding:12px 0}
  .veu-menu a::before{min-width:48px}
}
.veu-menu .fecha{position:absolute;top:15px;right:var(--lado);
  background:var(--branco);color:var(--azul);border:none;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:16px 24px}
/* 23/09/2026: o mapa do site dentro do veu. «Todos os servicos» nao navega mais:
   ele ABRE este painel com todos os temas, e so vai para servicos.html se o
   navegador estiver sem JS. A busca saiu daqui e foi para a segunda secao. */
.veu-mapa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;margin:30px 0 40px}
.veu-mapa h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,249,245,.55);margin:0 0 10px;font-weight:500}
.veu-mapa a{display:block;padding:6px 0;border:none;font-size:15px;font-weight:400;line-height:1.3;
  counter-increment:none;color:rgba(250,249,245,.88)}
.veu-mapa a::before{content:none}
.veu-mapa a:hover{color:var(--branco);padding-left:6px}
@media (max-width:880px){ .veu-mapa{grid-template-columns:1fr 1fr;gap:18px 20px} }
/* 24/09: o MEGA-MENU flutuante de antes da troca de cabecalho, de volta para o
   Leandro comparar com o veu. Largura toda, altura so a do conteudo, icones
   redondos. Abre por «Todos os servicos» na barra (hover ou clique) e dentro do
   veu; fecha no clique fora, em Esc, ou ao sair com o mouse. */
.mega-menu{position:fixed;left:0;right:0;top:92px;z-index:950;   /* abaixo da barra (960): o cartao do monograma desce 22px sobre a pagina e nao pode ser coberto */
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  background:var(--mercurio);padding:36px var(--lado) 34px;
  box-shadow:0 12px 30px rgba(20,48,76,.10);border-top:1px solid var(--azul);
  border-bottom:1px solid rgba(20,48,76,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility 0s linear .2s}
.mega-menu.aberto{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.mega-menu-col h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--azul-escuro);margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid rgba(20,48,76,.16)}
.mega-menu-col a{display:flex;align-items:center;gap:10px;padding:7px 0;
  font-family:var(--sans);font-size:14px;color:var(--azul);text-decoration:none;transition:color .2s}
.mega-menu-col a:hover{color:var(--liga-corpo)}
.mega-icon{width:30px;height:30px;border:1px solid rgba(20,48,76,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .2s,background .2s}
.mega-menu-col a:hover .mega-icon{border-color:var(--liga-corpo);background:rgba(51,102,153,.08)}
.mega-icon svg{width:14px;height:14px;fill:none;stroke:var(--azul-escuro);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.mega-menu-col a:hover .mega-icon svg{stroke:var(--liga-corpo)}
@media (max-width:880px){ .mega-menu{display:none} }
.veu-menu .selo-mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.8;margin-bottom:24px}
.tarja{position:fixed;top:0;left:0;right:0;z-index:950;height:26px;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 var(--lado);background:var(--mercurio);
  /* 3px e nao 1: esta e a PRIMEIRA LINHA da pagina, e ela virou tambem a
     aresta de cima da caixa do logo (ver `.barra-marca`). Com
     `box-sizing:border-box` os 26 de altura ja contam o fio, entao ele
     ocupa de 23 a 26 e a barra, que comeca em 26, encosta nele sem folga. */
  border-bottom:3px solid rgba(20,48,76,.2)}
.tarja-lado{display:flex;align-items:center;height:100%}
.tarja span{display:flex;align-items:center;height:100%;padding:0 14px;
  font-family:var(--mono);font-weight:500;font-size:10px;white-space:nowrap;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(20,48,76,.72)}
.tarja span + span{border-left:1px solid rgba(20,48,76,.22)}
.tarja-lado span:last-child{padding-right:0}
.tarja .tarja-nome{color:var(--azul)}
@media (max-width:880px){ .tarja{height:22px}
  .tarja span{font-size:9px;letter-spacing:.16em;padding:0 10px} }

.barra{position:fixed;top:26px;left:0;right:0;z-index:960;height:66px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--lado);background:rgba(250,249,245,.78);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(20,48,76,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .barra{background:var(--mercurio)} }
/* A CAIXA DO LOGO, no feitio das pecas do painel Spirit: fio de 1px, canto de
   3px e 18 de respiro em volta da marca (`.peca{border:1px solid;border-radius:3px;
   padding:18px}` la). O fundo volta ao CREME, mas em VIDRO: creme a 62% com
   desfoque por tras, e nao chapa. E por isso que o monograma entra SEM a chapa
   dele (`monograma-ideal-m-limpo.svg`, o oficial com o <rect> de fundo tirado):
   chapa opaca dentro de caixa de vidro apaga o vidro justamente no meio, e
   sobraria um aro de vidro em volta de um retangulo cego.
   O brilho de 1px na aresta de cima e a receita da casa para vidro (a mesma do
   `.barra-nav a.vidro`), e e o que faz a peca ler como superficie e nao como
   recorte. Sem sombra, que e regra da casa.
   ANCORA: `margin-top:-26px` e exatamente o `top` da barra, entao a aresta de
   cima cai em y=26, no fim do fio grosso da tarja. A caixa tem 81,1 de marca mais 7,3
   de respiro, 88,4 no total (a peca inteira encolheu 15% em 14/09, noite), e a
   base cai em 114 contra 92 da barra: sao 22px de
   caixa sobre a foto, que e onde o vidro tem o que desfocar. A primeira versao
   saiu com 148 e ficou grande demais. */
.barra-marca{display:flex;align-items:center;position:relative;z-index:1;
  /* margin-top:0 e nao -26: a aresta de cima da caixa cai em y=26, que e
     exatamente onde termina o fio grosso da tarja. Os dois viram UMA coisa,
     e por isso a caixa nao tem `border-top`: quem fecha o alto dela e a
     primeira linha da pagina. */
  align-self:flex-start;margin-top:0;
  /* 8 e nao 14: a CAIXA fica do mesmo tamanho e quem cresce e a marca.
     96 + 16 = 112 de altura, o mesmo de antes. */
  padding:3.66px;border-radius:0 0 3px 3px;border:1px solid var(--fio);border-top:none;
  /* CREME CHAPADO, 19/09. A caixa era prata: um degrade de cinco paradas no
     eixo de 26 graus, de #E9EAEB a branco (a «prata discreta» de 17/09). Sobre
     o creme da pagina ela lia como um cartao branco recortado, e nao como a
     marca solta. Agora e o proprio creme do site, sem degrade e sem brilho
     interno: o que aparece no alto e o monograma, nao a placa. O desfoque fica,
     porque a caixa passa por cima da foto da primeira secao.
     21/09: o fundo passa a #E8F2DC, a pedido do Leandro, o mesmo da placa do
     monograma oficial e do disco do avatar. */
  background:var(--mercurio);
  backdrop-filter:blur(14px) saturate(160%);
  transition:background .45s cubic-bezier(.4,0,.2,1)}
/* navegador sem backdrop-filter nao pode ficar com uma caixa translucida sem
   desfoque por tras: ali o creme fecha. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .barra-marca{background:var(--mercurio)} }
/* 22/09: o cartao do monograma volta ao VIDRO CLARO de c66f739 (21/09, noite),
   a pedido do Leandro: o degrade azul bem claro do anel do selo de vidro
   (#F5F8FC a #C9D8E9, claro no alto a esquerda), o reflexo (branco 72% -> 18%
   -> 0 de cima para baixo) e a borda de luz (branco 85% por dentro).
   Ainda em 22/09, «um pouco mais branco creme, menos azulada, ligeiramente»:
   as paradas foram puxadas para o creme #FAF9F5, de #F5F8FC/#E4ECF5/#C9D8E9
   para #F9F9F6/#EEF0F0/#DCE3E9. 23/09: «ligeiramente mais bege», entao
   #FAF8F1/#F1EFE6/#DFE0D9; e o monograma passou ao azul-tinta #14304C.
   E «este fundo nao pode mudar conforme avancamos na pagina»: o cartao e OPACO
   e sem backdrop-filter (nada do que passa por tras aparece nele), e nao
   encolhe mais ao rolar (a regra .barra.rolou saiu; a marca fica em 81,1).
   24/09: a Nevoa #D3E2F2 nao convenceu («nao estou acertando esse
   monograma, uma cor mais escura e o monograma em prata»). Fica a placa de
   METAL ESCURO: degrade tinta de #24496F a #0E2238 a 135 graus, reflexo branco
   de 10% no alto e aresta de luz de 1px a 14%; o monograma entra em PRATA
   (monograma-ideal-m-prata.svg, gerado por _ferramentas/monograma_prata.py).
   Escolhida entre quatro na prova (tinta, meio, oficial e esta). */
.barra-marca,.barra-marca:hover{
  /* 28/09: «troque o fundo do monograma para mescla azul claro e mescla creme»: a
     placa do Asset 182, degrade liso de #BDDDFF (alto, esquerda) a #FAF9F5 (baixo,
     direita), no angulo da diagonal da placa; o monograma volta a TINTA (#14304C,
     monograma-ideal-m-limpo.svg). O metal azul de 24/09 (#8EB4D8/#79A4CD/#6590BE,
     monograma prata) saiu. */
  background:linear-gradient(143deg, #F3F7FD 0%, #FAF9F5 58%);   /* 28/09: «mais bege do que azul»: o creme domina a partir de 58%; depois «meio branco onde e o azul»: #BDDDFF -> #F3F7FD */
  border-color:rgba(20,48,76,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px rgba(20,48,76,.08);
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
.barra-marca .marca-frente{height:69px;width:auto;display:block;transition:height .35s ease}   /* 30/09 (definitivo): monograma 18Asset 13, quadro 167,5 x 189,24 (topo 60, folga 20: «estique para voltar a forma regular», era 159,24): mesma largura de cartao */
/* 28/09: SO NA HOME (body.inicio), antes de rolar a pagina a marca e maior, 100 px;
   passou de 40 px de rolagem (.barra.rolou, barra.js) ela volta aos 81,1. */
@media (min-width:881px){ body.inicio .barra:not(.rolou) .barra-marca .marca-frente{height:85.1px} }
.barra-marca span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.barra-nav{display:flex;align-items:center;gap:30px}
.barra-nav a{font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--azul-escuro);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s,border-color .3s}
.barra-nav a:hover{color:var(--azul);border-bottom-color:var(--azul)}
/* Contato e o unico botao de vidro da barra: fundo quase branco, o
   desfoque da propria barra por tras, e um brilho de 1px na aresta de
   cima, que e o que faz a peca ler como vidro e nao como caixa. Sem
   sombra, que e regra da casa. */
.barra-nav a.vidro{padding:9px 20px;border:1px solid rgba(20,48,76,.16);
  border-radius:3px;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,48,76,.05);
  color:var(--azul);
  transition:background .35s,border-color .35s,color .35s}
.barra-nav a.vidro:hover{background:rgba(255,255,255,.86);
  border-color:rgba(20,48,76,.30);color:var(--azul)}
.barra-menu{background:none;border:1px solid rgba(20,48,76,.28);border-radius:3px;
  cursor:pointer;font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--azul);padding:9px 18px;
  transition:background .35s,border-color .35s,color .35s}
.barra-menu:hover{background:var(--azul);color:var(--mercurio);border-color:var(--azul)}
@media (max-width:1100px){ .barra-nav{display:none} }
@media (min-width:1101px){ .barra-menu{display:none} }
@media (max-width:880px){ .barra{top:22px;height:56px} .barra-marca .marca-frente{height:59px}
  /* a barra comeca em 22 aqui: a ancora da placa acompanha, senao ela passa
     do topo da tela e a aresta de cima e cortada */
  .barra-marca{margin-top:0;padding:3.15px} }
.barra-espaco{height:92px}
.page-banner {
  /* 22/09/2026: SEM FOTO, por ora. Creme a esquerda (onde se le o titulo) e trama
     azulada a direita, com o rastro do mouse: canvas .pb-gl do motor js/trama.js,
     imagem gerada por _ferramentas/banner/banner.py. A foto de cada pagina
     (--banner-photo) continua no HTML e deixou de ser usada aqui. */
  background: var(--mercurio, #FAF9F5);
  padding: 46px max(40px, calc(50% - 580px));
  min-height: 300px;   /* 23/09: «ligeiramente mais alta», e a foto vai aqui */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-gray);
}
.page-banner .pb-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.page-banner h1 {
  font-size: clamp(26px, 3vw, 42px);                   /* mesma escala da chamada da home */
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.16;
  color: var(--color-primary);                         /* título escuro sobre o branco */
  position: relative;
  z-index: 2;
  max-width: min(560px, 54%);
  text-wrap: balance;
}
.page-banner p {
  color: var(--mid-gray);
  font-size: 17px;
  margin-top: 6px;
  position: relative;
  z-index: 2;
  max-width: min(560px, 54%);
}
.page-banner .pb-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
@media (max-width:768px){ .page-banner{padding:26px 16px;min-height:auto} .page-banner h1,.page-banner p{max-width:100%} }