/* ════════════════════════════════════════════════════════════════════
   metaPROF — sistema visual novo (página inicial, metaOBSERVATÓRIO…)
   Usa-se com <body class="lp">. Paleta: vermelho #dc3545, preto,
   amarelo só nos sublinhados, secções alternadas branco / creme.
   Os sublinhados inclinam-se ao acaso com assets/js/lp.js.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Meta Pro: manda a mesma do resto do site (CDN, carregada no <head>);
       os ficheiros da casa (assets/fonts) só entram se a CDN falhar ─── */
@font-face { font-family: 'MP'; src: url('../fonts/MetaPro-Bold.woff2') format('woff2'), url('../fonts/MetaPro-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'MP'; src: url('../fonts/MetaPro-Medium.woff2') format('woff2'), url('../fonts/MetaPro-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'MP'; src: url('../fonts/MetaPro-Light.woff2') format('woff2'), url('../fonts/MetaPro-Light.woff') format('woff'); font-weight: 300; font-display: swap; }

/* ─── Paleta ───
   vermelho = ação e marca · preto = estrutura e texto
   amarelo = só sublinhados · fundo branco e papel #f8f6f1, como nas
   restantes páginas (habitação, escola, aposentações) */
:root {
    --vermelho: #dc3545;         /* o vermelho das outras páginas (Bootstrap danger) */
    --vermelho-escuro: #c82333;  /* o do :hover do .btn-meta */
    --preto: #111111;
    --amarelo: #FFD400;
    --fundo: #FFFFFF;
    --papel: #F8F6F1;
    --creme: #F3EEE4;   /* secções alternadas: branco, creme, branco… */
    --linha-fina: #CCCCCC;
    --cinza: #4A4642;
    --cinza-claro: #CFCBC4;
    --branco: #FFFFFF;
    --max: 1200px;
    --gutter: 16px;
    --fonte: 'Meta Pro', 'MP', system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }

/* Letra grande: base 19 px, nada abaixo de 18 px (1.125rem). */
body.lp {
    background: var(--fundo);
    color: var(--preto);
    font-family: var(--fonte);
    font-size: 1.1875rem;
    line-height: 1.55;
    padding-top: 0;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: lining-nums;
}

/* A seta da Meta Pro sai ponteada: as setas vêm de uma fonte de sistema */
.lp-btn::after, .lp-caminho-s, .lp-item-s, .lp-proj-s, .lp-seta {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.lp main { padding-top: 104px; overflow-x: clip; }
.lp a { color: inherit; }
.lp h1, .lp h2, .lp h3 { font-family: var(--fonte); font-weight: 700; }
.lp main p, .lp main li { font-family: var(--fonte); }
.lp-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* O sublinhado amarelo — uma barra por trás das letras, ligeiramente
   inclinada. A inclinação (--rot) e o desvio (--dy) sorteiam-se a cada
   visita no fim da página; sem JavaScript fica nos valores de omissão. */
.lp-marca, .lp-email {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.lp-marca::after, .lp-email::after {
    content: '';
    position: absolute;
    left: -.06em;
    right: -.06em;
    bottom: calc(.06em + var(--dy, 0em));
    height: .32em;
    background: var(--amarelo);
    z-index: -1;
    transform: rotate(var(--rot, -1.5deg));
    transform-origin: 50% 50%;
    border-radius: .04em;
}
/* Em fundo escuro ou vermelho a barra cobria as letras brancas: passa para baixo delas, mais fina */
.lp-final .lp-marca::after, .lp-faixa .lp-marca::after, .lp-email::after {
    bottom: calc(-.1em + var(--dy, 0em));
    height: .13em;
}

.lp-eyebrow {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--vermelho);
    margin: 0 0 1rem;
}

/* ─── Separador de secção: régua grossa + número + nome ─── */
.lp-sep {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 6px solid var(--preto);
    padding-top: .75rem;
    margin: 0 0 1.75rem;
}
.lp-sep-t {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0;
}
.lp-sep-n {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--vermelho);
    font-variant-numeric: lining-nums tabular-nums;
}

.lp-h2 {
    font-size: clamp(2.25rem, 8vw, 4.75rem);
    line-height: .98;
    letter-spacing: -.025em;
    margin: 0 0 1.5rem;
    max-width: 16ch;
}

.lp-seccao { padding: 4rem 0; background: var(--fundo); }
.lp-seccao--creme { background: var(--creme); }
/* (o realce ao passar o rato nos botões de escolha está junto de .lp-chip) */
@media (min-width: 992px) { .lp-seccao { padding: 6rem 0; } }

/* ─── Botões: blocos largos, seta à direita ─── */
.lp-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 60px;
    padding: .9rem 1.25rem;
    font-size: 1.1875rem;
    font-weight: 700;
    text-decoration: none;
    border: 3px solid var(--preto);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.lp-btn::after { content: '→'; font-size: 1.4em; line-height: 1; transition: transform .15s ease; }
.lp-btn:hover::after { transform: translateX(4px); }
.lp-btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--preto); }
.lp-btn--preto { background: var(--preto); color: var(--branco) !important; }
.lp-btn--preto:hover { box-shadow: 6px 6px 0 var(--vermelho); }
.lp-btn--contorno { background: transparent; color: var(--preto) !important; }
.lp-btn--branco { background: var(--branco); color: var(--preto) !important; border-color: var(--branco); }
.lp-btn--vermelho { background: var(--vermelho); color: var(--branco) !important; border-color: var(--vermelho); }
.lp-btn--vermelho:hover { box-shadow: 6px 6px 0 var(--amarelo); }
@media (min-width: 576px) { .lp-btn { display: inline-flex; min-width: 280px; } }

