/* ==========================================================================
   Waresta Index — sistema de design
   --------------------------------------------------------------------------
   Duas famílias de cor, e cada uma tem um trabalho.

   O **azul institucional** veste a interface: navegação, botões, ligações,
   fundos escuros. Os valores vêm do logótipo da Universidade Rovuma, de quem
   o sistema é propriedade — `#00247C` e `#043183` medidos no ficheiro, e
   `#3396D1` como tom vivo.

   O **verde, o barro, o ocre e o mar** continuam a ser os dados: verde para
   a agricultura, barro para os mercados e supermercados, ocre para cereais,
   mar para pescado. São as cores do que o sítio mede, e por isso não se
   diluem na identidade — distinguem produto de produto num gráfico.

   O azul do logótipo Waresta (`#00A0F0`) fica no logótipo e mais nada: tem
   2,9:1 sobre branco e não passa em texto. Para a interface usa-se o
   `--wx-azul-600`, que é o mesmo tom escurecido até aos 5,4:1.

   Rácios verificados sobre branco: azul-700 11,9 · azul-600 5,4 ·
   verde-600 6,3 · barro-600 5,3 · mar-600 6,3 · azul-500 3,3 (só decoração
   e contornos de foco, onde o mínimo é 3,0).
   ========================================================================== */

/* Tipografia institucional, alojada connosco — os mesmos ficheiros do sistema
   da incubadora FACEE-UniRovuma. A Universidade Rovuma distingue-se pelo peso
   e não por um segundo desenho: títulos a 900, corpo a 400. Nada vem do Google
   Fonts, que em Nampula é o primeiro pedido a falhar. */
@font-face { font-family: "Lato"; src: url("../fonts/lato-400.e1b3b5908c9c.woff2") format("woff2");
  font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700.de69cf9e514d.woff2") format("woff2");
  font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-900.1c6c65523675.woff2") format("woff2");
  font-weight: 900; font-display: swap; }

:root {
  /* -- identidade institucional (Universidade Rovuma) ---------------------
     Os mesmos valores do sistema da incubadora FACEE-UniRovuma, para os
     dois sítios da universidade serem a mesma casa. Lá chamam-se
     --marinho, --azul, --azul-claro e --azul-vivo. */
  --wx-azul-900: #00247c;   /* marinho: menu, rodapés, véus */
  --wx-azul-700: #043183;   /* azul: ligações, botões, rótulos */
  --wx-azul-600: #1d6fa5;   /* azul-claro: passagem do rato e foco */
  --wx-azul-500: #3396d1;   /* azul-vivo: decoração, nunca texto */
  --wx-azul-100: #e8eef6;   /* superfície de realce */
  --wx-azul-50:  #f1f5f9;   /* fundo de página */

  /* -- cores do que se mede -----------------------------------------------
     O tom médio de cada sector é o mesmo que a série do gráfico usa. Eram
     dois verdes diferentes para «agricultura» — um na folha, outro no
     desenho — e isso lê-se como dois assuntos. */
  --wx-verde-700: #33502f;   /* agricultura */
  --wx-verde-600: #2f7d4f;
  --wx-verde-100: #e8efe5;

  --wx-barro-700: #8f4322;   /* mercados e supermercados */
  --wx-barro-600: #a9532c;
  --wx-barro-500: #c2673c;
  --wx-barro-100: #f8e9e0;

  --wx-ocre-600:  #a8802a;   /* cereais */
  --wx-ocre-100:  #f7eed8;

  --wx-mar-600:   #0e6a73;   /* pescado */

  /* Amarelo de acção, como na incubadora: é o que chama o clique sobre o
     azul institucional. Texto marinho por cima, nunca branco. */
  --wx-amarelo:        #eab308;
  --wx-amarelo-suave:  #fdf6d8;

  /* -- neutros ----------------------------------------------------------- */
  --wx-tinta-900: #0f172a;
  --wx-tinta-800: #1e293b;
  --wx-tinta-700: #334155;
  --wx-tinta-500: #475569;
  --wx-tinta-400: #64748b;
  --wx-tinta-300: #94a3b8;
  --wx-tinta-200: #d3dce8;
  --wx-tinta-100: #e8eef6;
  --wx-areia:     #f1f5f9;
  --wx-branco:    #ffffff;

  /* -- estados ------------------------------------------------------------ */
  /* Matizes da incubadora, escurecidos até passarem em texto sobre o seu
     próprio fundo — o mesmo que lá se fez ao #3396D1. */
  --wx-sucesso:   #276a43;   /* #2E7D4F escurecido */
  --wx-sucesso-bg:#e3f2e9;
  --wx-aviso:     #946011;   /* #B7791F escurecido */
  --wx-aviso-bg:  #fdf2dc;
  --wx-erro:      #c81f1f;   /* #DC2626 escurecido */
  --wx-erro-bg:   #fbe5e3;
  --wx-info:      #1d6fa5;
  --wx-info-bg:   #e8eef6;

  /* -- séries de gráficos (ordem fixa de utilização) ----------------------
     As mesmas sete cores que o `waresta-charts.js` usa, e pela mesma ordem:
     a folha e o desenho têm de concordar, senão a pastilha da legenda fica
     de uma cor e a linha de outra.

     Medidas, não escolhidas a olho. Cada par vizinho separa-se em
     deuteranopia, protanopia e tritanopia; todas passam 3:1 contra branco;
     nenhuma lê como cinzento. O verde está em sexto e não em segundo porque
     ao lado do barro nenhum daltónico os distinguia.

     A ordem não se recicla: a oitava série entra em «Outros». */
  --wx-serie-1: #2563c9;   /* azul institucional */
  --wx-serie-2: #c0562a;   /* barro: mercados e supermercados */
  --wx-serie-3: #00959f;   /* mar: pescado */
  --wx-serie-4: #b08408;   /* ocre: cereais */
  --wx-serie-5: #8b4fb5;   /* violeta */
  --wx-serie-6: #2f7d4f;   /* verde: agricultura */
  --wx-serie-7: #d14b78;   /* magenta */

  /* -- tipografia --------------------------------------------------------- */
  --wx-fonte: "Lato", "Segoe UI", system-ui, -apple-system, Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --wx-fonte-numero: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo,
                     Consolas, monospace;

  /* -- espaçamento (escala de 4 px) --------------------------------------- */
  --wx-e1: 0.25rem; --wx-e2: 0.5rem;  --wx-e3: 0.75rem; --wx-e4: 1rem;
  --wx-e5: 1.5rem;  --wx-e6: 2rem;    --wx-e7: 3rem;    --wx-e8: 4rem;
  --wx-e9: 6rem;

  /* -- superfícies --------------------------------------------------------
     Raios maiores e sombras em duas camadas. A sombra de 1 px que estava
     aqui não levantava nada do fundo: via-se a borda, não a elevação, e o
     conjunto lia-se como uma folha de cálculo. Duas camadas — uma curta e
     fechada que assenta o cartão, outra larga e aberta que o levanta — é o
     que dá profundidade sem escurecer a página. */
  --wx-raio-xl: 24px;   /* heróis, painéis grandes */
  --wx-raio-lg: 18px;   /* cartões */
  --wx-raio:    14px;   /* o raio comum */
  --wx-raio-sm: 9px;    /* campos, botões pequenos */
  --wx-raio-pastilha: 999px;
  --wx-borda:   1px solid var(--wx-tinta-200);
  --wx-sombra:  0 1px 2px rgba(4, 49, 131, 0.05),
                0 8px 24px -14px rgba(4, 49, 131, 0.18);
  --wx-sombra-elevada: 0 2px 4px rgba(4, 49, 131, 0.06),
                       0 18px 40px -20px rgba(4, 49, 131, 0.3);
  --wx-sombra-alta:    0 4px 8px rgba(4, 49, 131, 0.07),
                       0 30px 60px -28px rgba(4, 49, 131, 0.4);
  --wx-brilho-amarelo: 0 8px 22px -8px rgba(234, 179, 8, 0.55);

  /* A subida no passar do rato. Um valor só, para tudo subir o mesmo. */
  --wx-subida: translateY(-2px);
  --wx-transicao: 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);

  --wx-largura-menu: 260px;
  --wx-altura-topo: 60px;

  /* -- sistema de largura do portal público -------------------------------
     Uma casca de largura total → um contentor largo → largura de leitura só
     onde há texto corrido. O contentor de 1180 px fazia com que, num monitor
     de 1920, a página vivesse ao centro com cerca de 370 px mortos de cada
     lado. O tecto existe para o texto não se esticar em ecrãs ultralargos:
     a margem que sobra passa a ser espaço, não desperdício. */
  --wx-goteira: clamp(20px, 4vw, 72px);
  --wx-largo:   1680px;
  --wx-medio:   1400px;
  --wx-leitura: 68ch;

  /* A faixa clara entre secções. Era creme quente; passou ao mesmo azul
     pálido da incubadora, senão o sítio tinha duas temperaturas. */
  --wx-creme:   #eef3f9;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--wx-fonte);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--wx-tinta-800);
  background: var(--wx-areia);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: var(--wx-tinta-900);
  letter-spacing: -0.011em;
  margin: 0 0 var(--wx-e3);
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }

a { color: var(--wx-azul-700); text-decoration: none; }
a:hover { color: var(--wx-azul-600); text-decoration: underline; }

.wx-num {
  font-family: var(--wx-fonte-numero);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.wx-silencio { color: var(--wx-tinta-500); }
.wx-mini { font-size: 0.8125rem; }
.wx-micro { font-size: 0.75rem; }

:focus-visible {
  outline: 2px solid var(--wx-azul-600);
  outline-offset: 2px;
  border-radius: 3px;
}

.wx-salto-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--wx-azul-700); color: #fff;
  padding: var(--wx-e3) var(--wx-e4); border-radius: 0 0 var(--wx-raio) 0;
}
.wx-salto-conteudo:focus { left: 0; }

/* --------------------------------------------------------------------------
   Faixa de identificação do ambiente

   Só existe fora da produção. Atravessa a largura toda, no topo de tudo, e usa
   o barro — a cor de alerta do produto — porque a sua função é interromper o
   pressuposto de que se está no sítio oficial. Não é fixa: rola com a página,
   para não roubar altura permanente em ecrãs pequenos. Não sai na impressão,
   nem nos PDF gerados.
   -------------------------------------------------------------------------- */

.wx-faixa-ambiente {
  display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline;
  background: var(--wx-barro-700); color: #fff;
  padding: .5rem var(--wx-e4);
  font-size: .82rem; line-height: 1.4;
}
.wx-faixa-ambiente strong { text-transform: uppercase; letter-spacing: .04em; }
.wx-faixa-ambiente span { opacity: .92; }

@media print { .wx-faixa-ambiente { display: none; } }

/* ==========================================================================
   Estrutura da área de gestão
   ========================================================================== */

.wx-app { display: flex; min-height: 100vh; }

.wx-menu {
  width: var(--wx-largura-menu);
  flex: 0 0 var(--wx-largura-menu);
  background: var(--wx-azul-900);
  color: #d3dce8;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* A marca do menu é a mesma peça da tela de entrada: selo da universidade e
   logótipo do sistema. No sistema anterior o backoffice e o site mostravam
   marcas diferentes e nenhuma dizia de quem era o sistema. */
.wx-menu__marca {
  display: flex; align-items: center; gap: var(--wx-e3);
  padding: var(--wx-e5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.14);
}
.wx-menu__marca:hover { text-decoration: none; }
.wx-menu__marca:focus-visible { outline: 2px solid var(--wx-amarelo);
  outline-offset: -2px; }
.wx-menu__selo { display: block; width: 34px; height: 34px; flex: none; }
.wx-menu__marca-logotipo { display: block; width: 118px; height: auto; }
.wx-menu__marca-nome {
  color: #fff; font-weight: 650; font-size: 1rem; letter-spacing: -0.01em;
  line-height: 1.15;
}
.wx-menu__marca-sub { font-size: 0.625rem; color: #a8c0dd; letter-spacing: 0.1em;
  text-transform: uppercase; display: block; margin-top: 3px; }

/* Secção do menu em acordeão. O `<details>` faz o trabalho todo; o CSS só
   troca o triângulo nativo por uma seta que roda. */
.wx-menu__seccao { padding: var(--wx-e2) 0 0; }
.wx-menu__titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wx-e2);
  padding: var(--wx-e2) var(--wx-e5);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: #94a3b8; font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;                 /* Firefox */
  transition: color 0.12s ease;
}
.wx-menu__titulo::-webkit-details-marker { display: none; }   /* Safari/Chrome */
.wx-menu__titulo:hover { color: #d3dce8; }
.wx-menu__titulo:focus-visible {
  outline: 2px solid var(--wx-azul-500); outline-offset: -2px; border-radius: 3px;
}
.wx-menu__seta { flex: none; transition: transform 0.16s ease; opacity: 0.7; }
.wx-menu__seccao[open] > .wx-menu__titulo > .wx-menu__seta { transform: rotate(180deg); }
/* Uma secção fechada que contenha a página actual não deve passar
   despercebida — se o utilizador a fechar, o ponto continua a dizer onde está. */
.wx-menu__seccao:not([open]) > .wx-menu__titulo::before {
  content: ""; position: absolute; left: 10px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wx-barro-500);
  opacity: 0; transition: opacity 0.12s ease;
}
.wx-menu__seccao--tem-activo:not([open]) > .wx-menu__titulo { position: relative; }
.wx-menu__seccao--tem-activo:not([open]) > .wx-menu__titulo::before { opacity: 1; }
.wx-menu__itens { padding-bottom: var(--wx-e2); }
/* Os itens passam a pastilhas com margem lateral, em vez de barras de
   ponta a ponta com um risco à esquerda. O item activo lê-se de relance,
   que é o que se pede a um menu de trinta ligações. */
