/* =============================================================================
   A faixa do logotipo — as camadas que o painel liga e desliga.

   Este arquivo é PROPOSITALMENTE autossuficiente: ele não depende de mais nada
   do tema além de duas cores, e declara reserva para todas as propriedades que
   lê. É o que permite a prévia do painel carregá-lo sozinho, sem arrastar o
   `7quedas.css` inteiro para dentro da área administrativa — e o que permite
   outro tema adotar o mesmo conjunto de efeitos trocando só as cores.

   Quem decide o VALOR de cada propriedade é o servidor
   (Portal\Modules\Nucleo\EstiloCabecalho), que imprime duas listas: uma para
   tela larga e outra, dentro de uma consulta de mídia, para o celular. Aqui
   ficam só os desenhos.

   Cada camada é um pseudo-elemento ou um filho de `.cabecalho__camadas`, e o
   liga/desliga é `opacity: calc(var(--cab-c-X) * var(--cab-intensidade))`.
   Zero apaga; é mais barato e mais previsível do que trocar `display`, e faz
   as camadas se acumularem sem uma regra por combinação.
   ========================================================================== */

.cabecalho {
    /* Reservas: valem se o servidor não imprimir nada (tema recém-instalado,
       banco fora do ar, prévia sem configuração). O cabeçalho nunca fica sem
       desenho por falta de configuração. */
    --cab-logo-altura: 46px;
    --cab-respiro: 17px;
    --cab-intensidade: 100%;
    --cab-inclinacao: -18deg;
    --cab-largura-efeito: 42%;
    --cab-inicio-efeito: 0%;
    --cab-mostrar-nome: 1;
    --cab-centralizar: 0;
    --cab-cor-efeito: #1B6FC4;

    --cab-c-gradiente-lateral: 0;
    --cab-c-gradiente-vertical: 0;
    --cab-c-listras-esquerda: 0;
    --cab-c-listras-inteiras: 0;
    --cab-c-clarao: 0;
    --cab-c-queda: 0;
    --cab-c-grao: 0;
    --cab-c-vinheta: 0;
    --cab-c-brilho-topo: 0;
    --cab-c-esmaecer-base: 0;
    --cab-c-fio-inferior: 0;

    /* A intensidade chega em % e precisa virar número para multiplicar as
       opacidades. `calc(X / 100%)` faz isso sem JavaScript. */
    --cab-forca: calc(var(--cab-intensidade) / 100%);

    /* Onde os efeitos da esquerda começam e onde morrem. Antes eles nasciam
       sempre colados na borda; com o começo escolhido, a faixa pode abrir
       limpa e o efeito entrar depois — que é o que faz o logotipo respirar
       quando ele não está no canto. Em 0%%, o desenho é exatamente o de antes. */
    --cab-efeito-ini: var(--cab-inicio-efeito);
    --cab-efeito-fim: calc(var(--cab-inicio-efeito) + var(--cab-largura-efeito));

    position: relative;
    isolation: isolate;
}

/* A pilha de camadas cobre a faixa inteira e não recebe clique: o menu e a
   busca vivem por cima dela. */
.cabecalho__camadas {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.cabecalho__camada { position: absolute; inset: 0; }

/* O conteúdo sobe acima das camadas. Sem isto, uma vinheta ou um grão passariam
   por cima do nome do portal.

   A linha do logotipo fica acima da faixa de estado — e não empatada com ela —
   porque é dentro dela que mora o painel do menu do celular. Empatadas, vencia
   a que vem depois no HTML (a faixa), e o menu abria POR BAIXO: os primeiros
   itens ficavam inalcançáveis justo no aparelho em que o menu é o único jeito
   de navegar. */
.cabecalho__topo { position: relative; z-index: 3; }
.cabecalho > .estado { position: relative; z-index: 1; }

/* ------------------------------------------------------------- 1. gradientes */

/* Esmaecimento da esquerda para a direita: a cor entra cheia na borda e se
   dissolve antes do meio. É o efeito que dá peso ao logotipo sem moldura. */
.cabecalho__camada--gradiente-lateral {
    opacity: calc(var(--cab-c-gradiente-lateral) * var(--cab-forca) * 0.55);
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent var(--cab-efeito-ini),
        var(--cab-cor-efeito) var(--cab-efeito-ini),
        color-mix(in srgb, var(--cab-cor-efeito) 45%, transparent) calc(var(--cab-efeito-ini) + var(--cab-largura-efeito) * 0.55),
        transparent var(--cab-efeito-fim)
    );
}