.lp :focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }

/* ─── 1. Cabeçalho ─── */
.lp-hero { padding: 2.5rem 0 3rem; }
.lp-h1 {
    font-size: clamp(3.4rem, 15vw, 7.25rem);
    line-height: .9;
    letter-spacing: -.04em;
    margin: 0 0 1.75rem;
}
.lp-lead {
    font-size: clamp(1.25rem, 3.4vw, 1.6rem);
    line-height: 1.4;
    font-weight: 500;
    max-width: 34ch;
    margin: 0 0 2rem;
}
.lp-acoes { display: flex; flex-direction: column; gap: .75rem; }

/* Bloco «Em destaque» do cabeçalho: rótulo + imagem clicável + botões, juntos */
.lp-destaque-topo { margin-top: 2.5rem; }
.lp-destaque-rotulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--preto);
    margin: 0 0 .9rem;
}
.lp-destaque-rotulo::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; background: var(--vermelho); }
.lp-destaque-topo .lp-hero-img { display: block; margin-bottom: 1rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.lp-destaque-topo a.lp-hero-img:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--vermelho); border-color: var(--vermelho); }
.lp-destaque-topo .lp-btn { width: 100%; }
/* Imagem do cabeçalho: linha fina e cantos arredondados, como os cartões */
.lp-hero-img { margin: 0; border: 2px solid var(--linha-fina); border-radius: 10px; overflow: hidden; background: var(--branco); }
.lp-hero-img img { display: block; width: 100%; height: auto; }

