/* =============================================================================
   Observatório de Mafra — design system
   =============================================================================
   Escrito contra o Figma `PYTqvsXel1gyMo73t04h41`, frame a frame. As medidas
   nos comentários são as do desenho (frame desktop de 1440px, faixa de
   conteúdo de 1240px, mobile de 393px). Não há breakpoint de tablet no
   ficheiro; os dois usados aqui — 1024px e 560px — são de degradação, não do
   desenho.

   Diferenças estruturais face ao Loures, que é a base deste projecto:
     - não há barra de topo nem bloco de newsletter;
     - a navegação é uma cápsula verde flutuante, não uma navbar de largura
       total;
     - o footer é um cartão verde arredondado recuado 32px, não full-bleed;
     - o destaque de opinião da home é um cartão quase preto, não cinzento;
     - há duas serifas (Newsreader no display, Lora nos títulos) em vez de uma
       única sans.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body.mfr {
  margin: 0;
  background: var(--mfr-creme);
  color: var(--mfr-texto);
  font-family: var(--mfr-fonte);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body.mfr img {
  max-width: 100%;
}

/* ATENÇÃO À ESPECIFICIDADE. Isto esteve escrito como `body.mfr a`, que tem
   especificidade (0,1,2) e por isso VENCIA todas as regras de componente com
   uma só classe — `.mfr-navbar__link`, `.mfr-footer__link`,
   `.mfr-seccao__ver-mais`. Resultado: os links saíam pretos por herança e os
   `:hover` com sublinhado eram apagados pelo `text-decoration: none`.
   Sem prefixo, fica em (0,0,1) e perde para qualquer classe, que é o que se
   quer de uma reposição de base. */
a {
  color: inherit;
  text-decoration: none;
}

.mfr-conteudo {
  width: 100%;
  max-width: calc(var(--mfr-conteudo) + 2 * var(--mfr-margem));
  margin: 0 auto;
  padding: 0 var(--mfr-margem);
  box-sizing: border-box;
}

/* A `base.html` embrulha o `main` numa faixa para as páginas ainda não
   migradas; quando a página traz a sua própria, o aninhamento anularia as
   margens duas vezes. */
.mfr-conteudo .mfr-conteudo {
  max-width: none;
  padding: 0;
}

.mfr-pilha {
  display: flex;
  flex-direction: column;
  gap: var(--mfr-gap-entre-seccoes);
  padding-bottom: var(--mfr-gap-entre-seccoes);
}

/* -----------------------------------------------------------------------------
   Cabeçalho — frame `21:29` (1440×93)

   Não é uma navbar: é uma faixa transparente sobre o creme, com o wordmark
   à esquerda (57×49), uma CÁPSULA VERDE ao centro (547×48, raio 100, padding
   16/40, gap 32) e o seletor de idioma à direita.
   -------------------------------------------------------------------------- */

.mfr-navbar {
  background: var(--mfr-creme);
  position: sticky;
  top: 0;
  z-index: 40;
  /* `Frame 73` tem DROP_SHADOW 0/1 raio 1 a rgba(230,230,230) — é o filete
     ténue por baixo do cabeçalho. */
  box-shadow: 0 1px 1px rgb(230, 230, 230);
}

.mfr-navbar__interior {
  /* Colunas laterais iguais para a cápsula ficar no centro do cabeçalho,
     com ou sem nada à direita. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Tudo na mesma linha: cápsula à esquerda, logótipo à direita. */
.mfr-navbar__interior > * {
  grid-row: 1;
}

.mfr-navbar__logo {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.mfr-navbar__apoio {
  font-family: var(--mfr-fonte);
  font-size: 12px;
  line-height: 14px;
  color: var(--mfr-texto-suave);
}

.mfr-navbar__logo img {
  height: 49px;
  width: auto;
  display: block;
}

/* A cápsula. */
.mfr-navbar__menu {
  display: flex;
  align-items: center;
  /* `Frame 40`: largura FIXA de 547 com `primaryAxisAlignItems: SPACE_BETWEEN`
     e padding lateral de 40. O `itemSpacing: 32` declarado é ignorado pelo
     space-between — os intervalos reais medidos entre itens são ~58. */
  /* ponytail: min-width em vez de 547 fixo — com o item "Home" a cápsula
     cresce; o gap garante o intervalo mínimo entre itens. */
  grid-column: 1;
  justify-self: start;
  min-width: 547px;
  gap: 32px;
  justify-content: space-between;
  margin: 0;
  padding: 16px 40px;
  list-style: none;
  background: var(--mfr-verde);
  border-radius: var(--mfr-raio-pilula);
  box-sizing: border-box;
}

.mfr-navbar__link {
  display: inline-block;
  /* BRANCO puro, como o cabeçalho renderizado pelo Figma mostra. */
  color: var(--mfr-branco);
  font-family: var(--mfr-fonte);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  /* O Figma tem os rótulos em caixas inconsistentes ("hOME", "estatisticas",
     "OPNIÃO"). Normaliza-se aqui, e não no conteúdo. */
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.mfr-navbar__link:hover,
.mfr-navbar__link:focus-visible,
.mfr-navbar__link[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* O selector de idioma.

   O estilo do nó `14:74` declara a família `Workbench`, mas o cabeçalho
   RENDERIZADO pelo Figma mostra uma sans normal — a fonte declarada não chega
   a ser aplicada no desenho. Vale o que se vê: Work Sans, com o idioma activo
   a negrito escuro e o outro mais claro. */
.mfr-navbar__idiomas {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--mfr-texto-suave);
  font-family: var(--mfr-fonte);
  font-size: 12px;
  line-height: 14px;
}

.mfr-navbar__idiomas a {
  color: var(--mfr-texto-suave);
}

.mfr-navbar__idiomas a:hover {
  color: var(--mfr-texto);
}

/* Escopado dentro de `.mfr-navbar__idiomas` porque a regra genérica
   `.mfr-navbar__idiomas a` tem especificidade (0,1,1) e venceria uma classe
   solta — o mesmo tipo de engano que punha o menu a preto. */
.mfr-navbar__idiomas .mfr-navbar__idioma--activo {
  font-weight: 700;
  color: var(--mfr-texto);
}

.mfr-navbar__hamburguer {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--mfr-raio-pilula);
  background: var(--mfr-verde);
  color: var(--mfr-creme-menu);
  cursor: pointer;
}

.mfr-navbar__hamburguer svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* -----------------------------------------------------------------------------
   Hero editorial da home — nós `11:45` e `14:77`

   Título Newsreader 72/72 a `#111` numa caixa de 607px à esquerda, e o
   parágrafo de apresentação em Work Sans 14/16 encostado à direita (172px).
   -------------------------------------------------------------------------- */

.mfr-hero {
  /* Grelha em vez de flex para o resumo alinhar pelo fundo do <h1> e não do
     bloco título + temas (o __texto é `display: contents`). */
  display: grid;
  grid-template-columns: minmax(0, 620px) auto;
  justify-content: space-between;
  column-gap: 40px;
  /* Título a começar em y=161 e a secção "Mais recentes" em y=387, medidos no
     frame `6:42`. */
  padding-top: 68px;
  padding-bottom: 48px;
}

.mfr-hero__texto {
  display: contents;
}

.mfr-hero__titulo {
  margin: 0;
  font-family: var(--mfr-fonte-display);
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  color: var(--mfr-titulo);
  letter-spacing: -0.01em;
}

.mfr-hero__temas {
  grid-column: 1;
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--mfr-verde);
}

.mfr-hero__resumo {
  grid-column: 2;
  /* Centrado na vertical em relação ao bloco título + temas. */
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  /* Mais estreito que os 172px do nó `14:77` para quebrar em quatro linhas. */
  max-width: 150px;
  font-size: 14px;
  line-height: 16px;
  color: #000;
  /* `textAlignHorizontal: RIGHT`. */
  text-align: right;
}

.mfr-hero__corpo,
.mfr-hero__figura {
  /* O desenho de Mafra não tem hero com imagem — a notícia em destaque vive
     na secção "Mais recentes". Mantidos para as páginas não migradas. */
  display: block;
}

.mfr-hero__figura img {
  width: 100%;
  border-radius: var(--mfr-raio);
  display: block;
}

/* -----------------------------------------------------------------------------
   Cabeçalho de secção — componente `Section divisor` (`36:12`, 1240×19)

   Rótulo verde em Work Sans 600 16/19 e um filete fino que atravessa até à
   direita, com 8px de intervalo.
   -------------------------------------------------------------------------- */

.mfr-seccao {
  display: flex;
  flex-direction: column;
  gap: var(--mfr-gap-seccao);
}

.mfr-seccao__cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mfr-seccao__titulo {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--mfr-fonte);
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  color: var(--mfr-verde);
  /* `textCase: UPPER` no Figma. O texto do nó está em caixa mista ("Mais
     recentes"), por isso quem lê só o conteúdo não percebe — é atributo de
     estilo. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* O filete. */
.mfr-seccao__cabecalho::after {
  content: '';
  flex: 1 1 auto;
  /* `stroke:#25B672` com weight 2 no vector `Line 1` — não é um filete claro. */
  height: 2px;
  background: var(--mfr-verde);
}

.mfr-seccao__ver-mais {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--mfr-verde);
  order: 3;
}