.wx-menu__item {
  display: flex; align-items: center; gap: var(--wx-e3);
  padding: 0.5rem 0.85rem;
  margin: 2px var(--wx-e4);
  border-radius: 10px;
  color: #c6d4e6; font-size: 0.875rem;
  transition: background-color var(--wx-transicao), color var(--wx-transicao);
}
.wx-menu__item:hover {
  background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none;
}
.wx-menu__item--activo {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16),
                              rgba(255, 255, 255, 0.07));
  color: #fff; font-weight: 700;
  box-shadow: inset 3px 0 0 var(--wx-amarelo);
}
.wx-menu__item:focus-visible {
  outline: 2px solid var(--wx-amarelo); outline-offset: 1px;
}
.wx-menu__rodape {
  margin-top: auto; padding: var(--wx-e4) var(--wx-e5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  display: flex; flex-direction: column; gap: var(--wx-e2);
}
/* As duas ligações do fundo tinham cores verdes escritas à mão nos próprios
   templates — restos da paleta anterior, que ninguém via porque estão no fim
   de uma barra escura. Ficam na paleta da universidade, como o resto. */
.wx-menu__rodape a { color: #a8c0dd; display: inline-flex; align-items: center;
  gap: var(--wx-e2); }
.wx-menu__rodape a:hover { color: #fff; text-decoration: none; }
.wx-menu__rodape a:focus-visible { outline: 2px solid var(--wx-amarelo);
  outline-offset: 2px; border-radius: 4px; }

.wx-principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* A barra de topo era uma linha de 15 px com o nome da página e o utilizador
   à direita, toda ao mesmo peso. O título do ecrã é a primeira coisa que se
   lê num backoffice; passa a ter o tamanho de um título. */
.wx-topo {
  min-height: var(--wx-altura-topo);
  /* Vidro: o conteúdo passa por baixo e vê-se desfocado, em vez de
     desaparecer atrás de uma barra opaca. Com `backdrop-filter` recusado
     fica o branco de 92 %, que continua legível. */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--wx-borda);
  display: flex; align-items: center; gap: var(--wx-e4);
  padding: var(--wx-e3) var(--wx-e6);
  position: sticky; top: 0; z-index: 40;
}
/* A sombra só aparece depois de a página rolar: parada no topo, a barra é
   uma linha; a rolar, levanta-se do conteúdo que lhe passa por baixo. */
@supports (animation-timeline: scroll()) {
  .wx-topo {
    animation: wx-topo-sombra linear both;
    animation-timeline: scroll();
    animation-range: 0 90px;
  }
}
@keyframes wx-topo-sombra {
  from { box-shadow: 0 0 0 rgba(4, 49, 131, 0); }
  to { box-shadow: 0 6px 20px -12px rgba(4, 49, 131, 0.5); }
}
.wx-topo__titulo {
  font-size: 1.25rem; font-weight: 700; margin: 0;
  color: var(--wx-tinta-900); letter-spacing: -0.015em; line-height: 1.2;
}
.wx-topo__caminho { font-size: 0.8125rem; color: var(--wx-tinta-500);
  margin: 2px 0 0; }
.wx-topo__accoes { margin-left: auto; display: flex; align-items: center;
  gap: var(--wx-e3); }
/* Uma linha fina entre as acções da página e a identidade de quem está
   dentro: são duas coisas diferentes encostadas uma à outra. */
.wx-topo__pessoa {
  display: flex; align-items: center; gap: var(--wx-e3);
  padding-left: var(--wx-e4); margin-left: var(--wx-e1);
  border-left: var(--wx-borda);
}

.wx-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--wx-azul-900); color: #fff;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  flex: none;
}

.wx-conteudo { padding: var(--wx-e6); flex: 1 1 auto; background: var(--wx-areia); }
.wx-conteudo--estreito { max-width: 940px; }

/* alternar menu em ecrãs pequenos */
.wx-menu-botao { display: none; background: none; border: 0;
  padding: var(--wx-e2); border-radius: 9px;
  color: var(--wx-tinta-700); cursor: pointer; line-height: 0; }
.wx-menu-botao:hover { background: var(--wx-tinta-100); }
.wx-menu-botao:focus-visible { outline: 3px solid var(--wx-azul-600);
  outline-offset: 2px; }

/* ==========================================================================
   Cartões e superfícies
   ========================================================================== */

.wx-cartao {
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: var(--wx-raio-lg);
  box-shadow: var(--wx-sombra);
  transition: box-shadow var(--wx-transicao), transform var(--wx-transicao);
}
/* Só os cartões que levam a algum lado é que sobem. Um cartão que se mexe
   sem ser clicável promete uma coisa que não cumpre. */
@media (prefers-reduced-motion: no-preference) {
  a.wx-cartao:hover,
  .wx-cartao--ligacao:hover {
    transform: var(--wx-subida); box-shadow: var(--wx-sombra-elevada);
  }
}
.wx-cartao__cabecalho {
  padding: var(--wx-e4) var(--wx-e5);
  border-bottom: var(--wx-borda);
  display: flex; align-items: center; gap: var(--wx-e3);
}
.wx-cartao__cabecalho h2, .wx-cartao__cabecalho h3 { margin: 0; }
.wx-cartao__corpo { padding: var(--wx-e5); }
.wx-cartao__rodape {
  padding: var(--wx-e3) var(--wx-e5);
  border-top: var(--wx-borda);
  background: var(--wx-tinta-100);
  border-radius: 0 0 var(--wx-raio) var(--wx-raio);
  font-size: 0.8125rem;
}

.wx-grelha { display: grid; gap: var(--wx-e4); }
.wx-grelha--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wx-grelha--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wx-grelha--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* -- indicadores -------------------------------------------------------- */
/* O risco de cor passa de 3 px à esquerda para uma faixa em cima, mais larga
   e com um fundo que lhe puxa o tom. Era quase invisível e o cartão lia-se
   como uma caixa branca igual às outras: é o indicador, devia distinguir-se
   do resto da página à primeira vista. */
.wx-kpi {
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: var(--wx-raio-lg);
  padding: var(--wx-e5);
  box-shadow: var(--wx-sombra);
  position: relative; overflow: hidden;
  --wx-kpi-cor: var(--wx-azul-700);
  /* Os cartões da fila têm todos a altura do mais alto, porque a grelha os
     estica. Sem isto, o que tem o rótulo numa linha fica com um palmo de
     branco por baixo da nota e o que tem duas fica cheio — a fila parece
     desalinhada. A nota desce ao fundo em todos. */
  display: flex; flex-direction: column;
}
.wx-kpi__nota:last-child { margin-top: auto; padding-top: var(--wx-e3); }
.wx-kpi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--wx-kpi-cor);
}
.wx-kpi::after {
  content: ""; position: absolute; inset: 4px 0 auto 0; height: 72px;
  background: linear-gradient(to bottom,
              color-mix(in srgb, var(--wx-kpi-cor) 7%, transparent), transparent);
  pointer-events: none;
}
.wx-kpi > * { position: relative; z-index: 1; }
.wx-kpi--barro { --wx-kpi-cor: var(--wx-barro-600); }
.wx-kpi--ocre  { --wx-kpi-cor: var(--wx-ocre-600); }
.wx-kpi--info  { --wx-kpi-cor: var(--wx-info); }
.wx-kpi--oliva { --wx-kpi-cor: var(--wx-verde-700); }
.wx-kpi--mar   { --wx-kpi-cor: var(--wx-mar-600); }

.wx-kpi__rotulo {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wx-tinta-500); font-weight: 700; margin-bottom: var(--wx-e2);
}
.wx-kpi__valor {
  font-family: var(--wx-fonte-numero);
  font-size: 2.125rem; font-weight: 700; line-height: 1.05;
  color: var(--wx-tinta-900); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.wx-kpi__nota { font-size: 0.75rem; color: var(--wx-tinta-500);
  margin-top: var(--wx-e2); line-height: 1.5; }

.wx-delta { font-size: 0.8125rem; font-weight: 600; font-family: var(--wx-fonte-numero); }
.wx-delta--sobe  { color: var(--wx-barro-700); }
.wx-delta--desce { color: var(--wx-sucesso); }
.wx-delta--igual { color: var(--wx-tinta-500); }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.wx-tabela-envolucro { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.wx-tabela { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.wx-tabela th {
  text-align: left; font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--wx-tinta-500);
  padding: var(--wx-e3) var(--wx-e4);
  border-bottom: 2px solid var(--wx-tinta-200);
  white-space: nowrap; background: var(--wx-branco);
}
.wx-tabela td {
  padding: var(--wx-e3) var(--wx-e4);
  border-bottom: 1px solid var(--wx-tinta-100);
  vertical-align: middle;
}
.wx-tabela tbody tr:hover { background: var(--wx-azul-50); }
.wx-tabela td.wx-numero, .wx-tabela th.wx-numero {
  text-align: right; font-family: var(--wx-fonte-numero);
  font-variant-numeric: tabular-nums;
}
.wx-tabela__accoes { white-space: nowrap; text-align: right; }
.wx-tabela--compacta td, .wx-tabela--compacta th { padding: var(--wx-e2) var(--wx-e3); }

.wx-ordenar { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.wx-ordenar:hover { color: var(--wx-azul-700); text-decoration: none; }
/* A seta da coluna por onde está ordenado vê-se; as outras ficam quase
   apagadas até se passar o rato, senão o cabeçalho é uma fila de setas e
   nenhuma diz nada. */
.wx-ordenar__seta { display: inline-flex; opacity: 0.25; line-height: 0;
  transition: opacity var(--wx-transicao); }
.wx-ordenar:hover .wx-ordenar__seta { opacity: 0.6; }
.wx-ordenar__seta--activa { opacity: 1; color: var(--wx-azul-700); }

/* ==========================================================================
   Distintivos e alertas
   ========================================================================== */

.wx-distintivo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
  background: var(--wx-tinta-100); color: var(--wx-tinta-700);
  white-space: nowrap;
}
.wx-distintivo--sucesso { background: var(--wx-sucesso-bg); color: var(--wx-sucesso); }
.wx-distintivo--aviso   { background: var(--wx-aviso-bg);   color: var(--wx-aviso); }
.wx-distintivo--erro    { background: var(--wx-erro-bg);    color: var(--wx-erro); }
.wx-distintivo--info    { background: var(--wx-info-bg);    color: var(--wx-info); }
.wx-distintivo--oliva   { background: var(--wx-verde-100); color: var(--wx-verde-700); }

.wx-alerta {
  border-radius: var(--wx-raio);
  padding: var(--wx-e3) var(--wx-e4);
  border-left: 3px solid;
  margin-bottom: var(--wx-e4);
  font-size: 0.875rem;
  display: flex; gap: var(--wx-e3); align-items: flex-start;
}
.wx-alerta--sucesso { background: var(--wx-sucesso-bg); border-color: var(--wx-sucesso); color: var(--wx-sucesso); }
.wx-alerta--aviso   { background: var(--wx-aviso-bg);   border-color: var(--wx-aviso);   color: var(--wx-aviso); }
.wx-alerta--erro    { background: var(--wx-erro-bg);    border-color: var(--wx-erro);    color: var(--wx-erro); }
.wx-alerta--info    { background: var(--wx-info-bg);    border-color: var(--wx-info);    color: var(--wx-info); }
.wx-alerta__fechar { margin-left: auto; background: none; border: 0; cursor: pointer;
  opacity: 0.5; font-size: 1.125rem; line-height: 1; }
.wx-alerta__fechar:hover { opacity: 1; }

/* ==========================================================================
   Botões
   ========================================================================== */

.wx-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wx-e2);
  padding: 0.55rem 1.15rem;
  font-size: 0.875rem; font-weight: 600; font-family: inherit;
  border-radius: var(--wx-raio-pastilha); border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--wx-transicao), border-color var(--wx-transicao),
              box-shadow var(--wx-transicao), transform var(--wx-transicao),
              color var(--wx-transicao);
  text-decoration: none; white-space: nowrap;
}
.wx-botao:hover { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .wx-botao:hover { transform: var(--wx-subida); }
  .wx-botao:active { transform: none; }
}
/* O botão principal leva um gradiente e um brilho da própria cor. É o que
   separa uma acção de um rectângulo chapado — e é como se faz no Wooneya. */