@media (min-width: 992px) {
    .lp-hero-grelha { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
    .lp-destaque-topo { margin-top: 0; }
}

/* ─── 2. Faixa dos números (fundo preto) ─── */
.lp-numeros { background: var(--preto); color: var(--branco); padding: 2.5rem 0; }
.lp-numeros-grelha {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    gap: 1px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.lp-numeros-grelha::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .lp-numeros-grelha { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); overflow: visible; }
}
.lp-num {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem 1.5rem .5rem 0;
    border-right: 1px solid #333;
    text-decoration: none;
    color: var(--branco) !important;
    scroll-snap-align: start;
}
.lp-num[hidden] { display: none; }
.lp-num-v {
    font-size: clamp(3rem, 12vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: lining-nums tabular-nums;
}
.lp-num-v::after { content: ''; display: block; width: 3rem; height: 8px; background: var(--amarelo); margin-top: .6rem; transform: rotate(var(--rot, -2deg)); transform-origin: 0 50%; transition: width .25s ease; }
.lp-num:hover .lp-num-v::after { width: 100%; }
.lp-num-l { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.lp-num-s { font-size: 1.125rem; color: var(--cinza-claro); line-height: 1.35; }
.lp-numeros-dica { font-size: 1.125rem; color: var(--cinza-claro); margin: 1rem 0 0; }
@media (min-width: 768px) { .lp-numeros-dica { display: none; } }

/* ─── 3. Faixa vermelha — o tema do momento ─── */
.lp-faixa { background: var(--vermelho); color: var(--branco); padding: 3.5rem 0 4rem; }
.lp-faixa .lp-sep { border-color: var(--branco); }
.lp-faixa .lp-sep-n { color: var(--branco); }
.lp-faixa-t {
    font-size: clamp(2.5rem, 10vw, 6rem);
    line-height: .95;
    letter-spacing: -.03em;
    margin: 0 0 1.5rem;
    max-width: 20ch;
}
.lp-faixa-t .lp-marca { color: var(--preto); }
.lp-faixa p { font-size: 1.25rem; line-height: 1.5; max-width: 60ch; margin: 0 0 2rem; }

/* ─── 4. Por onde começar? ─── */
.lp-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.lp-chip {
    font: 700 1.125rem/1.2 var(--fonte);
    min-height: 52px;
    padding: .7rem 1.1rem;
    background: transparent;
    color: var(--preto);
    border: 2px solid var(--preto);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
}
/* Realce ao passar o rato: só em aparelhos com rato (no telemóvel o «hover»
   fica preso no último toque) e nunca no botão escolhido, que fica sempre
   preto com letra branca. */
.lp-chip:hover { background: transparent; }
@media (hover: hover) {
    .lp-chip:not([aria-pressed="true"]):hover { background: var(--papel); }
    .lp-seccao--creme .lp-chip:not([aria-pressed="true"]):hover { background: var(--fundo); }
}
.lp-chip[aria-pressed="true"],
.lp-chip[aria-pressed="true"]:hover,
.lp-chip[aria-pressed="true"]:focus,
.lp-chip[aria-pressed="true"]:active { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.lp-chip[aria-pressed="true"]::before { content: '✓ '; color: var(--amarelo); }

.lp-painel-t { font-size: 1.5rem; margin: 2rem 0 1rem; }
.js .lp-painel-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lp-caminhos { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--preto); }
@media (min-width: 768px) { .lp-caminhos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 0; } }
.lp-caminho a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem 1rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 2px solid var(--preto);
    text-decoration: none;
}
@media (min-width: 768px) { .lp-caminho a { border-top: 2px solid var(--preto); border-bottom: 0; } }
.lp-caminho-t { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.lp-caminho-x { grid-column: 1; font-size: 1.125rem; color: var(--cinza); }
.lp-caminho-s { grid-row: 1 / span 2; grid-column: 2; font-size: 1.75rem; transition: transform .15s ease; }
.lp-caminho a:hover .lp-caminho-t { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: .3em; text-underline-offset: -.05em; text-decoration-skip-ink: none; }
.lp-caminho a:hover .lp-caminho-s { transform: translateX(6px); color: var(--vermelho); }

/* ─── 5. Índice (destaques) ─── */
.lp-indice { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--preto); }
.lp-item { border-bottom: 2px solid var(--preto); }
.lp-item[hidden] { display: none; }
.lp-item a {
    display: grid;
    gap: .5rem;
    padding: 1.5rem 0;
    text-decoration: none;
}
@media (min-width: 768px) {
    .lp-item a { grid-template-columns: 1fr 3rem; gap: 0 2rem; align-items: start; padding: 2rem 0; }
    .lp-item-data:empty { display: none; }
}
.lp-item-data:empty { display: none; }
.lp-item-data { display: block; font-size: 1.125rem; font-weight: 700; color: var(--vermelho); font-variant-numeric: lining-nums tabular-nums; margin-bottom: .4rem; }
.lp-item-t { font-size: clamp(1.4rem, 4.5vw, 2rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem; }
.lp-item-x { font-size: 1.1875rem; color: var(--cinza); margin: 0 0 .75rem; max-width: 62ch; }
/* Só o mais recente se lê inteiro; os outros ficam em três linhas */
.lp-item:not(.lp-item--principal) .lp-item-x { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-item-l { font-size: 1.125rem; font-weight: 700; }
.lp-item-s { display: none; font-size: 2rem; line-height: 1; transition: transform .15s ease; }
@media (min-width: 768px) { .lp-item-s { display: block; text-align: right; } .lp-item-l { display: none; } }
.lp-item a:hover .lp-item-t span { background: linear-gradient(transparent 70%, var(--amarelo) 70%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lp-item a:hover .lp-item-s { transform: translateX(6px); color: var(--vermelho); }

.lp-item--principal a { padding-top: 2rem; }
.lp-item--principal .lp-item-t { font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.02; letter-spacing: -.025em; }
.lp-item--principal .lp-item-x { font-size: 1.3rem; color: var(--preto); }
.lp-tag {
    display: inline-block;
    background: var(--vermelho);
    color: var(--branco);
    font-size: 1.125rem;
    font-weight: 700;
    padding: .15rem .6rem;
    margin-bottom: .4rem;
}
.lp-indice-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.lp-atualizado { font-size: 1.125rem; color: var(--cinza); margin: 0; }

/* ─── 6. Relatórios (capas) ─── */
.lp-capas {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 0 1.25rem;
    margin: 0;
    list-style: none;
    align-items: start;
}
@media (min-width: 768px) { .lp-capas { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 2rem; overflow: visible; } }
.lp-capas li { scroll-snap-align: start; }
/* Capas: linha fina, cantos ligeiramente arredondados, sombra vermelha ao passar */
.lp-capas a {
    display: block;
    border: 1px solid var(--linha-fina);
    border-radius: 10px;
    overflow: hidden;
    background: var(--branco);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lp-capas a:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--vermelho); border-color: var(--vermelho); }
.lp-capas img {
    /* todas na proporção 1200×630 (a das partilhas); as que fogem a isso são cortadas ao centro */
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    object-position: center;
}

/* ─── 7. Projetos — índice numerado ─── */
.lp-proj { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--preto); counter-reset: proj; }
.lp-proj a {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    gap: 0 1rem;
    align-items: center;
    padding: 1.25rem .5rem;
    border-bottom: 2px solid var(--preto);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.lp-proj-n { font-size: 1.125rem; font-weight: 700; color: var(--vermelho); font-variant-numeric: lining-nums tabular-nums; align-self: start; padding-top: .4em; }
.lp-proj-t { display: block; font-size: clamp(1.5rem, 6vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -.025em; overflow-wrap: anywhere; }
.lp-proj-x { display: block; font-size: 1.125rem; color: var(--cinza); margin-top: .4rem; }
.lp-proj-s { font-size: 2rem; transition: transform .15s ease; }
.lp-proj a:hover { background: var(--preto); color: var(--branco); }
.lp-proj a:hover .lp-proj-x { color: var(--cinza-claro); }
.lp-proj a:hover .lp-proj-n { color: var(--amarelo); }
.lp-proj a:hover .lp-proj-s { transform: translateX(6px); }

/* ─── 8. Final: newsletter + contacto (fundo preto) ─── */
.lp-final { background: var(--preto); color: var(--branco); padding: 4rem 0; }
.lp-final .lp-sep { border-color: var(--branco); }
.lp-final .lp-sep-n { color: var(--branco); }
.lp-final .lp-h2 { color: var(--branco); }
@media (min-width: 992px) { .lp-final-grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } }
.lp-form { display: flex; flex-direction: column; gap: .75rem; max-width: 560px; }
.lp-form label { font-size: 1.125rem; font-weight: 700; }
.lp-form input {
    font: 500 1.25rem var(--fonte);
    min-height: 60px;
    padding: .75rem 1rem;
    border: 3px solid var(--branco);
    border-radius: 0;
    background: var(--preto);
    color: var(--branco);
}
.lp-form input::placeholder { color: #9a9a9a; }
.lp-form button { cursor: pointer; font-family: var(--fonte); }
.lp-msg { font-size: 1.125rem; margin-top: 1rem; min-height: 1.5em; }
.lp-msg--ok { color: var(--amarelo); }
.lp-msg--erro { color: #FF9A9A; }
.lp-contacto { margin-top: 3.5rem; }
@media (min-width: 992px) { .lp-contacto { margin-top: 0; } }
.lp-email {
    display: inline-block;
    font-size: clamp(1.75rem, 7vw, 3rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--branco) !important;
    text-decoration: none;
    margin: 0 0 2rem;
    overflow-wrap: anywhere;
}
.lp-email:hover { color: var(--amarelo) !important; }
.lp-lema {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.01em;
    border-top: 2px solid #333;
    padding-top: 2rem;
    margin: 4rem 0 0;
}

/* Títulos em Meta Pro Black (900), como o .meta-pro-font-bold do style1.css
   e a nav. A CDN só serve 250, 400 e 900: pedir 700 cairia no mesmo sítio,
   mas assim fica explícito. */
.lp h1, .lp h2, .lp h3,
.lp-proj-t, .lp-caminho-t, .lp-num-v, .lp-email { font-weight: 900; }

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

/* ════════════════════════════════════════════════════════════════════
   Componentes das páginas de arquivo (metaOBSERVATÓRIO…)
   ════════════════════════════════════════════════════════════════════ */

/* Título longo partido em dois: «meta» por cima, o nome por baixo */
.lp-h1--longo { font-size: clamp(2.6rem, 11.5vw, 8rem); }
.lp-h1-pre { display: block; font-size: .45em; letter-spacing: -.02em; line-height: 1; margin-bottom: .1em; color: var(--vermelho); }

/* Faixa vermelha com imagem ao lado (no telemóvel, por baixo) */
@media (min-width: 992px) {
    .lp-faixa-grelha { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center; }
}
.lp-faixa-img { margin: 2rem 0 0; max-width: 300px; }  /* no telemóvel não deve empurrar tudo para baixo */
.lp-faixa-img img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .5); }
@media (min-width: 992px) { .lp-faixa-img { margin: 0; justify-self: end; max-width: 420px; } }

.lp-aovivo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--branco);
    color: var(--vermelho);
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .25rem .8rem;
    border-radius: 999px;
    margin: 0 0 1.25rem;
}
.lp-aovivo::before {
    content: '';
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--vermelho);
    animation: lp-pulso 1.4s ease-in-out infinite;
}
@keyframes lp-pulso { 50% { opacity: .2; } }

