/* ==========================================================================
   Waresta Index — sistema de design
   --------------------------------------------------------------------------
   Uma paleta ligada à agricultura e aos mercados sem transformar a interface
   num bloco verde: o verde-oliva é o acento institucional, o barro é o acento
   de dados, e o corpo da interface vive em tons de tinta e areia.
   Contraste verificado para AA em texto corrente.
   ========================================================================== */

:root {
  /* -- cores de marca ---------------------------------------------------- */
  --wx-oliva-900: #1f2a20;
  --wx-oliva-700: #33502f;
  --wx-oliva-600: #416a3b;
  --wx-oliva-500: #55854c;
  --wx-oliva-100: #e8efe5;
  --wx-oliva-50:  #f3f7f1;

  --wx-barro-700: #8f4322;
  --wx-barro-600: #a9532c;
  --wx-barro-500: #c2673c;
  --wx-barro-100: #f8e9e0;

  --wx-ocre-600:  #a8802a;
  --wx-ocre-100:  #f7eed8;

  /* -- neutros ----------------------------------------------------------- */
  --wx-tinta-900: #15181c;
  --wx-tinta-800: #22272e;
  --wx-tinta-700: #333a44;
  --wx-tinta-500: #5c6572;
  --wx-tinta-400: #7b8493;
  --wx-tinta-300: #aeb5c0;
  --wx-tinta-200: #d8dde4;
  --wx-tinta-100: #eceff3;
  --wx-areia:     #f7f6f3;
  --wx-branco:    #ffffff;

  /* -- estados ------------------------------------------------------------ */
  --wx-sucesso:   #2f6b46;
  --wx-sucesso-bg:#e6f2ea;
  --wx-aviso:     #9a6a00;
  --wx-aviso-bg:  #fbf1d9;
  --wx-erro:      #a32b28;
  --wx-erro-bg:   #fbe9e8;
  --wx-info:      #23557a;
  --wx-info-bg:   #e5eff6;

  /* -- séries de gráficos (ordem de utilização) --------------------------- */
  --wx-serie-1: #416a3b;
  --wx-serie-2: #a9532c;
  --wx-serie-3: #23557a;
  --wx-serie-4: #a8802a;
  --wx-serie-5: #6b4f7a;
  --wx-serie-6: #4d7d7a;
  --wx-serie-7: #8a5a3c;

  /* -- tipografia --------------------------------------------------------- */
  --wx-fonte: "Inter", "Segoe UI", system-ui, -apple-system, "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 -------------------------------------------------------- */
  --wx-raio:    8px;
  --wx-raio-sm: 5px;
  --wx-borda:   1px solid var(--wx-tinta-200);
  --wx-sombra:  0 1px 2px rgba(21, 24, 28, 0.05),
                0 1px 3px rgba(21, 24, 28, 0.04);
  --wx-sombra-elevada: 0 4px 12px rgba(21, 24, 28, 0.09);

  --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;

  --wx-creme:   #f6f3ec;
}

/* ==========================================================================
   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-oliva-700); text-decoration: none; }
a:hover { color: var(--wx-oliva-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-oliva-600);
  outline-offset: 2px;
  border-radius: 3px;
}

.wx-salto-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--wx-oliva-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-oliva-900);
  color: #c9d3c6;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.wx-menu__marca {
  display: flex; align-items: center; gap: var(--wx-e3);
  padding: var(--wx-e4) var(--wx-e5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.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.6875rem; color: #8fa389; letter-spacing: 0.03em;
  text-transform: uppercase; }

/* 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: #7d8f78; 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: #c9d3c6; }
.wx-menu__titulo:focus-visible {
  outline: 2px solid var(--wx-oliva-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); }
.wx-menu__item {
  display: flex; align-items: center; gap: var(--wx-e3);
  padding: var(--wx-e2) var(--wx-e5);
  color: #c9d3c6; font-size: 0.875rem;
  border-left: 3px solid transparent;
}
.wx-menu__item:hover {
  background: rgba(255, 255, 255, 0.05); color: #fff; text-decoration: none;
}
.wx-menu__item--activo {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border-left-color: var(--wx-barro-500); font-weight: 550;
}
.wx-menu__rodape {
  margin-top: auto; padding: var(--wx-e4) var(--wx-e5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem; color: #7d8f78;
  display: flex; flex-direction: column; gap: var(--wx-e2);
}

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

.wx-topo {
  height: var(--wx-altura-topo);
  background: var(--wx-branco);
  border-bottom: var(--wx-borda);
  display: flex; align-items: center; gap: var(--wx-e4);
  padding: 0 var(--wx-e6);
  position: sticky; top: 0; z-index: 40;
}
.wx-topo__titulo { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.wx-topo__caminho { font-size: 0.75rem; color: var(--wx-tinta-500); }
.wx-topo__accoes { margin-left: auto; display: flex; align-items: center; gap: var(--wx-e3); }

.wx-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--wx-oliva-100); color: var(--wx-oliva-700);
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 650;
}

.wx-conteudo { padding: var(--wx-e6); flex: 1 1 auto; }
.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);
  color: var(--wx-tinta-700); cursor: pointer; }

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

.wx-cartao {
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: var(--wx-raio);
  box-shadow: var(--wx-sombra);
}
.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 -------------------------------------------------------- */
.wx-kpi {
  background: var(--wx-branco);
  border: var(--wx-borda);
  border-radius: var(--wx-raio);
  padding: var(--wx-e4) var(--wx-e5);
  box-shadow: var(--wx-sombra);
  position: relative; overflow: hidden;
}
.wx-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--wx-oliva-500);
}
.wx-kpi--barro::before { background: var(--wx-barro-500); }
.wx-kpi--ocre::before  { background: var(--wx-ocre-600); }
.wx-kpi--info::before  { background: var(--wx-info); }
.wx-kpi--oliva::before { background: var(--wx-oliva-600); }