.mfr-seccao__ver-mais:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Botões — instância `50:154` (200×49, raio 10, verde, Work Sans 18/21)
   -------------------------------------------------------------------------- */

.mfr-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--mfr-raio);
  background: var(--mfr-verde);
  color: var(--mfr-branco);
  font-family: var(--mfr-fonte);
  font-size: 18px;
  line-height: 21px;
  font-weight: 400;
  cursor: pointer;
}

.mfr-botao--escuro {
  background: var(--mfr-escuro);
}

/* -----------------------------------------------------------------------------
   Meta e etiquetas
   -------------------------------------------------------------------------- */

/* "31 julho 2026 · 4 min de leitura · Vida Imobiliária" — Lora 400 12/15. */
.mfr-meta {
  font-family: var(--mfr-fonte-titulo);
  font-size: 12px;
  line-height: 15px;
  color: var(--mfr-texto-suave);
}

.mfr-etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--mfr-verde);
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   "Mais recentes" — frame `47:137` (1240×479)

   Duas colunas: destaque de 817px (texto de 408px + imagem de 408×410 com
   raio 10) e uma lista de 393px à direita, com filetes entre entradas.
   -------------------------------------------------------------------------- */

.mfr-grelha-cartoes {
  display: grid;
  grid-template-columns: 817fr 393fr;
  gap: 30px;
  align-items: start;
}

/* O CARTÃO, em três variantes.

   Base (índices, colunas de 284): empilhado — imagem 284×188 em cima, 20px até
   ao texto, título Lora 26/30, 10px até ao resumo (Lora 14/20) e 16px até à
   meta.
     `--largo`     coluna de 605 do índice: imagem 605×410, título 36/40,
                   resumo 18/23
     `--destaque`  destaque da home (`36:209`): DUAS COLUNAS de 408 encostadas,
                   texto à esquerda e imagem à direita, título 36/40, resumo
                   18/23, e a meta empurrada para o fundo da coluna.
   -------------------------------------------------------------------------- */

.mfr-cartao {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mfr-cartao__figura {
  margin: 0;
  aspect-ratio: 284 / 188;
  border-radius: var(--mfr-raio);
  background: var(--mfr-placeholder);
  overflow: hidden;
}

.mfr-cartao__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mfr-cartao__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mfr-cartao__texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mfr-cartao__titulo {
  margin: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  color: var(--mfr-texto);
}

.mfr-cartao__resumo {
  margin: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 14px;
  line-height: 20px;
  color: var(--mfr-texto);
}

/* Coluna larga do índice. */
.mfr-cartao--largo .mfr-cartao__figura {
  aspect-ratio: 605 / 410;
}

.mfr-cartao--largo .mfr-cartao__titulo {
  font-size: 36px;
  line-height: 40px;
}

.mfr-cartao--largo .mfr-cartao__resumo {
  font-size: 18px;
  line-height: 23px;
}

/* Destaque da home: duas colunas de 408, texto à esquerda, imagem à direita. */
.mfr-cartao--destaque {
  display: grid;
  grid-template-columns: 408fr 408fr;
  /* Medido: o texto ocupa 100..508 e a imagem começa exactamente em 508. */
  gap: 0;
  align-items: stretch;
}

.mfr-cartao--destaque .mfr-cartao__figura {
  order: 2;
  aspect-ratio: 408 / 410;
}

.mfr-cartao--destaque .mfr-cartao__corpo {
  order: 1;
  /* A meta fica alinhada com a base da imagem. */
  justify-content: space-between;
}

.mfr-cartao--destaque .mfr-cartao__titulo {
  font-size: 36px;
  line-height: 40px;
}

.mfr-cartao--destaque .mfr-cartao__resumo {
  font-size: 18px;
  line-height: 23px;
}

/* A lista lateral: entradas de 77px separadas por filete, gap 20px. */
.mfr-lista-mercado {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mfr-lista-mercado__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Entradas de 77px com 17px até ao filete (Frame 85, gap 20 sobre vectores
     de altura 0). Os filetes são VERDES de 1px — `stroke:#25B672(1)` nos
     vectores Line 3/4/5 — e não cinzentos. */
  padding-bottom: 17px;
  border-bottom: 1px solid var(--mfr-verde);
}

.mfr-lista-mercado__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mfr-lista-mercado__titulo {
  margin: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  color: var(--mfr-texto);
}

.mfr-lista-mercado__data,
.mfr-lista-mercado__fonte {
  font-family: var(--mfr-fonte-titulo);
  font-size: 12px;
  line-height: 15px;
  color: var(--mfr-texto-suave);
}

/* -----------------------------------------------------------------------------
   Destaque de opinião da home — instância `36:245` (1240×329)

   Cartão QUASE PRETO (#231F20), raio 10, padding 60. Avatar redondo de 209px,
   gap 20, e à direita o nome a verde (Nunito 700 16/22), a pull-quote em Lora
   700 36/40 sobre `#F3F3F3` e a meta.
   -------------------------------------------------------------------------- */

.mfr-opiniao-destaque {
  transition: background-color 0.15s ease;
  display: flex;
  /* O avatar tem 209 e a coluna de texto 189; no desenho o texto fica 10px
     mais abaixo, ou seja centrado (`counterAxisAlignItems: CENTER`). */
  align-items: center;
  gap: 20px;
  padding: 60px;
  border-radius: var(--mfr-raio);
  background: var(--mfr-escuro);
  color: var(--mfr-texto-claro);
}

.mfr-opiniao-destaque__avatar {
  flex: 0 0 209px;
  width: 209px;
  height: 209px;
  border-radius: 50%;
  background: var(--mfr-placeholder);
  object-fit: cover;
  display: block;
}

.mfr-opiniao-destaque__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.mfr-opiniao-destaque__autor {
  font-family: var(--mfr-fonte-autor);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--mfr-verde-acento);
}