/* Contagem dos resultados do filtro */
.lp-contagem { font-size: 1.125rem; color: var(--cinza); margin: 0; }

/* ─── Cartões: linha fina, cantos arredondados, sombra vermelha ao passar ─── */
.lp-cartoes { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .lp-cartoes { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 1100px) { .lp-cartoes { grid-template-columns: repeat(3, 1fr); } }

.lp-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid var(--linha-fina);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lp-cartao[hidden] { display: none; }
.lp-cartao:hover, .lp-cartao:focus-within {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--vermelho);
    border-color: var(--vermelho);
}
/* Todas as imagens na mesma proporção (1200×630); o enquadramento afina-se
   com object-position no próprio <img> quando o texto da imagem fica cortado */
.lp-cartao-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    object-position: center;
    border-bottom: 1px solid var(--linha-fina);
    background: var(--papel);
}
.lp-cartao-vazio {
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1200 / 630;
    padding: 1.25rem;
    background: var(--preto);
    color: var(--branco);
    font-size: clamp(1.6rem, 5vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
}
.lp-cartao-corpo { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.25rem 1.25rem 1.4rem; }
.lp-cartao-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--cinza); }
.lp-cartao-tipo { background: var(--preto); color: var(--branco); padding: .05rem .55rem; border-radius: 4px; }
.lp-cartao-t { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; margin: 0; font-weight: 900; }
.lp-cartao-t a { text-decoration: none; }
/* O título estica-se por cima do cartão inteiro: toca-se em qualquer sítio */
.lp-cartao-t a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lp-cartao-t a:focus-visible { outline: none; }
.lp-cartao-x { font-size: 1.125rem; line-height: 1.5; color: var(--cinza); margin: 0; }
.lp-cartao-acoes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: auto 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid var(--linha-fina);
}
.lp-cartao-acoes a {
    position: relative;
    z-index: 2;   /* por cima do link esticado do título */
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--vermelho) !important;
    text-decoration: none;
}
.lp-cartao-acoes a:hover { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: .25em; text-underline-offset: .1em; }