.wx-botao--principal {
  background: linear-gradient(135deg, var(--wx-azul-700), var(--wx-azul-900));
  color: #fff; box-shadow: 0 6px 16px -8px rgba(4, 49, 131, 0.7);
}
.wx-botao--principal:hover {
  background: linear-gradient(135deg, var(--wx-azul-600), var(--wx-azul-700));
  color: #fff; box-shadow: 0 10px 24px -8px rgba(4, 49, 131, 0.8);
}
/* Carregado: vai ao marinho da universidade, e não a um cinzento. */
.wx-botao--principal:active { background: var(--wx-azul-900); color: #fff; }
.wx-botao--secundario {
  background: var(--wx-branco); color: var(--wx-tinta-800);
  border-color: var(--wx-tinta-200);
}
.wx-botao--secundario:hover { background: var(--wx-tinta-100); color: var(--wx-tinta-900); }
.wx-botao--subtil { background: transparent; color: var(--wx-tinta-500); }
.wx-botao--subtil:hover { background: var(--wx-tinta-100); color: var(--wx-tinta-800); }
/* Eliminar é visualmente distinto de guardar e de cancelar — requisito §24. */
.wx-botao--perigo { background: var(--wx-branco); color: var(--wx-erro); border-color: #e6bcba; }
.wx-botao--perigo:hover { background: var(--wx-erro); color: #fff; border-color: var(--wx-erro); }
.wx-botao--pequeno { padding: 0.3rem 0.6rem; font-size: 0.8125rem; }
.wx-botao[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Diálogo da própria página
   ==========================================================================

   Substitui o `window.confirm` do navegador. A caixa do navegador não se
   desenha, muda de forma de navegador para navegador e mostra o endereço do
   servidor no título — numa tela institucional parece um erro do sistema.

   É um `<dialog>` nativo: o foco fica preso lá dentro, o Escape fecha, e o
   resto da página deixa de receber cliques sem ser preciso escrever nada
   disso à mão. */
.wx-dialogo {
  border: 0; padding: 0; background: transparent;
  max-width: min(100% - 2rem, 460px); width: 100%;
  color: var(--wx-tinta-900);
}
.wx-dialogo::backdrop {
  background: rgba(0, 18, 58, 0.55);
  backdrop-filter: blur(2px);
}
.wx-dialogo__caixa {
  background: var(--wx-branco);
  border-radius: 16px;
  padding: var(--wx-e6);
  box-shadow: 0 30px 70px -30px rgba(0, 18, 58, 0.6);
  border-top: 4px solid var(--wx-erro);
}
.wx-dialogo__titulo {
  margin: 0; font-size: 1.1875rem; line-height: 1.3;
  color: var(--wx-tinta-900);
}
.wx-dialogo__texto {
  margin: var(--wx-e3) 0 0; color: var(--wx-tinta-500);
  font-size: 0.9375rem; line-height: 1.6;
}
.wx-dialogo__accoes {
  display: flex; gap: var(--wx-e3); justify-content: flex-end;
  margin-top: var(--wx-e6); flex-wrap: wrap;
}
/* Em telemóvel os dois botões ficam um por linha, com o de eliminar em
   baixo: assim não se carrega nele por engano ao chegar com o polegar. */
@media (max-width: 480px) {
  .wx-dialogo__accoes { flex-direction: column-reverse; }
  .wx-dialogo__accoes .wx-botao { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .wx-dialogo[open] { animation: wx-dialogo-entrar 0.16s ease-out; }
}
@keyframes wx-dialogo-entrar {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* A barra de acções é uma faixa própria, não dois botões soltos debaixo do
   último campo.

   Esteve aqui `position: sticky` para o botão de guardar não fugir abaixo
   da dobra. Tirei-o: numa página curta, a barra colada ao fundo do ecrã
   tapava a última linha do formulário — e tapar um campo para não esconder
   um botão é trocar um problema por outro pior. */
.wx-accoes-form {
  display: flex; gap: var(--wx-e3); align-items: center; flex-wrap: wrap;
  padding: var(--wx-e4) var(--wx-e5);
  margin-top: var(--wx-e6);
  border-top: var(--wx-borda);
  background: var(--wx-areia);
  border-radius: var(--wx-raio);
}
/* Dentro de um cartão, a barra estende-se até às margens dele e arredonda
   só em baixo — fica a ser o rodapé do cartão, e não uma caixa dentro de
   outra. As margens negativas compensam o `padding` do corpo. */
.wx-cartao__corpo > .wx-accoes-form:last-child {
  margin: var(--wx-e6) calc(-1 * var(--wx-e5)) calc(-1 * var(--wx-e5));
  border-radius: 0 0 var(--wx-raio-lg) var(--wx-raio-lg);
}
.wx-accoes-form__destrutivo { margin-left: auto; }
@media (max-width: 540px) {
  .wx-accoes-form { flex-direction: column; align-items: stretch; }
  .wx-accoes-form .wx-botao { width: 100%; justify-content: center; }
  .wx-accoes-form__destrutivo { margin-left: 0; }
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.wx-campo { margin-bottom: var(--wx-e5); }
.wx-campo__rotulo {
  display: block; font-size: 0.8125rem; font-weight: 700;
  color: var(--wx-tinta-800); margin-bottom: var(--wx-e2);
  letter-spacing: -0.005em;
}
/* O asterisco do campo obrigatório perde-se entre as letras. Uma pastilha
   discreta com a palavra escrita diz a mesma coisa sem ninguém ter de
   adivinhar o que o símbolo quer dizer. */
.wx-campo__obrigatorio {
  margin-left: var(--wx-e2); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--wx-barro-700); background: var(--wx-barro-100);
  padding: 1px 7px; border-radius: var(--wx-raio-pastilha);
  vertical-align: 1px;
}
.wx-campo__ajuda { font-size: 0.75rem; color: var(--wx-tinta-500);
  margin-top: var(--wx-e2); line-height: 1.5; }
/* O erro traz um ponto vermelho à frente: numa coluna de dez campos, é o
   que faz a linha saltar à vista sem ser preciso ler tudo. */
.wx-campo__erro {
  font-size: 0.75rem; color: var(--wx-erro); margin-top: var(--wx-e2);
  font-weight: 600; display: flex; gap: var(--wx-e2); align-items: flex-start;
  line-height: 1.5;
}
.wx-campo__erro::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-top: 0.45em;
}

/* Campos mais altos e com mais respiração por dentro. 32 px de altura é o
   que torna um formulário de vinte campos cansativo de preencher — e a
   recolha de campo faz isso todos os dias, muitas vezes no telemóvel. */
.wx-entrada, .wx-selecao, .wx-area {
  width: 100%; padding: 0.65rem 0.85rem; min-height: 44px;
  font-family: inherit; font-size: 0.9375rem; color: var(--wx-tinta-900);
  background: var(--wx-branco);
  border: 1px solid var(--wx-tinta-200); border-radius: var(--wx-raio-sm);
  transition: border-color var(--wx-transicao), box-shadow var(--wx-transicao),
              background-color var(--wx-transicao);
}
.wx-entrada::placeholder, .wx-area::placeholder { color: var(--wx-tinta-400); }
.wx-entrada:hover, .wx-selecao:hover, .wx-area:hover {
  border-color: var(--wx-tinta-300);
}
.wx-entrada:focus, .wx-selecao:focus, .wx-area:focus {
  border-color: var(--wx-azul-600);
  box-shadow: 0 0 0 4px var(--wx-azul-100);
  outline: none;
}
.wx-entrada[aria-invalid="true"], .wx-selecao[aria-invalid="true"],
.wx-area[aria-invalid="true"] {
  border-color: var(--wx-erro); background: var(--wx-erro-bg);
}
.wx-entrada[aria-invalid="true"]:focus, .wx-selecao[aria-invalid="true"]:focus,
.wx-area[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px var(--wx-erro-bg); border-color: var(--wx-erro);
}
.wx-entrada[disabled], .wx-selecao[disabled], .wx-area[disabled],
.wx-entrada[readonly] {
  background: var(--wx-tinta-100); color: var(--wx-tinta-500);
  cursor: not-allowed;
}
.wx-area { min-height: 110px; resize: vertical; line-height: 1.6; }

/* Caixa de selecção. A nativa é pequena de mais para um dedo e cada sistema
   desenha-a à sua maneira. Esta tem 20 px, pinta-se de marinho ao ficar
   marcada e mostra o visto desenhado no mesmo traço dos outros ícones. */
input.wx-caixa {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex: none; margin: 0;
  border: 1.5px solid var(--wx-tinta-300); border-radius: 6px;
  background: var(--wx-branco); cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background-color var(--wx-transicao), border-color var(--wx-transicao);
}
input.wx-caixa:hover { border-color: var(--wx-azul-600); }
input.wx-caixa:checked {
  background: var(--wx-azul-700); border-color: var(--wx-azul-700);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
input.wx-caixa:focus-visible {
  outline: 3px solid var(--wx-azul-100); outline-offset: 1px;
  border-color: var(--wx-azul-700);
}

/* Lista de caixas — os perfis de acesso, por exemplo. O Django desenha-a
   como um `<ul>` sem classe; cada linha passa a uma faixa clicável, que é
   um alvo muito maior do que a caixa sozinha. */
/* O Django desenha a lista como `<div><div><label><input>…` (ou `<ul><li>`
   nas versões antigas). O selector apanha as duas formas. */
.wx-caixas, .wx-radios { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--wx-e2); }
.wx-caixas li, .wx-radios li,
.wx-caixas > div, .wx-radios > div { margin: 0; }
.wx-caixas label, .wx-radios label {
  display: flex; align-items: center; gap: var(--wx-e3);
  padding: 0.6rem 0.85rem; border: 1px solid var(--wx-tinta-200);
  border-radius: var(--wx-raio-sm); cursor: pointer;
  font-size: 0.9375rem; background: var(--wx-branco);
  transition: border-color var(--wx-transicao), background-color var(--wx-transicao);
}
.wx-caixas label:hover, .wx-radios label:hover {
  border-color: var(--wx-azul-600); background: var(--wx-azul-50);
}
.wx-caixas input, .wx-radios input { flex: none; }
input.wx-radio {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex: none; margin: 0; cursor: pointer;
  border: 1.5px solid var(--wx-tinta-300); border-radius: 50%;
  display: inline-grid; place-content: center;
}
input.wx-radio:checked { border-color: var(--wx-azul-700); border-width: 6px; }
input.wx-radio:focus-visible { outline: 3px solid var(--wx-azul-100); outline-offset: 1px; }
/* A linha inteira acende quando a caixa está marcada: numa lista de vinte
   perfis, ver quais estão escolhidos não devia obrigar a procurar vistos. */
.wx-caixas label:has(input:checked),
.wx-radios label:has(input:checked) {
  border-color: var(--wx-azul-700); background: var(--wx-azul-50);
  font-weight: 600;
}
/* Em ecrã largo as caixas emparelham: vinte perfis em coluna única são
   vinte linhas de rolagem. */
@media (min-width: 720px) {
  .wx-caixas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Campo de ficheiro: o botão nativo é feio em todo o lado. Isto deixa-o
   dentro de uma moldura igual à dos outros campos. */
.wx-ficheiro {
  width: 100%; padding: 0.5rem 0.6rem; font-family: inherit;
  font-size: 0.875rem; color: var(--wx-tinta-700);
  background: var(--wx-branco);
  border: 1px dashed var(--wx-tinta-300); border-radius: var(--wx-raio-sm);
  cursor: pointer;
}
.wx-ficheiro:hover { border-color: var(--wx-azul-600); background: var(--wx-azul-50); }
.wx-ficheiro::file-selector-button {
  margin-right: var(--wx-e3); padding: 0.4rem 0.9rem;
  font-family: inherit; font-size: 0.8125rem; font-weight: 600;
  color: var(--wx-azul-700); background: var(--wx-azul-100);
  border: 0; border-radius: var(--wx-raio-pastilha); cursor: pointer;
}

/* Um campo cujo controlo é uma caixa não leva o rótulo por cima: leva-o ao
   lado, que é como se lê uma afirmação com um sim ou um não. */
.wx-campo--caixa { display: flex; align-items: flex-start; gap: var(--wx-e3); }
.wx-campo--caixa .wx-campo__rotulo { margin-bottom: 0; }

/* A seta do `select` desenhada por nós: a nativa muda de aspecto em cada
   sistema e nenhuma combina com os ícones do resto. */
.wx-selecao {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
/* Os campos de data trazem o seu próprio ícone; sem isto ficavam com dois. */
.wx-entrada[type="date"], .wx-entrada[type="month"],
.wx-entrada[type="time"] { padding-right: 0.6rem; }

/* As secções de um formulário comprido separam-se por espaço e por um
   título com um risco de cor à frente, não por uma linha que atravessa a
   folha. Vinte campos seguidos com três linhas horizontais pelo meio lêem-se
   como uma tabela; assim lêem-se como partes de um formulário. */
.wx-seccao-form { margin-bottom: var(--wx-e7); }
.wx-seccao-form:last-child { margin-bottom: 0; }
.wx-seccao-form__titulo {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wx-azul-700); font-weight: 800;
  margin-bottom: var(--wx-e5); padding-bottom: 0; border-bottom: 0;
  display: flex; align-items: center; gap: var(--wx-e3);
}
.wx-seccao-form__titulo::before {
  content: ""; flex: none; width: 3px; height: 1em; border-radius: 2px;
  background: var(--wx-amarelo);
}
.wx-seccao-form__titulo::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--wx-tinta-200);
}
.wx-linha-form { display: grid; gap: var(--wx-e3) var(--wx-e5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* -- filtros ------------------------------------------------------------- */
/* A barra de filtros é a primeira coisa debaixo do título em quase todos os
   ecrãs do painel. Era uma folha branca com sete campos soltos e nada a
   dizer o que era; passa a ter um fundo próprio e um rótulo, para se ler
   como um controlo e não como conteúdo. */
.wx-filtros {
  background: linear-gradient(135deg, var(--wx-azul-50), var(--wx-branco) 65%);
  border: var(--wx-borda); border-radius: var(--wx-raio-lg);
  padding: var(--wx-e5); margin-bottom: var(--wx-e5); box-shadow: var(--wx-sombra);
}
.wx-filtros__rotulo {
  display: flex; align-items: center; gap: var(--wx-e2);
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--wx-azul-700);
  margin: 0 0 var(--wx-e4);
}
.wx-filtros__linha {
  display: grid; gap: var(--wx-e3) var(--wx-e4);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
}
.wx-filtros__accoes { display: flex; gap: var(--wx-e2); align-items: center; }
/* Os campos da barra ficam brancos sobre o fundo azul-claro, senão
   desaparecem dentro dele. */
.wx-filtros .wx-entrada,
.wx-filtros .wx-selecao { background: var(--wx-branco); min-height: 40px; }

/* ==========================================================================
   Paginação e estados vazios
   ========================================================================== */

.wx-paginacao {
  display: flex; align-items: center; gap: var(--wx-e2);
  padding: var(--wx-e3) 0; flex-wrap: wrap;
}
.wx-paginacao__info { color: var(--wx-tinta-500); font-size: 0.8125rem; margin-right: auto; }
.wx-paginacao__ligacao {
  padding: 0.3rem 0.65rem; border: var(--wx-borda); border-radius: var(--wx-raio-sm);
  background: var(--wx-branco); font-size: 0.8125rem; color: var(--wx-tinta-700);
}
.wx-paginacao__ligacao:hover { background: var(--wx-tinta-100); text-decoration: none; }
.wx-paginacao__ligacao--activa {
  background: var(--wx-azul-700); color: #fff; border-color: var(--wx-azul-700);
}

.wx-vazio { text-align: center; padding: var(--wx-e8) var(--wx-e5); color: var(--wx-tinta-500); }
.wx-vazio__titulo { font-size: 1.0625rem; font-weight: 700; color: var(--wx-tinta-800);
  margin-bottom: var(--wx-e2); }
/* Um sinal redondo acima do texto. Uma página vazia sem nada desenhado
   lê-se como uma página que não carregou. */
.wx-vazio__sinal {
  display: inline-grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  margin-bottom: var(--wx-e4);
  background: var(--wx-azul-50); color: var(--wx-azul-700);
  border: 1px solid var(--wx-azul-100);
}
.wx-vazio .wx-botao { margin-top: var(--wx-e4); }

/* ==========================================================================
   Gráficos
   ========================================================================== */

/* Gráfico sem dados: o sinal, a frase, e a altura que isso precisa — e não
   a altura do gráfico que não está lá. */
.wx-grafico-vazio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--wx-e3);
  min-height: 150px; padding: var(--wx-e6) var(--wx-e5);
  text-align: center;
  background:
    repeating-linear-gradient(135deg, var(--wx-azul-50) 0 10px,
                              transparent 10px 20px);
  border: 1px dashed var(--wx-tinta-200);
  border-radius: var(--wx-raio);
  color: var(--wx-azul-700);
}
.wx-grafico-vazio p {
  margin: 0; max-width: 46ch;
  font-size: 0.875rem; color: var(--wx-tinta-500); line-height: 1.55;
}

.wx-grafico { position: relative; width: 100%; }
.wx-grafico canvas { max-width: 100%; }
/* `--wx-tinta-600` não existe na paleta — a escala salta de 700 para 500 —
   e a declaração era inválida, pelo que a legenda herdava a cor do corpo. */
.wx-legenda { display: flex; flex-wrap: wrap; gap: var(--wx-e3); font-size: 0.75rem;
  color: var(--wx-tinta-500); margin-top: var(--wx-e3); }
/* Cada item da legenda é um botão que liga e desliga a sua série. Parece
   texto porque é isso que uma legenda é; comporta-se como botão porque é
   isso que faz. */
.wx-legenda__item {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0.15rem 0.3rem; margin: -0.15rem -0.3rem;
  border-radius: var(--wx-raio-sm); cursor: pointer;
  transition: color 0.14s ease, opacity 0.14s ease;
}
.wx-legenda__item:hover { color: var(--wx-tinta-900); }
.wx-legenda__item:focus-visible {
  outline: 2px solid var(--wx-azul-600); outline-offset: 1px;
}
/* Desligada: continua visível — é preciso poder voltar a ligá-la — mas
   apagada, e com o quadrado da cor vazado para se ver que saiu do gráfico. */
.wx-legenda__item--desligado { opacity: 0.45; text-decoration: line-through; }
.wx-legenda__item--desligado .wx-legenda__marca {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--wx-tinta-400);
}
.wx-legenda__marca { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* O gráfico recebe foco pelo teclado, e as setas andam ponto a ponto.
   `touch-action: pan-y` deixa a página continuar a deslizar na vertical
   enquanto o dedo lê o gráfico na horizontal. */
.wx-grafico__svg { touch-action: pan-y; display: block; }
.wx-grafico__svg:focus { outline: none; }
.wx-grafico__svg:focus-visible {
  outline: 2px solid var(--wx-azul-600); outline-offset: 2px;
  border-radius: var(--wx-raio-sm);
}

.wx-nota-metodologia {
  font-size: 0.75rem; color: var(--wx-tinta-500);
  border-left: 2px solid var(--wx-tinta-200);
  padding-left: var(--wx-e3); margin-top: var(--wx-e4);
}

/* ==========================================================================
   Autenticação
   ========================================================================== */

/* A entrada é quase meia a meia: de um lado a fotografia com a marca por
   cima, do outro o formulário. A coluna do formulário tem um mínimo em pixels
   — abaixo de 420 px deixa de ser cómoda — e um máximo em percentagem, para
   que num ecrã largo a fotografia não fique reduzida a uma faixa. */
.wx-auth {
  min-height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 46%);
  background: var(--wx-areia);
}

/* A fotografia entra em `::before` e o véu em `::after`, os dois atrás do
   conteúdo. Fica no CSS — onde o `collectstatic` lhe reescreve o caminho com
   o hash — e o texto por cima não herda opacidade nenhuma. */
.wx-auth__lado {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--wx-azul-900);
  color: #e8eef6;
  padding: var(--wx-e8) var(--wx-e7);
  display: flex; flex-direction: column; justify-content: center;
}
.wx-auth__lado > * { position: relative; z-index: 1; }
.wx-auth__lado::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: url("../site/images/hero/01_vendedora_mercado-1600.2035b4fa9e65.webp");
  background-size: cover; background-position: center 40%;
}
/* O véu é escuro que baste para o texto branco passar AA sobre qualquer zona
   da fotografia, incluindo os tomates, que são a parte mais clara. Não é
   decoração: é o que torna o texto legível. */