.mfr-opiniao-destaque__texto {
  margin: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  color: var(--mfr-texto-claro);
}

.mfr-opiniao-destaque .mfr-meta {
  color: var(--mfr-texto-claro);
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   "Mercado Imobiliário" na home — frame `47:139` (605×482)

   Três entradas de 604×123: miniatura 182×123 com raio 10, gap 20, e texto
   com título Lora 700 20/24, descrição Work Sans 14/20 e meta.
   -------------------------------------------------------------------------- */

.mfr-grelha-opiniao {
  /* Serve dois sítios com a mesma medida: as duas colunas de baixo da home
     (Mercado 605 + Painel CI 605, x=100 e x=735 → 30 de intervalo) e a grelha
     do índice de opiniões (dois cartões de 604). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.mfr-opiniao {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 22px;
}

.mfr-opiniao__avatar {
  flex: 0 0 182px;
  width: 182px;
  height: 123px;
  border-radius: var(--mfr-raio);
  background: var(--mfr-borda);
  object-fit: cover;
  display: block;
}

.mfr-opiniao__interior {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mfr-opiniao__titulo {
  margin: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--mfr-texto);
}

.mfr-opiniao__resumo,
.mfr-opiniao__texto {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--mfr-texto-suave);
}

.mfr-opiniao__nome {
  font-family: var(--mfr-fonte-autor);
  font-weight: 700;
  color: var(--mfr-verde-acento);
}

.mfr-opiniao__cargo {
  color: var(--mfr-texto-suave);
}

/* Cartão do índice de opiniões — componente `Opnião Card` (`69:657`).

   604×274, raio 20, padding 40, contorno de 1px #D9D9D9 e SEM fundo (assenta
   no creme da página). Dentro: coluna de autor de 134 (avatar redondo de 134,
   nome e cargo CENTRADOS a PRETO em Nunito) e, a 40px, o texto de 350 com
   título em NEWSREADER 700 26/26, resumo em Work Sans 18/21 e meta em Nunito
   400 12/16.
   -------------------------------------------------------------------------- */
.mfr-opiniao--contorno {
  border: 1px solid var(--mfr-borda);
  border-radius: 20px;
  padding: 40px;
  gap: 40px;
  background: transparent;
}

.mfr-opiniao--contorno .mfr-opiniao__autor {
  flex: 0 0 134px;
  width: 134px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.mfr-opiniao--contorno .mfr-opiniao__avatar {
  width: 134px;
  height: 134px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.mfr-opiniao--contorno .mfr-opiniao__nome {
  font-family: var(--mfr-fonte-autor);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: #000;
}

.mfr-opiniao--contorno .mfr-opiniao__cargo {
  font-family: var(--mfr-fonte-autor);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: #000;
}

.mfr-opiniao--contorno .mfr-opiniao__interior {
  gap: 16px;
}

.mfr-opiniao--contorno .mfr-opiniao__titulo {
  font-family: var(--mfr-fonte-display);
  font-size: 26px;
  line-height: 26px;
}

.mfr-opiniao--contorno .mfr-opiniao__resumo {
  font-size: 18px;
  line-height: 21px;
}

.mfr-opiniao--contorno .mfr-meta {
  font-family: var(--mfr-fonte-autor);
  font-size: 12px;
  line-height: 16px;
}

/* -----------------------------------------------------------------------------
   "Painel CI · Indicadores do Trimestre" — frame `47:144` (605×374)

   Cartão creme de 605×216, raio 10, padding 40/30, com o rótulo "Indicadores
   Rápidos" a verde e TRÊS linhas rótulo/valor separadas por filete. Valores a
   verde quando sobem e a vermelho quando descem. Botão por baixo, gap 40.
   -------------------------------------------------------------------------- */

.mfr-painel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.mfr-grelha-indicadores {
  display: flex;
  flex-direction: column;
  /* `align-self` porque o pai `.mfr-painel` alinha a `flex-start` (para o
     botão não esticar) e sem isto o cartão encolhia para o conteúdo. */
  align-self: stretch;
  gap: 10px;
  padding: 40px 30px;
  border-radius: var(--mfr-raio);
  background: var(--mfr-creme);
  /* O cartão tem a MESMA cor do fundo da página; o que o destaca é uma SOMBRA,
     que eu não via porque a minha ferramenta não lia os `effects` do Figma:
     DROP_SHADOW rgba(0,0,0,0.25), deslocamento 0/2, raio 8. Sem ela o cartão
     desaparecia — foi o que aconteceu quando tirei o contorno inventado. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mfr-grelha-indicadores__titulo {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  color: var(--mfr-verde);
  /* `CASE:UPPER`, como os rótulos de secção. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mfr-indicador {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  /* Filetes VERDES de 1px (`stroke:#25B672`), como na lista lateral da home. */
  border-top: 1px solid var(--mfr-verde);
}

.mfr-indicador:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.mfr-indicador__rotulo {
  font-size: 16px;
  line-height: 19px;
  color: var(--mfr-texto-suave);
}

.mfr-indicador__valor {
  font-size: 18px;
  line-height: 21px;
  font-weight: 500;
  color: var(--mfr-verde);
  white-space: nowrap;
}

.mfr-indicador__variacao {
  font-size: 12px;
  line-height: 15px;
  color: var(--mfr-texto-suave);
}

.mfr-indicador--desce .mfr-indicador__valor {
  color: var(--mfr-negativo);
}

/* -----------------------------------------------------------------------------
   Cabeçalho das páginas de índice — frame `50:295` (1240×52)

   Título Newsreader 700 52/52 à esquerda e subtítulo Work Sans 14/16 à
   direita, numa caixa estreita.
   -------------------------------------------------------------------------- */

.mfr-cabecalho-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  /* Título em y=191 no frame `50:156`, com o cabeçalho a ocupar 93. */
  padding-top: 98px;
  /* Título acaba em 243, primeira imagem em 301. */
  padding-bottom: 58px;
}

.mfr-cabecalho-pagina__titulo {
  margin: 0;
  font-family: var(--mfr-fonte-display);
  font-size: 52px;
  line-height: 52px;
  font-weight: 700;
  color: var(--mfr-titulo);
}

.mfr-cabecalho-pagina__subtitulo {
  margin: 0;
  /* Mesmo tratamento do parágrafo da home: caixa de 172px, `ALIGN:RIGHT`. */
  max-width: 172px;
  font-size: 14px;
  line-height: 16px;
  color: #000;
  text-align: right;
}

/* -----------------------------------------------------------------------------
   Grelha dos índices — frame `50:156`

   Coluna grande de 605px com cartões de 605×597 (imagem 605×410) e duas
   colunas de 284px com cartões de 284×399 (imagem 284×188).
   -------------------------------------------------------------------------- */

.mfr-grelha-cartoes--indice {
  display: grid;
  grid-template-columns: 605fr 284fr 284fr;
  gap: 33px;
  align-items: start;
}



/* Duas áreas em paralelo: coluna de 605 com cartões grandes e, ao lado, duas
   colunas de 284 com os pequenos. As alturas de cartão diferem (597 vs 399),
   por isso NÃO se alinham em linhas — são fluxos independentes, como no
   desenho. Intervalo de 32px entre a coluna larga e a área estreita. */
.mfr-indice {
  display: grid;
  grid-template-columns: 605fr 603fr;
  gap: 32px;
  align-items: start;
}

.mfr-indice__larga {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mfr-indice__estreita {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 35px;
  align-items: start;
}

/* -----------------------------------------------------------------------------
   Paginação — grupo `54:606`

   Números; o activo num círculo verde de 27px com o algarismo a branco.
   (O Loures usa um botão "VER MAIS"; o desenho de Mafra volta aos números.)
   -------------------------------------------------------------------------- */

.mfr-paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Números a 20/23 com ~21px entre centros (x=639, 668, 701, 735, 768). */
  gap: 18px;
  padding: 79px 0 0;
  font-family: var(--mfr-fonte);
  font-size: 20px;
  line-height: 23px;
}

.mfr-paginacao a,
.mfr-paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #000;
}

.mfr-paginacao .activo,
.mfr-paginacao [aria-current='page'] {
  background: var(--mfr-verde);
  color: var(--mfr-branco);
}

/* -----------------------------------------------------------------------------
   Estatísticas — frame `60:985`

   Duas colunas de ~604, 23px entre colunas e 52px entre linhas. O título do
   gráfico é WORK SANS 500 22px a preto (não a serif dos artigos), e o gráfico
   fica sem fundo nem cantos arredondados — assenta directamente no creme.
   -------------------------------------------------------------------------- */

.mfr-grelha-graficos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px 23px;
}

/* "Carregar mais": cada página carregada traz a sua própria grelha. */
.mfr-grelha-graficos + .mfr-grelha-graficos {
  margin-top: 52px;
}

.mfr-carregar-mais {
  display: flex;
  justify-content: center;
  padding: 79px 0 0;
}

.mfr-grafico {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.mfr-grafico__titulo {
  margin: 0;
  font-family: var(--mfr-fonte);
  font-size: 22px;
  line-height: 38px;
  font-weight: 500;
  color: #000;
}

.mfr-grafico__figura {
  margin: 0;
}

.mfr-grafico__figura img {
  width: 100%;
  display: block;
}

/* -----------------------------------------------------------------------------
   Artigo — frames `54:607` (notícia) e `64:1127` (opinião)

   Cabeçalho CENTRADO numa caixa de 816 (rótulo, título Newsreader 52/52, meta,
   entrada e imagem 816×456), e depois duas colunas: corpo de 816 encostado à
   esquerda (x=101) e lateral de 182 em x=1158 — 241px de intervalo, que é o que
   o desenho tem.
   -------------------------------------------------------------------------- */

.mfr-artigo {
  padding-top: 43px;
}

.mfr-artigo__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 816px;
  margin: 0 auto;
  padding-bottom: 50px;
  text-align: center;
}

.mfr-artigo__cabecalho .mfr-seccao__titulo {
  margin: 0 0 21px;
}

.mfr-artigo__titulo {
  margin: 0;
  font-family: var(--mfr-fonte-display);
  font-size: 52px;
  line-height: 52px;
  font-weight: 700;
  color: var(--mfr-titulo);
}

.mfr-artigo__meta {
  margin: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 12px;
  line-height: 15px;
  color: var(--mfr-texto-suave);
}

/* Entrada do detalhe de notícia — Work Sans 18/21 a #757575. */
.mfr-artigo__entrada {
  font-size: 18px;
  line-height: 21px;
  color: var(--mfr-texto-suave);
}

.mfr-artigo__figura {
  width: 100%;
  margin: 32px 0 0;
  aspect-ratio: 816 / 456;
  border-radius: var(--mfr-raio);
  overflow: hidden;
  background: var(--mfr-borda);
}

/* ponytail: fora do <figure> porque este tem aspect-ratio + overflow:hidden */
.mfr-artigo__legenda {
  margin: -10px 0 0; /* anula parte do gap de 18px do cabeçalho → ~8px da imagem */
  font-family: var(--mfr-fonte-titulo);
  font-size: 12px;
  line-height: 15px;
  color: var(--mfr-texto-suave);
}

.mfr-artigo__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Opinião: avatar redondo de 209 centrado e o autor por baixo. */
.mfr-artigo__avatar {
  display: block;
  width: 209px;
  height: 209px;
  margin: 32px auto 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mfr-placeholder);
}