.wx-kpi__rotulo {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--wx-tinta-500); font-weight: 600; margin-bottom: var(--wx-e1);
}
.wx-kpi__valor {
  font-family: var(--wx-fonte-numero);
  font-size: 1.75rem; font-weight: 600; line-height: 1.1;
  color: var(--wx-tinta-900); font-variant-numeric: tabular-nums;
}
.wx-kpi__nota { font-size: 0.75rem; color: var(--wx-tinta-500); margin-top: var(--wx-e1); }

.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-oliva-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-oliva-700); text-decoration: none; }
.wx-ordenar__seta { font-size: 0.625rem; opacity: 0.55; }

/* ==========================================================================
   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-oliva-100);  color: var(--wx-oliva-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: #1d4a2f; }
.wx-alerta--aviso   { background: var(--wx-aviso-bg);   border-color: var(--wx-aviso);   color: #6b4a00; }
.wx-alerta--erro    { background: var(--wx-erro-bg);    border-color: var(--wx-erro);    color: #7d1f1d; }
.wx-alerta--info    { background: var(--wx-info-bg);    border-color: var(--wx-info);    color: #17384f; }
.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.5rem 1rem;
  font-size: 0.875rem; font-weight: 550; font-family: inherit;
  border-radius: var(--wx-raio-sm); border: 1px solid transparent;
  cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
  text-decoration: none; white-space: nowrap;
}
.wx-botao:hover { text-decoration: none; }
.wx-botao--principal { background: var(--wx-oliva-700); color: #fff; }
.wx-botao--principal:hover { background: var(--wx-oliva-600); 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; }

.wx-accoes-form {
  display: flex; gap: var(--wx-e3); align-items: center;
  padding-top: var(--wx-e4); margin-top: var(--wx-e5);
  border-top: var(--wx-borda);
}
.wx-accoes-form__destrutivo { margin-left: auto; }

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

.wx-campo { margin-bottom: var(--wx-e4); }
.wx-campo__rotulo {
  display: block; font-size: 0.8125rem; font-weight: 600;
  color: var(--wx-tinta-700); margin-bottom: var(--wx-e1);
}
.wx-campo__obrigatorio { color: var(--wx-barro-600); margin-left: 2px; }
.wx-campo__ajuda { font-size: 0.75rem; color: var(--wx-tinta-500); margin-top: var(--wx-e1); }
.wx-campo__erro {
  font-size: 0.75rem; color: var(--wx-erro); margin-top: var(--wx-e1); font-weight: 550;
}

.wx-entrada, .wx-selecao, .wx-area {
  width: 100%; padding: 0.5rem 0.7rem;
  font-family: inherit; font-size: 0.875rem; 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 .12s ease, box-shadow .12s ease;
}
.wx-entrada:focus, .wx-selecao:focus, .wx-area:focus {
  border-color: var(--wx-oliva-500);
  box-shadow: 0 0 0 3px var(--wx-oliva-100);
  outline: none;
}
.wx-entrada[aria-invalid="true"], .wx-selecao[aria-invalid="true"] {
  border-color: var(--wx-erro); box-shadow: 0 0 0 3px var(--wx-erro-bg);
}
.wx-area { min-height: 90px; resize: vertical; }

.wx-seccao-form { margin-bottom: var(--wx-e6); }
.wx-seccao-form__titulo {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--wx-tinta-500); font-weight: 700;
  padding-bottom: var(--wx-e2); margin-bottom: var(--wx-e4);
  border-bottom: var(--wx-borda);
}
.wx-linha-form { display: grid; gap: var(--wx-e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* -- filtros ------------------------------------------------------------- */
.wx-filtros {
  background: var(--wx-branco); border: var(--wx-borda); border-radius: var(--wx-raio);
  padding: var(--wx-e4); margin-bottom: var(--wx-e4); box-shadow: var(--wx-sombra);
}
.wx-filtros__linha {
  display: grid; gap: var(--wx-e3);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
}
.wx-filtros__accoes { display: flex; gap: var(--wx-e2); }