.wx-auth__lado::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(155deg, rgba(0, 20, 70, 0.92), rgba(4, 49, 131, 0.82) 52%,
                    rgba(0, 20, 70, 0.94)),
    radial-gradient(circle at 22% 28%, rgba(51, 150, 209, 0.22), transparent 48%);
}

/* O interior é uma coluna só, limitada em largura: num ecrã de 1920 px o
   texto não se estica de ponta a ponta.

   Três andares, como na tela da incubadora: a marca em cima, a frase e as
   áreas ao centro, a nota da fotografia e a titularidade no fundo. Os dois
   `margin-top: auto` repartem o espaço que sobra entre os dois intervalos —
   é o que impede o conteúdo de ficar todo amontoado a meio com a metade de
   baixo vazia. */
.wx-auth__lado-interior {
  width: 100%; max-width: 560px; margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; flex: 1;
}
.wx-auth__afirmacao { margin-top: auto; }
.wx-auth__nota { margin-top: auto; }

/* Selo da universidade e logótipo do sistema lado a lado. No cabeçalho do
   portal os dois juntos tiram leitura um ao outro; aqui há espaço, e esta é
   a coluna que fala de quem é o sistema. */
.wx-auth__lockup {
  display: inline-flex; align-items: center; gap: var(--wx-e4);
  text-decoration: none; border-radius: 18px;
}
.wx-auth__lockup:focus-visible { outline: 3px solid var(--wx-amarelo);
  outline-offset: 6px; }
.wx-auth__selo { display: block; width: 52px; height: 52px; flex: none; }
/* Placa branca com o logotipo inteiro: o logótipo tem cinzento escuro no
   «Waresta», que sobre o marinho não se lia. */
