@charset "utf-8";
/* THE HUB7, tema escuro: o mundo do aviso de construção, que foi a primeira
   voz da marca no ar.

   Carregado DEPOIS de site.css, e só quando o painel escolhe o escuro. O tema
   claro não é tocado por nada aqui: site.css continua sendo ele inteiro, e é
   isso que faz o caminho de volta ser um clique em Aparência.

   O que muda é o mundo, não a gramática: o acervo, os fios de 1px, os cantos
   vivos e o vermelho como marca continuam. Chão em Preto Hub7, superfícies em
   Azul Noite, e por trás o campo de sinais em WebGL. */

/* --------------------------------------------------------------- fichas */
:root {
  --tinta: #ffffff;
  --tinta-2: #c9d1dd;      /* 12,8:1 sobre o chão */
  --tinta-3: #95a3b8;      /* 7,7:1 sobre o chão, 7,0:1 sobre noite */
  --papel: #0b0b0d;        /* Preto Hub7 */
  --papel-2: #0f172a;      /* Azul Noite: a superfície */
  --noite: #0f172a;
  --noite-2: #9fb0c8;
  --fio: #1f2633;
  --fio-forte: #384254;
  --marca: #e10600;
  /* O vermelho do manual mede 4:1 sobre o preto, serve a marca grande, o fio,
     o botão. Texto vermelho pequeno precisa de um tom que acenda: 5,9:1. */
  --marca-texto: #ff4a3d;
  /* No claro o vermelho escurece no hover; no escuro isso lê como "apagou".
     Aqui ele acende, como no botão do aviso de construção, até onde o texto
     branco do botão ainda lê: 4,6:1. O #F50700 do aviso media 4,3:1, abaixo do
     mínimo para texto desse tamanho; o resto do acender vem da luz, que cresce. */
  --marca-viva: #eb0600;
  --clara: #d7dde8;        /* guia sobre o campo: 13:1 sobre noite */
  color-scheme: dark;
}

/* O chão fica no <html>; o <body> é transparente para o campo fixo aparecer.
   Com fundo no body, ele pintaria por cima de uma camada de z-index negativo. */
html { background: var(--papel); scrollbar-color: var(--fio-forte) var(--papel); }
body { background: transparent; color: var(--tinta); }