.mfr-artigo__autor-nome {
  margin: 0;
  font-family: var(--mfr-fonte-autor);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--mfr-verde-acento);
}

.mfr-artigo__principal {
  display: grid;
  grid-template-columns: 816fr 182fr;
  gap: 241px;
  align-items: start;
  padding-bottom: var(--mfr-gap-entre-seccoes);
}

/* Corpo em Newsreader 22/28 — a serif de display, não a Lora. */
.mfr-artigo__corpo {
  font-family: var(--mfr-fonte-display);
  font-size: 22px;
  line-height: 28px;
  color: var(--mfr-texto);
}

.mfr-artigo__corpo p {
  margin: 0 0 28px;
}

.mfr-artigo__lateral {
  display: flex;
  flex-direction: column;
  gap: 55px;
}

/* -----------------------------------------------------------------------------
   Perfil de autor e partilha
   -------------------------------------------------------------------------- */

.mfr-autor-perfil {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mfr-autor-perfil__avatar {
  width: 209px;
  height: 209px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mfr-placeholder);
  display: block;
}

.mfr-autor-perfil__nome {
  font-family: var(--mfr-fonte-autor);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--mfr-verde-acento);
}

.mfr-autor-perfil__cargo {
  font-family: var(--mfr-fonte-autor);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--mfr-texto-suave);
}

.mfr-autor-perfil__meta {
  font-family: var(--mfr-fonte-titulo);
  font-size: 12px;
  line-height: 15px;
  color: var(--mfr-texto-suave);
}

.mfr-partilha {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mfr-partilha__rotulo {
  font-family: var(--mfr-fonte-autor);
  font-size: 16px;
  line-height: 22px;
  color: var(--mfr-texto-suave);
}

.mfr-partilha__icones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mfr-partilha__icones img {
  width: 24px;
  height: 24px;
  display: block;
}

/* -----------------------------------------------------------------------------
   Lateral: relacionadas — `Frame 143` (notícia) e `Frame 144` (opinião)

   NÃO têm miniatura: é só título (Lora 700 20/24), meta ou autor, e um filete
   VERDE de 1px entre entradas. A miniatura de 80px era do Loures.
   -------------------------------------------------------------------------- */

.mfr-relacionadas {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mfr-relacionadas__titulo {
  margin: 0;
  font-family: var(--mfr-fonte);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mfr-verde);
}

.mfr-relacionada {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--mfr-verde);
}