.cabecalho__camada--gradiente-vertical {
    opacity: calc(var(--cab-c-gradiente-vertical) * var(--cab-forca) * 0.5);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%, rgba(0, 0, 0, 0.35));
}

/* -------------------------------------------------------------- 2. listras */

/* Faixas diagonais. A largura de cada faixa é fixa e a inclinação é escolhida
   no painel; a máscara é o que faz elas morrerem antes do menu, em vez de
   atravessarem o cabeçalho e brigarem com os títulos das seções. */
.cabecalho__camada--listras-esquerda {
    opacity: calc(var(--cab-c-listras-esquerda) * var(--cab-forca) * 0.4);
    background: repeating-linear-gradient(
        var(--cab-inclinacao),
        var(--cab-cor-efeito) 0 3px,
        transparent 3px 14px
    );
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--cab-efeito-ini), #000 var(--cab-efeito-ini), #000 calc(var(--cab-efeito-ini) + var(--cab-largura-efeito) * 0.4), transparent var(--cab-efeito-fim));
            mask-image: linear-gradient(90deg, transparent 0, transparent var(--cab-efeito-ini), #000 var(--cab-efeito-ini), #000 calc(var(--cab-efeito-ini) + var(--cab-largura-efeito) * 0.4), transparent var(--cab-efeito-fim));
}

/* As mesmas listras de ponta a ponta — e bem mais fracas, porque aqui elas
   passam por baixo de texto. */
.cabecalho__camada--listras-inteiras {
    opacity: calc(var(--cab-c-listras-inteiras) * var(--cab-forca) * 0.16);
    background: repeating-linear-gradient(
        var(--cab-inclinacao),
        var(--cab-cor-efeito) 0 2px,
        transparent 2px 16px
    );
}

/* --------------------------------------------------------- 3. luz e textura */

.cabecalho__camada--clarao {
    opacity: calc(var(--cab-c-clarao) * var(--cab-forca) * 0.6);
    background: radial-gradient(
        60% 180% at calc(var(--cab-efeito-ini) + var(--cab-largura-efeito) * 0.35) 50%,
        color-mix(in srgb, var(--cab-cor-efeito) 70%, white) 0%,
        transparent 70%
    );
}

/* Véus de água: cortinas verticais de luz, o motivo da marca 7Quedas. Larguras
   irregulares de propósito — água não cai em faixas iguais. */
.cabecalho__camada--queda {
    opacity: calc(var(--cab-c-queda) * var(--cab-forca) * 0.3);
    background:
        linear-gradient(90deg, transparent 6%, rgba(255, 255, 255, 0.5) 7%, transparent 8%),
        linear-gradient(90deg, transparent 13%, rgba(255, 255, 255, 0.3) 13.6%, transparent 14.5%),
        linear-gradient(90deg, transparent 21%, rgba(255, 255, 255, 0.42) 22%, transparent 23.4%),
        linear-gradient(90deg, transparent 31%, rgba(255, 255, 255, 0.22) 31.5%, transparent 32.3%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
}

/* Grão: um SVG de ruído embutido, para não pesar um pedido a mais. Quase
   invisível — o trabalho dele é tirar o plástico do fundo chapado. */
.cabecalho__camada--grao {
    opacity: calc(var(--cab-c-grao) * var(--cab-forca) * 0.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
}

.cabecalho__camada--vinheta {
    opacity: calc(var(--cab-c-vinheta) * var(--cab-forca) * 0.7);
    background: radial-gradient(120% 140% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}

/* ----------------------------------------------------------- 4. as bordas */

.cabecalho__camada--brilho-topo {
    opacity: calc(var(--cab-c-brilho-topo) * var(--cab-forca));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 2px);
}

/* A faixa se dissolve no que vem abaixo, em vez de terminar num corte reto. */
.cabecalho__camada--esmaecer-base {
    opacity: calc(var(--cab-c-esmaecer-base) * var(--cab-forca));
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55));
    -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000);
    mask-image: linear-gradient(180deg, transparent 50%, #000);
}

.cabecalho__camada--fio-inferior {
    opacity: calc(var(--cab-c-fio-inferior) * var(--cab-forca));
    background: linear-gradient(0deg, color-mix(in srgb, var(--cab-cor-efeito) 80%, white) 0 1.5px, transparent 1.5px);
}

/* ------------------------------------------------------ 5. logotipo e nome

   Estas regras vinham do `7quedas.css`. Mudaram para cá porque a prévia do
   painel carrega ESTE arquivo: com a tipografia da marca lá, a prévia desenhava
   uma imitação — e imitação envelhece sozinha. As reservas (`var(--x, y)`)
   existem para o arquivo continuar bastando a si mesmo fora do tema. */