.wx-auth__logo {
  padding: 0.7rem 1rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  display: grid; place-items: center;
  width: max-content;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.wx-auth__logo img { display: block; height: 40px; width: auto; }
.wx-auth__instituicao {
  margin-top: var(--wx-e3); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: #a8c0dd;
}
.wx-auth__afirmacao { font-size: 1.0625rem; max-width: 42ch;
  color: #d3dce8; line-height: 1.65; padding-top: var(--wx-e6); }

.wx-auth__factos { margin-top: var(--wx-e7); display: grid; gap: var(--wx-e3);
  grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
.wx-auth__facto {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--wx-raio);
  padding: var(--wx-e4) var(--wx-e4) var(--wx-e3);
}
.wx-auth__facto-valor { font-family: var(--wx-fonte-numero); font-size: 1.5rem;
  font-weight: 600; color: #fff; line-height: 1.1; }
.wx-auth__facto-rotulo { font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: #b9c8db; margin-top: var(--wx-e2); }

/* Pastilhas com o que o sistema cobre. Entram no lugar dos números quando
   ainda não há observações. */
.wx-auth__areas {
  list-style: none; margin: var(--wx-e7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--wx-e2) var(--wx-e3);
  max-width: 540px;
}
.wx-auth__areas li {
  font-size: 0.8125rem; color: #dce6f3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px; padding: 0.4rem 0.9rem;
}

/* A fotografia não é legendada como um mercado concreto porque não há prova
   de onde foi tirada — a nota diz o que ela é. */
.wx-auth__nota {
  padding-top: var(--wx-e6); font-size: 0.6875rem; color: #b9c8db;
  max-width: 46ch; letter-spacing: 0.02em; line-height: 1.6;
}
.wx-auth__tutela {
  margin-top: var(--wx-e6); padding-top: var(--wx-e4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem; color: #b9c8db; line-height: 1.7;
}

/* A coluna do formulário é do mesmo azul, um tom abaixo. Era branca, e o
   corte a meio do ecrã entre a fotografia e uma folha branca com um
   formulário pequeno ao centro deixava metade da tela vazia. */
.wx-auth__painel {
  background: var(--wx-azul-900);
  background-image: radial-gradient(ellipse at 70% 0%,
                                    rgba(51, 150, 209, 0.16), transparent 60%);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--wx-e8) var(--wx-e7);
  color: #e8eef6;
}
.wx-auth__form { width: 100%; max-width: 400px; margin: 0 auto; }

.wx-auth__etiqueta {
  margin: 0 0 var(--wx-e2); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: #a8c0dd;
}
.wx-auth__titulo {
  margin: 0; color: #fff; font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.02em;
}
.wx-auth__intro {
  margin: var(--wx-e3) 0 var(--wx-e6); color: #c6d4e6; font-size: 0.9375rem;
  line-height: 1.6;
}
.wx-auth__intro:empty { display: none; }

/* Campos sobre fundo escuro. O `.wx-entrada` comum é desenhado para fundo
   claro; aqui redefine-se a cor, não a forma. */
.wx-auth__form .wx-campo__rotulo { color: #dce6f3; }
.wx-auth__form .wx-entrada {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff; min-height: 48px;
}
.wx-auth__form .wx-entrada::placeholder { color: #8ba3c2; }
.wx-auth__form .wx-entrada:hover { border-color: rgba(255, 255, 255, 0.4); }
.wx-auth__form .wx-entrada:focus,
.wx-auth__form .wx-entrada:focus-visible {
  border-color: var(--wx-amarelo); outline: 3px solid rgba(234, 179, 8, 0.35);
  outline-offset: 1px; background: rgba(255, 255, 255, 0.1);
}
/* O preenchimento automático do Chrome pinta o campo de branco e o texto
   fica branco sobre branco. */
.wx-auth__form .wx-entrada:-webkit-autofill {
  -webkit-text-fill-color: #0f172a;
  box-shadow: inset 0 0 0 100px #e8eef6;
}
.wx-auth__form .wx-campo__ajuda { color: #a8c0dd; }
.wx-auth__form .wx-campo__erro { color: #ffc9c9; }

.wx-auth__esqueci { margin: var(--wx-e4) 0 0; text-align: center; }
.wx-auth__esqueci a { color: #fff; font-weight: 700; text-decoration: none; }
.wx-auth__esqueci a:hover { text-decoration: underline; }
.wx-auth__voltar {
  margin: var(--wx-e5) 0 0; padding-top: var(--wx-e5); text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wx-auth__voltar a { color: #c6d4e6; text-decoration: none; font-size: 0.875rem; }
.wx-auth__voltar a:hover { color: #fff; text-decoration: underline; }
.wx-auth__reservado {
  margin: var(--wx-e6) 0 0; font-size: 0.75rem; color: #9fb4d0; line-height: 1.6;
}
.wx-auth__recado {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--wx-raio);
  padding: var(--wx-e4) var(--wx-e5);
  margin-bottom: var(--wx-e5); color: #dce6f3; font-size: 0.9375rem;
  line-height: 1.65;
}
.wx-auth__recado p { margin: 0; }
.wx-auth__recado p + p { margin-top: var(--wx-e3); }
.wx-auth__recado-nota { color: #a8c0dd; font-size: 0.8125rem; }
.wx-auth__recado--feito { display: flex; gap: var(--wx-e4); align-items: flex-start; }
.wx-auth__recado-marca {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wx-amarelo); color: #0f172a;
}
.wx-auth__form .wx-alerta { margin-bottom: var(--wx-e5); }

/* Mostrar e esconder a palavra-passe. O botão fica dentro do campo e só
   aparece com JavaScript ligado — sem ele não faria nada, e um botão que
   não faz nada é pior do que não haver botão. */
.wx-segredo { position: relative; display: block; }
.wx-segredo .wx-entrada { padding-right: 3rem; width: 100%; }
.wx-segredo__olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: none; border: 0; border-radius: 9px; cursor: pointer;
  color: #a8c0dd;
}
.wx-segredo__olho:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.wx-segredo__olho:focus-visible { outline: 3px solid var(--wx-amarelo);
  outline-offset: 2px; }
.wx-segredo__olho[hidden] { display: none; }

/* ==========================================================================
   Portal público
   ========================================================================== */

.wx-portal-topo {
  background: var(--wx-branco); border-bottom: var(--wx-borda);
  position: sticky; top: 0; z-index: 40;
}
.wx-portal-topo__interior {
  width: min(100% - 2 * var(--wx-goteira), var(--wx-largo));
  margin-inline: auto;
  padding-block: var(--wx-e3);
  display: flex; align-items: center; gap: var(--wx-e5);
}

/* Marca com a assinatura por baixo. A assinatura vem da configuração
   (WARESTA_BRAND_TAGLINE) — não é texto inventado no template. */
.wx-portal-marca {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.18rem;
}
.wx-portal-marca:hover { text-decoration: none; }
/* O logotipo é um SVG largo; a altura é que manda, a largura segue. */
.wx-portal-marca__logotipo {
  display: block; height: 42px; width: auto;
}
.wx-portal-marca__nome {
  display: block; font-weight: 680; color: var(--wx-tinta-900);
  letter-spacing: -0.015em; line-height: 1.15;
}
.wx-portal-marca__assinatura {
  display: none;
  font-size: 0.5625rem; letter-spacing: 0.075em; text-transform: uppercase;
  color: var(--wx-tinta-400); line-height: 1.3;
  padding-left: 0.14rem;
}

/* A navegação vive no meio da barra, não espremida contra a direita: com
   1680 px de largura útil há espaço para os itens respirarem. */
.wx-portal-nav {
  display: flex; gap: clamp(var(--wx-e3), 1.4vw, var(--wx-e5));
  margin-inline: auto; flex-wrap: wrap;
}
.wx-portal-nav a { color: var(--wx-tinta-700); font-size: 0.875rem; font-weight: 500; }
.wx-portal-nav a:hover, .wx-portal-nav a[aria-current="page"] {
  color: var(--wx-azul-700); text-decoration: none;
}
.wx-portal-nav a[aria-current="page"] { font-weight: 650; }

.wx-portal-topo__accoes { display: flex; align-items: center; gap: var(--wx-e3); flex: none; }

@media (min-width: 1100px) {
  .wx-portal-marca__assinatura { display: block; }
}
@media (max-width: 1000px) {
  .wx-portal-topo__interior { flex-wrap: wrap; gap: var(--wx-e3); }
  .wx-portal-marca { margin-right: auto; }
  .wx-portal-nav {
    order: 3; width: 100%;
    margin-inline: 0;
    flex-wrap: nowrap; overflow-x: auto;
    gap: var(--wx-e4);
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .wx-portal-nav::-webkit-scrollbar { display: none; }
  .wx-portal-nav a { white-space: nowrap; }
}

/* ==========================================================================
   Herói do portal
   --------------------------------------------------------------------------
   O herói anterior era um gradiente oliva de largura total com texto só na
   metade esquerda: uma parede verde com metade vazia. Aqui o chão é creme, o
   peso visual passa para a fotografia e a largura útil do ecrã é ocupada de
   facto — o conteúdo cresce até 1680 px em vez de ficar preso a 1180.

   A grelha não é 50/50: a coluna da fotografia é ligeiramente maior, e a
   aresta esquerda da fotografia dissolve-se no creme em vez de cortar a
   direito. A composição é assimétrica de propósito, para não parecer duas
   caixas encostadas.
   ========================================================================== */

.wx-heroi {
  position: relative;
  overflow: hidden;
  background: var(--wx-azul-900);
  color: #fff;
  /* Sem padding vertical: quem define a altura da faixa é a coluna de texto, e
     a fotografia acompanha-a de cima a baixo. Era isto que fazia o herói
     parecer um cartão pousado em cima de creme em vez de uma composição. */
  padding: 0;
}

/* Duas manchas muito ténues — o verde volta a ser acento e não parede. Ficam
   atrás de tudo e não interferem com o contraste do texto. */
.wx-heroi::before {
  content: "";
  position: absolute;
  inset: -30% 40% 30% -20%;
  background: radial-gradient(closest-side, rgba(4, 49, 131, 0.10), transparent 70%);
  pointer-events: none;
}
.wx-heroi::after {
  content: "";
  position: absolute;
  inset: 45% -10% -35% 55%;
  background: radial-gradient(closest-side, rgba(168, 128, 42, 0.09), transparent 70%);
  pointer-events: none;
}

.wx-heroi__interior {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--wx-goteira), var(--wx-largo));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(var(--wx-e6), 3.5vw, var(--wx-e7));
  align-items: stretch;
}

.wx-heroi__coluna {
  min-width: 0;
  align-self: center;
  padding-block: clamp(var(--wx-e7), 5vw, 4.5rem);
}

.wx-heroi__etiqueta {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--wx-azul-700);
  margin-bottom: var(--wx-e4);
}
.wx-heroi__etiqueta::before {
  content: ""; width: 34px; height: 2px; background: var(--wx-azul-600); flex: none;
}

/* clamp para a headline crescer com o ecrã: a 1920 px tem de ter presença,
   a 360 px não pode partir palavras. */
.wx-heroi h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--wx-tinta-900);
  /* 20ch e não 15: a 15 o título partia em três linhas — «Preços em / mercados
     e / supermercados» — quando a maquete o tem em duas. */
  max-width: 20ch;
  margin-bottom: var(--wx-e5);
}

.wx-heroi__texto {
  font-size: clamp(0.98rem, 1.05vw, 1.12rem);
  line-height: 1.65;
  color: var(--wx-tinta-700);
  /* Texto corrido não atravessa o ecrã, por muito largo que ele seja (§6). */
  max-width: min(var(--wx-leitura), 46ch);
  margin-bottom: var(--wx-e6);
}

.wx-heroi__accoes { display: flex; flex-wrap: wrap; gap: var(--wx-e3); margin-bottom: var(--wx-e4); }
.wx-heroi__ligacoes { display: flex; flex-wrap: wrap; gap: var(--wx-e5); }

.wx-botao--grande { padding: 0.72rem 1.3rem; font-size: 0.95rem; gap: 0.55rem; }
.wx-botao--grande svg { flex: none; }
.wx-botao--contorno {
  background: var(--wx-branco); color: var(--wx-tinta-800);
  border-color: var(--wx-tinta-200);
}
.wx-botao--contorno:hover { background: var(--wx-azul-50); color: var(--wx-azul-700); }

.wx-ligacao-accao {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 620; color: var(--wx-azul-700);
}
.wx-ligacao-accao svg { transition: transform 0.15s ease; }
.wx-ligacao-accao:hover { text-decoration: none; }
.wx-ligacao-accao:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Carrossel do herói
   --------------------------------------------------------------------------
   O texto é fixo; só as imagens mudam (§11). Sem JavaScript o primeiro slide
   fica visível e os controlos não aparecem — a página continua legível.

   A altura vem de aspect-ratio, não do conteúdo: as fotografias têm formatos
   diferentes e sem isto o layout saltava a cada transição.
   ========================================================================== */

/* Flex e não `height: 100%`: um item de grelha esticado não tem altura
   explícita, e a percentagem lá dentro resolvia para menos — ficava uma faixa
   de creme por baixo da fotografia. */
.wx-palco { position: relative; min-width: 0; display: flex; }

.wx-carrossel {
  position: relative;
  flex: 1 1 auto;
  min-height: 26rem;
  overflow: hidden;
}

/* A máscara vive na lista, não no carrossel inteiro.
   Postos no elemento de fora, o esbatimento apanhava também a legenda e os
   botões — o «anterior» ficava meio transparente e parecia avaria. Aqui só as
   fotografias e o véu se dissolvem no creme; os controlos ficam nítidos.

   Sem suporte a `mask-image` fica um corte limpo à esquerda: nada quebra. */
.wx-carrossel__lista {
  position: absolute; inset: 0;
  list-style: none; margin: 0; padding: 0;
  background: var(--wx-azul-900);
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 4%, #000 15%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 4%, #000 15%);
}

.wx-carrossel__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.wx-carrossel__slide.is-activo { opacity: 1; }
.wx-carrossel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Véu inferior: sem ele a legenda perde contraste sobre fotografias claras.
   Está dentro da lista para se dissolver com ela — do lado de fora ficava uma
   barra escura por cima do creme, onde já não há fotografia. */
.wx-carrossel__lista::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(0, 20, 70, 0.62), transparent);
  pointer-events: none;
}

.wx-carrossel__legenda {
  position: absolute; z-index: 2;
  right: var(--wx-e5); bottom: var(--wx-e5);
  max-width: 15.5rem;
  padding: var(--wx-e4);
  border-radius: 10px;
  background: rgba(0, 20, 70, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
}
.wx-carrossel__legenda p { margin: 0; font-size: 0.8125rem; line-height: 1.4; }
.wx-carrossel__local,
.wx-carrossel__promessa { display: flex; gap: 0.5rem; align-items: flex-start; }
.wx-carrossel__local svg,
.wx-carrossel__promessa svg { flex: none; margin-top: 0.12rem; opacity: 0.85; }
.wx-carrossel__local-nome { display: block; font-weight: 600; }
.wx-carrossel__origem {
  display: block; margin-top: 0.1rem;
  font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
/* Filete a separar o que é desta fotografia do que é da marca — sem ele as
   duas linhas leem-se como uma afirmação só. */
.wx-carrossel__promessa {
  margin-top: var(--wx-e3) !important;
  padding-top: var(--wx-e3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
}

/* -- controlos ------------------------------------------------------------- */

.wx-carrossel__controlos {
  position: absolute; z-index: 2;
  left: clamp(var(--wx-e5), 4%, var(--wx-e7)); bottom: var(--wx-e5);
  display: none;               /* só aparece quando o JS assume o carrossel */
  align-items: center; gap: var(--wx-e3);
}
.wx-carrossel.is-viva .wx-carrossel__controlos { display: flex; }

.wx-carrossel__botao {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(0, 20, 70, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wx-carrossel__botao:hover { background: rgba(0, 20, 70, 0.7); border-color: #fff; }
.wx-carrossel__botao:focus-visible { outline: 3px solid var(--wx-ocre-100); outline-offset: 2px; }

.wx-carrossel__pontos { display: flex; gap: 6px; margin-left: var(--wx-e2); }
.wx-carrossel__ponto {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: background 0.15s ease, width 0.15s ease;
}
.wx-carrossel__ponto[aria-current="true"] { background: #fff; width: 22px; border-radius: 4px; }
.wx-carrossel__ponto:focus-visible { outline: 3px solid var(--wx-ocre-100); outline-offset: 3px; }

/* Palavra manuscrita da referência: um respiro editorial à esquerda da
   fotografia. Puramente decorativa — sai do fluxo e é escondida a leitores de
   ecrã. Só existe onde há espaço para ela. */
.wx-heroi__manuscrito {
  display: none;
  position: absolute; z-index: 2;
  left: -3.6rem; top: 12%;
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-style: italic;
  font-size: 1.32rem; line-height: 1.5;
  color: var(--wx-azul-700);
  opacity: 0.85;
  pointer-events: none;
}
.wx-heroi__manuscrito span { display: block; }
.wx-heroi__manuscrito span:last-child { color: var(--wx-barro-600); }

/* 1500 e não 1380: abaixo disso a palavra encavalitava-se na fotografia em vez
   de assentar no creme, e passava de respiro a estorvo. */
@media (min-width: 1500px) {
  .wx-heroi__manuscrito { display: block; }
}

/* A fotografia estende-se para dentro da margem exterior em ecrãs largos: fica
   a um dedo da aresta do viewport em vez de parar no contentor. É metade da
   goteira, não a goteira toda — resta margem, e nunca há transbordo
   horizontal, porque a goteira é sempre maior do que a saliência. */
/* A fotografia sai do contentor e vai até à aresta do viewport, como na
   maquete. A saliência é exactamente a goteira, por isso nunca transborda. */
@media (min-width: 1041px) {
  .wx-palco { margin-right: calc(-1 * var(--wx-goteira)); }
}

/* ==========================================================================
   Faixas e contentores
   --------------------------------------------------------------------------
   Uma casca de largura total, um contentor largo lá dentro e a largura de
   leitura só onde há texto corrido. É isto que resolve as laterais mortas.
   ========================================================================== */

.wx-faixa { width: 100%; }
.wx-faixa--creme  { background: var(--wx-creme); }
.wx-faixa--branca { background: var(--wx-branco); }
.wx-faixa__interior {
  width: min(100% - 2 * var(--wx-goteira), var(--wx-largo));
  margin-inline: auto;
  padding-block: clamp(var(--wx-e7), 5vw, var(--wx-e9));
}
.wx-faixa__interior--curta { padding-block: clamp(var(--wx-e6), 3.5vw, var(--wx-e7)); }

/* Contentor das páginas de dados (boletim, comparar, evolução, índice, etc.).
   Passa de 1180 px fixos para uma largura fluida com tecto em 1400: as tabelas
   e os gráficos ganham espaço sem que o texto se estique. As páginas que já
   impunham um limite próprio em linha (contacto, sobre, vídeo) continuam a
   mandar — `max-width` continua a limitar `width`. */
.wx-contentor {
  width: min(100% - 2 * var(--wx-goteira), var(--wx-medio));
  margin-inline: auto;
  padding-block: var(--wx-e7);
}

.wx-cabeca-seccao {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--wx-e4);
  margin-bottom: var(--wx-e6);
}
.wx-cabeca-seccao h2 {
  font-size: clamp(1.4rem, 2vw, 1.95rem);
  letter-spacing: -0.025em; margin: 0;
}
.wx-cabeca-seccao p {
  margin: 0.35rem 0 0; color: var(--wx-tinta-500);
  max-width: min(var(--wx-leitura), 62ch);
}

/* Etiqueta pequena acima de um título de secção. */
.wx-sobretitulo {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wx-azul-700);
  margin: 0 0 var(--wx-e2);
}
.wx-sobretitulo::before {
  content: ""; width: 22px; height: 2px; background: var(--wx-azul-600); flex: none;
}

/* ==========================================================================
   Painel de indicadores
   --------------------------------------------------------------------------
   Quatro superfícies claras sobre branco, cada uma com um ícone em bloco de
   cor. A faixa sobe sobre o herói para os dois blocos se ligarem em vez de
   ficarem separados por uma linha morta de creme.
   ========================================================================== */

.wx-indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wx-e4);
  position: relative; z-index: 2;
}
/* Sobe para dentro do herói e liga os dois blocos. Só quando é o primeiro
   elemento da faixa: havendo aviso de actualidade dos dados, a grelha deixa de
   ser o primeiro filho e fica onde está — a subida aterrava-lhe em cima. */
.wx-indicadores:first-child { margin-top: calc(-1 * var(--wx-e7)); }
.wx-indicadores__item {
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: 14px;
  padding: var(--wx-e5);
  box-shadow: 0 2px 10px rgba(4, 49, 131, 0.06);
}
.wx-indicadores__item p { margin: 0; }

/* Bloco de cor cheio com o símbolo a branco, como na maquete. A versão
   esbatida — fundo pálido, símbolo escuro — desaparecia ao lado dos números. */
.wx-icone {
  width: 42px; height: 42px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wx-azul-700); color: #fff;
  margin-bottom: var(--wx-e4);
  flex: none;
}
.wx-icone--barro { background: var(--wx-barro-600); }
.wx-icone--ocre  { background: var(--wx-ocre-600); }
.wx-icone--info  { background: var(--wx-info); }

.wx-indicadores__rotulo {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 650; color: var(--wx-tinta-500);
  margin-bottom: var(--wx-e2) !important;
}
.wx-indicadores__valor {
  font-family: var(--wx-fonte-numero);
  font-size: clamp(1.7rem, 2.2vw, 2.25rem); font-weight: 600; line-height: 1.02;
  color: var(--wx-tinta-900); font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.wx-indicadores__nota {
  font-size: 0.75rem; color: var(--wx-tinta-500); margin-top: var(--wx-e2) !important;
}

/* ==========================================================================
   As três perguntas + bloco editorial
   --------------------------------------------------------------------------
   Três perguntas e, ao lado, o bloco que explica o propósito. A quarta coluna
   é exactamente o modo de usar a lateral em vez de a deixar vazia (§24).
   ========================================================================== */

.wx-perguntas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 0.82fr);
  gap: var(--wx-e5);
  align-items: stretch;
}

/* O cartão inteiro é a ligação, e não uma linha de texto lá dentro: o alvo
   passa de trinta pixéis de altura para o cartão todo, que é o que a maquete
   mostra e o que funciona no telemóvel. A seta ao fundo à direita substitui o
   rótulo repetido; o nome do destino continua a ser anunciado, escondido só à
   vista. */
.wx-pergunta {
  position: relative;
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: 14px;
  padding: var(--wx-e5) var(--wx-e5) 3.2rem;
  display: flex; flex-direction: column;
  color: inherit;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
a.wx-pergunta:hover { text-decoration: none; }
.wx-pergunta:hover {
  box-shadow: 0 8px 22px rgba(4, 49, 131, 0.09);
  transform: translateY(-2px);
  border-color: var(--wx-azul-500);
}
.wx-pergunta__seta {
  position: absolute; right: var(--wx-e5); bottom: var(--wx-e5);
  color: var(--wx-azul-700);
  transition: transform 0.16s ease;
}
.wx-pergunta:hover .wx-pergunta__seta { transform: translateX(4px); }
.wx-pergunta h3 { font-size: 1.06rem; letter-spacing: -0.015em; margin-bottom: var(--wx-e2); }
.wx-pergunta p {
  color: var(--wx-tinta-500); font-size: 0.9rem; line-height: 1.55;
  margin-bottom: 0;
}

/* Aresta esquerda inclinada e a sangrar para a direita, como na maquete. O
   `clip-path` corta o canto; a saliência é a goteira, por isso não transborda.
   Sem suporte a `clip-path` fica um rectângulo — nada quebra. */
.wx-editorial {
  background: var(--wx-azul-50);
  border-radius: 14px 0 0 14px;
  padding: var(--wx-e5) var(--wx-e5) var(--wx-e5) 3.4rem;
  display: flex; flex-direction: column;
  clip-path: polygon(2.6rem 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1241px) {
  .wx-editorial { margin-right: calc(-1 * var(--wx-goteira)); }
}
.wx-editorial .wx-icone { background: var(--wx-azul-100); color: var(--wx-azul-700); }
.wx-editorial h3 { font-size: 1.06rem; letter-spacing: -0.015em; margin-bottom: var(--wx-e3); }
.wx-editorial p {
  color: var(--wx-tinta-700); font-size: 0.9rem; line-height: 1.6;
  margin-bottom: var(--wx-e5);
}
.wx-editorial .wx-ligacao-accao { margin-top: auto; }

/* ==========================================================================
   Produtos + bloco institucional
   --------------------------------------------------------------------------
   Cartões tipográficos: não existe associação real entre fotografia e produto
   registado, e uma imagem decorativa apresentada como o produto seria uma
   afirmação que não se sustenta (§27).
   ========================================================================== */

.wx-duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(var(--wx-e5), 3vw, var(--wx-e7));
  /* O bloco institucional acompanha a altura da grelha de produtos: encolhido
     deixava uma coluna de branco morto do lado direito, que é exactamente o
     que este redesenho existe para resolver. */
  align-items: stretch;
}

.wx-produtos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wx-e4);
}
.wx-produto {
  display: block;
  color: inherit;
  transition: transform 0.16s ease;
}
.wx-produto:hover { text-decoration: none; transform: translateY(-3px); }
.wx-produto:hover .wx-produto__foto { box-shadow: 0 10px 24px rgba(4, 49, 131, 0.17); }
.wx-produto__foto {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--wx-tinta-100);
  margin-bottom: var(--wx-e3);
  transition: box-shadow 0.16s ease;
}
/* Onde o arquivo não tem fotografia do produto: um bloco de cor com a inicial
   e um grão fino por cima. O grão é o que faz a diferença entre ler-se como
   composição e ler-se como uma imagem que não carregou. */
.wx-produto__foto--tipografica {
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.6rem; font-weight: 600;
  color: var(--wx-azul-700);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.5) 0 2px,
      transparent 2px 7px
    ),
    var(--wx-azul-100);
}
.wx-produto:nth-child(4n+2) .wx-produto__foto--tipografica {
  background: var(--wx-barro-100); color: var(--wx-barro-700);
}
.wx-produto:nth-child(4n+3) .wx-produto__foto--tipografica {
  background: var(--wx-ocre-100); color: var(--wx-ocre-600);
}
.wx-produto:nth-child(4n+4) .wx-produto__foto--tipografica {
  background: var(--wx-info-bg); color: var(--wx-info);
}
.wx-produto__nome {
  font-weight: 650; font-size: 1rem; letter-spacing: -0.012em;
  color: var(--wx-tinta-900); margin: 0 0 0.15rem;
}
.wx-produto__nota { font-size: 0.75rem; color: var(--wx-tinta-500); margin: 0 0 var(--wx-e2); }
.wx-produto__accao {
  font-size: 0.82rem; font-weight: 620; color: var(--wx-azul-700);
  display: inline-flex; align-items: center; gap: 0.35rem; margin: 0;
}

/* -- bloco institucional --------------------------------------------------- */

.wx-institucional {
  position: relative; overflow: hidden;
  border-radius: 16px 0 0 16px;
  min-height: 380px;
  /* Ao centro e não no fundo: com a grelha de produtos a duas linhas o bloco
     fica alto, e a frase encostada em baixo perdia-se. */
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--wx-e7) var(--wx-e6) 5.5rem;
  color: #fff;
  background: var(--wx-azul-900);
  isolation: isolate;
}
.wx-institucional__fundo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.wx-institucional::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* O véu é mais fechado do que parece necessário de propósito: a fotografia
     do arquivo é escura e ocupada, e a frase tem de se ler antes dela. */
  background: linear-gradient(200deg, rgba(0, 20, 70, 0.80), rgba(0, 20, 70, 0.95));
}
.wx-institucional__aspas {
  position: absolute; top: var(--wx-e5); left: var(--wx-e6);
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: 3.4rem; line-height: 1;
  color: rgba(255, 255, 255, 0.55);
}
.wx-institucional__frase {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-style: italic;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.3; letter-spacing: -0.01em; font-weight: 400;
  margin: 0 0 var(--wx-e5);
  max-width: 20ch;
}
/* A frase manuscrita da maquete, no canto inferior direito. Decorativa e fora
   do alcance dos leitores de ecrã — o que ela diz já está dito acima. */