@media (prefers-reduced-motion: reduce) {
    .lp-aovivo::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Componentes da página «Acerca»
   ════════════════════════════════════════════════════════════════════ */

/* Texto corrido grande (manifesto) */
.lp-texto-longo { max-width: 46rem; }
.lp-texto-longo p { font-size: clamp(1.25rem, 2.8vw, 1.55rem); line-height: 1.5; margin: 0 0 1.25rem; }
.lp-texto-longo--manifesto p:first-child { font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.3; }

/* Pontos numerados (o que fazemos, como trabalhamos) */
.lp-pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; counter-reset: ponto; }
@media (min-width: 768px) { .lp-pontos { grid-template-columns: 1fr 1fr; } }
.lp-ponto { border-top: 2px solid var(--preto); padding: 1.25rem 0 1.75rem; counter-increment: ponto; }
.lp-ponto::before {
    content: counter(ponto, decimal-leading-zero);
    display: block;
    font-size: 1.125rem;
    font-weight: 900;
    color: var(--vermelho);
    font-variant-numeric: lining-nums tabular-nums;
}
.lp-ponto-t { font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; margin: .4rem 0 .6rem; }
.lp-ponto-x { font-size: 1.1875rem; line-height: 1.55; color: var(--cinza); margin: 0; }

/* Números sem link (faixa preta) */
div.lp-num { cursor: default; }

/* Meios de comunicação: lista tipográfica grande */
.lp-meios { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem 0; margin: 0 0 2rem; padding: 0; }
.lp-meios li {
    font-size: clamp(1.9rem, 7vw, 3.6rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.025em;
}
.lp-meios li:not(:last-child)::after { content: '·'; color: var(--vermelho); margin: 0 .35em; }

/* Faixa vermelha da equipa */
.lp-faixa strong { font-weight: 900; }
.lp-colaborar { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid rgba(255, 255, 255, .5); }
.lp-colaborar h3 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; margin: 0 0 .75rem; }
.lp-colaborar .lp-email { margin-top: .5rem; }

/* ════════════════════════════════════════════════════════════════════
   metaPRESS — lista de notícias (usa .lp-indice / .lp-item do índice)
   ════════════════════════════════════════════════════════════════════ */
.lp-item-orgao {
    display: inline-block;
    margin-left: .6rem;
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--preto);
}
.lp-item-tema { display: inline-block; margin-left: .6rem; font-size: 1.125rem; font-weight: 700; color: var(--cinza); }
.lp-hero .lp-meios { margin-top: 2rem; }
.lp-hero .lp-meios li { font-size: clamp(1.35rem, 4.2vw, 2.3rem); }