/* `container-type` é o que faz o nome do portal medir a FAIXA, e não a janela.
   Com `vw`, a prévia do painel mentia: ela imita um celular de 390px dentro de
   uma janela de 1500px, e o `vw` obedecia à janela. Com `cqi`, a tipografia
   responde à caixa em que de fato está — vale para a prévia e para o site. */
.cabecalho {
    /* A cor de fundo NÃO mora aqui: ela mora em `.cabecalho__camadas`, que é
       quem a borda de baixo recorta. Ver a seção "a borda de baixo". */
    color: #EAF2FA;
    container-type: inline-size;

    /* O cabeçalho pinta por cima do que vem depois dele. Não é preciosismo:
       `container-type` cria um contexto de empilhamento próprio, então o
       `z-index: 60` do menu do celular só valia DENTRO do cabeçalho — e o
       cabeçalho, sem z-index, ficava no nível 0. A capa (o palco, a faixa de
       estado, a transmissão) tem níveis 2 e 3 e passava por cima: o menu abria
       atrás do conteúdo, e quem estava no celular tocava no item e acertava a
       matéria de trás. Uma camada só, aqui, resolve para todos os filhos. */
    position: relative;
    z-index: 70;
}

.cabecalho__topo {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-top: var(--cab-respiro);
    padding-bottom: var(--cab-respiro);

    /* A quebra é o que dá ao menu a linha dele: ele pede 100% de largura, e sem
       poder quebrar empurraria a marca para fora da faixa. Declarada aqui
       porque este arquivo é o que a prévia do painel carrega sozinho. */
    flex-wrap: wrap;
    row-gap: 13px;
}

/* `flex: 0 1 auto` e não `none`: com o nome ligado ao lado do logotipo, a
   marca precisa poder encolher, senão ela empurra a busca para fora da faixa
   em tela estreita. */
/* `flex: 0 1 auto` e não `none`: com o nome ligado ao lado do logotipo, a marca
   precisa poder encolher, senão empurra a busca para fora da faixa. A direção
   vem do painel — o texto pode ficar ao lado do logotipo ou embaixo dele. */
.marca {
    flex: 0 1 auto;
    display: flex;
    flex-direction: var(--cab-marca-direcao-bloco, row);
    align-items: var(--cab-marca-bloco-alinhar, center);
    gap: var(--cab-marca-distancia, 12px);
    min-width: 0;
}
.marca:hover { text-decoration: none; }

.marca__logo { max-height: var(--cab-logo-altura); width: auto; display: block; }

/* ------------------------------------------------------- o texto da marca

   Três linhas, e o painel decide quantas aparecem, com que fonte, tamanho,
   peso, caixa e cor — e como se arrumam entre si. "Uma grande em cima e duas
   pequenas embaixo" é `flex-wrap: wrap` com a primeira linha ocupando 100%:
   as outras duas caem juntas na linha seguinte sozinhas.

   Nada aqui tem número escolhido a dedo. Todo valor vem de uma variável que o
   servidor imprime, e o mesmo CSS desenha o cabeçalho de qualquer cliente. */
.marca__texto {
    display: flex;
    flex-direction: var(--cab-marca-direcao, row);
    flex-wrap: var(--cab-marca-quebra, nowrap);
    align-items: var(--cab-marca-alinhar, flex-start);
    justify-content: var(--cab-marca-alinhar, flex-start);
    text-align: var(--cab-marca-texto-alinhar, left);
    gap: var(--cab-marca-gap-linhas, 2px) 9px;

    font-family: var(--cab-marca-fonte, var(--cond, Montserrat, sans-serif));
    text-shadow: var(--cab-marca-sombra, none);
    color: #fff;

    /* Sem o nome, o bloco não pode só ficar invisível: continuaria ocupando a
       largura e empurrando o menu. `max-width: 0` com `overflow` escondido faz
       a caixa encolher de verdade, e a margem negativa come o espaço do `gap`
       que sobraria ao lado do logotipo. */
    max-width: calc(var(--cab-mostrar-nome) * 100vw);
    overflow: hidden;
    margin-right: calc((var(--cab-mostrar-nome) - 1) * 12px);
    min-width: 0;
}

