/* =====================================================================
   MENU RESPONSIVO — protótipo
   26/08/2026 · ficheiro NOVO, só carregado por /mz/menu

   UM MENU EM VEZ DE DOIS. O site tem hoje o menu de computador e um menu
   móvel separado, com um corte duro aos 767px. Isto é o de computador a
   aguentar também os ecrãs estreitos, para depois se poder apagar o outro.

   O CORTE PASSA DOS 767 PARA OS 991px, e a razão é medível: são cinco
   categorias mais «Contacto» mais o carrinho. A 768px isso fica apertado
   ao ponto de as palavras se encostarem — a bancada mostra-o. Aos 992
   ainda há folga.
   ===================================================================== */

.rlxm {
    /* Pela mesma razao da barra de cima: a medida e da peca, nao de quem
       a hospeda. O portal herdava 20px e o site 24px. */
    line-height: 24px;
    /* A ALTURA. Eram 68px, com um encolher para 56 ao rolar. O dono pediu
       os 56 fixos e depois um pouco mais: ficam 62. Continua a devolver
       6px de conteúdo em cada ecrã face aos 68 de origem, e o encolher
       deixou de existir — só fica a sombra a dizer que a página se moveu.
       26/08/2026. */
    --rlxm-alt: 62px;
    --rlxm-vermelho: #d10303;
    --rlxm-vivo: #f00843;
    --rlxm-carvao: #1f2835;
    --rlxm-cinza: #6b737c;
    --rlxm-linha: #e2e6ea;
    position: sticky; top: var(--rlxm-vvo, 0px); z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--rlxm-linha);
    font-family: Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.rlxm *, .rlxm *::before, .rlxm *::after { box-sizing: border-box; }

.rlxm-barra {
    /* A LARGURA DA BARRA — ALINHADA COM O CONTEÚDO DO SITE, 27/08/2026.

       Percorreu três valores no mesmo dia: 1200px (o meu palpite inicial),
       1400px (interpretei mal um pedido e empurrei-a para fora), e agora
       1140px, que foi a escolha do dono.

       1140 e 15 NÃO SÃO NÚMEROS ESCOLHIDOS: são exactamente os do `.inner`,
       o bloco que compõe o conteúdo das páginas destas marcas — medido, 19
       ocorrências numa página só. Com os mesmos valores, o logótipo cai na
       mesma vertical que a primeira letra do texto por baixo, seja qual for
       a largura da janela. A 1536px isso dá 208px de margem.

       Se o site mudar a largura da sua coluna, esta linha tem de mudar com
       ela — é essa a dependência que se está a assumir de propósito. */
    max-width: 1140px; margin: 0 auto; padding: 0 15px;
    height: var(--rlxm-alt);
    display: flex; align-items: center; gap: 18px;
}
.rlxm-logo { flex: 0 0 auto; display: flex; align-items: center; }
.rlxm-logo img { display: block; height: 30px; width: auto; }

/* ---------- a lista ---------- */
.rlxm-nav { flex: 1 1 auto; min-width: 0; }
.rlxm-lista { display: flex; align-items: center; justify-content: flex-end;
              gap: 2px; list-style: none; margin: 0; padding: 0; }
.rlxm-item { position: relative; }