.mfr-relacionada:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mfr-relacionada__titulo {
  font-family: var(--mfr-fonte-titulo);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--mfr-texto);
}

.mfr-relacionada__autor {
  font-family: var(--mfr-fonte-autor);
  font-size: 14px;
  line-height: 19px;
  font-weight: 700;
  color: var(--mfr-verde-acento);
}

/* -----------------------------------------------------------------------------
   Footer — frame `45:129` (1377×395)

   NÃO é full-bleed: é um cartão verde de raio 10, recuado 32px de cada lado,
   com padding 60/80 e gap 74. À esquerda o wordmark em Newsreader 700 53/53 a
   branco e o bloco "Uma iniciativa" / "Com apoio:"; à direita Navegação / Contactos /
   Segue-nos. Copyright em Work Sans 12/14 sobre `#F3F3F3`.
   -------------------------------------------------------------------------- */

.mfr-footer {
  max-width: calc(1377px + 2 * var(--mfr-margem-footer));
  margin: 0 auto;
  /* Espaço entre o conteúdo das páginas e o cartão do footer. */
  padding: clamp(32px, 4.5vw, 60px) var(--mfr-margem-footer) var(--mfr-margem-footer);
  box-sizing: border-box;
}

.mfr-footer__interior {
  display: flex;
  flex-direction: column;
  gap: 74px;
  padding: 60px 80px;
  border-radius: var(--mfr-raio);
  background: var(--mfr-verde);
  color: var(--mfr-branco);
}

.mfr-footer__grelha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.mfr-footer__marca {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 480px;
}

.mfr-footer__nome {
  margin: 0;
  font-family: var(--mfr-fonte-display);
  font-size: 53px;
  line-height: 53px;
  font-weight: 700;
  color: var(--mfr-branco);
}

.mfr-footer__descricao {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--mfr-branco);
  opacity: 0.9;
}

/* "Uma iniciativa" + logótipo da CI e, a 56px, "Com apoio:" + município. */
.mfr-footer__parceria {
  /* Grelha 2×2: rótulos na mesma linha e logótipos centrados na mesma linha,
     apesar das alturas diferentes (31px vs 59px). */
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  justify-items: center;
  column-gap: 56px;
  row-gap: 6px;
}

.mfr-footer__parceria-item {
  display: contents;
}

.mfr-footer__wordmark {
  height: 59px;
  width: auto;
  display: block;
}

.mfr-footer__logo-ci {
  height: 31px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.mfr-footer__parceria-rotulo {
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: var(--mfr-branco);
}

.mfr-footer__coluna {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mfr-footer__colunas {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 376px;
}

.mfr-footer__coluna-titulo {
  margin: 0;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  /* `CASE:UPPER` em todos os rótulos do footer. */
  text-transform: uppercase;
  color: var(--mfr-branco);
}

.mfr-footer__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mfr-footer__link {
  /* Work Sans 500 14/16 CASE:UPPER, gap 12 entre links. */
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: var(--mfr-branco);
  text-transform: uppercase;
}

.mfr-footer__link:hover {
  text-decoration: underline;
}

.mfr-footer__contactos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--mfr-branco);
}

.mfr-footer__redes {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mfr-footer__redes img {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(1);
}

.mfr-footer__copyright {
  margin: 0;
  font-size: 12px;
  line-height: 14px;
  color: var(--mfr-texto-claro);
  /* `ALIGN:CENTER` e `CASE:UPPER` no nó `36:74`. */
  text-align: center;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Blocos que o desenho de Mafra NÃO tem

   Ficam neutralizados em vez de removidos, porque os templates herdados do
   Loures ainda lhes podem tocar. Se ao fim da Fase 3 nada os referenciar,
   saem daqui.
   -------------------------------------------------------------------------- */

.mfr-topbar,
.mfr-topbar__texto,
.mfr-newsletter {
  display: none;
}

/* -----------------------------------------------------------------------------
   Páginas fora do Figma (allauth, pesquisa, autor, Stat, perfil)

   O desenho não as cobre. Levam o mínimo para não parecerem estranhas e para
   se poder tirar o Bootstrap da `base.html`.
   -------------------------------------------------------------------------- */

.mfr-simples {
  max-width: 620px;
  padding: 56px 0 96px;
}

.mfr-simples h1 {
  margin: 0 0 24px;
  font-family: var(--mfr-fonte-display);
  font-size: 44px;
  line-height: 48px;
  font-weight: 700;
  color: var(--mfr-titulo);
}

.mfr-simples h2 {
  margin: 32px 0 12px;
  font-family: var(--mfr-fonte-titulo);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}

.mfr-simples p,
.mfr-simples li {
  font-size: 14px;
  line-height: 22px;
  color: var(--mfr-texto);
}

.mfr-simples label {
  display: block;
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mfr-texto);
}

.mfr-simples input[type='text'],
.mfr-simples input[type='email'],
.mfr-simples input[type='password'],
.mfr-simples input[type='search'],
.mfr-simples select,
.mfr-simples textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mfr-borda);
  border-radius: var(--mfr-raio);
  background: var(--mfr-branco);
  font-family: var(--mfr-fonte);
  font-size: 14px;
  box-sizing: border-box;
}

.mfr-simples input:focus,
.mfr-simples select:focus,
.mfr-simples textarea:focus {
  outline: 2px solid var(--mfr-verde);
  outline-offset: 1px;
}

.mfr-simples button,
.mfr-simples input[type='submit'],
.mfr-simples .botao {
  margin-top: 20px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--mfr-raio);
  background: var(--mfr-verde);
  color: var(--mfr-branco);
  font-family: var(--mfr-fonte);
  font-size: 16px;
  cursor: pointer;
}

.mfr-simples a {
  color: var(--mfr-verde);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mfr-simples .errorlist {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--mfr-negativo);
  font-size: 13px;
}

/* Resultados de pesquisa reutilizam a lista de mercado. */
.mfr-simples--largo {
  max-width: none;
}


/* -----------------------------------------------------------------------------
   ESTADOS DE HOVER

   Estão no ficheiro do Figma como VARIANTES de componente, que é onde eu não
   tinha ido procurar: `Notícias` (69:349) tem `big`/`big hover` e
   `small`/`small hover`. A diferença entre normal e hover é UMA só — o título
   passa de `#1E1E1E` para o verde `#25B672`. Não há sublinhado, e nem o
   resumo nem a meta mudam.

   O sublinhado a preto que aqui estava antes era invenção minha, e ainda por
   cima nunca chegava a aparecer por causa do `body.mfr a:hover` corrigido
   acima.

   EXCEPÇÃO NÃO IMPLEMENTADA: a variante 2 do `Frame 114` (o cartão escuro de
   opinião da home) muda o nome do autor de #00B66D para #231F20 — que é a cor
   de fundo do próprio cartão, ou seja, o texto DESAPARECE. É um lapso do
   ficheiro, não um estado utilizável, por isso não se replica.
   -------------------------------------------------------------------------- */