/* ==========================================================================
   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-oliva-700); color: #fff; border-color: var(--wx-oliva-700);
}

.wx-vazio { text-align: center; padding: var(--wx-e8) var(--wx-e5); color: var(--wx-tinta-500); }
.wx-vazio__titulo { font-size: 1rem; font-weight: 600; color: var(--wx-tinta-700);
  margin-bottom: var(--wx-e2); }

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

.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-oliva-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-oliva-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-oliva-900);
  color: #e9efe6;
  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(19, 27, 20, 0.92), rgba(31, 50, 29, 0.82) 52%,
                    rgba(19, 27, 20, 0.94)),
    radial-gradient(circle at 22% 28%, rgba(194, 103, 60, 0.20), transparent 48%);
}

.wx-auth__logo {
  width: 58px; height: 58px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  display: grid; place-items: center;
  margin-bottom: var(--wx-e5);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.wx-auth__marca { font-size: 2rem; font-weight: 680; color: #fff; letter-spacing: -0.02em; }
.wx-auth__afirmacao { font-size: 1.0625rem; max-width: 46ch; margin-top: var(--wx-e4);
  color: #dbe4d6; line-height: 1.6; }
.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: #b9c7b3; margin-top: var(--wx-e2); }
/* 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 {
  margin-top: var(--wx-e6); font-size: 0.6875rem; color: #9fb098;
  max-width: 46ch; letter-spacing: 0.02em;
}

.wx-auth__painel {
  background: var(--wx-branco);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--wx-e8) var(--wx-e7);
}
.wx-auth__form { width: 100%; max-width: 360px; margin: 0 auto; }

/* ==========================================================================
   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; align-items: center; gap: 0.65rem; }
.wx-portal-marca:hover { text-decoration: none; }
.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.6rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wx-tinta-400); line-height: 1.3;
}

/* 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-oliva-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-creme);
  color: var(--wx-tinta-800);
  /* 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(65, 106, 59, 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-oliva-700);
  margin-bottom: var(--wx-e4);
}
.wx-heroi__etiqueta::before {
  content: ""; width: 34px; height: 2px; background: var(--wx-oliva-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-oliva-50); color: var(--wx-oliva-700); }

.wx-ligacao-accao {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 620; color: var(--wx-oliva-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-oliva-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(15, 22, 16, 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(15, 22, 16, 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(15, 22, 16, 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(15, 22, 16, 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-oliva-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-oliva-700);
  margin: 0 0 var(--wx-e2);
}
.wx-sobretitulo::before {
  content: ""; width: 22px; height: 2px; background: var(--wx-oliva-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(21, 24, 28, 0.05);
}
.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-oliva-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(21, 24, 28, 0.08);
  transform: translateY(-2px);
  border-color: var(--wx-oliva-500);
}
.wx-pergunta__seta {
  position: absolute; right: var(--wx-e5); bottom: var(--wx-e5);
  color: var(--wx-oliva-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-oliva-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-oliva-100); color: var(--wx-oliva-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(21, 24, 28, 0.16); }
.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-oliva-700);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.5) 0 2px,
      transparent 2px 7px
    ),
    var(--wx-oliva-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-oliva-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-oliva-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(22, 32, 26, 0.76), rgba(20, 30, 24, 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(21, 24, 28, 0.08);
  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-oliva-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-oliva-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-oliva-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-oliva-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;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  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; }
.wx-rodape__descricao {
  margin: 0.4rem 0 var(--wx-e4);
  font-size: 0.8125rem; color: var(--wx-tinta-400);
  max-width: 34ch;
}

.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); }

.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-oliva-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-oliva-700); border-bottom-color: var(--wx-oliva-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(21, 24, 28, 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__logo { width: 48px; height: 48px; border-radius: 12px;
    margin-bottom: var(--wx-e4); }
  .wx-auth__marca { font-size: 1.6rem; }
  .wx-auth__afirmacao { font-size: 0.9375rem; }
  .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; }
  .wx-auth__nota { margin-top: var(--wx-e4); }
  .wx-auth__painel { padding: var(--wx-e6) 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; }
}

@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(21, 24, 28, 0.08);
  transform: translateY(-2px);
  border-color: var(--wx-oliva-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-oliva-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: 14px; overflow: hidden;
  background: var(--wx-oliva-50);
  min-height: 22rem;
  display: flex;
}
.wx-contacto__mapa iframe {
  border: 0; width: 100%; min-height: 22rem; 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-oliva-500); }
.wx-categoria[aria-current="page"] {
  background: var(--wx-oliva-700); border-color: var(--wx-oliva-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-oliva-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(21, 24, 28, 0.12);
  transform: translateY(-2px);
  border-color: var(--wx-oliva-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-oliva-700);
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 7px),
    var(--wx-oliva-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(19, 27, 20, 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-oliva-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-oliva-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-oliva-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-oliva-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-oliva-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; }
}