/* ============================================================================
   Observatório Urbano de Matosinhos — folha de estilo
   Desenho: Figma `rpoogpgb1xR5DUqtg3REH0`.

   ATENÇÃO À ESPECIFICIDADE. No Observatório de Mafra existiu aqui uma regra
   `body.mfr a { … }` — especificidade (0,1,2) — que ganhava a TODAS as regras
   de uma classe só e matava os estados dos componentes: o menu ficava preto e
   os hovers não faziam nada. As regras de reposição abaixo usam SELECTORES DE
   ELEMENTO (0,0,1) precisamente para perderem para qualquer componente.
   ========================================================================= */

/* --- 1. Reposição e base ------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--mtz-fundo);
    color: var(--mtz-petroleo);
    font-family: var(--mtz-fonte);
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    -webkit-font-smoothing: antialiased;
}

/* Fundo alternativo: as páginas de opinião são #F5F5F5 no desenho. */
body.mtz-fundo-opiniao {
    background: var(--mtz-fundo-opiniao);
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

/* --- 2. Faixa de conteúdo ------------------------------------------------ */

.mtz-conteudo {
    width: 100%;
    max-width: var(--mtz-conteudo);
    margin-inline: auto;
    padding-inline: 0;
}

/* Aninhado (a `base.html` embrulha o `main`), não volta a limitar. */
.mtz-conteudo .mtz-conteudo {
    max-width: none;
    padding-inline: 0;
}

main.mtz-conteudo {
    padding-block: 60px 100px;
}

/* --- 3. Metadados (IBM Plex Mono) --------------------------------------- */
/* "31 julho 2026 · 4 min de leitura · Vida Imobiliária" — três tamanhos no
   desenho: 16/21 no detalhe, 12/16 no herói, 10/13 nos cartões. */

.mtz-meta {
    font-family: var(--mtz-mono);
    font-weight: 700;
    font-size: 10px;
    line-height: 13px;
    color: var(--mtz-petroleo);
}

.mtz-meta--heroi {
    font-size: 12px;
    line-height: 16px;
    color: var(--mtz-branco);
}

.mtz-meta--detalhe {
    font-size: 16px;
    line-height: 21px;
}

/* --- 4. Cabeçalho ------------------------------------------------------- */
/* Frame `1:275`: 1440×83, padding 20/60, `space-between`.
   O fundo é BRANCO A 10% com efeito `glass` — no Figma isso é vidro fosco, o
   que só faz sentido se o conteúdo passar por trás. Daí ser fixo no topo. */

.mtz-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--mtz-altura-navbar);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.mtz-navbar__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
    padding-block: 20px;
}

/* Wordmark: Manrope 800 16/18 em maiúsculas, ciano, em três linhas (124×54 no
   desenho). A largura máxima é o que provoca a mudança de linha. */
.mtz-navbar__marca {
    max-width: 132px;
    font-size: 16px;
    font-weight: 800;
    line-height: 18px;
    text-transform: uppercase;
    color: var(--mtz-ciano);
}

.mtz-navbar__menu {
    display: flex;
    align-items: center;
    gap: 58px;
}

.mtz-navbar__link {
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    color: var(--mtz-petroleo);
}

/* O desenho não tem variante de hover para a navegação. O sublinhado é a
   convenção do próprio ficheiro (é o que o `button_small` faz) e o mínimo para
   a navegação ser utilizável com rato. */
.mtz-navbar__link:hover,
.mtz-navbar__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mtz-navbar__link[aria-current="page"] {
    color: var(--mtz-ciano);
}

.mtz-navbar__brasao {
    display: block;
    flex: none;
}

.mtz-navbar__brasao img {
    display: block;
    width: 133px;
    height: auto;
}

.mtz-navbar__hamburguer {
    display: none;
    color: var(--mtz-petroleo);
}

/* --- 5. Rodapé ---------------------------------------------------------- */
/* Frame `34:798`: 1440×362, branco, padding 60/106/30, gap 56, com um filete
   claro em cima (`drop_shadow 0/-1 r1 #E6E6E6`). */

.mtz-footer {
    background: var(--mtz-branco);
    box-shadow: var(--mtz-sombra-footer);
    padding: 60px var(--mtz-margem-footer) 30px;
}