/* Índices e listas de mercado: verde de marca. */
.mfr-cartao:hover .mfr-cartao__titulo,
.mfr-opiniao:hover .mfr-opiniao__titulo,
.mfr-relacionada:hover .mfr-relacionada__titulo,
.mfr-grafico:hover .mfr-grafico__titulo {
  color: var(--mfr-verde);
  text-decoration: none;
}

/* Componentes da HOME — `Notícia Destaque home` e `Notícia home` — usam o
   verde mais escuro. É inconsistente com os índices, mas é o que está
   desenhado. */
.mfr-cartao--destaque:hover .mfr-cartao__titulo,
.mfr-lista-mercado__item:hover .mfr-lista-mercado__titulo {
  color: var(--mfr-verde-hover);
  text-decoration: none;
}

/* O BANNER de opinião da home (`Frame 114`) inverte-se por completo ao passar
   o rato: o cartão passa de #231F20 a VERDE e o nome do autor de verde a
   #231F20. A citação e a meta ficam claras nos dois estados.

   Tinha descartado esta variante como lapso do ficheiro porque comparei só as
   cores dos TEXTOS: via o autor a ficar da cor do fundo e concluí que
   desaparecia. Não reparei que o FUNDO mudava ao mesmo tempo. A comparação
   passou a incluir contentores. */
.mfr-opiniao-destaque:hover {
  background: var(--mfr-verde);
}

.mfr-opiniao-destaque:hover .mfr-opiniao-destaque__autor {
  color: var(--mfr-escuro);
}

/* Além da cor do título, o hover traz SOMBRAS — e isso só apareceu depois de
   a ferramenta passar a ler os `effects`:

     imagem do cartão   DROP_SHADOW 0/2 raio 8  rgba(0,0,0,0.25)
     cartão de opinião  idem, no próprio cartão
     botão              DROP_SHADOW 0/4 raio 4  rgba(0,0,0,0.25)

   O botão NÃO escurece — ganha sombra. O `filter: brightness` que aqui estava
   era invenção minha. */
.mfr-cartao:hover .mfr-cartao__figura {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mfr-opiniao--contorno:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mfr-botao:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* -----------------------------------------------------------------------------
   Responsivo

   O ficheiro só tem desktop (1440) e mobile (393). 1024px é uma degradação
   intermédia escrita à mão para o intervalo que o desenho não cobre.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --mfr-margem: 32px;
    --mfr-gap-entre-seccoes: 64px;
  }

  .mfr-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 40px;
  }

  .mfr-hero__resumo {
    grid-column: 1;
    grid-row: auto;
    margin-top: 20px;
  }

  .mfr-hero__titulo {
    font-size: 48px;
  }

  .mfr-hero__resumo,
  .mfr-cabecalho-pagina__subtitulo {
    max-width: none;
  }

  .mfr-cabecalho-pagina {
    flex-direction: column;
    gap: 16px;
    padding-top: 40px;
  }

  .mfr-cabecalho-pagina__titulo {
    font-size: 40px;
    line-height: 44px;
  }

  .mfr-grelha-cartoes,
  .mfr-grelha-opiniao,
  .mfr-grelha-graficos,
  .mfr-artigo__principal,
  .mfr-artigo--opiniao .mfr-artigo__principal {
    grid-template-columns: minmax(0, 1fr);
  }

  .mfr-grelha-cartoes--indice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mfr-grelha-cartoes--indice .mfr-cartao:first-child {
    grid-column: 1 / -1;
  }

  .mfr-opiniao-destaque {
    flex-direction: column;
    padding: 32px;
  }

  .mfr-opiniao-destaque__texto {
    font-size: 28px;
    line-height: 34px;
  }

  .mfr-artigo__titulo {
    font-size: 40px;
    line-height: 44px;
  }

  .mfr-footer__grelha {
    flex-direction: column;
    gap: 40px;
  }

  .mfr-footer__interior {
    padding: 40px;
    gap: 40px;
  }

  .mfr-footer__nome {
    font-size: 40px;
    line-height: 44px;
  }

  .mfr-footer__colunas {
    min-width: 0;
  }
}

/* Mobile — frames de 393px. A cápsula de navegação dá lugar ao hambúrguer e
   o menu abre por baixo, mantendo o verde. Frame `74:1623` (Menu Mobile). */
@media (max-width: 767px) {
  :root {
    --mfr-margem: var(--mfr-margem-mobile);
    --mfr-margem-footer: 12px;
  }

  .mfr-navbar__hamburguer {
    display: inline-flex;
    grid-column: 1;
    justify-self: start;
  }

  .mfr-navbar__menu {
    display: none;
    min-width: 0;
    position: absolute;
    left: var(--mfr-margem-mobile);
    right: var(--mfr-margem-mobile);
    top: 84px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 28px;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  }

  .mfr-navbar__menu--aberto {
    display: flex;
  }

  .mfr-hero__titulo {
    font-size: 36px;
  }

  .mfr-cartao {
    grid-template-columns: minmax(0, 1fr);
  }

  .mfr-cartao__figura {
    order: 1;
    aspect-ratio: 16 / 10;
  }

  .mfr-cartao__corpo {
    order: 2;
  }

  .mfr-grelha-cartoes--indice {
    grid-template-columns: minmax(0, 1fr);
  }

  .mfr-cartao__titulo,
  .mfr-grelha-cartoes--indice .mfr-cartao:first-child .mfr-cartao__titulo {
    font-size: 22px;
    line-height: 26px;
  }

  .mfr-opiniao {
    flex-direction: column;
  }

  .mfr-opiniao__avatar {
    width: 100%;
    flex-basis: auto;
    height: auto;
    aspect-ratio: 182 / 123;
  }

  .mfr-opiniao-destaque__avatar {
    flex-basis: 140px;
    width: 140px;
    height: 140px;
  }

  .mfr-opiniao-destaque__texto {
    font-size: 24px;
    line-height: 30px;
  }

  .mfr-artigo__titulo,
  .mfr-artigo--opiniao .mfr-artigo__titulo {
    font-size: 32px;
    line-height: 36px;
  }

  .mfr-autor-perfil__avatar {
    width: 140px;
    height: 140px;
  }

  .mfr-footer__nome {
    font-size: 32px;
    line-height: 36px;
  }

  .mfr-footer__interior {
    padding: 28px 24px;
  }
}

/* -----------------------------------------------------------------------------
   Camada de compatibilidade — restos de Bootstrap

   O Bootstrap saiu da `base.html`, mas as páginas fora do Figma ainda trazem
   classes utilitárias suas no markup herdado do Gaia (`row`, `col-*`, `btn`,
   `form-control`, `container`). Em vez de reescrever dezenas de templates de
   allauth, dá-se-lhes um significado mínimo aqui. É deliberadamente pequeno:
   se uma destas classes precisar de mais do que isto, o template é que deve
   passar para o design system.
   -------------------------------------------------------------------------- */

.mfr-simples .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mfr-simples [class^='col-'],
.mfr-simples [class*=' col-'] {
  flex: 1 1 240px;
  min-width: 0;
}

.mfr-simples .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  margin: 4px 6px 4px 0;
  border: 0;
  border-radius: var(--mfr-raio);
  background: var(--mfr-verde);
  color: var(--mfr-branco);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.mfr-simples .btn-secondary,