.rlxm-topo {
    display: flex; align-items: center; gap: 6px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: .4px;
    text-transform: uppercase; color: var(--rlxm-carvao); text-decoration: none;
    padding: 10px 13px; border-radius: 6px;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.rlxm-topo:hover, .rlxm-topo:focus-visible { color: var(--rlxm-vermelho); }
.rlxm-topo:focus { outline: none; }
.rlxm-topo:focus-visible { outline: 2px solid #00acc8; outline-offset: 2px; }
.rlxm-seta { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .18s ease; }
.rlxm-topo[aria-expanded="true"] { color: var(--rlxm-vermelho); }
.rlxm-topo[aria-expanded="true"] .rlxm-seta { transform: rotate(180deg); }

/* O «CONTACTO» com menos folga — pedido do dono, 26/08/2026. Estava com
   11×20; passa a 9×16. Num botão curto de texto em maiúsculas a folga
   larga fá-lo parecer maior do que o peso que tem na barra. */
.rlxm-contacto {
    background: var(--rlxm-vivo); color: #fff; margin-left: 8px;
    padding: 9px 16px; border-radius: 4px;
}
.rlxm-contacto:hover, .rlxm-contacto:focus-visible { background: var(--rlxm-vermelho); color: #fff; }

/* ---------- o submenu, em ecrã largo ---------- */
.rlxm-sub {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 300px;
    background: #fff; border: 1px solid var(--rlxm-linha); border-radius: 8px;
    box-shadow: 0 12px 34px rgba(31, 40, 53, .13);
    padding: 8px;
}
.rlxm-sub[hidden] { display: none; }
.rlxm-sub ul { list-style: none; margin: 0; padding: 0; }
.rlxm-sub a {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 16px; border-radius: 0;
    color: var(--rlxm-carvao); text-decoration: none;
    transition: background .13s ease;
}
.rlxm-sub a:hover, .rlxm-sub a:focus-visible { background: #f5f7f9; }
.rlxm-sub a:focus { outline: none; }
.rlxm-sub a:focus-visible { outline: 2px solid #00acc8; outline-offset: -2px; }
/* O ícone vem da fonte da casa (`dyn__locaweb-icons`, 371 glifos), e não
   do Font Awesome nem de SVG soltos. Decisão do dono, 26/08/2026, e é a
   certa por três razões: os glifos foram desenhados para estes serviços e
   dizem melhor o que são; herdam a cor e o tamanho do texto sem se
   pedirem duas versões; e poupam uma fonte inteira mais quatro pedidos de
   SVG que a página já não precisa de fazer.
   O `line-height: 1` é preciso — a fonte traz espaço acima e abaixo do
   glifo e sem isto o ícone desalinha do título. */
.rlxm-ic { flex: 0 0 22px; display: flex; justify-content: center;
           color: var(--rlxm-vermelho); font-size: 17px; line-height: 1; padding-top: 1px; }
.rlxm-tx { min-width: 0; }
.rlxm-tt { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
/* A descrição só aparece onde há espaço para ela: numa gaveta estreita
   rouba a linha ao que interessa. */
.rlxm-in { display: none; font-size: 12px; line-height: 1.45; color: var(--rlxm-cinza); }

/* ---------- ecrãs grandes: o submenu abre ao passar o rato ----------
   Copiado do que o site faz hoje (`style_atmh.css`, linhas 92 e 241):

       .dropdown-menu        { transform: scale(1, 0); transform-origin: top;
                               transition: all 300ms ease-in-out; }
       li.dropdown:hover     { transform: scale(1, 1); }

   ou seja, desenrola-se de cima para baixo em 300ms. Pedido do dono em
   26/08/2026: quis o movimento que o site já tem, e não um meu.

   O `hidden` TEM DE SER DESLIGADO AQUI, e é o pormenor que faz isto
   funcionar: `hidden` é `display: none`, e o que não é desenhado não
   transita — a gaveta apareceria de repente. Em ecrã grande o que a
   esconde é o `scaleY(0)` mais a `visibility`, que já se animam.

   E O BOTÃO CONTINUA A ABRIR AO CLIQUE, porque um menu só de rato não se
   usa com teclado nem com dedo. O rato abre; o clique e o Enter também.

   NÃO HÁ BURACO ENTRE O BOTÃO E A GAVETA. Tinha 8px de intervalo, e o rato
   ao atravessá-lo perdia o `:hover` e a gaveta fechava-se na cara de quem
   ia lá. O intervalo passa a ser um `padding` transparente da própria
   gaveta: vê-se o mesmo espaço, mas o rato nunca sai de cima dela. */
@media (min-width: 992px) {
    /* OS ITENS OCUPAM A ALTURA TODA DA BARRA, e não é cosmética: o
       `top: 100%` da gaveta conta a partir do ITEM, e o item tinha ~40px
       numa barra de 68, centrado. Sobrava-lhe altura por baixo, e a gaveta
       abria lá para dentro — a borda de cima dela ficava ACIMA da linha do
       cabeçalho. Visto pelo dono em 26/08/2026.
       Com o item a preencher a barra, `top: 100%` passa a ser exactamente
       a linha de baixo, e continua certo quando a barra encolhe ao rolar.
       De caminho o alvo do rato passa a ser a altura toda, que é melhor. */
    .rlxm-nav { align-self: stretch; }
    .rlxm-lista { align-items: stretch; height: 100%; }
    .rlxm-item { display: flex; align-items: center; }
    .rlxm-tem-sub > .rlxm-topo { height: 100%; border-radius: 0; }

    .rlxm-sub,
    .rlxm-sub[hidden] {
        display: block;
        top: 100%;
        /* SEM FOLGA — pedido do dono, 26/08/2026, em três passos: 8 → 3 → 0.
           O cartão nasce da linha de baixo da barra, sem nada pelo meio. */
        padding: 0;
        background: none; border: 0; box-shadow: none;
        transform: scaleY(0);
        transform-origin: top;
        visibility: hidden;
        transition: transform 300ms ease-in-out, visibility 0s linear 300ms;
    }
    /* O CARTÃO NÃO TEM FOLGA PRÓPRIA — mesmo defeito que o painel dos
       países tinha: com `padding: 8px` no cartão, o realce do item da
       página actual ficava com uma moldura branca à volta, porque a folga
       era do cartão e não da linha. Toda a folga vive na linha; assim o
       realce preenche a largura inteira. Visto pelo dono em 26/08/2026.
       Os cantos são recortados no cartão para o realce da primeira e da
       última linha não sair de dentro deles. */
    .rlxm-sub > ul {
        background: #fff;
        border: 1px solid var(--rlxm-linha);
        border-radius: 8px;
        box-shadow: 0 12px 34px rgba(31, 40, 53, .13);
        padding: 0;
        overflow: hidden;
    }
    .rlxm-tem-sub.rlxm-sobre > .rlxm-sub,
    .rlxm-topo[aria-expanded="true"] + .rlxm-sub {
        transform: scaleY(1);
        visibility: visible;
        transition: transform 300ms ease-in-out, visibility 0s linear 0s;
    }
    /* A seta do botão acompanha, esteja o menu aberto por rato ou por clique.
       SÓ PARA QUEM TEM SUBMENU, e não para todos os itens: o «CONTACTO» é
       também um `.rlxm-topo`, e como este selector tem três partes ganhava
       ao `.rlxm-contacto:hover`, que só tem duas — o texto ficava vermelho
       sobre o fundo vermelho do botão e desaparecia. Visto pelo dono em
       26/08/2026. Pôr `!important` teria escondido o problema; restringir a
       regra a quem ela serve resolve-o. */
    .rlxm-tem-sub.rlxm-sobre > .rlxm-topo { color: var(--rlxm-vermelho); }
    .rlxm-tem-sub.rlxm-sobre > .rlxm-topo .rlxm-seta { transform: rotate(180deg); }

    /* O BIQUINHO A APONTAR PARA A GAVETA — e é o efeito que o tema já tinha
       para isto, deixado por acabar.

       Está no `style_atmh.css:79`: um quadrado de 15×15 rodado 45°, cantos
       de 3px, a meio e por baixo do item, com `z-index` e tudo. Inteiro,
       menos uma coisa — NUNCA LHE DERAM COR DE FUNDO. Procurei em todos os
       ficheiros e não existe em lado nenhum, por isso hoje é invisível: o
       que se vê ao passar o rato é só o texto a escurecer, sem transição.

       Fica acabado como estava pensado: branco como o cartão, com o risco
       nos dois lados que ficam de fora depois da rotação, para se ler como
       uma continuação dele e não como um losango pousado por cima. */
    .rlxm-tem-sub > .rlxm-topo { position: relative; }
    /* O BIQUINHO SAI. Ele vivia no intervalo entre a barra e o cartão, e
       sem intervalo passaria a sobrepor-se ao cartão em vez de apontar
       para ele. O item já se destaca ao passar o rato pela cor e pela seta
       a rodar, que é o que ele acrescentava.
       Para o devolver: repor este bloco e dar folga ao `.rlxm-sub`. */
    .rlxm-tem-sub > .rlxm-topo::after {
        content: none;
        /* Com o botão a preencher a barra, `bottom: 0` é a linha de baixo
           dela. O biquinho fica meio dentro, meio fora, a tocar no cartão. */
        /* O biquinho encolhe com o intervalo: maior do que ele, ficava a
           sair por baixo do cartão. */
        position: absolute; left: 50%; bottom: -1px;
        width: 10px; height: 10px; margin-left: -5px;
        background: #fff;
        border-left: 1px solid var(--rlxm-linha);
        border-top: 1px solid var(--rlxm-linha);
        border-radius: 3px 0 0 0;
        transform: rotate(45deg) scale(0);
        transform-origin: center;
        opacity: 0;
        z-index: 2;                       /* por cima da borda do cartão */
        transition: transform 300ms ease-in-out, opacity 180ms linear;
    }
    .rlxm-tem-sub.rlxm-sobre > .rlxm-topo::after,
    .rlxm-topo[aria-expanded="true"]::after {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }
    /* E o texto deixa de mudar de cor de repente. */
    .rlxm-topo { transition: color 180ms ease, background 150ms ease; }
}


/* ---------- a direita da barra ---------- */
.rlxm-accoes { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }

/* ---------- o hamburguer ---------- */
.rlxm-hamb {
    display: none;                      /* só existe em ecrã estreito */
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
    align-items: center; justify-content: center;
    transition: background .13s ease;
}
.rlxm-hamb:hover { background: #f5f7f9; }
.rlxm-hamb:focus { outline: none; }
.rlxm-hamb:focus-visible { outline: 2px solid #00acc8; outline-offset: 2px; }
.rlxm-hamb-linhas { display: block; width: 22px; height: 16px; position: relative; }
/* O × FAZ-SE EM DOIS TEMPOS, e é isso que o torna legível: as linhas de
   fora juntam-se primeiro ao meio, e só depois rodam. Tudo ao mesmo tempo
   dá um borrão em que não se percebe o que aconteceu; em dois tempos vê-se
   a forma a transformar-se, que é o que diz «este botão agora fecha».
   Ao fechar corre ao contrário — desenrola e só depois separa — e é o
   `transition-delay` trocado entre os dois estados que o faz.
   A linha do meio encolhe a partir do centro em vez de só desvanecer:
   desaparecer sem se mexer parece um erro de desenho. */
.rlxm-hamb-linhas span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: var(--rlxm-carvao);
    transform-origin: center;
    transition: top .2s cubic-bezier(.22,.61,.36,1) .16s,
                transform .2s cubic-bezier(.22,.61,.36,1) 0s,
                opacity .12s linear .1s,
                background .13s ease;
}
.rlxm-hamb-linhas span:nth-child(1) { top: 0; }
.rlxm-hamb-linhas span:nth-child(2) { top: 7px; }
.rlxm-hamb-linhas span:nth-child(3) { top: 14px; }

/* `.rlxm-hamb-linhas span` E NAO `.rlxm-hamb span`, e a diferença não é
   estilo: o `<span>` que embrulha as três linhas é ele próprio um `span`
   dentro do botão, e é o PRIMEIRO FILHO dele. Com o selector solto,
   `:nth-child(1)` apanhava o embrulho em vez da primeira linha — ele levava
   o `rotate(45deg)` e, com a cor que acrescentei a seguir, passou a ser um
   bloco vermelho de 22×16 rodado: um losango cheio no lugar do ×.
   Visto pelo dono em 26/08/2026. Enquanto o embrulho não tinha cor, o erro
   estava lá e não se via. */
.rlxm-hamb[aria-expanded="true"] .rlxm-hamb-linhas span {
    transition: top .2s cubic-bezier(.22,.61,.36,1) 0s,
                transform .2s cubic-bezier(.22,.61,.36,1) .16s,
                opacity .12s linear 0s,
                background .13s ease;
    /* Aberto, as linhas ficam da cor da marca — o botão passa a ser
       «fechar» e convém que se leia como estado, não só como forma. */
    background: var(--rlxm-vermelho);
}
.rlxm-hamb[aria-expanded="true"] .rlxm-hamb-linhas span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.rlxm-hamb[aria-expanded="true"] .rlxm-hamb-linhas span:nth-child(2) { transform: scaleX(0); opacity: 0; }
.rlxm-hamb[aria-expanded="true"] .rlxm-hamb-linhas span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
.rlxm-hamb:active { transform: scale(.92); }

.rlxm-pano { display: none; }

/* SOBRE O «REDUZIR MOVIMENTO» — aqui estava um bloco que desligava estas
   transições todas, e com `!important`. Era ele que estava a apagar, no
   computador do dono, exactamente as animações que ele me pediu duas vezes
   seguidas: o CSS estava certo e nunca chegava a correr.

   Segue a decisão já tomada neste site em 26/08/2026, e pela mesma razão:
   no Windows a definição liga-se sozinha com o poupador de bateria, por
   isso não apanha só quem a escolheu — apanha visitantes com o portátil
   sem carga. Onde obedecer-lhe APAGA a peça, passa-se por cima.
   Para voltar atrás, é repor este bloco. */

/* =====================================================================
   ECRÃ ESTREITO — abaixo de 992px a lista vira gaveta
   ===================================================================== */
@media (max-width: 991px) {

    .rlxm-barra { gap: 10px; padding: 0 14px; }
    .rlxm-hamb  { display: flex; }
    .rlxm-logo img { height: 26px; }

    /* OS ÍCONES ENCOSTAM À DIREITA. Em ecrã largo é a lista que os empurra
       para lá, porque ela ocupa o espaço do meio (`flex: 1`). Aqui a lista
       vira gaveta fixa e sai do fluxo — sem nada a empurrar, tudo ficava
       amontoado à esquerda com o resto da barra vazio. Visto pelo dono em
       26/08/2026, na bancada. */
    .rlxm-accoes { margin-left: auto; }

    /* A GAVETA. Encostada por baixo da barra e não a tapar o ecrã todo:
       a barra continua à vista, e o mesmo botão que abriu é o que fecha —
       é onde o dedo já está. */
    .rlxm-nav {
        position: fixed;
        /* ONDE A BARRA ACABA, medido, e não uma altura suposta.
           Estava em `top: var(--rlxm-alt)` — a altura da barra do menu
           contada do topo do ecrã. Mas por cima dela está a barra vermelha,
           de ~38px, por isso a gaveta abria a meio da barra e tapava o
           logótipo. E não dá para somar as duas alturas de uma vez: a barra
           vermelha rola para fora e a do menu fica colada, portanto a soma
           muda enquanto se rola. Quem escreve a `--rlxm-topo` é o
           JavaScript, com o `getBoundingClientRect().bottom` da barra.
           A `--rlxm-alt` fica como rede para o caso de o JS não correr. */
        top: var(--rlxm-topo, var(--rlxm-alt)); left: 0; right: 0;
        max-height: calc(100vh  - var(--rlxm-topo, var(--rlxm-alt)));
        max-height: calc(100dvh - var(--rlxm-topo, var(--rlxm-alt)));
        overflow-y: auto;
        overscroll-behavior: contain;                 /* não arrasta a página atrás */
        background: #fff;
        border-top: 1px solid var(--rlxm-linha);
        box-shadow: 0 16px 34px rgba(31, 40, 53, .14);
        padding: 6px 0 18px;
        transform: translateY(-8px);
        opacity: 0; visibility: hidden;
        transition: transform .22s cubic-bezier(.22,.61,.36,1),
                    opacity .16s linear,
                    visibility 0s linear .22s;
    }
    .rlxm.rlxm-aberto .rlxm-nav {
        transform: translateY(0); opacity: 1; visibility: visible;
        transition: transform .24s cubic-bezier(.22,.61,.36,1),
                    opacity .18s linear, visibility 0s linear 0s;
    }

    .rlxm-lista { display: block; }
    .rlxm-item  { position: static; border-bottom: 1px solid #eef1f4; }
    .rlxm-item:last-child { border-bottom: 0; }

    .rlxm-topo {
        width: 100%; justify-content: space-between;
        padding: 15px 18px;                    /* 50px de altura, dá para o dedo */
        font-size: 14.5px; border-radius: 0;
    }
    /* Na gaveta mantém a folga: ali é um botão a sério, tocado com o
       dedo, e não uma etiqueta no meio de uma barra. */
    .rlxm-contacto {
        margin: 14px 18px 0; width: calc(100% - 36px);
        justify-content: center; padding: 14px 20px; font-size: 14px;
    }

    /* O submenu deixa de flutuar: abre em acordeão, no sítio.
       Acordeão e não «entrar noutro ecrã»: assim vê-se onde se está, e
       voltar atrás é fechar — não é procurar um botão de regresso. */
    .rlxm-sub {
        /* Desliza em altura, 300ms — quem escreve a altura em píxeis é o
           JavaScript, porque `height: auto` não se anima. */
        transition: height .3s ease;
        position: static; min-width: 0;
        border: 0; border-radius: 0; box-shadow: none;
        background: #f7f9fa;
        padding: 4px 0 8px;
    }
    .rlxm-sub a { padding: 12px 18px 12px 20px; border-radius: 0; }
    .rlxm-sub a:hover, .rlxm-sub a:focus-visible { background: #eef2f5; }
    /* Aqui há largura para a descrição, e ela ajuda a escolher. */
    .rlxm-in { display: block; }
    .rlxm-ic { flex-basis: 24px; font-size: 19px; padding-top: 2px; }

    /* O pano de fundo escurece o que fica por baixo — sem ele a gaveta
       parece flutuar sobre um site que continua vivo. */
    .rlxm-pano {
        display: block;
        position: fixed; inset: var(--rlxm-topo, var(--rlxm-alt)) 0 0 0;
        background: rgba(31, 40, 53, .38);
        opacity: 0; visibility: hidden;
        transition: opacity .2s linear, visibility 0s linear .2s;
        z-index: -1;
    }
    .rlxm.rlxm-aberto .rlxm-pano {
        opacity: 1; visibility: visible;
        transition: opacity .2s linear, visibility 0s linear 0s;
    }
    .rlxm-pano[hidden] { display: block; }   /* o `hidden` só serve para quem não tem CSS */
}

@media (max-width: 480px) {
    .rlxm { --rlxm-alt: 56px; }
    .rlxm-barra { padding: 0 10px; gap: 6px; }
    .rlxm-icone { width: 42px; height: 42px; }
}

/* =====================================================================
   A BARRA DE CIMA — país, língua e atalhos
   Hoje existem duas: a de computador e a `.m2rc6-mncntnr` do telemóvel,
   com o mesmo corte aos 767px. Aqui é uma só, e o que muda com a largura
   é o que se mostra dela, não a peça.
   ===================================================================== */
.rlxt {
    /* ALTURA IGUAL EM QUALQUER PAGINA — 26/08/2026.
       Sem esta linha a barra herdava o `line-height` de quem a hospeda, e
       ficava com alturas diferentes: 36px no site publico (que herda 24px)
       e 32px no portal (que herda os 18,57px do Bootstrap). A mesma folha,
       a mesma marcacao, e duas alturas — porque a medida vinha de fora.
       Fixada em 24px, que e o valor com que o site sempre se viu; o portal
       passa a igualar o site em vez de o contrario. */
    line-height: 24px;
    --rlxt-fundo: #ba0000;
    /* O VERMELHO DA BARRA DE CIMA — 26/08/2026.
       Eu tinha posto #d10303, que e o vermelho que aparece 102 vezes no resto
       da folha da casa. Mas a barra de cima, essa, sempre foi #ba0000 —
       main.css linha 21713 — e continua a se-lo na mozout.co.mz. Mudei-o sem
       ninguem pedir; esta reposto.
       CADA MARCA DECLARA O SEU: as duas Interweb sao #1F2835, azul-carvao, e
       nao vermelho. Por isso a cor e uma variavel e nao um valor fixo — a
       folha e uma so para as quatro marcas. */
    background: var(--rlxt-fundo);
    color: #fff;
    font-family: Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    /* PESO 500 EM TODA A BARRA — pedido do dono, 26/08/2026. Texto branco
       sobre vermelho perde contraste aparente no peso normal: a cor de
       fundo «come» os traços finos das letras. Meio ponto de peso devolve
       a legibilidade sem a fazer gritar. */
    font-weight: 500;
    position: relative; z-index: 1001;   /* acima da barra do menu, para a gaveta de países não ficar por baixo */
}
.rlxt *, .rlxt *::before, .rlxt *::after { box-sizing: border-box; }
.rlxt-barra {
    /* A LARGURA DA BARRA — ALINHADA COM O CONTEÚDO DO SITE, 27/08/2026.

       Percorreu três valores no mesmo dia: 1200px (o meu palpite inicial),
       1400px (interpretei mal um pedido e empurrei-a para fora), e agora
       1140px, que foi a escolha do dono.

       1140 e 15 NÃO SÃO NÚMEROS ESCOLHIDOS: são exactamente os do `.inner`,
       o bloco que compõe o conteúdo das páginas destas marcas — medido, 19
       ocorrências numa página só. Com os mesmos valores, o logótipo cai na
       mesma vertical que a primeira letra do texto por baixo, seja qual for
       a largura da janela. A 1536px isso dá 208px de margem.

       Se o site mudar a largura da sua coluna, esta linha tem de mudar com
       ela — é essa a dependência que se está a assumir de propósito. */
    max-width: 1140px; margin: 0 auto; padding: 0 15px;
    /* 32px — pedido do dono, 26/08/2026, em dois passos: 38 → 34 → 32.
       É uma barra de atalhos, não de navegação: quanto menos altura tirar
       ao conteúdo, melhor. Abaixo disto o alvo dos atalhos começa a ficar
       pequeno para o dedo, por isso é aqui que eu pararia. */
    min-height: 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ---------- o selector de país ---------- */
.rlxt-pais { position: relative; }
.rlxt-pais-bt {
    display: flex; align-items: center; gap: 7px;
    background: none; border: 0; cursor: pointer;
    font: inherit; color: #fff;
}
.rlxt-pais-bt img { display: block; border-radius: 2px; }
/* A LÍNGUA FICA NO PESO NORMAL — pedido do dono, 26/08/2026. O peso 500
   da barra é para o que se lê primeiro; «(Português)» é uma precisão sobre
   o país ao lado, não uma segunda coisa com o mesmo valor. Em peso normal
   lê-se como o aparte que é. */
.rlxt-pais-ln {
    opacity: .9; font-weight: 400;
    /* MAIS PERTO DO PAÍS. O botão usa `gap: 7px` para tudo, o que serve
       entre a bandeira e o nome mas afasta demais a língua — ela é uma
       precisão sobre o nome, não um item ao lado dele. A margem negativa
       encurta esse espaço para 3px sem mexer no `gap` dos outros.
       Pedido do dono, 26/08/2026. */
    margin-left: -4px;
}
.rlxt-pais-cod { display: none; font-weight: 500; }
/* SEM SETINHA — o cabeçalho actual não tem nenhuma, e a bandeira já diz
   que aquilo é o país. Decisão do dono, 26/08/2026.
   Mas continua a ser um botão, e um botão sem sinal nenhum não se percebe
   que é clicável: ganha um leve fundo ao passar o rato e outro enquanto a
   lista está aberta. É o que substitui a seta. */
.rlxt-pais-bt { padding: 5px 10px; border-radius: 6px; transition: background .13s ease; }
.rlxt-pais-bt:hover { background: rgba(255,255,255,.14); }
.rlxt-pais-bt[aria-expanded="true"] {
    background: rgba(255,255,255,.2);
    /* Com o painel colado, os cantos de baixo do botão deixam de fazer
       sentido: ele passa a ser a aba de que o painel sai. */
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.rlxt-pais-bt:focus { outline: none; }
.rlxt-pais-bt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* DUAS ABERTURAS DIFERENTES, e é decisão do dono (26/08/2026): no
   telemóvel fica esta gaveta estreita ancorada à bandeira, que abre em
   altura; no computador entra o painel largo que o site já tem hoje.
   A marcação é a mesma nos dois — só muda o desenho. */
.rlxt-paises {
    position: absolute; top: calc(100% + 6px); left: 0;
    z-index: 5; overflow-y: auto;
}
.rlxt-paises[hidden] { display: none; }
.rlxt-paises ul { list-style: none; margin: 0; padding: 0; }
.rlxt-paises img { display: block; border-radius: 2px; flex: 0 0 auto; }

/* ---------- ecrãs grandes: o painel largo, como o de hoje ----------
   Copiado do que está no ar (`.topheader .locale-holder .drop-down`):
   900px, fundo #4d4d4d, borda #333, quatro colunas separadas por um risco,
   e cada país como «Bandeira **País** | Língua». Abre sem animação, como
   o de hoje — lá é um `display: block` e mais nada.

   O CORTE É AOS 1200px E NÃO AOS 992, e a razão é a largura do próprio
   painel: com 900px, num ecrã de 992 ele encosta às duas margens e deixa
   de ser um painel para passar a ser uma barra. É por isso que este corte
   NÃO acompanha o do menu — cada um segue o que a sua peça precisa.
   Correcção do dono, 26/08/2026. */
@media (min-width: 1200px) {
    .rlxt-paises {
        width: 900px; max-width: calc(100vw - 40px);
        /* 1px DE FOLGA — pedido do dono, 26/08/2026, em dois passos: eram
           4px, foram a zero, ficam em 1. Colado a zero, a borda escura do
           painel e o vermelho da barra encostavam sem nada a separá-los e
           lia-se como um borrão; um pixel chega para se ver onde acaba uma
           e começa o outro, sem deixar a página espreitar pelo meio. */
        top: calc(100% + 1px);
        background: #4d4d4d; border: 1px solid #333; color: #fff;
        padding: 0; border-radius: 0; box-shadow: none;
        max-height: none;
    }
    .rlxt-paises-tt { display: none; }
    /* Quatro colunas a sério, e não `column-count`: o repartir é feito no
       PHP para dar 3+3+2+2 garantidos (ver a nota lá). Aqui só se alinham
       e se separam com um risco, como no painel de hoje. */
    /* A GRELHA E A FOLGA SÃO AS DO PAINEL QUE ESTÁ NO AR — fui buscá-las ao
       `._m3fk8-r0w` em vez de as escolher: itens a 25% num `flex-wrap`, e
       `padding: 13px 10px 13px 20px`. Eram os 7×14 que eu tinha posto que
       o dono estranhou.

       Quatro por linha, e com dez países saem 3+3+2+2 sem se calcular nada.
       A folga vive toda na linha, por isso o realce do país actual preenche
       a célula inteira e não fica com cinzento à volta. */
    .rlxt-paises ul { display: flex; flex-flow: row wrap; padding: 0; }
    .rlxt-paises li { width: 25%; }
    .rlxt-paises a {
        display: flex; align-items: center; gap: 10px;
        /* A ALTURA DE LINHA É FIXADA AQUI, e é o que faltava: sem ela a
           linha herdava a do site e a altura real de cada país ficava bem
           acima dos 13px de folga que eu tinha escrito. Era isso que fazia
           o painel do /mz/ parecer mais espaçado do que o do /za/.
           Com `line-height` explícito, a folga que se escreve é a folga
           que se vê. 26/08/2026. */
        line-height: 1.25;
        padding: 10px 10px 10px 20px;
        color: #fff; text-decoration: none;
        font-size: 13px; border-radius: 0;
        transition: background .3s ease;
    }
    /* A bandeira também: sem altura fixa era ela a mandar na linha. */
    .rlxt-paises img { width: 22px; height: 15px; object-fit: cover; }
    .rlxt-paises a:hover, .rlxt-paises a[aria-current] { background: #262626; }
    .rlxt-paises b { font-weight: 700; }
    /* Pela mesma razão, dentro da lista: o país em negrito, a língua não. */
    .rlxt-ln { opacity: .8; font-weight: 400; }
    /* A BARRA SÓ QUANDO HÁ DUAS COISAS A SEPARAR — 26/08/2026.
       Era `.rlxt-ln::before`, sem condição. Nas marcas de duas línguas o
       campo da língua está vazio (o nome JÁ É a língua) e sobrava a barra
       sozinha à frente de nada: «Português |». O `:not(:empty)` resolve-o
       onde o problema está — na folha — em vez de obrigar cada marca a
       lembrar-se de não o deixar vazio. */
    .rlxt-ln:not(:empty)::before { content: '| '; }
}

/* ---------- ecrãs menores: a gaveta estreita, a abrir em altura ----------
   O movimento é o `slideToggle(300)` do jQuery que o menu móvel de hoje
   usa. A altura em píxeis é escrita pelo JavaScript antes de transitar,
   porque `height: auto` não se anima; no fim devolve-se o `auto`, senão a
   lista deixava de crescer se o conteúdo mudasse. */
@media (max-width: 1199px) {
    .rlxt-paises {
        transition: height .3s ease;
        min-width: 260px; max-height: 70vh;
        background: #fff; color: var(--rlxm-carvao, #1f2835);
        border-radius: 8px; box-shadow: 0 14px 36px rgba(31,40,53,.22);
        padding: 8px;
    }
    /* Em ecrã estreito as quatro listas voltam a ser uma só, em coluna. */
    .rlxt-paises { display: block; }
    .rlxt-paises ul { border-right: 0; padding: 0; }
    .rlxt-paises a {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 10px; border-radius: 6px;
        color: inherit; text-decoration: none; font-size: 13.5px;
    }
    .rlxt-paises a:hover, .rlxt-paises a:focus-visible { background: #f5f7f9; }
    .rlxt-paises a[aria-current] { background: #f0f4f6; }
    .rlxt-paises b { font-weight: 500; }
    /* A língua sai: numa gaveta estreita rouba a linha ao nome do país. */
    .rlxt-ln { display: none; }
}
.rlxt-paises-tt { margin: 4px 10px 8px; font-size: 11.5px; font-weight: 500;
                  text-transform: uppercase; letter-spacing: .5px; color: #8b939c; }
.rlxt-paises a:focus { outline: none; }
.rlxt-paises a:focus-visible { outline: 2px solid #00acc8; outline-offset: -2px; }

/* ---------- os atalhos ---------- */
.rlxt-links { display: flex; align-items: center; gap: 4px; }
.rlxt-links a {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: 6px;
    color: #fff; text-decoration: none; white-space: nowrap;
    transition: background .13s ease;
}
.rlxt-links a:hover, .rlxt-links a:focus-visible { background: rgba(255,255,255,.14); }
.rlxt-links a:focus { outline: none; }
.rlxt-links a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* Os ícones também: um pouco maiores e sem transparência, que os punha
   mais leves do que o texto ao lado. */
.rlxt-links i { font-size: 16px; line-height: 1; opacity: 1; }

@media (max-width: 991px) {
    .rlxt-barra { padding: 0 14px; min-height: 36px; gap: 8px; }
    /* No estreito o nome do país e a língua saem e fica bandeira + código,
       que é o que a versão móvel de hoje já faz — e liberta a linha para
       os três atalhos, que são o que se procura ali. */
    .rlxt-pais-nome, .rlxt-pais-ln { display: none; }
    .rlxt-pais-cod { display: inline; }
    .rlxt-pais-bt { padding: 9px 8px; }
    .rlxt-links a { padding: 9px 8px; }
}

@media (max-width: 600px) {
    /* Abaixo daqui os três nomes não cabem: ficam os ícones, com o nome
       no `aria-label` para quem usa leitor de ecrã não perder nada.
       «Base de Conhecimento» é o primeiro a cair porque é o mais longo e
       o que tem ícone mais reconhecível. */
    /* SÓ O NOME SAI, e não «todos os spans»: o carrinho embrulha o ícone
       num `<span>` para lhe pendurar a medalha, e a regra genérica apagava
       o ícone junto com a palavra — ficava uma caixa vazia. Visto pelo
       dono em 26/08/2026, na bancada, a 390px. */
    .rlxt-links a > span:not(.rlxt-carr-ic) { display: none; }
    .rlxt-links a { width: 38px; height: 38px; justify-content: center; padding: 0; }
    .rlxt-links i { font-size: 18px; }
}

/* =====================================================================
   ACABAMENTOS — 26/08/2026
   ===================================================================== */

/* ---------- onde é que eu estou ---------- */
/* O menu não dizia em que secção se estava. Numa loja com trinta páginas
   isso conta: a pessoa perde a referência e volta ao início para se
   situar. A categoria da página actual leva um traço por baixo. */
/* O DESTAQUE É PRETO, e mais forte — decisão do dono, 26/08/2026. Estava
   vermelho, que é a cor com que o menu inteiro responde ao rato: a página
   onde se está confundia-se com a categoria por baixo do cursor. Preto
   distingue-se dos dois, e ganha o peso e a espessura que o vermelho lhe
   dava pela cor. */
/* SEM BARRA NEM TRAÇO — decisão do dono, 26/08/2026. Chegou a haver um
   traço de 3px por baixo da categoria e uma barra à esquerda na gaveta;
   saíram os dois. O destaque fica só na tipografia: preto e negrito, contra
   o cinzento e o peso normal dos vizinhos. É mais discreto e chega — quem
   procura onde está encontra, e quem não procura não é interrompido. */
.rlxm-item-aqui > .rlxm-topo { color: var(--rlxm-carvao); font-weight: 700; }

/* O CONTACTO NA PRÓPRIA PÁGINA DE CONTACTO — 27/08/2026.

   A regra acima serve os itens de texto: o da página actual fica a carvão e
   em negrito, contra o cinzento dos vizinhos. Mas o CONTACTO não é texto —
   é um botão cheio, e a mesma regra punha-lhe letras `#1f2835` sobre o rosa
   `#f00843`. Ficava ilegível e com ar de avariado. Visto pelo dono e
   reproduzido no navegador em 27/08/2026.

   Aqui o «está aqui» não pode ser a cor da letra: a letra tem de continuar
   branca para se ler. Diz-se de outra maneira — o botão deixa de reagir ao
   rato e o cursor deixa de ser uma mão. É honesto, porque na página actual
   ele nem sequer tem `href`: já não leva a lado nenhum.
   O negrito da regra acima fica, e chega como reforço. */
.rlxm-item-aqui > .rlxm-contacto {
    color: #fff; cursor: default;
    /* O ANEL — pedido do dono, 27/08/2026. O «está aqui» dos outros itens é
       a cor da letra; num botão cheio isso não serve (ficava carvão sobre
       rosa, ilegível). Diz-se por fora: uma folga branca e um anel da cor do
       botão. Lê-se como «este é o sítio onde estás» sem tocar no que está
       dentro, e não empurra nada — `box-shadow` não ocupa espaço, ao
       contrário de uma `border`, que faria o botão crescer e desalinhar a
       barra toda. O `outline` fica livre para o foco do teclado.

       PRETO E FINO, decisão do dono em 27/08/2026. A primeira versão tinha
       4px e era da cor do botão: lia-se como um halo, não como uma marca.
       Agora é 1px de folga branca e 1px de carvão — o mesmo `--rlxm-carvao`
       com que os outros itens marcam a página actual, por isso o menu diz a
       mesma coisa da mesma cor em toda a parte. */
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--rlxm-carvao);
}
.rlxm-item-aqui > .rlxm-contacto:hover,
.rlxm-item-aqui > .rlxm-contacto:focus-visible { background: var(--rlxm-vivo); color: #fff; }
@media (min-width: 992px) { .rlxm-item { position: relative; } }

/* O ITEM DA PÁGINA ACTUAL — sem `href`, e a mostrar porquê. */
.rlxm-sub a[aria-current="page"] {
    background: #eef1f4; font-weight: 700; color: var(--rlxm-carvao);
    cursor: default;
}
.rlxm-sub a[aria-current="page"]:hover { background: #eef1f4; }
.rlxm-sub a[aria-current="page"] .rlxm-ic { color: var(--rlxm-carvao); }
.rlxt-paises a[aria-current] { cursor: default; }

/* ---------- a barra encolhe ao rolar ---------- */
/* Devolve altura ao conteúdo sem tirar o menu do sítio. É o que o
   cabeçalho de hoje já faz (`igfm-mncntnr-scrolled`), mantido. */
.rlxm { transition: box-shadow .2s ease; }
.rlxm-barra { transition: height .2s ease; }
.rlxm.rlxm-rolado { box-shadow: 0 2px 14px rgba(31, 40, 53, .10); }
/* Ao rolar não muda de altura nem sai de cena — fica onde está e ganha a
   sombra, que diz que a página se moveu por baixo dela.

   Experimentámos duas alternativas em 26/08/2026: sair a descer e voltar a
   subir, e sair enquanto se rola voltando ao parar. O dono viu as duas e
   preferiu a barra quieta. O custo fica assumido: 62px de cada ecrã. */
.rlxm { transition: box-shadow .2s ease; }
.rlxm-barra { transition: height .2s ease; }
.rlxm.rlxm-rolado { box-shadow: 0 2px 14px rgba(31, 40, 53, .10); }
/* Ao rolar já não muda de altura — ganha a sombra, que diz que a página
   se moveu por baixo dela.

   CHEGOU A SAIR DE CENA A DESCER e a voltar a subir; o dono experimentou e
   preferiu-a sempre à vista, a subir ou a descer (26/08/2026). Fica assim.
   O custo é conhecido e assumido: 62px de cada ecrã ficam ocupados. */
.rlxm { transition: box-shadow .2s ease; }


/* ---------- o carrinho, na barra de cima ---------- */
/* Terceira e definitiva morada. Esteve como ícone solto na barra do menu
   (três ícones a disputar o canto) e como item da lista (deixava de se ver
   no telemóvel sem abrir o menu). Aqui está sempre à vista em qualquer
   largura e não rouba espaço às cinco categorias. */
.rlxt-carrinho { position: relative; }
.rlxt-carr-ic { position: relative; display: flex; align-items: center; }
.rlxt-conta {
    position: absolute; top: -7px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #fff; color: var(--rlxt-fundo);
    border-radius: 8px; font-size: 10.5px; font-weight: 700; line-height: 16px;
    text-align: center; letter-spacing: 0;
    box-shadow: 0 0 0 1.5px var(--rlxt-fundo);   /* separa a medalha do vermelho por trás */
}
/* A MEDALHA ESTÁ SEMPRE LÁ, mesmo a zero — é o que o cabeçalho de hoje
   faz, e foi o que o dono pediu ao apontar «com este número que temos».
   Escondê-la a zero seria uma linha, e fica dito caso mude de ideias. */

/* =====================================================================
   A BUSCA DO SITE — 26/08/2026
   A página `/mz/search` já existia e nada lhe apontava. Isto é a ligação
   que faltava, não uma funcionalidade nova.
   ===================================================================== */
.rlxm-busca-bt {
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--rlxm-carvao); font-size: 17px; line-height: 1;
    transition: background .13s ease, color .13s ease;
}
.rlxm-lupa { width: 20px; height: 20px; display: block; }
.rlxm-busca-bt:hover { background: #f5f7f9; color: var(--rlxm-vermelho); }
.rlxm-busca-bt:active { transform: scale(.92); }
.rlxm-busca-bt:focus { outline: none; }
.rlxm-busca-bt:focus-visible { outline: 2px solid #00acc8; outline-offset: 2px; }
.rlxm-busca-bt[aria-expanded="true"] { background: #f0f4f6; color: var(--rlxm-vermelho); }

/* Desce por baixo da barra, como a gaveta — e pela mesma medida, para
   nunca tapar o logótipo. */
.rlxm-busca {
    position: fixed;
    top: var(--rlxm-topo, var(--rlxm-alt)); left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--rlxm-linha);
    box-shadow: 0 14px 30px rgba(31, 40, 53, .12);
    padding: 14px 20px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .2s cubic-bezier(.22,.61,.36,1),
                opacity .15s linear, visibility 0s linear .2s;
    z-index: 3;
}
.rlxm-busca[hidden] { display: block; }   /* o `hidden` é só para quem não tem CSS */
.rlxm.rlxm-a-buscar .rlxm-busca {
    transform: translateY(0); opacity: 1; visibility: visible;
    transition: transform .22s cubic-bezier(.22,.61,.36,1),
                opacity .16s linear, visibility 0s linear 0s;
}
.rlxm-busca-cx {
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--rlxm-linha); border-radius: 999px;
    padding: 6px 6px 6px 18px;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.rlxm-busca-cx:focus-within { border-color: #00acc8; box-shadow: 0 0 0 3px rgba(0,172,200,.15); }
/* O «www» em vez da lupa, como nas caixas de domínio do site — diz de
   imediato que ali se escreve um nome de domínio e não uma pergunta. */
.rlxm-busca-www {
    color: #8b939c; font-size: 15px; white-space: nowrap; letter-spacing: .2px;
    display: flex; align-items: center;
}
.rlxm-busca-www::after {
    content: ''; width: 1px; height: 22px; margin-left: 14px; background: var(--rlxm-linha);
}
.rlxm-busca-campo {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: none;
    font: inherit; font-size: 15px; color: var(--rlxm-carvao); padding: 8px 0;
}
.rlxm-busca-campo::placeholder { color: #a7b0bd; }
.rlxm-busca-ok {
    flex: 0 0 auto; border: 0; cursor: pointer;
    background: var(--rlxm-vivo); color: #fff;
    border-radius: 999px; padding: 10px 20px 10px 16px;
    font: inherit; font-size: 13.5px; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    transition: background .14s ease, transform .12s ease;
}
.rlxm-busca-ok:hover { background: var(--rlxm-vermelho); }
.rlxm-busca-ok:active { transform: scale(.95); }
.rlxm-lupa-ok { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
.rlxm-busca-x {
    flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--rlxm-cinza); font-size: 22px; line-height: 1; border-radius: 50%;
}
.rlxm-busca-x:hover { background: #f5f7f9; color: var(--rlxm-carvao); }
@media (max-width: 480px) {
    .rlxm-busca { padding: 10px 12px; }
    .rlxm-busca-cx { padding-left: 14px; gap: 8px; }
    .rlxm-busca-www::after { margin-left: 10px; }
    /* Num ecrã estreito a palavra rouba a linha ao que se escreve — fica a
       lupa sozinha, num botão redondo. Antes era uma seta «→», que dizia
       «avançar» e não «procurar». */
    .rlxm-busca-ok { padding: 0; width: 42px; height: 42px; border-radius: 50%;
                     justify-content: center; gap: 0; }
    .rlxm-busca-ok > span { display: none; }
    .rlxm-lupa-ok { width: 19px; height: 19px; }
}

/* =====================================================================
   CADA LUPA NO SEU REGIME — e isto fica no FIM do ficheiro de propósito.

   A da lista, entre «Empresa» e «Contacto», em ecrã largo; a da barra, ao
   lado do hamburguer, em ecrã estreito. Nunca as duas ao mesmo tempo.

   PORQUE ESTÁ AQUI E NÃO LÁ EM CIMA: estava, e não funcionava. O
   `.rlxm-busca-bar { display: none }` dentro do `@media (min-width: 992px)`
   tem a mesma especificidade que o `.rlxm-busca-bt { display: flex }` que
   vem mais abaixo no ficheiro — e com especificidade igual ganha quem vem
   depois. Resultado: duas lupas ao mesmo tempo no computador, uma antes e
   outra depois do «Contacto». Visto pelo dono em 26/08/2026.
   Uma media query não acrescenta especificidade nenhuma; é um engano fácil
   e foi o terceiro do mesmo género hoje.
   ===================================================================== */
.rlxm-busca-tx   { display: none; }
.rlxm-item-busca { display: none; }
.rlxm-busca-bar  { display: flex; }
@media (min-width: 992px) {
    .rlxm-item-busca { display: flex; align-items: center; }
    .rlxm-busca-bar  { display: none; }
}