.mtz-footer__interior {
    max-width: var(--mtz-conteudo-footer);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.mtz-footer__grelha {
    display: grid;
    grid-template-columns: 544px 104px 247px;
    justify-content: space-between;
    gap: 40px;
}

.mtz-footer__marca {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.mtz-footer__topo {
    display: flex;
    align-items: center;
    gap: 43px;
}

/* Manrope 800 18/21 em maiúsculas, ciano, três linhas (139×63). */
.mtz-footer__nome {
    max-width: 148px;
    font-size: 18px;
    font-weight: 800;
    line-height: 21px;
    text-transform: uppercase;
    color: var(--mtz-ciano);
}

.mtz-footer__brasao img {
    display: block;
    width: 133px;
    height: auto;
}

.mtz-footer__parceria {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mtz-footer__parceria-rotulo {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--mtz-apoio);
}

.mtz-footer__parceria img {
    display: block;
    width: 149px;
    height: auto;
}

.mtz-footer__coluna {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mtz-footer__coluna-titulo {
    font-size: 14px;
    font-weight: 800;
    line-height: 19px;
    text-transform: uppercase;
    color: var(--mtz-petroleo);
}

.mtz-footer__links,
.mtz-footer__contactos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mtz-footer__link,
.mtz-footer__contacto {
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    text-transform: uppercase;
    color: var(--mtz-petroleo);
}

.mtz-footer__link:hover,
.mtz-footer__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Contactos e redes vivem na mesma coluna, separados por 32px. */
.mtz-footer__coluna--dupla {
    gap: 32px;
}

.mtz-footer__bloco {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mtz-footer__redes {
    display: flex;
    gap: 6px;
}

.mtz-footer__redes a {
    display: inline-flex;
}

.mtz-footer__redes img,
.mtz-footer__redes svg {
    display: block;
    width: 24px;
    height: 24px;
}

.mtz-footer__fecho {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.mtz-footer__copyright {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    text-align: center;
    color: var(--mtz-petroleo);
}

/* Selector de idioma. NÃO existe no desenho — o desenho não previu o site
   bilingue, mas a produção serve /pt/ e /en/. Fica aqui, discreto, na
   tipografia do próprio rodapé, em vez de estragar o cabeçalho desenhado. */
.mtz-idiomas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--mtz-petroleo);
}

.mtz-idiomas__separador {
    opacity: 0.4;
}

.mtz-idiomas a[aria-current="true"] {
    color: var(--mtz-ciano);
}

/* --- 6. Cabeçalho de secção --------------------------------------------- */
/* Frame `15:186`: título à esquerda, "Ver tudo" à direita, na mesma linha. */

.mtz-seccao {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mtz-seccao__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
}

.mtz-seccao__titulo {
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
    color: var(--mtz-petroleo);
}

/* Título de página, nos índices: Manrope 700 36/41. */
.mtz-pagina__titulo {
    font-size: 36px;
    font-weight: 700;
    line-height: 41px;
    color: var(--mtz-petroleo);
}

/* `button_small` (`58:273`): Manrope 700 14/16, e no hover ganha SUBLINHADO —
   a cor não muda. Foi o que o diff das variantes mostrou. */
.mtz-vertudo {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    color: var(--mtz-petroleo);
}

.mtz-vertudo:hover,
.mtz-vertudo:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* `Botão Simples` (`4026:204`): a variante dos cabeçalhos das páginas
   interiores — maiúsculas, Manrope 600 14/19, com uma seta. */
.mtz-seccao__rotulo {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--mtz-petroleo);
}

.mtz-vertudo--simples {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    line-height: 19px;
    text-transform: uppercase;
}

.mtz-vertudo--simples svg {
    flex: none;
}

/* --- 7. Cartão de notícia ----------------------------------------------- */
/* `card_noticias` (`58:19`): 427×383, raio 30, imagem em cima (227) e legenda
   em baixo (156) em #C8E9F4, também com raio 30 — os cantos de cima da legenda
   ficam arredondados CONTRA a imagem, e isso vê-se. */

.mtz-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--mtz-raio);
    background: var(--mtz-cinza-imagem);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.mtz-cartao:hover,
.mtz-cartao:focus-visible {
    box-shadow: var(--mtz-sombra-hover);
}

.mtz-cartao__figura {
    position: absolute;
    inset: 0;
    margin: 0;
}

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

/* Reserva a altura da área de imagem sem depender da fotografia existir. */
.mtz-cartao__espaco {
    aspect-ratio: 427 / 227;
}

.mtz-cartao__legenda {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 156px;
    padding: 30px 22px;
    border-radius: var(--mtz-raio);
    background: var(--mtz-azul-claro);
}

/* No hover o padding vertical da legenda passa de 30 para 20 (variante
   `Property 1=hover`) — dá mais espaço ao título sem mexer no cartão. */
.mtz-cartao:hover .mtz-cartao__legenda,
.mtz-cartao:focus-visible .mtz-cartao__legenda {
    padding-block: 20px;
}

.mtz-cartao__titulo {
    font-size: 22px;
    font-weight: 600;
    line-height: 25px;
    color: var(--mtz-petroleo);
}

/* --- 8. Cartão-herói ---------------------------------------------------- */
/* `card_mainnoticia` (`58:229`): 814×588; imagem 403 e faixa ciano 185 com
   título Manrope 600 32/37 e metadados, ambos em branco. */

.mtz-heroi {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--mtz-raio);
    background: var(--mtz-cinza-imagem);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.mtz-heroi:hover,
.mtz-heroi:focus-visible {
    box-shadow: var(--mtz-sombra-hover);
}

.mtz-heroi__figura {
    position: absolute;
    inset: 0;
    margin: 0;
}

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

.mtz-heroi__espaco {
    aspect-ratio: 814 / 403;
}

.mtz-heroi__legenda {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 185px;
    padding: 33px 26px;
    border-radius: var(--mtz-raio);
    background: var(--mtz-ciano);
}

.mtz-heroi__titulo {
    font-size: 32px;
    font-weight: 600;
    line-height: 37px;
    color: var(--mtz-branco);
}

/* --- 9. Lista lateral --------------------------------------------------- */
/* `Frame 150` (`15:422`): três entradas de 476×138, gap 14; miniatura 138×138
   de raio 30 e, ao lado (gap 20), título 22/25 e metadados 10/13. */

.mtz-lateral {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}

.mtz-lateral__lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mtz-lateral__item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: opacity 0.15s ease;
}