.wx-institucional__manuscrito {
  position: absolute; right: var(--wx-e6); bottom: var(--wx-e6);
  margin: 0; text-align: right;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-style: italic; font-size: 1.05rem; line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  pointer-events: none;
}
.wx-institucional__manuscrito span { display: block; }
.wx-institucional__risco {
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--wx-ocre-600); margin-bottom: var(--wx-e4);
}
.wx-institucional__nome { font-weight: 650; margin: 0 0 0.2rem; }
.wx-institucional__nota {
  font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.74); margin: 0;
}

/* ==========================================================================
   Nota sobre o âmbito dos indicadores
   --------------------------------------------------------------------------
   Aparece só quando o arquivo é maior do que aquilo que a página conta — isto
   é, quando há estabelecimentos por publicar. Não é um alerta: é uma nota de
   âmbito, e por isso é discreta.
   ========================================================================== */

.wx-nota-arquivo {
  margin: var(--wx-e5) 0 0;
  padding-left: var(--wx-e4);
  border-left: 3px solid var(--wx-tinta-200);
  font-size: 0.85rem; line-height: 1.55;
  color: var(--wx-tinta-500);
  max-width: min(var(--wx-leitura), 88ch);
}
.wx-nota-arquivo strong {
  font-family: var(--wx-fonte-numero);
  font-variant-numeric: tabular-nums;
  color: var(--wx-tinta-800);
}

/* ==========================================================================
   Publicações
   --------------------------------------------------------------------------
   Com capa. Os relatórios anuais circulam em papel e em PDF há mais de dez
   anos: quem já os viu reconhece-os pela capa antes de ler o título.
   ========================================================================== */

.wx-publicacoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wx-e5);
}
.wx-publicacao {
  display: flex; gap: var(--wx-e4);
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: 14px;
  padding: var(--wx-e4);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.wx-publicacao:hover {
  box-shadow: 0 8px 22px rgba(4, 49, 131, 0.09);
  transform: translateY(-2px);
}
.wx-publicacao__capa {
  flex: none;
  width: 84px; aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: var(--wx-tinta-100);
  border: 1px solid var(--wx-tinta-200);
}
.wx-publicacao__capa--vazia {
  display: flex; align-items: center; justify-content: center;
  color: var(--wx-tinta-300);
}
.wx-publicacao__corpo { min-width: 0; display: flex; flex-direction: column; }
.wx-publicacao__data {
  margin: 0 0 0.2rem;
  font-family: var(--wx-fonte-numero);
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--wx-tinta-400);
}
.wx-publicacao h3 {
  font-size: 0.92rem; line-height: 1.35; letter-spacing: -0.01em;
  margin-bottom: var(--wx-e4);
}
.wx-publicacao .wx-ligacao-accao { margin-top: auto; font-size: 0.82rem; }

/* ==========================================================================
   Percurso institucional
   --------------------------------------------------------------------------
   O texto e os marcos à esquerda, as instituições à direita. Não é uma parede
   de logótipos: cada entidade traz o papel que teve, porque um logótipo sozinho
   deixa o leitor a adivinhar se aquilo é um financiador, um implementador ou
   um parceiro académico — e a adivinhar em que ano.
   ========================================================================== */

.wx-percurso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: clamp(var(--wx-e6), 4vw, var(--wx-e8));
  align-items: start;
}
.wx-percurso__resumo {
  font-size: 1rem; line-height: 1.65;
  color: var(--wx-tinta-700);
  max-width: min(var(--wx-leitura), 56ch);
  margin-bottom: var(--wx-e6);
}

.wx-marcos {
  list-style: none; margin: 0 0 var(--wx-e6); padding: 0;
  display: grid; gap: var(--wx-e4);
  max-width: 46rem;
}
.wx-marco {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--wx-e4);
  padding-top: var(--wx-e3);
  border-top: 1px solid var(--wx-tinta-100);
}
.wx-marco:first-child { border-top-color: var(--wx-tinta-900); border-top-width: 2px; }
.wx-marco__ano {
  font-family: var(--wx-fonte-numero);
  font-size: 0.9rem; font-weight: 600;
  color: var(--wx-azul-700);
  font-variant-numeric: tabular-nums;
}
.wx-marco__texto { color: var(--wx-tinta-700); font-size: 0.9rem; }

.wx-percurso__entidades {
  background: var(--wx-areia);
  border: var(--wx-borda);
  border-radius: 14px;
  padding: var(--wx-e5);
}
.wx-percurso__titulo {
  margin: 0 0 var(--wx-e4);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 650; color: var(--wx-tinta-500);
}
.wx-entidades { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wx-e4); }
.wx-entidade {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--wx-e4);
  align-items: start;
}
.wx-entidade__logo {
  width: 56px; height: 56px;
  object-fit: contain;
  background: var(--wx-branco);
  border: 1px solid var(--wx-tinta-200);
  border-radius: 10px;
  padding: 4px;
}
/* Sem logótipo utilizável, a inicial. É honesto: não se inventa um logótipo
   nem se reaproveita um ficheiro de 49 px que ficaria irreconhecível. */
.wx-entidade__logo--tipografico {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wx-fonte-numero);
  font-size: 1.35rem; font-weight: 600;
  color: var(--wx-azul-700);
  padding: 0;
}
.wx-entidade__nome { margin: 0 0 0.15rem; font-weight: 620; font-size: 0.9rem; }
.wx-entidade__papel {
  margin: 0; font-size: 0.8rem; line-height: 1.5;
  color: var(--wx-tinta-500);
}
.wx-entidades__nota {
  /* Margem em baixo também: na página «Sobre» esta nota é seguida do título
     «Equipa», e sem folga os dois encostavam-se. */
  margin: var(--wx-e5) 0 var(--wx-e6);
  padding-top: var(--wx-e4);
  border-top: 1px solid var(--wx-tinta-200);
  font-size: 0.75rem; line-height: 1.5;
  color: var(--wx-tinta-500);
}

/* ==========================================================================
   Adaptação
   ========================================================================== */

/* 1240: a quarta coluna do bloco editorial deixa de caber ao lado das três
   perguntas sem as espremer. Passa a faixa por baixo, a toda a largura. */
@media (max-width: 1240px) {
  .wx-perguntas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wx-editorial { grid-column: 1 / -1; }
  .wx-editorial .wx-ligacao-accao { margin-top: 0; }
}

/* 1040: o herói deixa de ser duas colunas. O texto vem primeiro, a fotografia
   a seguir — a mesma ordem que o §38 pede em mobile. */
@media (max-width: 1040px) {
  .wx-heroi { padding: var(--wx-e7) 0 var(--wx-e6); }
  .wx-heroi__interior { grid-template-columns: 1fr; gap: var(--wx-e6); }
  .wx-heroi h1 { max-width: 18ch; }
  .wx-heroi__texto { max-width: 62ch; }
  .wx-carrossel { aspect-ratio: 16 / 9; }
  .wx-carrossel__lista { -webkit-mask-image: none; mask-image: none; }
  .wx-indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
  .wx-duas-colunas { grid-template-columns: 1fr; }
  .wx-institucional { min-height: 300px; }
}

@media (max-width: 1040px) {
  .wx-perguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-produtos  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* As instituições passam a faixa por baixo do texto, a duas colunas: ao lado
     ficariam com o papel de cada uma partido em cinco linhas. */
  .wx-percurso { grid-template-columns: 1fr; }
  .wx-entidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-publicacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .wx-perguntas   { grid-template-columns: 1fr; }
  .wx-produtos    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-entidades   { grid-template-columns: 1fr; }
  .wx-publicacoes { grid-template-columns: 1fr; }
  .wx-marco { grid-template-columns: 3.6rem minmax(0, 1fr); gap: var(--wx-e3); }
}

@media (max-width: 560px) {
  .wx-heroi__accoes { gap: var(--wx-e2); }
  /* Alvos de toque confortáveis e botões que não se partem a meio. */
  .wx-heroi__accoes .wx-botao { flex: 1 1 100%; padding: 0.8rem 1rem; }
  .wx-heroi__ligacoes { gap: var(--wx-e4); }
  .wx-carrossel { aspect-ratio: 4 / 3; border-radius: 14px; }
  /* A 390 px a legenda e os controlos não cabem na mesma linha: a legenda
     sobe para o topo e deixa o rodapé da fotografia só para os botões. A
     legenda tem fundo próprio, por isso não depende do véu inferior. */
  .wx-carrossel__legenda {
    top: var(--wx-e3); bottom: auto;
    left: var(--wx-e3); right: var(--wx-e3);
    max-width: none;
  }
  .wx-carrossel__controlos { left: var(--wx-e3); bottom: var(--wx-e3); }
  .wx-indicadores { grid-template-columns: 1fr; }
}

/* Movimento reduzido: sem autoplay (tratado no JS), sem transições de opacidade
   longas e sem deslocamentos ao passar o rato. */
@media (prefers-reduced-motion: reduce) {
  .wx-carrossel__slide { transition: none; }
  .wx-ligacao-accao svg,
  .wx-pergunta, .wx-produto { transition: none; }
  .wx-ligacao-accao:hover svg,
  .wx-pergunta:hover, .wx-produto:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wx-ligacao-accao svg { transition: none; }
  .wx-ligacao-accao:hover svg { transform: none; }
}

.wx-menu__nota {
  margin: 0 0 var(--wx-e2);
  padding: 0 var(--wx-e4);
  font-size: 0.6875rem; line-height: 1.4;
  color: var(--wx-tinta-400);
}

/* --------------------------------------------------------------------------
   Equipa (portal público)
   -------------------------------------------------------------------------- */

.wx-equipa {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--wx-e5);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.wx-equipa__membro { text-align: center; }
.wx-equipa__foto {
  display: block; margin: 0 auto var(--wx-e3);
  width: 96px; height: 96px;
  border-radius: 50%; object-fit: cover;
  background: var(--wx-azul-100);
  border: 2px solid var(--wx-branco);
  box-shadow: 0 0 0 1px var(--wx-tinta-200);
}
.wx-equipa__foto--vazia {
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 600; color: var(--wx-azul-700);
  text-transform: uppercase;
}
.wx-equipa__nome { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.wx-equipa__funcao {
  margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--wx-tinta-500);
}

/* --------------------------------------------------------------------------
   Rodapé institucional
   --------------------------------------------------------------------------
   Quatro colunas — marca, o que se explora, o que a instituição é, e como se
   fala com ela — sobre uma linha baixa com os direitos e a autoria. A faixa
   anterior tinha duas colunas e cabia numa linha: dizia o nome e mais nada, e
   com isso o portal perdia à saída tudo o que o sítio antigo tinha no fundo da
   página.

   Usa o mesmo sistema de largura do resto do portal: com 1680 px de conteúdo,
   quatro colunas respiram em vez de se espremerem.
   -------------------------------------------------------------------------- */

.wx-rodape {
  background: var(--wx-tinta-900);
  color: var(--wx-tinta-300);
  padding-block: var(--wx-e7) var(--wx-e5);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.wx-rodape__interior {
  width: min(100% - 2 * var(--wx-goteira), var(--wx-largo));
  margin-inline: auto;
}
.wx-rodape a { color: var(--wx-tinta-200); }
.wx-rodape a:hover { color: #fff; }

.wx-rodape__colunas {
  display: grid;
  /* Cinco colunas desde que a coluna do boletim entrou: marca, duas de
     ligações, contacto e boletim. A da marca é mais larga porque leva
     o logótipo, a titularidade e a descrição. */
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
  gap: var(--wx-e6) var(--wx-e5);
  padding-bottom: var(--wx-e6);
}

.wx-rodape__marca { min-width: 0; }
.wx-rodape__nome {
  margin: 0; color: #fff;
  font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 0.55rem;
}
.wx-rodape__simbolo { display: block; border-radius: 6px; }
/* Versão clara do logotipo: o rodapé é escuro e o cinzento do original
   não tem contraste suficiente sobre ele. */
.wx-rodape__logotipo { display: block; height: 30px; width: auto; }
.wx-rodape__descricao {
  margin: 0.4rem 0 var(--wx-e4);
  font-size: 0.8125rem; color: var(--wx-tinta-400);
  max-width: 34ch;
}
/* Linha de titularidade com o selo do titular. O selo tem fundo claro
   próprio, por isso leva uma placa branca — um selo circular colorido
   assente num rodapé escuro fica sujo nas bordas. */
.wx-rodape__titular {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 var(--wx-e4); max-width: 36ch;
  font-size: 0.8125rem; color: var(--wx-tinta-300);
}
.wx-rodape__selo {
  flex: none; display: block; border-radius: 50%;
  background: #fff; padding: 3px;
}
.wx-rodape__titular a { color: #d3dce8; border-bottom: 1px solid rgba(211, 220, 232, 0.45); }
.wx-rodape__titular a:hover { color: #fff; border-bottom-color: #fff; text-decoration: none; }

.wx-rodape__coluna { min-width: 0; }
.wx-rodape__titulo {
  margin: 0 0 var(--wx-e3);
  color: #fff; font-weight: 650;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.wx-rodape__coluna ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.wx-rodape__contacto li { color: var(--wx-tinta-400); }
.wx-rodape__contacto li a { color: var(--wx-tinta-200); }

/* Área restrita — a porta de serviço do sítio.
   Separada por um traço das ligações institucionais e mais apagada do que
   elas: quem a procura sabe o que procura, e quem não a procura não tropeça
   nela. Ao passar o rato acende, para quem a usa todos os dias não ter de a
   caçar. */
.wx-rodape__restrita {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  color: var(--wx-tinta-400);
  font-size: 0.78rem;
  transition: color var(--wx-transicao);
}
.wx-rodape__restrita::before {
  content: ""; flex: none;
  width: 0.55rem; height: 0.7rem;
  border: 1.5px solid currentColor;
  border-radius: 1px 1px 0 0;
  border-bottom-width: 3px;
}
.wx-rodape__restrita:hover,
.wx-rodape__restrita:focus-visible { color: var(--wx-amarelo); }

.wx-rodape__base {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--wx-e4);
}
.wx-rodape__linha {
  margin: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0 0.4rem;
  font-size: 0.75rem; color: var(--wx-tinta-400);
}
.wx-rodape__separador { color: var(--wx-tinta-500); }

/* linha de direitos — partilhada pelo portal e pela gestão */
.wx-direitos { display: inline; }
.wx-direitos__instituicao::before { content: " · "; color: inherit; }

/* autoria técnica — deliberadamente discreta */
.wx-autoria { display: inline; white-space: nowrap; }
.wx-autoria__rotulo { color: inherit; }
.wx-autoria__nome { font-weight: 550; }
.wx-rodape .wx-autoria__nome { color: var(--wx-tinta-200); }
.wx-rodape a.wx-autoria__nome { border-bottom: 1px dotted var(--wx-tinta-500); }
.wx-rodape a.wx-autoria__nome:hover {
  color: #fff; border-bottom-color: #fff; text-decoration: none;
}

/* redes sociais — só aparecem quando configuradas */
.wx-redes {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--wx-e2);
}
.wx-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--wx-raio-sm);
  color: var(--wx-tinta-400);
  transition: color .15s ease, background-color .15s ease;
}
.wx-redes a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.wx-redes a:focus-visible { outline: 2px solid var(--wx-azul-500); outline-offset: 2px; }
.wx-redes svg { width: 1rem; height: 1rem; fill: currentColor; }

.wx-oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* rodapé compacto dentro da área de gestão */
.wx-rodape-gestao {
  padding: var(--wx-e3) var(--wx-e6);
  border-top: var(--wx-borda); background: var(--wx-branco);
  font-size: 0.75rem; color: var(--wx-tinta-500);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wx-e2) var(--wx-e4); flex-wrap: wrap;
}
.wx-rodape-gestao a { color: var(--wx-tinta-700); }
.wx-rodape-gestao a.wx-autoria__nome { border-bottom: 1px dotted var(--wx-tinta-300); }
.wx-rodape-gestao a.wx-autoria__nome:hover {
  color: var(--wx-azul-700); border-bottom-color: var(--wx-azul-500);
  text-decoration: none;
}