.marca__linha {
    display: block;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.marca__linha--1 {
    flex: 0 1 var(--cab-l1-base, auto);
    font-size: var(--cab-l1-tamanho, 23px);
    font-weight: var(--cab-l1-peso, 800);
    letter-spacing: var(--cab-l1-espacamento, 0px);
    text-transform: var(--cab-l1-maiusculas, none);
    color: var(--cab-l1-cor, currentColor);
}

.marca__linha--2 {
    display: var(--cab-l2-mostrar, block);
    font-size: var(--cab-l2-tamanho, 13px);
    font-weight: var(--cab-l2-peso, 600);
    letter-spacing: var(--cab-l2-espacamento, 0.2px);
    text-transform: var(--cab-l2-maiusculas, uppercase);
    color: var(--cab-l2-cor, currentColor);
}

.marca__linha--3 {
    display: var(--cab-l3-mostrar, none);
    font-size: var(--cab-l3-tamanho, 13px);
    font-weight: var(--cab-l3-peso, 600);
    letter-spacing: var(--cab-l3-espacamento, 0.2px);
    text-transform: var(--cab-l3-maiusculas, uppercase);
    color: var(--cab-l3-cor, currentColor);
}

/* Faltando largura, saem as linhas de apoio — são as de menor peso
   informativo, e cortadas pela metade não dizem nada. A linha 1 nunca sai: sem
   ela e sem logotipo o cabeçalho não diria que portal é este. A consulta é de
   CONTAINER, então vale igual no site e na prévia do painel. */
@container (max-width: 470px) {
    .marca__linha--2, .marca__linha--3 { display: none; }
}

/* Logotipo centralizado.
   `margin: auto` não dá: `auto` não se calcula a partir de um número. Quem
   empurra é um vão vazio antes da marca, cujo crescimento É a variável — em 0
   ele não ocupa nada e a marca fica no canto; em 1 ele cresce e, como a busca
   já está grudada na direita, a marca para no meio. */
.cabecalho__vao { flex: var(--cab-centralizar) 1 0%; min-width: 0; }

/* ============================================================== os traços

   Três desenhos por cima do fundo, cada um com espessura, altura, onde começa,
   até onde vai, inclinação, cor, opacidade e esmaecimento nas pontas. É com
   eles que se monta "duas linhas brancas finas, uma faixa larga que atravessa e
   se dissolve no fim" — o tipo de composição que antes só saía reabrindo o CSS.

   Todos os três estão sempre no HTML; ligado ou desligado é a opacidade, que o
   servidor imprime por tela. Assim o celular pode ter dois traços e a tela
   larga três, com a mesma página. */
.cabecalho__faixa {
    position: absolute;
    transform-origin: left center;
    pointer-events: none;
    border-radius: 999px;
}

/* O esmaecimento é uma máscara com o alfa das pontas vindo da própria chave:
   em 0 a ponta fica opaca (não esmaece), em 1 ela desaparece. Um `if` que o
   CSS não tem, escrito como conta. */
.cabecalho__faixa--1 {
    left: var(--cab-f1-inicio, 0%);
    top: var(--cab-f1-topo, 32%);
    width: var(--cab-f1-extensao, 18%);
    height: var(--cab-f1-espessura, 3px);
    background: var(--cab-f1-cor, #fff);
    opacity: calc(var(--cab-f1-ligada, 0) * var(--cab-f1-opacidade, 90%));
    transform: translateY(-50%) rotate(var(--cab-f1-inclinacao, 0deg));
    -webkit-mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, calc(1 - var(--cab-f1-esmaecer-inicio, 0))) 0%, #000 14%,
        #000 calc(100% - 26%), rgba(0, 0, 0, calc(1 - var(--cab-f1-esmaecer-fim, 1))) 100%);
            mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, calc(1 - var(--cab-f1-esmaecer-inicio, 0))) 0%, #000 14%,
        #000 calc(100% - 26%), rgba(0, 0, 0, calc(1 - var(--cab-f1-esmaecer-fim, 1))) 100%);
}

.cabecalho__faixa--2 {
    left: var(--cab-f2-inicio, 0%);
    top: var(--cab-f2-topo, 44%);
    width: var(--cab-f2-extensao, 26%);
    height: var(--cab-f2-espessura, 3px);
    background: var(--cab-f2-cor, #fff);
    opacity: calc(var(--cab-f2-ligada, 0) * var(--cab-f2-opacidade, 70%));
    transform: translateY(-50%) rotate(var(--cab-f2-inclinacao, 0deg));
    -webkit-mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, calc(1 - var(--cab-f2-esmaecer-inicio, 0))) 0%, #000 14%,
        #000 calc(100% - 26%), rgba(0, 0, 0, calc(1 - var(--cab-f2-esmaecer-fim, 1))) 100%);
            mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, calc(1 - var(--cab-f2-esmaecer-inicio, 0))) 0%, #000 14%,
        #000 calc(100% - 26%), rgba(0, 0, 0, calc(1 - var(--cab-f2-esmaecer-fim, 1))) 100%);
}

