/* ============================================================================
   FUNDO DA MARCA IBRAFLEX
   Compartilhado pelo Portal, pela Biblioteca e pelo Catálogo.

   Os triângulos vêm da arte oficial da marca. Aqui eles são pano de fundo, e
   por isso três cuidados que valem estar escritos:

   1. OPACIDADE BAIXA. A tela é de trabalho: quem abre precisa ler um laudo, um
      código de documento, um número de série. Marca d'água forte compete com o
      conteúdo e cansa quem passa o dia ali dentro.

   2. `position: fixed` e `pointer-events: none`. Eles não rolam junto e não
      roubam clique de nada que esteja por cima.

   3. `z-index: 0` e o conteúdo em `z-index: 1`. Sem isso, um dia alguém põe um
      elemento sem contexto de empilhamento e o triângulo aparece por cima de
      um botão, sem ninguém entender por quê.

   No celular eles somem: em tela pequena não há canto sobrando, e o desenho
   viraria sujeira atrás do texto.
   ============================================================================ */

body::before,
body::after{
  content:'';
  position:fixed;
  pointer-events:none;
  z-index:0;
  background-repeat:no-repeat;
}

/* canto de cima, à esquerda */
body::before{
  top:0; left:0; width:min(38vw, 460px); height:min(38vw, 460px);
  /* TRIANGULOS INTEIROS, 01/09/2026. Na primeira versao as pontas ficavam
     fora da caixa do desenho (pontos em -40 e -10, e outro em 410 no canto de
     baixo) e a tela cortava tres deles pela metade. Agora todos os vertices
     vivem entre 15 e 385, com folga para a borda: o desenho inteiro aparece e
     parece proposital, em vez de parecer um recorte mal feito. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='%23293682'%3E%3Cpolygon points='20,330 140,95 260,330'/%3E%3Cpolygon points='180,330 290,115 385,330' opacity='.6'/%3E%3Cpolygon points='95,180 160,50 225,180' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-position:top left;
  background-size:contain;
  opacity:.055;
}

/* canto de baixo, à direita, espelhado */
body::after{
  bottom:0; right:0; width:min(34vw, 400px); height:min(34vw, 400px);
  /* O mesmo desenho do canto de cima, girado meia volta. Girar em vez de
     desenhar outro grupo garante que os dois cantos tenham a mesma composicao
     e o mesmo peso, e que consertar um conserte o outro. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='%234551a3' transform='rotate(180 200 200)'%3E%3Cpolygon points='20,330 140,95 260,330'/%3E%3Cpolygon points='180,330 290,115 385,330' opacity='.6'/%3E%3Cpolygon points='95,180 160,50 225,180' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-position:bottom right;
  background-size:contain;
  opacity:.05;
}

@media(max-width:820px){
  body::before, body::after{ display:none }
}

/* Em movimento reduzido nada muda aqui: o fundo é parado de propósito.
   Fundo animado numa tela de trabalho é distração pura. */