/* ==========================================================================
   Responsivo — comportamento, não apenas largura (requisito §25)
   ========================================================================== */

@media (max-width: 1024px) {
  .wx-menu {
    position: fixed; left: 0; top: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--wx-sombra-elevada);
  }
  .wx-app[data-menu="aberto"] .wx-menu { transform: translateX(0); }
  .wx-menu-botao { display: inline-flex; }
  .wx-veu {
    display: none; position: fixed; inset: 0; z-index: 50;
    background: rgba(15, 23, 42, 0.45);
  }
  .wx-app[data-menu="aberto"] .wx-veu { display: block; }
  .wx-conteudo { padding: var(--wx-e4); }
  .wx-topo { padding: 0 var(--wx-e4); }
}

@media (max-width: 860px) {
  /* Em telemóvel a fotografia passa a cabeçalho: ocupa o que precisa e não o
     ecrã inteiro, senão o formulário fica abaixo da dobra. */
  .wx-auth { grid-template-columns: 1fr; min-height: 0; }
  .wx-auth__lado { padding: var(--wx-e6) var(--wx-e5); }
  .wx-auth__lado::before { background-position: center 45%; }
  .wx-auth__lado-interior { max-width: none; }
  .wx-auth__lockup { gap: var(--wx-e3); }
  .wx-auth__selo { width: 42px; height: 42px; }
  .wx-auth__logo { padding: 0.55rem 0.8rem; border-radius: 12px; }
  .wx-auth__logo img { height: 32px; }
  .wx-auth__instituicao { margin-top: var(--wx-e2); }
  .wx-auth__afirmacao { font-size: 0.9375rem; margin-top: var(--wx-e4); }
  .wx-auth__factos { grid-template-columns: repeat(3, 1fr); gap: var(--wx-e2);
    margin-top: var(--wx-e5); }
  .wx-auth__facto { padding: var(--wx-e3); }
  .wx-auth__facto-valor { font-size: 1.15rem; }
  /* As pastilhas saem em telemóvel. São cinco linhas de contexto que, num
     ecrã de 390 px, empurram o campo de utilizador para baixo da dobra —
     e quem abre esta página vem para entrar, não para ler o que o sistema
     faz. A nota da fotografia fica: enquanto a fotografia aparecer, o que
     ela é tem de aparecer com ela. */
  .wx-auth__areas { display: none; }
  .wx-auth__afirmacao { padding-top: var(--wx-e4); }
  .wx-auth__nota { padding-top: var(--wx-e4); }
  /* Em telemóvel a coluna da identidade já disse quem é o sistema no
     logótipo; a linha da titularidade repetia-o e empurrava o formulário
     para baixo da dobra. Fica no rodapé do portal, que é onde se lê. */
  .wx-auth__tutela { display: none; }
  .wx-auth__painel { padding: var(--wx-e6) var(--wx-e5); }
  .wx-auth__form { max-width: none; }
  .wx-auth__titulo { font-size: 1.5rem; }
}

/* Ecrã baixo, ou telemóvel com o teclado aberto: a identidade encolhe ao
   mínimo para todos os campos continuarem alcançáveis. */
@media (max-height: 620px) and (max-width: 860px) {
  .wx-auth__afirmacao,
  .wx-auth__factos,
  .wx-auth__areas,
  .wx-auth__nota { display: none; }
  .wx-auth__lado { padding: var(--wx-e4) var(--wx-e5); }
}

@media (max-width: 720px) {
  /* As tabelas passam a fichas empilhadas: em telemóvel uma tabela de dez
     colunas com deslocamento horizontal é ilegível. Cada linha vira um
     cartão com o nome do campo à esquerda. */
  .wx-tabela--adaptavel thead { display: none; }
  .wx-tabela--adaptavel tbody tr {
    display: block; background: var(--wx-branco);
    border: var(--wx-borda); border-radius: var(--wx-raio);
    margin-bottom: var(--wx-e3); padding: var(--wx-e2) var(--wx-e3);
    box-shadow: var(--wx-sombra);
  }
  .wx-tabela--adaptavel tbody td {
    display: flex; justify-content: space-between; gap: var(--wx-e4);
    border: 0; border-bottom: 1px solid var(--wx-tinta-100);
    padding: var(--wx-e2) 0; text-align: left;
  }
  .wx-tabela--adaptavel tbody td:last-child { border-bottom: 0; }
  .wx-tabela--adaptavel tbody td::before {
    content: attr(data-rotulo);
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--wx-tinta-500); font-weight: 600; flex: 0 0 auto;
  }
  .wx-tabela--adaptavel td.wx-numero { text-align: right; }
  .wx-tabela--adaptavel .wx-tabela__accoes { justify-content: flex-end; }

  /* Em telemóvel o cabeçalho fica com o essencial: alternar menu, título
     numa linha, e sair. O subtítulo e o bloco de identificação passam a ser
     ruído que empurra o conteúdo para baixo. */
  .wx-topo { gap: var(--wx-e2); }
  .wx-topo__caminho { display: none; }
  .wx-topo__titulo {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 42vw;
  }
  .wx-topo__accoes > div { display: none; }
  .wx-topo__accoes { gap: var(--wx-e2); }

  .wx-kpi__valor { font-size: 1.4rem; }
  .wx-filtros__linha { grid-template-columns: 1fr; }
  .wx-accoes-form { flex-wrap: wrap; }
  .wx-accoes-form__destrutivo { margin-left: 0; width: 100%; }
  .wx-heroi h1 { font-size: 1.6rem; }
}