.cabecalho__faixa--3 {
    left: var(--cab-f3-inicio, 0%);
    top: var(--cab-f3-topo, 70%);
    width: var(--cab-f3-extensao, 74%);
    height: var(--cab-f3-espessura, 22px);
    background: var(--cab-f3-cor, #fff);
    opacity: calc(var(--cab-f3-ligada, 0) * var(--cab-f3-opacidade, 28%));
    transform: translateY(-50%) rotate(var(--cab-f3-inclinacao, 0deg));
    -webkit-mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, calc(1 - var(--cab-f3-esmaecer-inicio, 0))) 0%, #000 14%,
        #000 calc(100% - 26%), rgba(0, 0, 0, calc(1 - var(--cab-f3-esmaecer-fim, 1))) 100%);
            mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, calc(1 - var(--cab-f3-esmaecer-inicio, 0))) 0%, #000 14%,
        #000 calc(100% - 26%), rgba(0, 0, 0, calc(1 - var(--cab-f3-esmaecer-fim, 1))) 100%);
}

/* =============================================================== o menu

   Forma, tamanho, alinhamento e — o que mais mudou — ONDE. Descer o menu até
   ele passar da borda do cabeçalho faz dele a costura entre a faixa e a seção
   de baixo, em vez de mais uma linha empilhada. É `transform`, e não margem, de
   propósito: assim ele invade o que vem abaixo sem empurrar nada de lugar. */
.cabecalho .menu {
    transform: translateY(var(--cab-menu-deslocamento, 0px));
    position: relative;
    z-index: 2;

    /* A linha própria do menu é declarada aqui, e não só no tema, porque este
       arquivo é o que a prévia do painel carrega sozinho. Sem isto a prévia
       mostraria o menu espremido ao lado do logotipo — um cabeçalho que não
       existe em lugar nenhum. */
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
}

.cabecalho .menu__lista {
    display: flex;
    gap: var(--cab-menu-espacamento, 6px);
    justify-content: var(--cab-menu-alinhar, flex-start);
    align-items: center;
    min-width: 0;

    /* O menu cresce com o portal: cada página institucional e cada módulo
       ligado acrescenta um botão, e o cabeçalho tem `overflow: hidden`. Sem
       quebrar linha, o portal que cresceu perde os últimos itens do menu —
       cortados no meio da palavra, sem nada indicando que existem. A linha
       de baixo é mais barata que qualquer rolagem horizontal aqui.
       O row-gap é menor que o espaçamento lateral de propósito: duas linhas
       muito afastadas leem como dois menus diferentes. */
    flex-wrap: wrap;
    row-gap: calc(var(--cab-menu-espacamento, 6px) * 0.4);
}

.cabecalho .menu__lista a { text-decoration: none; }