.mfr-simples .btn-outline-primary {
  background: transparent;
  border: 1px solid var(--mfr-verde);
  color: var(--mfr-verde);
}

.mfr-simples .btn-danger {
  background: var(--mfr-negativo);
  color: var(--mfr-branco);
}

.mfr-simples .form-control,
.mfr-simples .form-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mfr-borda);
  border-radius: var(--mfr-raio);
  background: var(--mfr-branco);
  font-family: var(--mfr-fonte);
  font-size: 14px;
  box-sizing: border-box;
}

.mfr-simples .alert {
  padding: 12px 16px;
  border-radius: var(--mfr-raio);
  background: rgba(37, 182, 114, 0.1);
  color: var(--mfr-texto);
}

.mfr-simples .alert-danger {
  background: rgba(236, 28, 36, 0.1);
  color: var(--mfr-negativo);
}

/* Newsletter — campo de subscrição no rodapé
   O rodapé é um cartão verde: o texto vai em creme e o botão inverte-se
   (fundo claro, letra verde), senão desaparece no fundo. */
.mfr-newsletter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(252, 250, 248, 0.3);
}

.mfr-newsletter__titulo {
  font: 700 14px/19px var(--mfr-fonte);
  color: var(--mfr-creme);
  text-transform: uppercase;
}

.mfr-newsletter__texto {
  font: 400 16px/22px var(--mfr-fonte);
  color: var(--mfr-texto-claro);
}

.mfr-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 520px;
}

.mfr-newsletter__etiqueta,
.mfr-newsletter__isco {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mfr-newsletter__campo {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 16px;
  font: 400 16px/19px var(--mfr-fonte);
  color: var(--mfr-texto);
  background: var(--mfr-branco);
  border: 0;
  border-radius: 6px;
}

.mfr-newsletter__campo:focus-visible {
  outline: 2px solid var(--mfr-creme);
  outline-offset: 2px;
}

.mfr-newsletter__botao {
  padding: 12px 24px;
  font: 700 14px/19px var(--mfr-fonte);
  color: var(--mfr-verde-hover);
  text-transform: uppercase;
  background: var(--mfr-creme);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mfr-newsletter__botao:hover {
  background: var(--mfr-creme-menu);
}

.mfr-newsletter__consentimento {
  max-width: 520px;
  font: 400 12px/17px var(--mfr-fonte);
  color: rgba(252, 250, 248, 0.85);
}

/* Modal de resultado da subscrição da newsletter — igual ao do Matosinhos. */
.mfr-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 30, 30, 0.45);
}

.mfr-modal__caixa {
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  background: var(--mfr-branco);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.mfr-modal__corpo {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px;
}

.mfr-modal__icone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--mfr-branco);
  border-radius: 50%;
}

.mfr-modal__icone svg {
  width: 22px;
  height: 22px;
}

.mfr-modal__icone--ok {
  background: #14ae5c;
}

.mfr-modal__icone--erro {
  background: #ec221f;
}

.mfr-modal__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mfr-modal__titulo {
  margin: 0;
  font: 800 20px/27px var(--mfr-fonte);
  color: var(--mfr-texto);
}

.mfr-modal__mensagem {
  margin: 0;
  font: 400 16px/22px var(--mfr-fonte);
  color: var(--mfr-texto);
}

.mfr-modal__rodape {
  display: flex;
  justify-content: flex-end;
  padding: 16px 28px;
  background: var(--mfr-creme);
}

.mfr-modal__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 12px 28px;
  font: 700 14px/19px var(--mfr-fonte);
  color: var(--mfr-branco);
  text-decoration: none;
  background: var(--mfr-verde-hover);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.mfr-modal__botao:hover,
.mfr-modal__botao:focus-visible {
  background: var(--mfr-verde);
}

/* -----------------------------------------------------------------------------
   Operadores de mercado — carrossel de agentes na home, chamada para o
   formulário e a página /operadores/.

   Fora do Figma de Mafra: é o layout do Observatório de Matosinhos com os
   tokens daqui (verde em vez de ciano/petróleo, raio 10, Work Sans).
   -------------------------------------------------------------------------- */

/* Só para leitores de ecrã (campo isco do formulário). */
.mfr-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mfr-seccao__sub {
  /* cola-se ao cabeçalho: o gap da secção (50px) é para o conteúdo */
  margin: -34px 0 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--mfr-texto-suave);
}

/* Filtro por tipo: "A | B | C" à direita, depois do filete do cabeçalho. */
.mfr-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  order: 3;
}

.mfr-filtro {
  padding: 3px 0;
  font: 500 13px/1 var(--mfr-fonte);
  color: var(--mfr-texto);
  background: none;
  border: 0;
  cursor: pointer;
}

.mfr-filtro:not(:last-child) {
  /* o separador fica agarrado ao item anterior: nunca abre uma linha */
  padding-right: 8px;
  margin-right: 8px;
  border-right: 1px solid var(--mfr-texto);
}

