/* =============================================================================
   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%;
}

body.mfr a {
  color: inherit;
  text-decoration: none;
}

body.mfr a:hover {
  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;
}

.mfr-navbar__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.mfr-navbar__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

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

/* A cápsula. */
.mfr-navbar__menu {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 16px 40px;
  list-style: none;
  background: var(--mfr-verde);
  border-radius: var(--mfr-raio-pilula);
}

.mfr-navbar__link {
  display: inline-block;
  color: var(--mfr-creme-menu);
  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;
  opacity: 0.92;
}

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

.mfr-navbar__idiomas {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--mfr-texto-medio);
  font-family: var(--mfr-fonte-idioma);
  font-size: 12px;
  line-height: 12px;
}

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

.mfr-navbar__idioma--activo {
  font-weight: 700;
  color: var(--mfr-verde);
}

.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 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  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: 82px;
}

.mfr-hero__texto {
  max-width: 620px;
}

.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__resumo {
  margin: 0;
  max-width: 200px;
  font-size: 14px;
  line-height: 16px;
  color: #000;
}

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

/* O filete. */
.mfr-seccao__cabecalho::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--mfr-verde);
  opacity: 0.6;
}

.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:hover {
  filter: brightness(0.94);
}

.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 destaque. */
.mfr-cartao {
  display: grid;
  grid-template-columns: 408fr 408fr;
  gap: 10px;
  align-items: stretch;
}

.mfr-cartao__figura {
  order: 2;
  margin: 0;
  aspect-ratio: 408 / 410;
  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 {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
}

.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:hover .mfr-cartao__titulo {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 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;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mfr-borda);
}

.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__item:hover .mfr-lista-mercado__titulo {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.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 {
  display: flex;
  align-items: flex-start;
  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 {
  /* As duas colunas de baixo da home: Mercado (605) + Painel CI (605). */
  display: grid;
  grid-template-columns: 605fr 605fr;
  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:hover .mfr-opiniao__titulo {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.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 — `Opnião Card` (604×274, raio 20, padding 40),
   com a coluna de autor de 134px à esquerda e 40px de intervalo. */
.mfr-opiniao--contorno {
  border: 1px solid var(--mfr-borda);
  border-radius: 20px;
  padding: 40px;
  gap: 40px;
  background: var(--mfr-branco);
}

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

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

.mfr-opiniao--contorno .mfr-opiniao__interior {
  gap: 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);
  border: 1px solid rgba(37, 182, 114, 0.18);
}

.mfr-grelha-indicadores__titulo {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  color: var(--mfr-verde);
}

.mfr-indicador {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--mfr-borda);
}

.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;
  padding-top: 68px;
  padding-bottom: 42px;
}

.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;
  max-width: 200px;
  font-size: 14px;
  line-height: 16px;
  color: #000;
}

/* -----------------------------------------------------------------------------
   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;
}

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

.mfr-grelha-cartoes--indice .mfr-cartao__figura {
  order: 1;
  aspect-ratio: 284 / 188;
  width: 100%;
}

.mfr-grelha-cartoes--indice .mfr-cartao__corpo {
  order: 2;
  gap: 10px;
}

.mfr-grelha-cartoes--indice .mfr-cartao__titulo {
  font-size: 20px;
  line-height: 24px;
}

/* O primeiro cartão ocupa a coluna larga e é maior. */
.mfr-grelha-cartoes--indice .mfr-cartao:first-child .mfr-cartao__figura {
  aspect-ratio: 605 / 410;
}

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

/* -----------------------------------------------------------------------------
   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;
  gap: 18px;
  padding: 56px 0 0;
  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`

   Grelha de 2 colunas de gráficos, com título por cima.
   -------------------------------------------------------------------------- */

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

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

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

.mfr-grafico__figura {
  margin: 0;
  border-radius: var(--mfr-raio);
  overflow: hidden;
  background: var(--mfr-branco);
}

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

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

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

.mfr-artigo__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
}

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

.mfr-artigo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

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

.mfr-artigo__principal {
  display: grid;
  grid-template-columns: 918fr 292fr;
  gap: 30px;
  align-items: start;
}

.mfr-artigo__figura {
  margin: 0 0 28px;
  border-radius: var(--mfr-raio);
  overflow: hidden;
  background: var(--mfr-placeholder);
}

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

.mfr-artigo__corpo {
  font-family: var(--mfr-fonte-titulo);
  font-size: 17px;
  line-height: 26px;
  color: var(--mfr-texto);
}

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

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

/* Opinião: o desenho inverte — autor à esquerda (293px), artigo à direita. */
.mfr-artigo--opiniao .mfr-artigo__principal {
  grid-template-columns: 293fr 897fr;
}

.mfr-artigo--opiniao .mfr-artigo__autor {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mfr-artigo--opiniao .mfr-artigo__titulo {
  font-size: 44px;
  line-height: 48px;
}

/* -----------------------------------------------------------------------------
   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;
}

/* -----------------------------------------------------------------------------
   Relacionadas
   -------------------------------------------------------------------------- */

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

.mfr-relacionada {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mfr-borda);
}

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

.mfr-relacionada__figura {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  margin: 0;
  border-radius: var(--mfr-raio);
  overflow: hidden;
  background: var(--mfr-placeholder);
}

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

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

.mfr-relacionada:hover .mfr-relacionada__titulo {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   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 "Em parceria com"; à 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;
  padding: 0 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;
}

.mfr-footer__parceria {
  display: flex;
  align-items: center;
  gap: 32px;
}

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

.mfr-footer__parceria-rotulo {
  font-size: 9px;
  line-height: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  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;
  text-transform: capitalize;
  color: var(--mfr-branco);
}

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

.mfr-footer__link {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--mfr-branco);
  text-transform: capitalize;
}

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

.mfr-footer__contactos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  line-height: 20px;
  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);
}

/* -----------------------------------------------------------------------------
   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;
}

/* -----------------------------------------------------------------------------
   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 {
    flex-direction: column;
    gap: 20px;
    padding-top: 40px;
  }

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

  .mfr-navbar__menu {
    display: none;
    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);
}