.mtz-lateral__item:hover,
.mtz-lateral__item:focus-visible {
    opacity: 0.75;
}

.mtz-lateral__figura {
    flex: none;
    width: 138px;
    height: 138px;
    margin: 0;
    border-radius: var(--mtz-raio);
    background: var(--mtz-miniatura);
    overflow: hidden;
}

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

.mtz-lateral__texto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

.mtz-lateral__titulo {
    font-size: 22px;
    font-weight: 600;
    line-height: 25px;
    color: var(--mtz-petroleo);
}

/* --- 10. Grelhas da home ----------------------------------------------- */

.mtz-pilha {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Herói 814 + lateral 476, gap 30. */
.mtz-grelha-heroi {
    display: grid;
    grid-template-columns: 814fr 476fr;
    gap: 30px;
    align-items: stretch;
}

/* Três cartões de 427, gap 20. */
.mtz-grelha-cartoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Nos índices as filas afastam-se 30 (frame `58:98`), não 20. */
.mtz-grelha-cartoes--indice {
    row-gap: 30px;
}

/* Página de índice: título e grelha separados por 60 (frame `58:281`). */
.mtz-indice {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Dois cartões de opinião de 646, gap 30. */
.mtz-grelha-opiniao {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* --- 11. Cartão de opinião ---------------------------------------------- */
/* `card_opniao` (`60:483`), quatro variantes. Pequeno: 646×401, branco, raio
   20, padding 40, tudo centrado. Grande: 1320×469 com uma linha de data. */

.mtz-opiniao {
    display: flex;
    flex-direction: column;
    gap: 50px;
    /* 401 é a altura do cartão no desenho; com pouco texto o cartão ficava
       muito mais baixo e a grelha perdia o ritmo. */
    min-height: 401px;
    padding: 40px;
    border-radius: var(--mtz-raio-opiniao);
    background: var(--mtz-branco);
    transition: box-shadow 0.15s ease;
}

.mtz-opiniao:hover,
.mtz-opiniao:focus-visible {
    box-shadow: var(--mtz-sombra-hover);
}

.mtz-opiniao__interior {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 100%;
}

.mtz-opiniao__autor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mtz-opiniao__avatar {
    display: block;
    width: 131px;
    height: 131px;
    border-radius: 50%;
    background: var(--mtz-avatar-peq);
    object-fit: cover;
}

/* Nome e cargo em linhas separadas, como no desenho. */
.mtz-opiniao__identidade,
.mtz-autor-cartao__identidade {
    display: flex;
    flex-direction: column;
}

.mtz-opiniao__nome {
    font-family: var(--mtz-fonte-autor);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: var(--mtz-preto);
}

.mtz-opiniao__cargo {
    font-family: var(--mtz-fonte-autor);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    color: var(--mtz-preto);
}

.mtz-opiniao__citacao {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    color: var(--mtz-quase-preto);
}

/* Variante grande: o cartão ocupa a faixa toda, o texto passa a azul-petróleo
   e ganha a linha de metadados. */
.mtz-opiniao--largo {
    grid-column: 1 / -1;
    justify-content: space-between;
    min-height: 469px;
}

.mtz-opiniao--largo .mtz-opiniao__interior {
    gap: 20px;
}

.mtz-opiniao--largo .mtz-opiniao__avatar {
    background: var(--mtz-avatar);
}

.mtz-opiniao--largo .mtz-opiniao__nome,
.mtz-opiniao--largo .mtz-opiniao__cargo,
.mtz-opiniao--largo .mtz-opiniao__citacao {
    color: var(--mtz-petroleo);
}

.mtz-opiniao--largo .mtz-opiniao__citacao {
    max-width: 853px;
}

.mtz-opiniao__rodape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* --- 12. Painel CI ----------------------------------------------------- */
/* `Frame 120` (`15:181`): caixa ciano 1320×280, raio 30, padding 44/40.
   Quatro indicadores de 295, gap 20. O rótulo é ESCURO e o valor quase branco:
   é o contraste invertido do desenho, não um engano. */

.mtz-painel {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 44px 40px;
    border-radius: var(--mtz-raio);
    background: var(--mtz-ciano);
}

.mtz-painel__cabecalho {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mtz-painel__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
}

.mtz-painel__titulo {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
    color: var(--mtz-branco);
}

.mtz-painel__periodo {
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    color: var(--mtz-branco);
}

.mtz-painel__descricao {
    max-width: 620px;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: var(--mtz-branco);
}

/* Na página do Painel CI a mesma caixa serve de faixa de cabeçalho: mais baixa,
   sem indicadores, com a descrição (`28:613`). */
.mtz-painel--faixa {
    gap: 20px;
    padding: 40px;
}

.mtz-grelha-indicadores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.mtz-indicador {
    display: flex;
    flex-direction: column;
    border-radius: var(--mtz-raio-indicador);
}

.mtz-indicador__rotulo {
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    text-transform: uppercase;
    color: var(--mtz-painel-rotulo);
}

.mtz-indicador__valor {
    font-size: 36px;
    font-weight: 700;
    line-height: 49px;
    color: var(--mtz-painel-valor);
}

.mtz-indicador__variacao {
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    color: var(--mtz-painel-variacao);
}

/* --- 13. Botão "+" (carregar mais) -------------------------------------- */
/* No Figma é um rectângulo de 34×36 com uma imagem colada e o nome absurdo
   `MacOS Maximize`. É um círculo azul-petróleo com um mais branco. */

.mtz-mais {
    display: flex;
    justify-content: center;
    padding-top: 44px;
}

.mtz-mais__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mtz-petroleo);
    color: var(--mtz-branco);
    transition: opacity 0.15s ease;
}

.mtz-mais__botao:hover,
.mtz-mais__botao:focus-visible {
    opacity: 0.85;
}

/* --- 14. Detalhe de artigo --------------------------------------------- */
/* `1:301` (notícia) e `37:1431` (opinião). Blocos separados por 50. */

.mtz-artigo {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.mtz-artigo__cabecalho {
    width: 100%;
    max-width: var(--mtz-cabecalho-artigo);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mtz-artigo__antetitulo {
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    color: var(--mtz-petroleo);
}

.mtz-artigo__identificacao {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mtz-artigo__titulo {
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: var(--mtz-ciano);
}

.mtz-artigo__figura {
    margin: 0;
    border-radius: var(--mtz-raio);
    background: var(--mtz-cinza-imagem);
    overflow: hidden;
    aspect-ratio: 1317 / 675;
}

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

/* Gráfico em vez de fotografia, no detalhe de um Chartpost. */
.mtz-artigo__grafico {
    padding: 24px;
    border-radius: var(--mtz-raio);
    background: var(--mtz-branco);
}

.mtz-artigo__corpo {
    width: 100%;
    max-width: var(--mtz-corpo-artigo);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Corpo: Manrope 500 16/28. */
.mtz-prosa p {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: var(--mtz-petroleo);
}

.mtz-prosa p:last-child {
    margin-bottom: 0;
}

.mtz-prosa a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mtz-prosa h2,
.mtz-prosa h3,
.mtz-prosa h4 {
    margin: 32px 0 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
}

.mtz-prosa ul,
.mtz-prosa ol {
    margin: 0 0 16px 22px;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}

.mtz-prosa ul {
    list-style: disc;
}

.mtz-prosa ol {
    list-style: decimal;
}

.mtz-prosa img {
    height: auto;
    border-radius: var(--mtz-raio);
}

/* Citação destacada: filete ciano de 2px à esquerda, a 28px do texto. */
.mtz-prosa blockquote,
.mtz-citacao {
    margin: 0;
    padding-left: 28px;
    border-left: 2px solid var(--mtz-ciano);
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    color: var(--mtz-petroleo);
}

.mtz-prosa blockquote p {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Cartão de autor do detalhe de opinião (`37:1569`): 982×146, branco, raio 30,
   padding 30/37/23. */
.mtz-autor-cartao {
    width: 100%;
    max-width: 982px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 30px 37px 23px;
    border-radius: var(--mtz-raio);
    background: var(--mtz-branco);
}

.mtz-autor-cartao__pessoa {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mtz-autor-cartao__avatar {
    display: block;
    flex: none;
    width: 93px;
    height: 93px;
    border-radius: 50%;
    background: var(--mtz-avatar);
    object-fit: cover;
}

.mtz-autor-cartao__identidade {
    align-items: flex-start;
}

.mtz-autor-cartao__nome {
    font-family: var(--mtz-fonte-autor);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--mtz-petroleo);
}

.mtz-autor-cartao__cargo {
    font-family: var(--mtz-fonte-autor);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: var(--mtz-petroleo);
}

.mtz-autor-cartao__data {
    text-align: right;
}

/* Partilha (`15:485`): rótulo cinzento em Nunito e quatro ícones de 24. */
.mtz-partilha {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: var(--mtz-corpo-artigo);
    margin-inline: auto;
    padding-top: 8px;
}

.mtz-partilha__rotulo {
    font-family: var(--mtz-fonte-autor);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: var(--mtz-apoio);
}

.mtz-partilha__icones {
    display: flex;
    gap: 6px;
}

.mtz-partilha__icones a {
    display: inline-flex;
}

.mtz-partilha__icones img,
.mtz-partilha__icones svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* Bloco de artigos relacionados, no fim do detalhe. */
.mtz-relacionados {
    margin-top: 38px;
}

/* --- 15. Página de gráficos (Painel CI) -------------------------------- */
/* `28:515`: faixa ciano com descrição e, abaixo, filas de dois painéis. */

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

.mtz-grafico {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mtz-grafico__titulo {
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: var(--mtz-preto);
}

.mtz-grafico__caixa {
    min-height: 398px;
}

/* --- 16. Páginas fora do desenho --------------------------------------- */
/* Pesquisa, autor, conta, perfil, erros. O desenho não as cobre; herdam a
   tipografia e a faixa, e nada mais. Em Mafra chamava-se `.mfr-simples`. */

.mtz-simples {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: var(--mtz-corpo-artigo);
}

.mtz-simples h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 41px;
}

.mtz-simples h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
}

.mtz-simples label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.mtz-simples input,
.mtz-simples select,
.mtz-simples textarea {
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    color: inherit;
    background: var(--mtz-branco);
    border: 1px solid var(--mtz-azul-claro);
    border-radius: 12px;
}

.mtz-simples a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mtz-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--mtz-ciano);
    color: var(--mtz-branco);
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    text-transform: uppercase;
}

.mtz-botao:hover,
.mtz-botao:focus-visible {
    background: var(--mtz-petroleo);
}

/* Caixa de pesquisa — página fora do desenho. */
.mtz-pesquisa {
    display: flex;
    gap: 16px;
    max-width: 640px;
}

.mtz-pesquisa__campo {
    flex: 1;
    padding: 12px 20px;
    font: inherit;
    color: inherit;
    background: var(--mtz-branco);
    border: 1px solid var(--mtz-azul-claro);
    border-radius: 999px;
}

.mtz-vazio {
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: var(--mtz-apoio);
}

/* --- 17. Ecrãs estreitos ----------------------------------------------- */
/* Frames móveis: 393/394 de largura, navbar de 72 com hambúrguer e menu em
   painel branco (padding 16/20, gap 16). */

@media (max-width: 1400px) {
    .mtz-conteudo {
        padding-inline: 24px;
    }

    .mtz-footer {
        padding-inline: 24px;
    }
}

@media (max-width: 1100px) {
    .mtz-grelha-heroi,
    .mtz-grelha-cartoes,
    .mtz-grelha-opiniao,
    .mtz-grelha-graficos {
        grid-template-columns: 1fr;
    }

    .mtz-footer__grelha {
        grid-template-columns: 1fr 1fr;
    }

    .mtz-grelha-indicadores {
        grid-template-columns: repeat(2, 1fr);
    }

    .mtz-artigo__titulo {
        font-size: 36px;
        line-height: 42px;
    }

    .mtz-citacao,
    .mtz-prosa blockquote {
        font-size: 24px;
        line-height: 32px;
    }
}

/* ---------------------------------------------------------------------------
   ECRÃS ESTREITOS — os OITO frames móveis do ficheiro (393/394 de largura):
   `44:9` Home · `50:989` Notícias · `50:410` Notícias Detalhe ·
   `50:1386` e `50:1511` Mercado · `50:1852` Estatísticas ·
   `50:2029` Opinião Detalhe · `50:697` Menu.

   O móvel NÃO é o desktop empilhado. Há quatro decisões próprias do desenho
   que não se adivinham a partir da versão larga:

     1. o CARTÃO-HERÓI perde a faixa ciano e passa a ter a legenda azul-clara
        dos cartões normais (`44:395`) — deixa de ser um objecto especial;
     2. o MERCADO passa a uma fila com ROLAMENTO HORIZONTAL de cartões de 260,
        e esses cartões são CIANO com texto azul-petróleo (`44:86`) — o inverso
        do desktop;
     3. o "Ver tudo" do Painel CI fica BRANCO (`44:167`), quando no desktop é
        azul-petróleo;
     4. os indicadores passam a duas colunas e o valor cai de 36/49 para 28/28.

   Tudo o resto são tamanhos: títulos de secção 18/27, "Ver tudo" 12/18,
   miniaturas 80×80 de raio 16, rodapé em duas colunas.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* --- Cabeçalho (`44:13`) ------------------------------------------- */
    .mtz-navbar {
        height: 72px;
    }

    .mtz-navbar__interior {
        padding-block: 12px;
    }

    .mtz-conteudo,
    .mtz-footer {
        padding-inline: 16px;
    }

    main.mtz-conteudo {
        padding-block: 20px 32px;
    }

    .mtz-pilha {
        gap: 32px;
    }

    /* Wordmark 108×48: três linhas de 16. */
    .mtz-navbar__marca {
        max-width: 112px;
        font-size: 14px;
        line-height: 16px;
    }

    .mtz-navbar__brasao {
        display: none;
    }

    .mtz-navbar__hamburguer {
        display: inline-flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
    }

    /* Menu fechado por omissão; abre em painel branco por baixo da navbar
       (`50:711`: padding 16/20, gap 16). */
    .mtz-navbar__menu {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 20px;
        background: var(--mtz-branco);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

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

    /* --- Cabeçalhos de secção (`44:34`) -------------------------------- */
    .mtz-seccao {
        gap: 12px;
    }

    .mtz-seccao__titulo,
    .mtz-pagina__titulo {
        font-size: 18px;
        line-height: 27px;
    }

    .mtz-vertudo {
        font-size: 12px;
        line-height: 18px;
    }

    .mtz-indice {
        gap: 20px;
    }

    /* --- Grelhas: tudo numa coluna ------------------------------------- */
    .mtz-grelha-heroi,
    .mtz-grelha-cartoes,
    .mtz-grelha-opiniao,
    .mtz-grelha-graficos {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* --- Cartão-herói (`44:394`): passa a cartão normal ---------------- */
    .mtz-heroi__espaco {
        aspect-ratio: 361 / 227;
    }

    .mtz-heroi__legenda {
        gap: 10px;
        min-height: 156px;
        padding: 20px 22px;
        border-radius: var(--mtz-raio-opiniao);
        background: var(--mtz-azul-claro);
    }

    .mtz-heroi__titulo {
        font-size: 18px;
        font-weight: 600;
        line-height: 21px;
        color: var(--mtz-petroleo);
    }

    .mtz-heroi__legenda .mtz-meta--heroi {
        font-size: 10px;
        line-height: 13px;
        color: var(--mtz-petroleo);
    }

    /* --- Lista lateral (`44:42` ArticleCardSmall) ---------------------- */
    .mtz-lateral {
        gap: 12px;
    }

    .mtz-lateral__lista {
        gap: 12px;
    }

    .mtz-lateral__item {
        gap: 12px;
    }

    .mtz-lateral__figura {
        width: 80px;
        height: 80px;
        border-radius: 16px;
    }

    .mtz-lateral__texto {
        gap: 4px;
        padding-top: 0;
    }

    .mtz-lateral__titulo {
        font-size: 14px;
        line-height: 18px;
    }

    .mtz-lateral__texto .mtz-meta {
        font-size: 9px;
        line-height: 14px;
    }

    /* --- Mercado: fila com rolamento horizontal (`44:85`) -------------- */
    /* Os cartões saem da margem de propósito: no desenho o terceiro está em
       x=560 num ecrã de 393. É uma fila que se arrasta com o dedo. */
    .mtz-grelha-cartoes {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* sangra até à margem do ecrã e recupera o recuo por padding */
        margin-inline: -16px;
        padding-inline: 16px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .mtz-grelha-cartoes::-webkit-scrollbar {
        display: none;
    }

    .mtz-cartao {
        flex: 0 0 260px;
        scroll-snap-align: start;
        border-radius: var(--mtz-raio-opiniao);
        /* No móvel o CARTÃO é ciano e o texto azul-petróleo (`44:86`) — ao
           contrário do desktop, onde o cartão é cinzento e a legenda azul-clara. */
        background: var(--mtz-ciano);
    }

    .mtz-cartao__espaco {
        aspect-ratio: 260 / 160;
    }

    /* No desktop a fotografia enche o cartão e a legenda opaca tapa a parte de
       baixo. Aqui a legenda é TRANSPARENTE (o ciano é do cartão), por isso a
       fotografia tem de ficar confinada à banda de cima — senão aparece por
       trás do texto. */
    .mtz-cartao__figura {
        inset: 0 0 auto 0;
        aspect-ratio: 260 / 160;
    }

    .mtz-cartao__legenda {
        gap: 4px;
        min-height: 0;
        padding: 16px;
        border-radius: 0;
        background: transparent;
    }

    .mtz-cartao:hover .mtz-cartao__legenda,
    .mtz-cartao:focus-visible .mtz-cartao__legenda {
        padding-block: 16px;
    }

    .mtz-cartao__titulo {
        font-size: 15px;
        line-height: 20px;
    }

    .mtz-cartao__legenda .mtz-meta {
        font-size: 10px;
        line-height: 15px;
    }

    /* Nos índices a fila volta a ser uma coluna: são páginas de listagem, não
       destaques de home, e o desenho móvel de `50:989` empilha. */
    .mtz-grelha-cartoes--indice {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    .mtz-grelha-cartoes--indice .mtz-cartao {
        flex: none;
        background: var(--mtz-cinza-imagem);
    }

    .mtz-grelha-cartoes--indice .mtz-cartao__figura {
        inset: 0;
        aspect-ratio: auto;
    }

    .mtz-grelha-cartoes--indice .mtz-cartao__espaco {
        aspect-ratio: 361 / 227;
    }

    .mtz-grelha-cartoes--indice .mtz-cartao__legenda {
        min-height: 156px;
        padding: 20px 22px;
        border-radius: var(--mtz-raio-opiniao);
        background: var(--mtz-azul-claro);
    }

    .mtz-grelha-cartoes--indice .mtz-cartao__titulo {
        font-size: 18px;
        line-height: 21px;
    }

    /* --- Cartão de opinião (`44:129`) ---------------------------------- */
    .mtz-opiniao,
    .mtz-opiniao--largo {
        min-height: 0;
        gap: 16px;
        padding: 24px;
    }

    .mtz-opiniao__interior {
        gap: 16px;
    }

    .mtz-opiniao__avatar {
        width: 90px;
        height: 90px;
    }

    .mtz-opiniao__nome {
        font-size: 14px;
        line-height: 21px;
        color: var(--mtz-petroleo);
    }

    .mtz-opiniao__cargo {
        font-size: 13px;
        line-height: 20px;
        color: var(--mtz-petroleo);
    }

    .mtz-opiniao__citacao {
        font-size: 15px;
        line-height: 21px;
        color: var(--mtz-petroleo);
    }

    .mtz-opiniao__rodape .mtz-meta {
        font-size: 9px;
        line-height: 14px;
    }

    /* --- Painel CI (`44:161`) ----------------------------------------- */
    .mtz-painel {
        gap: 4px;
        padding: 24px 20px;
        border-radius: 24px;
    }

    .mtz-painel__titulo {
        font-size: 18px;
        line-height: 27px;
    }

    /* Aqui o "Ver tudo" é BRANCO, não azul-petróleo. */
    .mtz-painel .mtz-vertudo {
        color: var(--mtz-branco);
    }

    .mtz-painel__periodo {
        font-size: 11px;
        line-height: 16px;
    }

    .mtz-painel__descricao {
        font-size: 14px;
        line-height: 20px;
    }

    .mtz-grelha-indicadores {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding-top: 16px;
    }

    .mtz-indicador__rotulo {
        font-size: 11px;
        line-height: 16px;
    }

    .mtz-indicador__valor {
        font-size: 28px;
        line-height: 32px;
    }

    .mtz-indicador__variacao {
        font-size: 11px;
        line-height: 14px;
    }

    /* --- Detalhe de artigo (`50:410`, `50:2029`) ----------------------- */
    .mtz-artigo {
        gap: 24px;
    }

    .mtz-artigo__titulo {
        font-size: 24px;
        line-height: 30px;
    }

    .mtz-artigo__antetitulo {
        font-size: 14px;
        line-height: 20px;
    }

    .mtz-artigo__cabecalho {
        gap: 16px;
    }

    .mtz-artigo__corpo {
        gap: 24px;
    }

    .mtz-prosa p,
    .mtz-prosa ul,
    .mtz-prosa ol {
        font-size: 15px;
        line-height: 24px;
    }

    .mtz-citacao,
    .mtz-prosa blockquote {
        font-size: 18px;
        line-height: 26px;
        padding-left: 16px;
    }

    .mtz-autor-cartao {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .mtz-autor-cartao__avatar {
        width: 64px;
        height: 64px;
    }

    .mtz-autor-cartao__data {
        text-align: left;
    }

    .mtz-relacionados {
        margin-top: 8px;
    }

    /* --- Rodapé (`44:223`) -------------------------------------------- */
    .mtz-footer {
        padding: 40px 24px 24px;
    }

    .mtz-footer__interior {
        gap: 32px;
    }

    .mtz-footer__grelha {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }

    .mtz-footer__marca {
        grid-column: 1 / -1;
        gap: 12px;
    }

    .mtz-footer__topo {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mtz-footer__nome {
        max-width: 112px;
        font-size: 14px;
        line-height: 16px;
    }

    .mtz-footer__coluna {
        gap: 8px;
    }

    .mtz-footer__coluna--dupla {
        gap: 16px;
    }

    .mtz-footer__bloco {
        gap: 8px;
    }

    .mtz-footer__coluna-titulo {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 4px;
    }

    .mtz-footer__link,
    .mtz-footer__contacto {
        font-size: 12px;
        line-height: 18px;
    }

    .mtz-footer__links,
    .mtz-footer__contactos {
        gap: 8px;
    }

    .mtz-footer__fecho {
        flex-direction: column;
        gap: 12px;
        padding-top: 8px;
    }

    .mtz-footer__copyright {
        font-size: 10px;
        line-height: 15px;
    }

    /* --- Gráficos ----------------------------------------------------- */
    .mtz-grafico__caixa {
        min-height: 260px;
    }

    .mtz-grafico__titulo {
        font-size: 18px;
        line-height: 26px;
    }
}