.mfr-filtro:hover,
.mfr-filtro.ativo {
  color: var(--mfr-verde);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mfr-filtro.ativo {
  font-weight: 700;
}

.mfr-filtro:focus-visible {
  outline: 2px solid var(--mfr-verde);
  outline-offset: 2px;
}

.mfr-grelha-mediadores {
  --mfr-gap: 20px;
  --mfr-visiveis: 5;
  /* 2 linhas × 5 visíveis; as restantes colunas passam com as setas */
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--mfr-visiveis) - 1) * var(--mfr-gap)) / var(--mfr-visiveis));
  gap: var(--mfr-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mfr-grelha-mediadores::-webkit-scrollbar {
  display: none;
}

.mfr-grelha-mediadores > li {
  scroll-snap-align: start;
}

.mfr-grelha-mediadores > li[hidden] {
  display: none;
}

.mfr-carrossel {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mfr-carrossel .mfr-grelha-mediadores {
  flex: 1;
  min-width: 0;
}

.mfr-carrossel__seta {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--mfr-verde);
  background: var(--mfr-branco);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.mfr-carrossel__seta:hover:not(:disabled),
.mfr-carrossel__seta:focus-visible {
  color: var(--mfr-branco);
  background: var(--mfr-verde);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.mfr-carrossel__seta:focus-visible {
  outline: 2px solid var(--mfr-verde);
  outline-offset: 3px;
}

.mfr-carrossel__seta:disabled {
  opacity: 0.3;
  box-shadow: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .mfr-carrossel__seta {
    transition: none;
  }
}

.mfr-carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: -30px;
}

.mfr-carrossel__pontos button {
  width: 10px;
  height: 10px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--mfr-placeholder);
  border-radius: 50%;
  cursor: pointer;
}

.mfr-carrossel__pontos button.ativo {
  background: var(--mfr-verde);
  border-color: var(--mfr-verde);
}

.mfr-mediador {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.3;
  color: var(--mfr-texto);
  text-decoration: none;
}

.mfr-mediador__img {
  position: relative;
  display: block;
  aspect-ratio: 7 / 6; /* fixo: o logo não pode esticar nem encolher a caixa */
  margin-bottom: 14px;
  background: var(--mfr-branco);
  border: 1px solid var(--mfr-borda);
  border-radius: var(--mfr-raio);
}

.mfr-mediador__img img {
  position: absolute; /* fora do fluxo: a altura vem só do aspect-ratio */
  inset: 0;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.mfr-mediador__tipo {
  padding-inline: 14px;
  font-size: 12px;
  color: var(--mfr-texto-suave);
}

.mfr-mediador__nome {
  padding-inline: 14px;
  font-family: var(--mfr-fonte-titulo);
  font-size: 16px;
  font-weight: 700;
}

a.mfr-mediador:hover .mfr-mediador__nome {
  color: var(--mfr-verde-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mfr-mediador__n {
  padding-inline: 14px;
  font-size: 14px;
  color: var(--mfr-texto-suave);
}

/* Chamada para o formulário. Sem o modificador é uma faixa creme com botão;
   `--discreto` (o usado na home) é uma linha simples sob o carrossel. */
.mfr-cta-operadores {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px;
  border-radius: var(--mfr-raio);
  background: var(--mfr-creme-menu);
  color: var(--mfr-texto);
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.mfr-cta-operadores:hover,
.mfr-cta-operadores:focus-visible {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mfr-cta-operadores__texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mfr-cta-operadores__texto strong {
  font-family: var(--mfr-fonte-titulo);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.mfr-cta-operadores__texto span {
  font-size: 16px;
  line-height: 22px;
}

.mfr-cta-operadores__botao {
  flex: none;
}

.mfr-cta-operadores:hover .mfr-cta-operadores__botao {
  background: var(--mfr-verde-hover);
}

.mfr-cta-operadores--discreto {
  padding: 20px 0 0;
  border-top: 1px solid var(--mfr-borda);
  border-radius: 0;
  background: none;
}

.mfr-cta-operadores--discreto:hover,
.mfr-cta-operadores--discreto:focus-visible {
  box-shadow: none;
}

.mfr-cta-operadores--discreto .mfr-cta-operadores__texto {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.mfr-cta-operadores--discreto .mfr-cta-operadores__texto strong {
  font-family: var(--mfr-fonte);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.mfr-cta-operadores--discreto .mfr-cta-operadores__texto span {
  font-size: 15px;
  color: var(--mfr-texto-suave);
}

.mfr-cta-operadores--discreto .mfr-cta-operadores__botao,
.mfr-cta-operadores--discreto:hover .mfr-cta-operadores__botao {
  padding: 0;
  background: none;
  color: var(--mfr-verde);
  font-size: 13px;
  font-weight: 600;
}

.mfr-cta-operadores--discreto:hover .mfr-cta-operadores__botao {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Página /operadores/ --------------------------------------------------- */

.mfr-operadores {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-block: 56px var(--mfr-gap-entre-seccoes);
}

.mfr-operadores__heroi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 56px 48px;
  border-radius: var(--mfr-raio);
  background: var(--mfr-verde);
}

.mfr-operadores__rotulo {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  color: var(--mfr-creme-menu);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mfr-operadores__titulo {
  max-width: 880px;
  margin: 0;
  font-family: var(--mfr-fonte-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  color: var(--mfr-branco);
}

.mfr-operadores__lead {
  max-width: 720px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--mfr-creme-menu);
}

.mfr-operadores__subtitulo {
  margin: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
  color: var(--mfr-texto);
}

.mfr-operadores__cartao {
  padding: 44px 40px;
  border-radius: var(--mfr-raio);
  background: var(--mfr-branco);
  /* a mesma sombra do cartão do Painel CI */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mfr-operadores__sucesso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-size: 17px;
  line-height: 26px;
  color: var(--mfr-texto);
}

.mfr-operadores__sucesso p {
  margin: 0;
}

/* --- Formulário ------------------------------------------------------------ */

.mfr-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.mfr-form__grupo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mfr-form__grupo legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0;
  font-family: var(--mfr-fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--mfr-texto);
}

.mfr-form__grupo legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mfr-verde);
  color: var(--mfr-branco);
  font-family: var(--mfr-fonte);
  font-size: 14px;
}

.mfr-form__campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mfr-form__campo[hidden] {
  display: none;
}

.mfr-form__campo--largo {
  grid-column: 1 / -1;
}

.mfr-form__campo label {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mfr-texto);
}

.mfr-form__obrigatorio {
  color: var(--mfr-verde);
}

.mfr-form__opcional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mfr-texto-suave);
}

.mfr-form__campo input,
.mfr-form__campo select,
.mfr-form__campo textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  font: 400 16px/22px var(--mfr-fonte);
  color: var(--mfr-texto);
  background: var(--mfr-creme);
  border: 1px solid var(--mfr-borda);
  border-radius: var(--mfr-raio);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mfr-form__campo textarea {
  resize: vertical;
}

.mfr-form__campo input:focus,
.mfr-form__campo select:focus,
.mfr-form__campo textarea:focus {
  outline: none;
  border-color: var(--mfr-verde);
  background: var(--mfr-branco);
  box-shadow: 0 0 0 3px rgba(37, 182, 114, 0.18);
}

.mfr-form__campo--erro input,
.mfr-form__campo--erro select,
.mfr-form__campo--erro textarea {
  border-color: var(--mfr-negativo);
}

.mfr-form__erro {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--mfr-negativo);
}

.mfr-form__alerta {
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--mfr-raio);
  background: #fdecec;
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  color: #b3150f;
}

.mfr-form__consentimento label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--mfr-texto);
  cursor: pointer;
}

.mfr-form__consentimento input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--mfr-verde);
}

.mfr-form__consentimento .mfr-form__erro {
  margin: 6px 0 0 30px;
}

.mfr-form__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.mfr-form__nota {
  font-size: 13px;
  color: var(--mfr-texto-suave);
}

/* --- Ecrãs mais estreitos (os mesmos cortes do resto do ficheiro) ---------- */

@media (max-width: 1024px) {
  .mfr-grelha-mediadores {
    --mfr-visiveis: 3;
  }
}

@media (max-width: 767px) {
  [data-carrossel] .mfr-seccao__cabecalho {
    flex-wrap: wrap;
    gap: 12px 8px;
  }

  .mfr-filtros {
    justify-content: flex-start;
    flex: 1 1 100%;
  }

  .mfr-grelha-mediadores {
    --mfr-visiveis: 2.3; /* o cartão seguinte espreita: sugere o scroll */
    --mfr-gap: 16px;
  }

  .mfr-carrossel__seta {
    display: none; /* em ecrãs pequenos arrasta-se; ficam os pontos */
  }

  .mfr-cta-operadores {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .mfr-cta-operadores--discreto {
    gap: 10px;
    padding: 20px 0 0;
  }

  .mfr-operadores {
    padding-block: 32px 60px;
  }

  .mfr-operadores__heroi {
    padding: 32px 24px;
  }

  .mfr-operadores__titulo {
    font-size: 30px;
    line-height: 36px;
  }

  .mfr-operadores__lead {
    font-size: 17px;
    line-height: 24px;
  }

  .mfr-operadores__cartao {
    padding: 28px 20px;
  }

  .mfr-form__grupo {
    grid-template-columns: 1fr;
  }
}