@media print {
  .wx-menu, .wx-topo, .wx-filtros, .wx-paginacao, .wx-botao,
  .wx-rodape-gestao, .wx-portal-topo { display: none !important; }
  body { background: #fff; }
  .wx-cartao { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .wx-conteudo { padding: 0; }
}

/* Rodapé em ecrã estreito. Duas colunas a 720 px — quatro ficariam com uma
   palavra por linha — e uma só abaixo de 520. Não se centra: uma lista de
   ligações centrada é mais difícil de percorrer do que alinhada à esquerda. */
@media (max-width: 980px) {
  .wx-rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-rodape__marca { grid-column: 1 / -1; }
  .wx-boletim { max-width: none; }
}

@media (max-width: 520px) {
  .wx-rodape__colunas { grid-template-columns: 1fr; gap: var(--wx-e5); }
}

@media (max-width: 720px) {
  .wx-rodape { padding-block: var(--wx-e6) var(--wx-e4); }
  .wx-rodape__linha { justify-content: flex-start; }
  /* Numa só coluna o «·» entre os direitos e a autoria deixa de fazer sentido:
     as duas partes passam a linhas separadas. */
  .wx-rodape__separador { display: none; }
  .wx-rodape__linha .wx-autoria { flex-basis: 100%; margin-top: 0.35rem; }

  .wx-rodape-gestao {
    flex-direction: column; align-items: center; text-align: center;
    padding: var(--wx-e3) var(--wx-e4);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Título de secção do portal: dá ritmo vertical entre blocos sem os encostar. */
.wx-titulo-seccao {
  font-size: 1.05rem; letter-spacing: 0.01em; font-weight: 650;
  color: var(--wx-tinta-500);
  margin: var(--wx-e8) 0 var(--wx-e5);
}

/* ==========================================================================
   Contacto
   --------------------------------------------------------------------------
   Cada via de contacto é uma acção, não uma linha de uma lista de definições:
   escrever, ligar, ir lá. As que se podem accionar são ligações e comportam-se
   como tal; as que só informam — morada e horário — ficam paradas, e vê-se
   que são de outra natureza.
   ========================================================================== */

.wx-contacto {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--wx-e6);
  align-items: start;
  margin-top: var(--wx-e6);
}
.wx-contacto__vias { display: flex; flex-direction: column; gap: var(--wx-e3); }

.wx-via {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--wx-e4);
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: 14px;
  padding: var(--wx-e4) 3rem var(--wx-e4) var(--wx-e4);
  color: inherit;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
a.wx-via:hover { text-decoration: none; }
a.wx-via:hover {
  box-shadow: 0 8px 22px rgba(4, 49, 131, 0.09);
  transform: translateY(-2px);
  border-color: var(--wx-azul-500);
}
/* Morada e horário não levam a lado nenhum: sem sombra, sem seta, e num
   fundo que os afasta um passo das acções. */
.wx-via--parada { background: transparent; padding-right: var(--wx-e4); }

.wx-via__corpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wx-via__rotulo {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wx-tinta-400); font-weight: 600;
}
.wx-via__valor {
  font-size: 0.98rem; color: var(--wx-tinta-900); font-weight: 550;
  overflow-wrap: anywhere;
}
.wx-via__ligacao { margin-top: var(--wx-e2); font-size: 0.85rem; }
.wx-via__seta {
  position: absolute; right: var(--wx-e4); top: 50%;
  transform: translateY(-50%);
  color: var(--wx-azul-700);
  transition: transform 0.16s ease;
}
a.wx-via:hover .wx-via__seta { transform: translateY(-50%) translateX(4px); }

.wx-contacto__mapa {
  border: var(--wx-borda); border-radius: var(--wx-raio-lg); overflow: hidden;
  background: var(--wx-azul-50);
  min-height: 22rem;
  display: flex; flex-direction: column;
  box-shadow: var(--wx-sombra);
}
/* A linha por baixo do mapa, com a morada escrita e a ligação para o abrir
   à parte. Fica visível mesmo que a moldura não carregue. */
.wx-contacto__mapa-nota {
  margin: 0; padding: var(--wx-e3) var(--wx-e4);
  background: var(--wx-branco); border-top: var(--wx-borda);
  font-size: 0.8125rem; color: var(--wx-tinta-500); line-height: 1.5;
}
.wx-contacto__mapa iframe {
  border: 0; width: 100%; flex: 1 1 auto; min-height: 20rem; display: block;
}
.wx-mapa-vazio {
  margin: auto; padding: var(--wx-e6); text-align: center; max-width: 34ch;
}
.wx-mapa-vazio .wx-icone { margin: 0 auto var(--wx-e3); }
.wx-mapa-vazio__titulo { margin: 0; font-weight: 650; color: var(--wx-tinta-800); }
.wx-mapa-vazio__nota {
  margin: var(--wx-e2) 0 0; font-size: 0.85rem; color: var(--wx-tinta-500);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .wx-contacto { grid-template-columns: 1fr; }
  .wx-contacto__mapa, .wx-contacto__mapa iframe { min-height: 16rem; }
}

/* ==========================================================================
   Vídeos
   --------------------------------------------------------------------------
   Um vídeo mostra-se com uma imagem. A pré-visualização vem da capa carregada
   no painel ou da miniatura herdada do Vimeo; a inicial fica por baixo das
   duas, e é o que aparece quando nenhuma existe ou quando a herdada deixar de
   responder.
   ========================================================================== */

.wx-categorias {
  display: flex; flex-wrap: wrap; gap: var(--wx-e2);
  margin: var(--wx-e5) 0 var(--wx-e6);
}
.wx-categoria {
  padding: 0.42rem 0.9rem;
  border: var(--wx-borda); border-radius: 999px;
  font-size: 0.83rem; font-weight: 550;
  color: var(--wx-tinta-700); background: var(--wx-branco);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.wx-categoria:hover { text-decoration: none; border-color: var(--wx-azul-500); }
.wx-categoria[aria-current="page"] {
  background: var(--wx-azul-700); border-color: var(--wx-azul-700); color: #fff;
}

.wx-videos {
  display: grid; gap: var(--wx-e5);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.wx-video { display: flex; flex-direction: column; color: inherit; }
.wx-video:hover { text-decoration: none; }

.wx-video__capa {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: var(--wx-borda);
  background: var(--wx-azul-100);
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.wx-video:hover .wx-video__capa {
  box-shadow: 0 10px 26px rgba(4, 49, 131, 0.13);
  transform: translateY(-2px);
  border-color: var(--wx-azul-500);
}
/* A miniatura fica por cima da inicial. Uma miniatura que não responda deixa
   simplesmente de a tapar — `alt=""` não desenha ícone de imagem partida. */
.wx-video__capa img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wx-video__inicial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 2.6rem; font-weight: 600; color: var(--wx-azul-700);
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 7px),
    var(--wx-azul-100);
}
/* O botão de reprodução vive no canto, e não no meio: no meio ficava
   exactamente por cima da inicial, e um cartão sem miniatura mostrava um
   painel às riscas com um disco preto e mais nada. */
.wx-video__jogar {
  position: absolute; z-index: 2; right: 0.6rem; bottom: 0.6rem;
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 20, 70, 0.78); color: #fff;
  backdrop-filter: blur(2px);
  transition: background 0.16s ease, transform 0.16s ease;
}
.wx-video__jogar svg { margin-left: 2px; }
.wx-video:hover .wx-video__jogar {
  background: var(--wx-azul-700);
  transform: scale(1.08);
}

.wx-video__corpo { display: flex; flex-direction: column; gap: 0.25rem;
  padding-top: var(--wx-e3); }
.wx-video__categoria {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 650; color: var(--wx-barro-600);
}
.wx-video__titulo {
  font-weight: 620; color: var(--wx-tinta-900); line-height: 1.35;
  letter-spacing: -0.01em;
}
.wx-video:hover .wx-video__titulo { color: var(--wx-azul-700); }
.wx-video__resumo {
  font-size: 0.84rem; color: var(--wx-tinta-500); line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .wx-video:hover .wx-video__capa { transform: none; }
  .wx-video:hover .wx-video__jogar { transform: none; }
}

/* Página de um vídeo: leitor à esquerda, o que vem a seguir à direita. */
.wx-video-pagina {
  display: grid; grid-template-columns: minmax(0, 1fr) 19rem;
  gap: var(--wx-e6); align-items: start; margin-top: var(--wx-e4);
}
.wx-leitor {
  position: relative; padding-top: 56.25%;
  border-radius: 12px; overflow: hidden; background: #000;
}
.wx-leitor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.wx-video-lado__titulo {
  margin: 0 0 var(--wx-e3);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 650; color: var(--wx-tinta-500);
}
.wx-video-lado__lista { display: flex; flex-direction: column; gap: var(--wx-e3); }
.wx-video-mini {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--wx-e3); align-items: start; color: inherit;
}
.wx-video-mini:hover { text-decoration: none; }
.wx-video-mini__capa {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 8px;
  border: var(--wx-borda); background: var(--wx-azul-100);
}
.wx-video-mini__capa img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wx-video-mini__capa .wx-video__inicial { font-size: 1.2rem; }
.wx-video-mini__titulo {
  font-size: 0.85rem; font-weight: 570; line-height: 1.4;
  color: var(--wx-tinta-800);
}
.wx-video-mini:hover .wx-video-mini__titulo { color: var(--wx-azul-700); }

@media (max-width: 900px) {
  .wx-video-pagina { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Faixa de parceiros
   --------------------------------------------------------------------------
   A pista tem os logótipos duas vezes e desloca-se exactamente metade da sua
   largura. Quando a primeira cópia sai pela esquerda, a segunda está no ponto
   onde a primeira começou: a animação recomeça e não há emenda visível.

   A duração acompanha o número de parceiros — `--n` vem do template —, para
   que quatro logótipos não passem a correr e vinte não se arrastem. São
   cerca de 3,4 segundos por logótipo, o tempo de o olho pousar num.
   ========================================================================== */

.wx-parceiros {
  padding-block: var(--wx-e7);
  border-top: var(--wx-borda);
  background: var(--wx-branco);
  overflow: hidden;
}
.wx-parceiros__interior {
  width: min(100% - 2 * var(--wx-goteira), var(--wx-largo));
  margin-inline: auto;
}
.wx-parceiros__titulo {
  margin: 0 0 var(--wx-e6);
  text-align: center;
  font-size: 0.78rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--wx-tinta-500);
}

/* As máscaras nas pontas fazem os logótipos entrarem e saírem esbatidos, em
   vez de serem cortados a direito contra a margem. */
.wx-fita {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wx-fita__pista {
  display: flex; align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  list-style: none; margin: 0; padding: 0;
  width: max-content;
  animation: wx-rolar calc(var(--n, 6) * 3.4s) linear infinite;
}
/* Parar quando alguém quer ler um logótipo, ou quando chega a ele pelo
   teclado. Sem isto, a fita foge do rato. */
.wx-fita:hover .wx-fita__pista,
.wx-fita:focus-within .wx-fita__pista { animation-play-state: paused; }

.wx-fita__item { flex: none; display: flex; align-items: center; }
.wx-fita__item img {
  display: block;
  height: clamp(30px, 4.4vw, 44px);
  width: auto; max-width: 190px;
  object-fit: contain;
}
.wx-fita__item a { display: block; border-radius: var(--wx-raio-sm); }
.wx-fita__item a:focus-visible {
  outline: 2px solid var(--wx-azul-600); outline-offset: 4px;
}

@keyframes wx-rolar {
  from { transform: translate3d(0, 0, 0); }
  /* Metade da pista: é o comprimento de uma cópia da lista, incluindo o
     espaço que a separa da seguinte. */
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Quem pediu menos movimento ao sistema não vê nada a mexer: a fita passa a
   uma lista que se desliza com o dedo, e a cópia duplicada sai da frente. */
@media (prefers-reduced-motion: reduce) {
  .wx-fita { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .wx-fita__pista { animation: none; padding-inline: var(--wx-goteira); }
  .wx-fita__item[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------- titularidade
   Bloco institucional da página «Sobre». Fica discreto de propósito: diz de
   quem é o sistema sem se pôr à frente do que o sítio tem para mostrar. */
.wx-titularidade {
  display: flex; align-items: center; gap: var(--wx-e4);
  margin: var(--wx-e5) 0 var(--wx-e6);
  padding: var(--wx-e4) var(--wx-e5);
  background: var(--wx-azul-50);
  border: 1px solid var(--wx-azul-100);
  border-left: 3px solid var(--wx-azul-700);
  border-radius: var(--wx-raio);
}
.wx-titularidade__selo { flex: none; display: block; }
.wx-titularidade p {
  margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wx-tinta-700);
}
.wx-titularidade a { font-weight: 600; }

@media (max-width: 560px) {
  .wx-titularidade { flex-direction: column; align-items: flex-start; gap: var(--wx-e3); }
}

/* ==========================================================================
   Identidade UniRovuma — a mesma linguagem do sistema da incubadora
   --------------------------------------------------------------------------
   Não chegava trocar os valores das cores: o que faz um sítio parecer da
   universidade é a barra escura em cima, o cabeçalho em marinho, o título
   em Lato 900 maiúsculo com a última palavra a amarelo, e o amarelo como
   cor de acção. É isso que está aqui.
   ========================================================================== */

/* -- barra de serviço, acima do cabeçalho ------------------------------- */
.wx-barra-topo {
  background: #001028;
  color: #93a6c6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem; letter-spacing: 0.02em;
}
.wx-barra-topo__interior {
  width: min(100% - 2 * var(--wx-goteira), var(--wx-largo));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  padding-block: 0.45rem;
}
.wx-barra-topo__espaco { flex: 1; }
.wx-barra-topo a { color: #d3dce8; font-weight: 700; letter-spacing: 0.05em; }
.wx-barra-topo a:hover { color: var(--wx-amarelo); text-decoration: none; }

/* -- cabeçalho em marinho ------------------------------------------------ */
.wx-portal-topo {
  background: linear-gradient(180deg, #00205e, var(--wx-azul-900));
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.wx-portal-topo__interior { align-items: center; }
.wx-portal-marca { flex-direction: row; align-items: center; gap: 0.7rem; }
.wx-portal-marca__selo {
  flex: none; display: block; width: 42px; height: 42px;
  background: #fff; border-radius: 50%; padding: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 22px rgba(234, 179, 8, 0.22);
}
.wx-portal-marca__texto { display: flex; flex-direction: column; gap: 0.1rem; }
.wx-portal-marca__logotipo { height: 30px; }
.wx-portal-marca__assinatura { color: #93a6c6; }
@media (min-width: 1100px) { .wx-portal-marca__assinatura { display: block; } }

.wx-portal-nav a { color: #cdd5e2; }
.wx-portal-nav a:hover,
.wx-portal-nav a[aria-current="page"] { color: #fff; }
.wx-portal-nav a[aria-current="page"] { border-bottom: 2px solid var(--wx-amarelo); padding-bottom: 2px; }

/* -- botão de acção: amarelo sobre marinho ------------------------------- */
.wx-botao--amarelo,
.wx-portal-topo__accoes .wx-botao--contorno {
  background: linear-gradient(135deg, #f5c518, var(--wx-amarelo));
  border-color: var(--wx-amarelo);
  color: var(--wx-azul-900); font-weight: 800;
  box-shadow: var(--wx-brilho-amarelo);
}
.wx-botao--amarelo:hover,
.wx-portal-topo__accoes .wx-botao--contorno:hover {
  background: linear-gradient(135deg, #fad02c, #f5c518);
  border-color: #f5c518; color: var(--wx-azul-900);
  box-shadow: 0 12px 28px -8px rgba(234, 179, 8, 0.65);
}
/* Botão que ocupa a largura do seu contentor: o de subscrever o boletim no
   rodapé e os de acção única nas telas de acesso. A classe estava a ser
   usada no rodapé e não existia aqui — o botão herdava a largura do texto. */
.wx-botao--largo {
  display: flex; width: 100%; justify-content: center;
  min-height: 48px; font-weight: 700;
}

/* -- herói escuro -------------------------------------------------------- */
.wx-heroi {
  background: linear-gradient(115deg, #00123a 0%, #00225a 48%, var(--wx-azul-700) 100%);
  color: #fff;
}
.wx-heroi::before {
  inset: -30% 40% 30% -20%;
  background: radial-gradient(closest-side, rgba(51, 150, 209, 0.22), transparent 70%);
}
.wx-heroi::after {
  inset: 45% -10% -35% 55%;
  background: radial-gradient(closest-side, rgba(234, 179, 8, 0.14), transparent 70%);
}
.wx-heroi__etiqueta { color: var(--wx-amarelo); }
.wx-heroi__etiqueta::before { background: var(--wx-amarelo); }
.wx-heroi h1 {
  color: #fff; font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 1.06;
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  max-width: 17ch;
}
/* A última linha a amarelo, como nos títulos da universidade. */
.wx-heroi h1 em { font-style: normal; color: var(--wx-amarelo); }
.wx-heroi__texto { color: #c9d6ea; }
.wx-heroi .wx-botao--contorno {
  background: rgba(255, 255, 255, 0.06); color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.wx-heroi .wx-botao--contorno:hover {
  background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.5);
}
.wx-heroi .wx-botao--principal {
  background: var(--wx-amarelo); border-color: var(--wx-amarelo);
  color: var(--wx-azul-900); font-weight: 700;
}
.wx-heroi .wx-botao--principal:hover { background: #f5c518; border-color: #f5c518; color: var(--wx-azul-900); }
.wx-heroi .wx-ligacao-accao { color: var(--wx-amarelo); }
.wx-heroi .wx-ligacao-accao:hover { color: #f7d354; }
.wx-heroi__manuscrito { color: rgba(255, 255, 255, 0.55); }
.wx-heroi__manuscrito span:last-child { color: var(--wx-amarelo); }

/* Títulos de secção no peso da universidade. */
h1, h2, h3, .wx-seccao__titulo { font-weight: 800; letter-spacing: -0.015em; }

/* -- rodapé em marinho, como o da incubadora ---------------------------- */
.wx-rodape { background: var(--wx-azul-900); color: #b8c6dc; }
.wx-rodape__titulo { color: var(--wx-amarelo); }
.wx-rodape a { color: #dbe4f3; }
.wx-rodape a:hover { color: var(--wx-amarelo); }
.wx-rodape__identidade {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.9rem;
}
.wx-rodape__selo {
  flex: none; display: block; background: #fff; border-radius: 50%; padding: 4px;
}
.wx-rodape__logotipo { display: block; height: 30px; width: auto; }
/* A titularidade fica acima da descrição, separada por um fio — o
   programador não entra nesta coluna, fica só na linha de baixo. */
.wx-rodape__tutela {
  margin: 0 0 0.85rem; padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: #a8b8d0; font-size: 0.8125rem; max-width: 38ch;
}
.wx-rodape__descricao { color: #b8c6dc; }
.wx-rodape__contacto li { color: #b8c6dc; }
.wx-rodape__linha { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.wx-rodape__espaco { flex: 1; }
.wx-rodape__universidade { font-weight: 700; letter-spacing: 0.02em; }

/* -- páginas de erro ----------------------------------------------------- */
/* A página de erro é a única que a pessoa vê quando alguma coisa falhou.
   Tem de parecer da mesma casa: marinho, Lato, e uma saída amarela. */
.wx-erro {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--wx-e6) var(--wx-goteira);
  background:
    radial-gradient(closest-side at 22% 24%, rgba(51, 150, 209, 0.22), transparent 70%),
    radial-gradient(closest-side at 78% 82%, rgba(234, 179, 8, 0.12), transparent 70%),
    linear-gradient(115deg, #00123a 0%, #00225a 48%, var(--wx-azul-700) 100%);
  color: #fff;
}
.wx-erro__interior { width: min(100%, 620px); }
.wx-erro__caixa { text-align: center; }
.wx-erro__selo {
  display: block; margin: 0 auto var(--wx-e5);
  background: #fff; border-radius: 50%; padding: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 28px rgba(234, 179, 8, 0.22);
}
/* O número é grande mas é fundo, não manchete: quem chega aqui precisa de
   ler a frase, não o código. */
.wx-erro__codigo {
  margin: 0; font-weight: 900; line-height: 1;
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: -0.04em;
}
.wx-erro__titulo {
  margin: calc(-0.4 * var(--wx-e5)) 0 var(--wx-e4);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em;
  color: #fff;
}
.wx-erro__texto {
  margin: 0 auto var(--wx-e6); max-width: 46ch;
  color: #c9d6ea; line-height: 1.65;
}
.wx-erro__accoes {
  display: flex; gap: var(--wx-e3); justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--wx-e6);
}
.wx-erro .wx-botao--contorno {
  background: rgba(255, 255, 255, 0.06); color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.wx-erro .wx-botao--contorno:hover {
  background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.5);
}
.wx-erro__atalhos {
  display: flex; gap: var(--wx-e4) var(--wx-e5); justify-content: center;
  flex-wrap: wrap; align-items: center;
  padding-top: var(--wx-e5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
}
.wx-erro__atalhos span { color: #93a6c6; }
.wx-erro__atalhos a { color: #dbe4f3; }
.wx-erro__atalhos a:hover { color: var(--wx-amarelo); }

/* Vídeo sem leitor nem endereço: o cartão diz-lho antes do clique, em vez
   de prometer um botão de reprodução que não leva a lado nenhum. */
.wx-video__indisponivel {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  background: rgba(0, 18, 58, 0.88); color: #fff;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px;
}

/* -- boletim por e-mail ------------------------------------------------- */
.wx-rodape__nota { margin: 0 0 0.8rem; color: #b8c6dc; max-width: 32ch; }
.wx-boletim { display: grid; gap: 0.5rem; max-width: 300px; }
.wx-boletim .wx-campo {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; border-radius: var(--wx-raio);
  padding: 0.6rem 0.8rem; font: inherit; font-size: 0.875rem;
}
.wx-boletim .wx-campo::placeholder { color: #8ba0c2; }
.wx-boletim .wx-campo:focus-visible {
  outline: 2px solid var(--wx-amarelo); outline-offset: 1px;
  border-color: var(--wx-amarelo);
}
/* A armadilha: escondida de quem vê e de quem ouve, visível para o robô
   que preenche tudo o que encontra no formulário. Não usa `display:none`
   porque alguns robôs saltam o que está assim — fica fora do ecrã. */
.wx-engodo {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.wx-silencioso {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Página de estado da subscrição. */
.wx-recado { padding-block: var(--wx-e7) var(--wx-e8); }
.wx-recado h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: var(--wx-e4); }
.wx-recado .wx-boletim__formulario { max-width: 380px; margin-top: var(--wx-e5); }
.wx-recado .wx-boletim__formulario .wx-campo {
  background: var(--wx-branco); border: 1px solid var(--wx-tinta-200);
  color: var(--wx-tinta-900); border-radius: var(--wx-raio);
  padding: 0.65rem 0.85rem; width: 100%; font: inherit;
}