::-webkit-scrollbar-track { background: var(--papel); }
::-webkit-scrollbar-thumb { background: var(--fio-forte); border-color: var(--papel); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* ------------------------------------------------------ o campo de sinais */
/* O bloco se chama .sinais, e não .campo: .campo já é o campo de formulário, e
   uma regra "position: fixed" com esse nome prendeu o formulário inteiro atrás
   da página na primeira versão.

   Duas camadas, de propósito, como no aviso de construção. A de baixo é CSS e
   NUNCA some: segura a tela quando o WebGL não sobe ou cai no meio do caminho.
   A de cima é o canvas, opaco, que a cobre enquanto desenha. */
.sinais {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Altura na janela GRANDE (lvh): no celular a barra de endereço encolhe ao
   rolar, e com 100vh dinâmico o canvas mudaria de tamanho a cada rolagem,
   realocando a imagem inteira do campo, várias vezes por segundo. */
.sinais__base,
.sinais__tela {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
}
.sinais__tela { display: block; }
.sinais__base {
  background:
    radial-gradient(120% 85% at 78% 8%, #16233d 0%, transparent 55%),
    radial-gradient(95% 70% at 12% 96%, #131922 0%, transparent 60%),
    linear-gradient(168deg, var(--papel) 0%, var(--noite) 58%, var(--papel) 100%);
}

/* Sem WebGL o gradiente respira, e o fio vermelho na diagonal da barra do "7"
   aparece, o efeito existe do mesmo jeito, só que desenhado em CSS.
   Só com o campo atrás do site: com o campo só na abertura, quem substitui o
   WebGL é o fundo da própria abertura, e o resto da página fica parado, como o
   painel promete. Sem esse limite, a home inteira respirava por trás. */
html[data-campo='site'] body.sem-webgl .sinais__base {
  background-size: 180% 180%, 180% 180%, 100% 100%;
  animation: respirar 22s ease-in-out infinite;
}
html[data-campo='site'] body.sem-webgl .sinais__base::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(107deg, transparent 46%,
    rgba(225, 6, 0, 0.30) 49.4%, rgba(225, 6, 0, 0.62) 50%, rgba(225, 6, 0, 0.30) 50.6%, transparent 54%);
  opacity: 0.35;
}
@keyframes respirar {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50% { background-position: 100% 40%, 0% 60%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-campo='site'] body.sem-webgl .sinais__base { animation: none; }
}

/* ---------------------------------------------------------------- abertura */
.abertura { background: transparent; color: var(--tinta); }

/* Com o campo atrás do site, a abertura não pinta fundo nenhum: o último
   degrau da queda já existe na camada fixa. */
html[data-campo='site'] .abertura::before { content: none; }

/* Com o campo só na abertura, o degrau de queda dela é o fundo do aviso. */
html[data-campo='abertura'] .abertura::before {
  background:
    linear-gradient(107deg, transparent 46%,
      rgba(225, 6, 0, 0.16) 49.4%, rgba(225, 6, 0, 0.32) 50%, rgba(225, 6, 0, 0.16) 50.6%, transparent 54%),
    radial-gradient(120% 85% at 78% 8%, #16233d 0%, transparent 55%),
    radial-gradient(95% 70% at 12% 96%, #131922 0%, transparent 60%),
    linear-gradient(168deg, var(--papel) 0%, var(--noite) 58%, var(--papel) 100%);
}
body.sem-webgl .abertura::before {
  background-size: 100% 100%, 180% 180%, 180% 180%, 100% 100%;
  animation: respirar-abertura 22s ease-in-out infinite;
}
@keyframes respirar-abertura {
  0%, 100% { background-position: 0 0, 0% 0%, 100% 100%, 0 0; }
  50% { background-position: 0 0, 100% 40%, 0% 60%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.sem-webgl .abertura::before { animation: none; }
}

/* O véu do aviso de construção, levado para onde o texto está: no aviso ele
   acalmava o centro para a marca; aqui acalma o canto de baixo à esquerda,
   para o título ler sobre os filamentos em força plena. */
.abertura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 75% at 20% 86%, rgba(11, 11, 13, 0.84) 0%, rgba(11, 11, 13, 0.46) 50%, transparent 80%);
  /* O véu se dissolve antes da borda de baixo. Cortado reto, ele desenhava uma
     linha horizontal na largura toda onde a abertura termina, exatamente a
     costura que o site não pode ter. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* Com o campo só na abertura, o campo e o seu degrau de queda também se
   dissolvem embaixo, entrando no chão fixo sem degrau, a abertura termina
   como luz que baixa, não como um retângulo. */
html[data-campo='abertura'] .abertura__tela,
html[data-campo='abertura'] .abertura::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

.abertura .guia { color: var(--clara); }
.abertura__destaque { color: var(--tinta); }
.abertura__selo { color: var(--noite-2); }

/* A entrada do aviso de construção: o texto sobe uma vez, e só na abertura.
   É o momento que precede a revelação do índice, os dois fazem uma frase. */
@media (prefers-reduced-motion: no-preference) {
  .abertura__texto { animation: entrar 700ms cubic-bezier(0.22, 0.7, 0.3, 1) both; }
  @keyframes entrar {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------------- páginas internas */
.cabeca-pagina .guia { color: var(--clara); }

/* ---------------------------------------------------------------- cabeçalho */
/* Sólido e sem desfoque. Desfocar um campo que muda a cada quadro custa GPU em
   todo aparelho; e translúcido não serve: a 86%, e ainda a 95%, os títulos que
   rolam por baixo apareciam entre os itens do menu. Sobre o preto, a
   transparência não mostrava nada além disso. */
.cabecalho {
  background: var(--papel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--fio);
}

/* ------------------------------------------------------------------- ações */
/* A luz vermelha do botão do aviso: sombra com deslocamento e desfoque, a
   única sombra do sistema, é a luz do filamento vermelho, não enfeite. */
.acao {
  box-shadow: 0 10px 30px rgba(225, 6, 0, 0.28);
  transition: background var(--pulso) var(--curva), border-color var(--pulso) var(--curva),
              transform var(--pulso) var(--curva), box-shadow var(--pulso) var(--curva);
}
.acao:hover {
  background: var(--marca-viva);
  border-color: var(--marca-viva);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(225, 6, 0, 0.42);
}
.acao:active { transform: translateY(0); box-shadow: 0 8px 22px rgba(225, 6, 0, 0.3); }
.acao:focus-visible { outline-color: var(--tinta); }
.cabecalho .acao { box-shadow: 0 6px 18px rgba(225, 6, 0, 0.22); }

.acao--vazada { box-shadow: none; color: var(--tinta); border-color: var(--tinta); }
.acao--vazada:hover { background: var(--tinta); color: var(--papel); box-shadow: none; }

.acao[aria-disabled='true'], .acao:disabled {
  box-shadow: none;
  transform: none;
  color: var(--tinta-3);
}

/* O aviso de cookies flutua no Preto Hub7 com contorno em fio forte, nunca em
   Azul Noite, que é a superfície dos cartões e o faria ler como conteúdo. Sobre
   o escuro a sombra precisa ser mais funda para descolar. */
.biscoito { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.45); }

/* ------------------------------------------------- vermelho em texto pequeno */
.secao-num__n,
.legal__num,
.legal__indice a::before,
.obrigatorio,
.campo__erro,
.canal .destaque { color: var(--marca-texto); }

.entrada:hover .entrada__num { color: var(--marca-viva); }

/* -------------------------------------------------------------- superfícies */
/* Sobre um campo que se move, texto denso assenta em superfície sólida. O
   campo aparece entre elas, é isso que faz a página ler como uma folha só. */
.cartao,
.fluxo__passo { background: var(--papel-2); border-color: var(--fio); }
/* No claro os passos são só contorno e a altura desigual quase não aparece;
   preenchidos, viravam uma fileira de degraus. Mesma altura na linha. */
.fluxo { align-items: stretch; }
.cartao:hover { border-color: var(--fio-forte); }

.rede__no { background: var(--papel); border-color: var(--fio-forte); }
.rede__centro { background: var(--papel-2); outline: 1px solid var(--fio); }
.canal__icone { background: var(--papel-2); }

.espec__placa { background: var(--papel-2); }
.espec__placa::before {
  background: repeating-linear-gradient(103deg,
    rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 24px);
}

.legal__quem { background: var(--papel-2); }
.entrada:hover { background: var(--papel-2); }

.elo--inerte { color: var(--tinta-3); }
.elo--inerte svg { color: var(--tinta-3); }

/* Fotografias em preto e branco acendem demais sobre o preto; um passo abaixo
   e elas assentam no mundo em vez de furá-lo. */
.contexto__foto img,
.destaque-conteudo__foto img { filter: brightness(0.86) contrast(1.05); }

/* ------------------------------------------------------------------- faixa */
/* Com o campo atrás do site, a faixa é uma janela: fundo transparente, a foto
   vira vestígio, e o lado direito deixa o campo subir inteiro, o JS aumenta a
   força dele quando uma faixa ocupa o meio da tela. */
html[data-campo='site'] .faixa { background: transparent; }
html[data-campo='site'] .faixa__foto { opacity: 0.26; }
html[data-campo='site'] .faixa::after {
  background: linear-gradient(90deg,
    rgba(11, 11, 13, 0.9) 10%, rgba(11, 11, 13, 0.6) 46%, rgba(11, 11, 13, 0.06) 100%);
}
/* A foto e o véu entram aos poucos. Começando cheios, os dois desenhavam um
   degrau reto na largura toda onde a faixa começa, a janela virava caixa. */
html[data-campo='site'] .faixa__foto,
html[data-campo='site'] .faixa::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(4rem, 30%, 9rem));
  mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(4rem, 30%, 9rem));
}

/* ---------------------------------------------------------------- formulário */
.campo input:not([type='checkbox']),
.campo select,
.campo textarea {
  background: var(--papel-2);
  color: var(--tinta);
  border-color: var(--fio-forte);
}
.campo select option { background: var(--papel-2); color: var(--tinta); }

/* O preenchimento automático do navegador pinta o campo de claro e o texto de
   escuro, por cima de qualquer CSS, a sombra interna é o jeito de mantê-lo
   no mundo. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus,
.campo textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--tinta);
  caret-color: var(--tinta);
  box-shadow: 0 0 0 1000px var(--papel-2) inset;
  transition: background-color 9999s ease-out 0s;
}

.marca-caixa input { background: var(--papel-2); border-color: var(--fio-forte); }
.marca-caixa:hover input { border-color: var(--tinta-3); }

.aviso { background: var(--papel-2); }
.aviso--ok { border-left-color: #34c77b; }

/* ----------------------------------------------------------------- rodapé */
/* O rodapé é o fim da página: fundo sólido, o campo se encerra aqui. */
.rodape { background: var(--papel); border-top-color: var(--fio-forte); }

.pular { background: var(--tinta); color: var(--papel); }

/* --------------------------------------------------------------- impressão */
@media print {
  :root {
    --tinta: #0b0b0d; --tinta-2: #4b5563; --tinta-3: #6b7280;
    --papel: #fff; --papel-2: #f7f7f8; --fio: #e5e7eb; --fio-forte: #c9ced6;
  }
  html, body { background: #fff; color: #0b0b0d; }
  .sinais, .abertura::after { display: none; }
  .acao { box-shadow: none; }
}