.cabecalho .menu__lista a {
    font-size: var(--cab-menu-tamanho, 13px);
    text-transform: var(--cab-menu-maiusculas, uppercase);
    padding: var(--cab-menu-item-padding, 6px 0);
    border: var(--cab-menu-item-borda, 0);
    border-radius: var(--cab-menu-item-raio, 0px);
    background: var(--cab-menu-item-fundo, transparent);
    color: var(--cab-menu-cor-texto, #B7CCE2);
    border-bottom: var(--cab-menu-item-sublinhado, 0px) solid transparent;
    transition: background-color .15s ease, color .15s ease;

    /* QUANTO o fundo do hover pinta — e por que isso é uma conta.

       O marcador que desliza já cobre o item inteiro quando é pílula ou bloco
       (`--cab-menu-marcador-cheio`). Pintando o fundo do item POR BAIXO dele,
       o que se vê ao passar o mouse são DUAS formas no mesmo lugar: a pílula
       arredondada por cima e um retângulo de cantos vivos atrás, porque o raio
       do item é 0 na forma "só texto". Lido como defeito, e era.

       Então: com marcador do tamanho do item, o fundo some e quem marca o
       lugar é só a pílula. Sem ele — ou com a barra fina, que não cobre nada —
       o fundo continua sendo a única resposta ao cursor, e fica.

       A conta mora AQUI, no item, e não no cabeçalho: um `var()` dentro de uma
       propriedade personalizada se resolve no elemento que a declara, e os dois
       interruptores só existem juntos neste nível. */
    --cab-menu-hover-forca: calc(
        (1 - var(--cab-menu-marcador, 0) * var(--cab-menu-marcador-cheio, 0)) * 34%
    );
}

.cabecalho .menu__lista a:hover,
.cabecalho .menu__lista a[aria-current="page"] {
    color: #fff;
    border-bottom-color: var(--cor-item, var(--queda));
    background: color-mix(in srgb,
        var(--cab-menu-cor-fundo, var(--cab-cor-efeito)) var(--cab-menu-hover-forca, 34%),
        var(--cab-menu-item-fundo, transparent));
}

/* O menu descido continua alcançável: o cabeçalho inteiro já pinta acima do
   conteúdo, mas o `transform` tira o menu do fluxo visual e é preciso garantir
   que o clique também chegue lá embaixo. */
.cabecalho .menu__lista a { position: relative; z-index: 1; }

/* ================================================== a foto do cabeçalho

   A peça que separa um cabeçalho bonito de um cabeçalho bem feito. Uma cor
   chapada não diz de onde o portal é; a cachoeira entrando pela direita e se
   dissolvendo no azul antes de chegar no logotipo diz em meio segundo.

   Três máscaras trabalham juntas, e é a soma delas que faz a foto parecer
   parte da faixa em vez de um banner colado em cima:

     · `clip-path`  o corte (diagonal, reto ou nenhum);
     · `mask-image` horizontal, que dissolve a entrada dela no fundo;
     · `mask-image` vertical, que tira o peso da borda de baixo.  */
.cabecalho__foto {
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--cab-img-largura, 58%);
    z-index: 0;

    background-image: var(--cab-img-url, none);
    background-size: cover;
    background-position: var(--cab-img-foco, center center);
    background-repeat: no-repeat;

    opacity: calc(var(--cab-img-mostrar, 0) * var(--cab-img-opacidade, 100%));
    clip-path: var(--cab-img-corte, none);

    -webkit-mask-image:
        linear-gradient(90deg, transparent 0, #000 var(--cab-img-entrada, 38%)),
        linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
            mask-image:
        linear-gradient(90deg, transparent 0, #000 var(--cab-img-entrada, 38%)),
        linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}

/* O escurecimento é um filho, e não um `filter` na foto: filtro custa caro em
   celular e pesa em toda rolagem; um véu por cima custa nada. */
.cabecalho__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc(var(--cab-img-escurecer, 30%) / 100%);
}

/* ---------------------------------------------- a segunda foto, à esquerda

   A da direita dá ORIGEM ao portal; esta dá PESO. Ela entra escura, quase
   silhueta, atrás do logotipo — não para ser lida como imagem, mas para o
   canto esquerdo deixar de ser um retângulo de cor.

   Tudo aqui é o espelho da foto da direita, com uma diferença que importa: o
   esmaecimento corre para o OUTRO lado (270deg), porque ela nasce na borda
   esquerda e morre indo para o meio. Mesma peça, sentido invertido. */
.cabecalho__foto--esquerda {
    inset: 0 auto 0 0;
    width: var(--cab-imge-largura, 26%);

    background-image: var(--cab-imge-url, none);
    background-position: var(--cab-imge-foco, center center);

    opacity: calc(var(--cab-imge-mostrar, 0) * var(--cab-imge-opacidade, 70%));
    clip-path: none;

    -webkit-mask-image:
        linear-gradient(270deg, transparent 0, #000 var(--cab-imge-entrada, 42%)),
        linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
            mask-image:
        linear-gradient(270deg, transparent 0, #000 var(--cab-imge-entrada, 42%)),
        linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
}

.cabecalho__foto--esquerda::after {
    opacity: calc(var(--cab-imge-escurecer, 62%) / 100%);
}

/* =============================================== a borda de baixo

   Um cabeçalho que acaba numa linha reta acaba como uma tabela acaba. A curva
   assimétrica faz outra coisa: dá ao bloco um contorno próprio, e o olho lê
   "peça" em vez de "faixa".

   É `border-radius` nos cantos de BAIXO, e nada mais: o navegador desenha de
   graça e a curva acompanha a largura sozinha. Uma curva feita com `clip-path:
   path()` teria de ser redesenhada a cada tamanho de tela, e um SVG seria um
   pedido a mais para um contorno.

   Ela RECORTA em vez de pintar por cima, e é essa a decisão que importa. Logo
   abaixo do cabeçalho pode vir a página clara, pode vir a tarja escura dos
   avisos e pode vir a faixa das sessões: uma faixa de cor chapada acertaria
   uma das três e erraria as outras duas. Recortando, o que aparece embaixo é
   o que de fato está lá.

   Por isso a cor de fundo mora AQUI e não no `.cabecalho`: quem é recortado é
   quem pinta. Com a cor no elemento de fora, ela continuaria preenchendo o
   retângulo inteiro e a curva não apareceria.

   A ONDA é a exceção: raio de canto é sempre um quarto de elipse — sobe de um
   lado, desce do outro e nunca volta —, e onda tem dois sentidos. Ela vem como
   MÁSCARA, e por isso as duas coisas convivem aqui: quem escolhe curva recebe
   raio e uma máscara cheia (que não recorta nada); quem escolhe onda recebe
   raio zero e o traçado. Uma propriedade a mais, e nenhuma regra condicional.

   `max(0px, …)` na primeira camada não é zelo: com a curva mais funda que a
   caixa, a conta dá negativo, e tamanho negativo faz o navegador descartar a
   camada inteira. Descartada a de cima, o cabeçalho sumia. */
.cabecalho__camadas {
    background: var(--marinho, #0B1E37);
    border-radius: var(--cab-borda-raio, 0);

    -webkit-mask-image: linear-gradient(#000, #000), var(--cab-borda-onda, linear-gradient(#000, #000));
            mask-image: linear-gradient(#000, #000), var(--cab-borda-onda, linear-gradient(#000, #000));
    -webkit-mask-size: 100% max(0px, calc(100% - var(--cab-borda-altura, 0px))), 100% var(--cab-borda-altura, 0px);
            mask-size: 100% max(0px, calc(100% - var(--cab-borda-altura, 0px))), 100% var(--cab-borda-altura, 0px);
    -webkit-mask-position: top left, bottom left;
            mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
}

/* ------------------------------------------- COM SESSÃO NO AR, a base é reta

   A curva existe para dar contorno a um bloco que termina no logotipo. Quando
   há transmissão, o bloco passa a terminar na tarja do "no ar" — que é peça de
   serviço, e peça de serviço é reta: ela carrega a informação mais urgente da
   página, e um recorte por baixo só a deixaria torta.

   Então a forma inteira sai de cena, seja curva, varredura ou onda. Não é
   compensação nem meio-termo: é a mesma faixa que o portal sempre teve nos
   dias em que há sessão, e o contorno volta sozinho quando ela sai.

   Quem sabe se a tarja existe é o PHP, que imprime a classe — a mesma condição
   que decide imprimir a faixa. Um `:has()` faria o mesmo e deixaria o desenho
   dependendo de o navegador conhecê-lo. */
.cabecalho--com-estado .cabecalho__camadas {
    border-radius: 0;
    -webkit-mask-image: none;
            mask-image: none;
}

/* Não há respiro extra por causa da curva, e é de propósito.

   Houve: a linha do logotipo ganhava um `padding-bottom` proporcional à
   profundidade, para o primeiro e o último botão do menu não caírem dentro do
   corte. O efeito colateral era pior que o problema — o cabeçalho ficava mais
   alto sem transmissão e mais baixo com ela, e uma escolha de acabamento
   passava a mudar a ALTURA do cabeçalho, que é a medida que o resto da página
   herda.

   A borda de baixo é acabamento: ela recorta o que está desenhado e não
   empurra nada de lugar. Curva funda demais comendo o canto do menu é motivo
   para diminuir a profundidade no painel, não para o tema inventar altura. */

/* =================================================== a placa da marca

   Um painel que termina em diagonal. Com foto atrás, o logotipo disputa fundo
   com a imagem e perde; a placa devolve a ele um campo próprio — e dá ao
   cabeçalho uma estrutura que faixa lisa não tem. */
.cabecalho__placa {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--cab-placa-largura, 46%);
    z-index: 0;

    /* A placa segura a cor quase até o fim e só então cede: é isso que faz a
       ponta em diagonal APARECER. Um gradiente que morre no meio deixaria o
       corte invisível, e a placa viraria mais um esmaecimento entre outros. */
    background: linear-gradient(
        95deg,
        color-mix(in srgb, var(--cab-placa-cor) 100%, transparent) 0%,
        color-mix(in srgb, var(--cab-placa-cor) 92%, transparent) 72%,
        color-mix(in srgb, var(--cab-placa-cor) 62%, transparent) 100%
    );
    opacity: calc(var(--cab-placa-ligada, 0) * var(--cab-placa-opacidade, 90%));

    /* A ponta inclinada. `calc(100% - X)` no canto de baixo faz o corte descer
       para a direita, que é o sentido de leitura — a diagonal empurra o olho
       para dentro da página em vez de barrá-lo. */
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cab-placa-inclinacao, 9%)) 100%, 0 100%);

    /* Um fio de luz na ponta cortada. `drop-shadow` segue a forma DEPOIS do
       recorte — é o único jeito barato de desenhar uma linha em diagonal sem
       inventar um segundo elemento girado. Sem ele a placa é mais um
       esmaecimento; com ele, é uma peça com borda, e o cabeçalho ganha a
       estrutura que se vê num jornal impresso. */
    filter: drop-shadow(1.5px 0 0 color-mix(in srgb, #fff 22%, transparent));
}

/* ============================================ o marcador que acompanha

   Um só, para o menu inteiro. A diferença entre uma barra por item e uma barra
   que se MOVE não é enfeite: com uma só, o olho segue um objeto que existe, e a
   linha de seções passa a parecer um instrumento em vez de uma lista de links.

   Posição e largura vêm do JavaScript, que mede o item de verdade; o resto —
   forma, cor, se existe — vem do painel. */
.menu__lista { position: relative; }

.menu__marcador {
    position: absolute;
    left: 0;
    top: 0;

    /* A altura que ele REALMENTE vai ter: a do item (pílula, bloco) ou a
       espessura de uma barra. A conta mora aqui, no marcador, porque é aqui que
       as duas medidas existem — a do painel e a que o JavaScript mediu. Feita
       no cabeçalho, a medida do item viraria zero: um `var()` dentro de uma
       propriedade personalizada se resolve no elemento que a declara. */
    --altura-usada: calc(
        var(--cab-menu-marcador-cheio, 0) * var(--marcador-altura, 0px)
        + (1 - var(--cab-menu-marcador-cheio, 0)) * var(--cab-menu-marcador-espessura, 3px)
    );

    width: var(--marcador-largura, 0px);
    height: var(--altura-usada);
    border-radius: var(--cab-menu-marcador-raio, 3px);
    background: var(--cab-menu-marcador-fundo, var(--cab-cor-efeito));

    /* O halo. Em 0px não existe — `box-shadow` de raio zero e cor calculada
       não pinta nada, e não custa camada nenhuma. É ele que tira a borda dura
       da pílula: gota não tem quina. */
    box-shadow: 0 0 var(--cab-menu-marcador-brilho, 0px)
                color-mix(in srgb, var(--cab-menu-cor-marcador, var(--cab-cor-efeito)) 55%, transparent);

    /* Encostado na base do item quando é barra de baixo; no topo, quando não.
       O `scaleX` no fim é o estica-e-encolhe: em repouso vale 1 e não faz
       nada. Quem o mexe é o `cabecalho.js`, e só quando a forma escolhida for
       a fluida — é a diferença entre um retângulo que anda e algo com massa. */
    transform: translate(
        var(--marcador-x, 0px),
        calc(var(--marcador-y, 0px)
             + var(--cab-menu-marcador-embaixo, 0) * (var(--marcador-altura, 0px) - var(--altura-usada)))
    ) scaleX(var(--marcador-estica, 1));

    opacity: calc(var(--cab-menu-marcador, 0) * var(--marcador-pronto, 0));
    pointer-events: none;
    z-index: 0;

    /* A transição é o recurso inteiro: sem ela o marcador teleporta e a
       impressão de instrumento se perde. A curva é a de um objeto com massa —
       sai rápido, chega devagar. */
    transition: transform .34s cubic-bezier(.22, .61, .18, 1),
                width .34s cubic-bezier(.22, .61, .18, 1),
                height .34s cubic-bezier(.22, .61, .18, 1),
                opacity .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .menu__marcador { transition: opacity .2s ease; }
}

/* O texto fica acima do marcador quando ele é pílula ou bloco. */
.cabecalho .menu__lista a { position: relative; z-index: 1; }

/* A linha do menu ganha respiro próprio e um fio que a separa da marca — é o
   que transforma "logotipo e links na mesma sopa" em duas faixas de leitura. */
.cabecalho .menu {
    padding-top: var(--cab-menu-respiro, 14px);
    padding-bottom: calc(var(--cab-menu-respiro, 14px) * 0.35);
    border-top: calc(var(--cab-menu-divisoria, 1) * 1px) solid
                color-mix(in srgb, currentColor 14%, transparent);
}