/* =====================================================================
   Encontrei.PT — direcção de arte v2 "PORTAL"
   ---------------------------------------------------------------------
   O site é um portal nacional com três balcões:
     1. DIRECTÓRIO  — quem existe, por sector e por localidade;
     2. CIDADES     — o guia de cada concelho e distrito;
     3. NOTÍCIAS    — o que se passa no país, com a fonte de origem.

   Identidade herdada do legado (o dono pediu para seguir com ela):
     logotipo  — índigo #3F4096 + laranja #F8A364 + carvão #3B4144;
     cor       — laranja #FF9400 (a cor da navegação do site antigo).
   O laranja da marca entra sempre como FAIXA ou PESTANA (com tinta
   escura por cima, 8,21:1). Nunca como texto sobre branco (2,21:1) —
   para isso existe --marca-tinta #B35C00 (4,72:1).

   Regras do sistema:
     - filete de 1px em vez de caixas, sombras ou gradientes;
     - cantos direitos (raio 2px);
     - números em monoespaçado tabular (18 411);
     - zero JavaScript: menu e filtros em <details> e formulário GET;
     - contraste de todos os pares validado por script.
   ===================================================================== */

/* --- Tipografia auto-alojada ---------------------------------------- */

@font-face {
    font-family: "Familjen Grotesk";
    src: url("../fonts/encontrei/familjen-grotesk-400-latin.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Familjen Grotesk";
    src: url("../fonts/encontrei/familjen-grotesk-400-latin-ext.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Familjen Grotesk";
    src: url("../fonts/encontrei/familjen-grotesk-500-latin.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Familjen Grotesk";
    src: url("../fonts/encontrei/familjen-grotesk-500-latin-ext.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Familjen Grotesk";
    src: url("../fonts/encontrei/familjen-grotesk-700-latin.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Familjen Grotesk";
    src: url("../fonts/encontrei/familjen-grotesk-700-latin-ext.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Mono";
    src: url("../fonts/encontrei/dm-mono-400-latin.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Mono";
    src: url("../fonts/encontrei/dm-mono-400-latin-ext.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Mono";
    src: url("../fonts/encontrei/dm-mono-500-latin.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Mono";
    src: url("../fonts/encontrei/dm-mono-500-latin-ext.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ---------------------------------------------------------- */

:root {
    /* Tinta e papel */
    --tinta: #12161b;
    --tinta-media: #5b6371;
    --tinta-clara: #a9b0ba;
    --papel: #ffffff;
    --superficie: #f5f4f1;
    --linha: #e0dfdb;
    --linha-escura: #333a45;

    /* Marca, herdada do legado */
    --marca: #ff9400;          /* laranja do site antigo — só faixa/pestana */
    --marca-tinta: #b35c00;    /* laranja legível sobre branco (4,72:1) */
    --marca-fundo: #fff3e0;
    --marca-faixa: #ffdcbe;    /* pêssego da faixa de últimas (o tom da referência do dono) */
    --marca-linha: #f0c48a;

    /* Do logotipo */
    --indigo: #3f4096;         /* ligações (8,80:1 sobre branco) */
    --indigo-fundo: #eeeff9;
    --carvao: #3b4144;

    --fonte: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --limite: 78rem;
    --leitura: 42rem;
    --raio: 2px;

    --v-seccao: clamp(2.25rem, 4.5vw, 3.75rem);
    --esp-1: 0.5rem;
    --esp-2: 1rem;
    --esp-3: 1.5rem;
    --esp-4: 2.5rem;

    --t-manchete: clamp(1.75rem, 3.6vw, 2.75rem);
    --t-seccao: clamp(1.3rem, 2.2vw, 1.75rem);
    --t-corpo: 1rem;
    --t-pequeno: 0.9375rem;
    --t-etiqueta: 0.6875rem;
    --toque: 2.75rem;          /* área de toque mínima no mobile */
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: var(--t-corpo);
    line-height: 1.65;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--esp-2);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
    text-wrap: balance;
}

p { margin: 0 0 var(--esp-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--esp-2); padding-left: 1.15rem; }

:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
}

.tinta-escura :focus-visible,
.faixa :focus-visible,
.apelo :focus-visible,
.manchete :focus-visible { outline-color: var(--marca); }

.salto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinta);
    color: var(--papel);
    padding: var(--esp-1) var(--esp-2);
    z-index: 100;
}
.salto:focus { left: 0; }

.limite {
    max-width: var(--limite);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.limite--leitura { max-width: calc(var(--leitura) + 3rem); }

/* --- Peças tipográficas ---------------------------------------------- */

.etiqueta {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta-media);
    margin: 0 0 var(--esp-1);
}
.tinta-escura .etiqueta,
.faixa .etiqueta,
.apelo .etiqueta,
.manchete .etiqueta { color: var(--tinta-clara); }
.etiqueta--marca { color: var(--marca-tinta); }

.numeros { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.selo {
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--tinta-media);
    white-space: nowrap;
}
.selo--marca { border-color: var(--marca-linha); color: var(--marca-tinta); background: var(--marca-fundo); }
.selo--indigo { border-color: #c9cbf0; color: var(--indigo); background: var(--indigo-fundo); }

.titulo-pagina {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    margin-bottom: 0.35rem;
}

.lead {
    font-size: 1.0625rem;
    color: var(--tinta-media);
    max-width: var(--leitura);
}

/* Marca gráfica de secção: pestana laranja + filete. Elemento
   assinatura do portal, herdado da cor de navegação do legado. */
.seccao__pestana {
    display: inline-block;
    width: 1.35rem;
    height: 0.42rem;
    background: var(--marca);
    margin-bottom: 0.5rem;
}

/* --- Cabeçalho (masthead) -------------------------------------------- */

.faixa {
    background: var(--carvao);
    color: #d9dcdd;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}
.faixa__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2);
    min-height: 2.35rem;
    flex-wrap: wrap;
    padding-block: 0.35rem;
}
.faixa__linha > p { margin: 0; }
.faixa a { color: #ffffff; }
.faixa a:hover { color: var(--marca); }
.faixa__lista { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.faixa__lista a { padding-block: 0.25rem; }

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
}

.cabecalho__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    min-height: 6.75rem;
}

.marca { display: inline-flex; align-items: center; flex: none; }
.marca:hover { text-decoration: none; }
/* O logotipo é agora o único elemento da marca (o dono pediu só a
   imagem). A pedido do dono passou de 3,6rem para 5rem (80 px), para ter
   presença de masthead. O cabeçalho acompanha com 6,75rem de altura
   mínima: sobram 14 px de ar acima e abaixo do logotipo, para ele não
   encostar às bordas. */
.marca__logo { height: 5rem; width: auto; flex: none; }
.marca__texto { display: grid; line-height: 1.05; }
.marca__nome { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); }
.marca__slogan {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--marca-tinta);
    text-transform: uppercase;
}

/* Navegação principal — a pestana laranja marca a secção activa. */
.menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.menu > a {
    color: var(--tinta);
    font-size: var(--t-pequeno);
    font-weight: 500;
    position: relative;
    padding: 0.35rem 0;
}
.menu > a:hover { text-decoration: none; color: var(--marca-tinta); }
.menu > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--marca);
    transition: width 220ms ease;
}
.menu > a:hover::after,
.menu > a[aria-current="page"]::after { width: 100%; }
.menu > a[aria-current="page"] { color: var(--tinta); }

.menu__cta {
    border: 1px solid var(--tinta);
    border-radius: var(--raio);
    padding: 0.5rem 0.85rem !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.menu__cta::after { display: none; }
.menu__cta:hover {
    background: var(--tinta);
    color: var(--papel) !important;
    border-color: var(--tinta);
}

.menu-movel { display: none; }
.menu-movel > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 0.85rem 0.9rem;
    min-height: var(--toque);
    display: flex;
    align-items: center;
    color: var(--tinta);
}
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel[open] > summary { background: var(--superficie); border-color: var(--tinta); }
.menu-movel__lista {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    padding: 0.5rem clamp(1rem, 4vw, 2.5rem) 1.25rem;
    display: grid;
}
.menu-movel__lista a {
    color: var(--tinta);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--linha);
    min-height: var(--toque);
    display: flex;
    align-items: center;
    font-weight: 500;
}
.menu-movel__lista a:last-child { border-bottom: 0; }

/* --- Sub-navegação de secção (pestanas) ------------------------------ */

.subnav {
    border-bottom: 1px solid var(--linha);
    background: var(--papel);
}
.subnav__lista {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
}
.subnav__lista::-webkit-scrollbar { display: none; }
.subnav__lista a {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tinta-media);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.subnav__lista a:hover { color: var(--tinta); text-decoration: none; }
.subnav__lista a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--marca); }
.subnav__titulo {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta-clara);
    align-self: center;
    white-space: nowrap;
    padding-right: 0.35rem;
    margin: 0;
}

/* --- Faixa de aviso de migração -------------------------------------- */
/* Retirada a pedido do dono. A cor do fundo (--marca-fundo) passou a vestir
   a linha de últimas, que assim deixa de ser uma tira branca e passa a ser
   uma faixa com cor, sem mais um bloco de texto no topo do portal. */

/* --- Manchete (abertura de portal) ----------------------------------- */

.manchete {
    background: var(--papel);
    padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 clamp(1.75rem, 4vw, 3rem);
}
.manchete__grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.manchete__principal { border-top: 3px solid var(--tinta); padding-top: var(--esp-2); }
.manchete__data {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--marca-tinta);
    margin: 0 0 0.5rem;
}
.manchete__titulo {
    font-size: var(--t-manchete);
    letter-spacing: -0.03em;
    margin-bottom: var(--esp-2);
}
.manchete__titulo a { color: var(--tinta); }
.manchete__titulo a:hover { color: var(--marca-tinta); }
.manchete__resumo {
    font-size: 1.0625rem;
    color: var(--tinta-media);
    margin-bottom: var(--esp-2);
}
.manchete__meta {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-media);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin: 0;
}

.agenda { border-top: 1px solid var(--linha); }
.agenda__titulo {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta);
    padding: 0.7rem 0 0.5rem;
    margin: 0;
    border-bottom: 1px solid var(--linha);
}
.agenda__lista { list-style: none; margin: 0; padding: 0; }
.agenda__item { border-bottom: 1px solid var(--linha); }
.agenda__item a {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.65rem 0.3rem;
    color: var(--tinta);
    transition: background 160ms ease;
}
.agenda__item a:hover { background: var(--superficie); text-decoration: none; color: var(--marca-tinta); }
.agenda__numero {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--marca-tinta);
    padding-top: 0.15rem;
}
.agenda__texto { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.agenda__fonte {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-media);
    margin-top: 0.2rem;
    font-weight: 400;
}

.procura { margin: 0; }
.procura__linha {
    display: flex;
    gap: 0;
    max-width: 34rem;
}
.procura__linha--largo { max-width: none; }
.procura input[type="search"],
.procura input[type="text"] {
    flex: 1;
    min-width: 0;
    appearance: none;
    background: var(--papel);
    border: 1px solid var(--tinta);
    border-right: 0;
    border-radius: var(--raio) 0 0 var(--raio);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: var(--t-corpo);
    padding: 0.85rem 1rem;
    min-height: var(--toque);
}
.procura input::placeholder { color: var(--tinta-media); }
.procura input:focus {
    outline: 2px solid var(--tinta);
    outline-offset: -1px;
}

.botao {
    display: inline-block;
    font-family: var(--fonte);
    font-size: var(--t-pequeno);
    font-weight: 500;
    line-height: 1;
    padding: 0.95rem 1.35rem;
    border: 1px solid var(--tinta);
    border-radius: var(--raio);
    background: var(--tinta);
    color: var(--papel);
    cursor: pointer;
    text-align: center;
    min-height: var(--toque);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.botao:hover { text-decoration: none; background: var(--papel); color: var(--tinta); }
.botao--acento { background: var(--indigo); border-color: var(--indigo); color: var(--papel); }
.botao--acento:hover { background: var(--papel); color: var(--indigo); }
.botao--claro { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.botao--claro:hover { background: transparent; border-color: var(--papel); color: var(--papel); }
.botao--linha { background: transparent; color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: var(--papel); }
.procura .botao {
    border-radius: 0 var(--raio) var(--raio) 0;
    padding: 0.85rem 1.5rem;
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--papel);
}
.procura .botao:hover { background: #2b323b; color: var(--papel); }

/* --- Cartões (guias, sectores, cidades) ------------------------------ */

.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
}
.cartao {
    background: var(--papel);
    padding: 1.15rem 1.15rem 1.3rem;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    transition: background 160ms ease;
}
.cartao:hover { background: var(--superficie); }
.cartao__etiqueta {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marca-tinta);
    margin: 0;
}
.cartao__titulo { font-size: 1.2rem; margin: 0; letter-spacing: -0.02em; }
.cartao__titulo a { color: var(--tinta); }
.cartao__titulo a:hover { color: var(--marca-tinta); }
.cartao__contagem {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-media);
    margin: 0;
}
.cartao__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.cartao__lista a {
    display: inline-block;
    font-size: 0.8125rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--tinta-media);
}
.cartao__lista a:hover { border-color: var(--marca); color: var(--marca-tinta); text-decoration: none; }

/* --- Secções --------------------------------------------------------- */

.seccao { padding: var(--v-seccao) 0; border-top: 1px solid var(--linha); }
.seccao--sem-linha { border-top: 0; }

.seccao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--esp-2);
    margin-bottom: var(--esp-3);
}
.seccao__cabecalho h2 { font-size: var(--t-seccao); margin: 0; }
.seccao__cabecalho .etiqueta { margin: 0; }
.seccao__nota {
    font-size: 0.875rem;
    color: var(--tinta-media);
    margin: 0;
    max-width: 46ch;
}

.ligacao-seta {
    font-size: var(--t-pequeno);
    font-weight: 500;
    color: var(--marca-tinta);
    white-space: nowrap;
}
.ligacao-seta::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.35rem;
    transition: transform 200ms ease;
}
.ligacao-seta:hover { text-decoration: none; }
.ligacao-seta:hover::after { transform: translateX(4px); }

/* --- Índice (listas com contagem) ------------------------------------ */

.indice {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--linha);
}
.indice--colunas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.indice--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.indice__linha { border-bottom: 1px solid var(--linha); }
.indice__linha > a,
.indice__linha > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-2);
    padding: 0.62rem 0.3rem;
    min-height: var(--toque);
    color: var(--tinta);
    transition: background 160ms ease, color 160ms ease;
}
.indice__linha > a:hover {
    background: var(--superficie);
    color: var(--marca-tinta);
    text-decoration: none;
}
.indice__contagem {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-media);
}
.indice__linha > a:hover .indice__contagem { color: var(--marca-tinta); }
.indice__vazio { padding: 0.75rem 0.3rem; color: var(--tinta-media); border-bottom: 1px solid var(--linha); }

/* --- Fichas (linhas de catálogo) ------------------------------------- */

.fichas { border-top: 1px solid var(--linha); }

.ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.15rem 2rem;
    padding: 0.95rem 0.3rem;
    border-bottom: 1px solid var(--linha);
    transition: background 160ms ease;
}
.ficha:hover { background: var(--superficie); }
.ficha__nome {
    grid-column: 1;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ficha__nome a { color: var(--tinta); }
.ficha__nome a:hover { color: var(--marca-tinta); }
.ficha__nome a { display: inline-block; padding-block: 0.28rem; margin-block: -0.28rem; }
.ficha__meta {
    grid-column: 1;
    margin: 0;
    font-size: 0.875rem;
    color: var(--tinta-media);
}
.ficha__meta a { color: var(--tinta-media); }
.ficha__meta a:hover { color: var(--marca-tinta); }
.ficha__morada { grid-column: 1; margin: 0; font-size: 0.875rem; color: var(--tinta-media); }
.ficha__contactos {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.9;
}
.ficha__contactos a { display: block; color: var(--tinta); }
.ficha__contactos a:hover { color: var(--marca-tinta); }
.ficha__imagem { display: none; }
.ficha__sep { color: var(--linha); margin: 0 0.3rem; }

/* --- Filtros (formulário GET, zero JavaScript) ----------------------- */

.filtros {
    border: 1px solid var(--linha);
    border-top: 2px solid var(--tinta);
    padding: var(--esp-2) var(--esp-3) var(--esp-3);
    background: var(--papel);
    margin-bottom: var(--esp-3);
}
.filtros__titulo {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta);
    margin: 0 0 var(--esp-2);
}
.filtros__grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--esp-2);
    align-items: end;
}
.campo { display: grid; gap: 0.3rem; }
.campo label {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-media);
}
.campo select,
.campo input {
    appearance: none;
    width: 100%;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: var(--t-pequeno);
    padding: 0.6rem 2rem 0.6rem 0.65rem;
    min-height: var(--toque);
    background-image: linear-gradient(45deg, transparent 50%, var(--tinta-media) 50%), linear-gradient(135deg, var(--tinta-media) 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 1.25rem, calc(100% - 0.7rem) 1.25rem;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
}
.campo input { background-image: none; padding-right: 0.65rem; }
.campo select:focus, .campo input:focus { outline: 2px solid var(--indigo); outline-offset: -1px; }
.filtros__acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: var(--esp-2); }
.filtros__resumo {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-media);
}

/* --- Estatísticas (guia de cidade) ----------------------------------- */

.estatisticas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    margin-bottom: var(--esp-3);
}
.estatisticas__item { background: var(--papel); padding: 0.85rem 0.9rem; }
.estatisticas dt {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-media);
    margin-bottom: 0.15rem;
}
.estatisticas dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 1.4rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--tinta);
}

/* --- Guia por sector dentro de uma localidade ------------------------ */

.guia-sector {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--esp-3);
    padding: 1.1rem 0.3rem;
    border-bottom: 1px solid var(--linha);
}
.guia-sector__cabecalho { display: grid; align-content: start; gap: 0.2rem; }
.guia-sector__nome { font-size: 1.0625rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.guia-sector__nome a { display: inline-block; padding-block: 0.4rem; margin-block: -0.4rem; }
.guia-sector__nome a { color: var(--tinta); }
.guia-sector__nome a:hover { color: var(--marca-tinta); }
.guia-sector__contagem {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-media);
    margin: 0;
}
.guia-sector__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.guia-sector__lista a {
    display: inline-block;
    padding-block: 0.2rem;
    color: var(--tinta-media);
    font-size: 0.9375rem;
}
.guia-sector__lista a:hover { color: var(--marca-tinta); }
.guia-sector__mais {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--marca-tinta);
    padding-top: 0.15rem;
}

/* --- Diário (listagem de notícias) ----------------------------------- */

.diario { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.diario__item {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.35rem 1.75rem;
    padding: 1.05rem 0.3rem;
    border-bottom: 1px solid var(--linha);
    transition: background 160ms ease;
}
.diario__item:hover { background: var(--superficie); }
.diario__data {
    grid-column: 1;
    grid-row: 1 / span 3;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--tinta-media);
    padding-top: 0.35rem;
    white-space: nowrap;
}
.diario__titulo {
    grid-column: 2;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.3;
    color: var(--tinta);
}
.diario__item:hover .diario__titulo { color: var(--marca-tinta); }
.diario__resumo {
    grid-column: 2;
    margin: 0;
    font-size: var(--t-pequeno);
    color: var(--tinta-media);
}
.diario__rodape {
    grid-column: 2;
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--tinta-media);
}

/* --- Artigo de notícia ----------------------------------------------- */

.artigo__cabecalho {
    border-bottom: 1px solid var(--linha);
    padding-bottom: var(--esp-3);
    margin-bottom: var(--esp-3);
}
.artigo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-media);
    margin: 0;
}

.nota-fonte {
    border-left: 2px solid var(--marca);
    background: var(--superficie);
    padding: var(--esp-2) var(--esp-3);
    margin: 0 0 var(--esp-3);
    font-size: var(--t-pequeno);
}
.nota-fonte p { margin: 0; }

.texto { font-size: 1.0625rem; line-height: 1.75; }
.texto > * + * { margin-top: var(--esp-3); }
.texto h2 { font-size: 1.4rem; margin-top: var(--esp-4); }
.texto h3 { font-size: 1.15rem; margin-top: var(--esp-3); }
.texto ul, .texto ol { padding-left: 1.25rem; }
.texto li + li { margin-top: 0.4rem; }
.texto blockquote {
    margin: var(--esp-3) 0;
    padding-left: var(--esp-3);
    border-left: 2px solid var(--linha);
    color: var(--tinta-media);
}
.texto img { margin: var(--esp-3) 0; }
.texto a { text-decoration: underline; text-underline-offset: 0.2em; }
.texto figure { margin: var(--esp-3) 0; }
.texto figcaption { font-size: 0.8125rem; color: var(--tinta-media); }

/* --- Migalhas -------------------------------------------------------- */

.migalhas { margin-bottom: var(--esp-2); }
.migalhas ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--tinta-media);
}
.migalhas li { display: flex; gap: 0.4rem; }
.migalhas li + li::before { content: "/"; color: var(--linha); }
.migalhas a { color: var(--tinta-media); }
.migalhas a:hover { color: var(--marca-tinta); }
.migalhas [aria-current="page"] { color: var(--tinta); }

/* --- Caixa de resultado vazio ---------------------------------------- */

.vazio {
    border: 1px solid var(--linha);
    border-left: 3px solid var(--marca);
    background: var(--superficie);
    padding: var(--esp-3);
    max-width: 48rem;
}
.vazio__titulo { font-weight: 600; margin-bottom: 0.4rem; }
.vazio__texto { font-size: var(--t-pequeno); color: var(--tinta-media); margin: 0; }
.vazio--pagina { margin: clamp(2rem, 6vw, 4rem) auto; }

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--esp-3);
}

/* --- Cabeçalho de página interna ------------------------------------- */

.pagina__cabecalho {
    padding: clamp(1.5rem, 4vw, 2.75rem) 0 var(--esp-3);
    border-bottom: 1px solid var(--linha);
    margin-bottom: var(--esp-3);
}
.pagina__cabecalho .procura { margin-top: var(--esp-2); }

/* --- Faixa de apelo (CTA) -------------------------------------------- */

.apelo {
    background: var(--marca);
    color: var(--tinta);
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.apelo__grelha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
}
.apelo h2 { font-size: var(--t-seccao); margin: 0 0 0.35rem; color: var(--tinta); }
.apelo p { color: #3a2a08; margin: 0; max-width: 52ch; }
.apelo .botao { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.apelo .botao:hover { background: transparent; color: var(--tinta); border-color: var(--tinta); }

/* --- Rodapé ---------------------------------------------------------- */

.rodape {
    background: var(--carvao);
    color: #c7cbcd;
    padding: var(--esp-4) 0 var(--esp-3);
    font-size: var(--t-pequeno);
}
.rodape__grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 4vw, 2.75rem);
    padding-bottom: var(--esp-4);
}
.rodape__logo { height: 2.4rem; width: auto; margin-bottom: 0.75rem; }
.rodape__texto { margin: 0; max-width: 34ch; }
.rodape__titulo {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--papel);
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--marca);
}
.rodape nav { display: grid; align-content: start; }
.rodape a { color: #dfe2e3; }
.rodape a:hover { color: var(--papel); }
.rodape__lista { display: grid; gap: 0.2rem; }
.rodape__lista a { padding-block: 0.25rem; display: inline-block; }
.rodape__base {
    border-top: 1px solid #545a5d;
    padding-top: var(--esp-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}
.rodape__base p { margin: 0; }

/* --- Entrada dos blocos ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .manchete__principal,
    .agenda {
        animation: entrar 420ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
    .manchete__principal { animation-delay: 40ms; }
    .agenda { animation-delay: 120ms; }
}

@keyframes entrar {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

@media (max-width: 68rem) {
    .menu { gap: 1.15rem; }
    .manchete__grelha { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--esp-3); }
    .rodape__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 60rem) {
    .menu { display: none; }
    .menu-movel { display: block; position: static; }
    .manchete__grelha { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
    .guia-sector { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .marca__slogan { display: none; }
}

@media (max-width: 44rem) {
    /* No telemóvel o logotipo cresce na mesma proporção (2,6 para
       3,6rem), mas o cabeçalho fica em 5,5rem em vez dos 6,75rem do
       computador: o ecrã é curto e o espaço vertical é do conteúdo.
       Mantém 15 px de ar acima e abaixo, como no computador. */
    .marca__logo { height: 3.6rem; }
    .cabecalho__linha { min-height: 5.5rem; }
    .procura__linha { flex-direction: column; }
    .procura input[type="search"],
    .procura input[type="text"] {
        border-right: 1px solid var(--tinta);
        border-radius: var(--raio) var(--raio) 0 0;
    }
    .procura .botao { border-radius: 0 0 var(--raio) var(--raio); width: 100%; }

    .ficha { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
    .ficha__contactos {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
        padding-top: 0.4rem;
    }
    .ficha__contactos a { display: inline-block; margin-right: 0.9rem; min-height: var(--toque); }

    .diario__item { grid-template-columns: minmax(0, 1fr); }
    .diario__data { grid-row: 1; padding-top: 0; }
    .diario__titulo, .diario__resumo, .diario__rodape { grid-column: 1; }

    .faixa__linha { justify-content: flex-start; }
    .cartoes { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
    .indice--colunas { grid-template-columns: minmax(0, 1fr); }
    .indice--duas { grid-template-columns: minmax(0, 1fr); }
    .filtros__grelha { grid-template-columns: minmax(0, 1fr); }
    .migalhas ol { font-size: 0.7rem; }
    .rodape__grelha { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
}

@media (max-width: 30rem) {
    .titulo-pagina { font-size: 1.5rem; }
    .estatisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Áreas de toque --------------------------------------------------- */
/* WCAG 2.5.8: alvos de toque de 24x24 px no mínimo; nas ligações de texto
   corrido a área é ampliada com padding negativo na margem, para não mexer
   no ritmo vertical da mancha. */

.ligacao-seta,
.guia-sector__mais,
.paginacao__elo,
.faixa__lista a,
.subnav__lista a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
}
.paginacao__elo { padding-inline: 0.35rem; margin-inline: -0.35rem; }
.ligacao-seta, .guia-sector__mais { padding-block: 0.35rem; margin-block: -0.35rem; }

.migalhas a,
.ticker__todas a,
.ficha__meta a,
.ficha-detalhe__meta a,
.diario__rodape a,
.dados dd a,
.rodape__lista a {
    display: inline-block;
    padding-block: 0.45rem;
    margin-block: -0.45rem;
}
.diario__titulo { display: inline-block; padding-block: 0.45rem; margin-block: -0.45rem; }

.cartao__lista a { display: inline-flex; align-items: center; min-height: 1.85rem; }
.cartao__titulo a { display: inline-block; padding-block: 0.35rem; margin-block: -0.35rem; }
.manchete__meta a, .artigo__meta a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.agenda__item a { padding-block: 0.8rem; }
.marca { min-height: 2.75rem; }
.ficha__nome a { padding-block: 0.45rem; margin-block: -0.45rem; }

/* --- Página de empresa ----------------------------------------------- */

.ficha-detalhe__cabecalho {
    border-bottom: 1px solid var(--linha);
    padding-bottom: var(--esp-3);
    margin-bottom: var(--esp-3);
}
.ficha-detalhe__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: var(--t-pequeno);
    color: var(--tinta-media);
}
.ficha-detalhe__meta a { color: var(--tinta-media); }
.ficha-detalhe__meta a:hover { color: var(--marca-tinta); }

/* Imagem destacada: fotografia própria (15 fichas em 18.411) ou a placa
   do sector, com o ícone e o nome da categoria. A placa não é esticada
   acima do tamanho em que foi desenhada — uma placa ampliada parece um
   erro; a fotografia também não é ampliada acima do original. */
.ficha-imagem { margin: 0 0 var(--esp-3); }
.ficha-imagem img { display: block; height: auto; }
.ficha-imagem--foto img { max-width: 100%; border: 1px solid var(--linha); }
.ficha-imagem--placa img { width: min(100%, 25rem); }

.ficha-detalhe__grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.dados { margin: 0; border-top: 1px solid var(--linha); }
.dados__linha {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--esp-2);
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--linha);
    align-items: baseline;
}
.dados dt {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-media);
}
.dados dd { margin: 0; word-break: break-word; }
.dados dd a { color: var(--tinta); }
.dados dd a:hover { color: var(--marca-tinta); }

@media (max-width: 44rem) {
    .ficha-detalhe__grelha { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
    .dados__linha { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* --- Paginação -------------------------------------------------------- */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    margin-top: var(--esp-4);
    padding: 0.4rem 0.3rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.paginacao__elo { color: var(--tinta); }
.paginacao__elo:hover { color: var(--marca-tinta); }
.paginacao__elo--inerte { color: var(--tinta-clara); }
.paginacao__posicao { color: var(--tinta-media); }

/* --- Avisos em bloco -------------------------------------------------- */

.bloco-juridico { font-size: 0.875rem; color: var(--tinta-media); }

/* Procura em página interna: a caixa já nasce clara, este modificador
   só garante o ritmo certo quando vem logo a seguir ao cabeçalho. */
.procura--clara { margin-top: var(--esp-2); }

/* =====================================================================
   CAPA DO PORTAL — azulejos, secções com cor, publicidade e últimas
   ---------------------------------------------------------------------
   Herança do legado, pedida pelo dono: entrar por categoria e por
   distrito com imagem, secções de notícias com cor própria, mini-banner
   de últimas com publicidade ao lado e linha de últimas no cabeçalho.
   Regras do sistema mantidas: filete de 1px, raio 2px, zero sombras,
   zero gradientes, zero JavaScript. As animações entram só por
   `transform`/`opacity` e respeitam `prefers-reduced-motion`.
   ===================================================================== */

/* --- Linha de últimas do cabeçalho ---------------------------------- */
/* Dez manchetes a desfilar na horizontal. São duas cópias da mesma
   lista, deslocadas em espelho: quando a primeira sai de cena a segunda
   ocupa exactamente o lugar dela, e o reinício do ciclo é invisível.
   Tudo em CSS — o site continua sem uma linha de JavaScript. As duas
   margens da máscara suavizam a entrada e a saída das manchetes. */

.ticker {
    --ticker-folga: 3rem;
    /* Uma só cor viva, a pêssego da referência do dono: a faixa é o
       acento do topo e não precisa de fios nem de pastilha por cima. */
    background: var(--marca-faixa);
}
.ticker__linha {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 2.85rem;
}
.ticker__rotulo {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Sem pastilha: sobre o pêssego da faixa o laranja da marca quase
   desaparecia (1,5:1) e a faixa ficava com três acentos a competir. O
   rótulo passa a tinta, separado das manchetes por um fio. */
.ticker__rotulo a {
    display: inline-block;
    padding-block: 0.35rem;
    padding-right: 0.85rem;
    border-right: 1px solid #e2a86a;
    color: var(--tinta);
    font-weight: 700;
    text-decoration: none;
}
.ticker__rotulo a:hover { color: var(--marca-tinta); }
.ticker__todas {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ticker__todas a { color: var(--tinta); }
/* No telemóvel sobra pouco: a tira fica só com o rótulo e as manchetes. */
@media (max-width: 760px) { .ticker__todas { display: none; } }
.ticker__janela {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: var(--ticker-folga);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 3.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 3.5rem), transparent 100%);
}
.ticker__pista {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ticker-folga);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ticker__pista a {
    display: block;
    padding-block: 0.4rem;
    font-size: 0.875rem;
    color: var(--tinta);
    white-space: nowrap;
}
.ticker__pista a:hover { color: var(--marca-tinta); }
.ticker__pista .ponto-cor { margin-right: 0.5rem; }

@media (prefers-reduced-motion: no-preference) {
    .ticker__pista { animation: desfilar 96s linear infinite; }
    /* Quem lê, manda: o desfile pára debaixo do rato e do teclado. */
    .ticker:hover .ticker__pista,
    .ticker:focus-within .ticker__pista { animation-play-state: paused; }
}

@keyframes desfilar {
    to { transform: translateX(calc(-100% - var(--ticker-folga))); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker__pista { animation: none !important; }
    .ticker__eco { display: none; }
    .ticker__janela { overflow-x: auto; scrollbar-width: none; }
    .ticker__janela::-webkit-scrollbar { display: none; }
}

/* --- Procura no cabeçalho ------------------------------------------- */

.procura-cabecalho {
    display: flex;
    align-items: stretch;
    margin-left: auto;
    max-width: 17rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel);
    transition: border-color 180ms ease;
}
.procura-cabecalho:focus-within { border-color: var(--tinta); }
.procura-cabecalho input {
    font: inherit;
    font-size: 0.875rem;
    color: var(--tinta);
    background: transparent;
    border: 0;
    min-width: 0;
    width: 100%;
    padding: 0.5rem 0.6rem;
}
.procura-cabecalho input:focus { outline: none; }
.procura-cabecalho input::placeholder { color: var(--tinta-media); }
.procura-cabecalho button {
    border: 0;
    background: transparent;
    color: var(--tinta-media);
    font-size: 0.95rem;
    padding-inline: 0.7rem;
    cursor: pointer;
}
.procura-cabecalho button:hover { color: var(--marca-tinta); }
.procura-cabecalho--movel {
    display: flex;
    max-width: none;
    margin: 0 0 0.5rem;
}
.procura-cabecalho--movel button {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta);
    padding-inline: 0.85rem;
    border-left: 1px solid var(--linha);
}

/* --- Cabeça da capa -------------------------------------------------- */

.capa { padding: clamp(1.75rem, 4vw, 3rem) 0 0; }
.capa__grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
}
.capa__titulo {
    font-size: clamp(2.1rem, 5.1vw, 3.75rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0.6rem 0 0.85rem;
    max-width: 24ch;
}
.capa__lead { margin-top: 0; }

/* --- Primeiro ecrã do portal (duas colunas) -------------------------- */
/* Composição pedida pelo dono: 65% de texto e procura à esquerda, 35% de
   imagem à direita. O título perde a largura máxima curta porque a
   coluna já o limita, e a imagem é o único acento do bloco — sem
   molduras, sem sombras, sem pastilhas. No telemóvel as colunas passam
   a uma só e a imagem fica depois da procura: nada empurra o campo de
   busca para fora do ecrã. */

.capa--guia { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.capa__grelha--guia {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 3.75rem);
}

.capa__grelha--guia .capa__titulo { max-width: none; }

.capa__figura { margin: 0; }

.capa__figura img {
    display: block;
    width: 100%;
    height: auto;
}

/* Abaixo de 60rem (a mesma fronteira em que o menu passa a gaveta) o
   primeiro ecrã volta a uma coluna: texto e procura primeiro, imagem
   depois, com largura limitada para não virar um bloco de parede. */
@media (max-width: 60rem) {
    .capa__grelha--guia { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
    .capa__figura { max-width: 26rem; }
}

/* --- Números do guia ------------------------------------------------ */
/* Uma tira de meta, não uma faixa de cartaz. Fica entre os dois eixos do
   directório — categorias acima, terras abaixo — e diz a dimensão do
   índice com dois filetes de 1px e muito ar: o campo escuro cortava a
   página a meio e pesava mais do que a informação que dava.
   Os valores são os reais, escritos pelo servidor e arredondados por
   baixo (18 411 → «+18 mil»), e não há uma linha de JavaScript a
   animá-los. O sinal «+» fica na cor da marca: é a única nota de cor
   desta tira, e é onde ela faz sentido. */

.contadores {
    padding-block: clamp(1.35rem, 2.2vw, 1.9rem);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}
.contadores__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1.5rem;
}
/* O rótulo da tira é a mesma pastilha tipográfica do resto do site
   (.etiqueta), só com mais ar entre letras: não vale a pena haver duas
   definições para a mesma coisa. */
.contadores__titulo {
    margin: 0;
    letter-spacing: 0.16em;
    color: var(--tinta-media);
}
.contadores__venda {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1.1rem;
    margin: 0;
    font-size: 0.8125rem;
}
.contadores__promessa { color: var(--tinta-clara); }
.contadores__acao { color: var(--indigo); font-weight: 500; }
.contadores__acao span { display: inline-block; margin-left: 0.15rem; }
.contadores__grelha {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.35rem 1.5rem;
    margin: clamp(0.85rem, 1.5vw, 1.2rem) 0 0;
    padding: clamp(0.85rem, 1.5vw, 1.2rem) 0 0;
    border-top: 1px solid var(--linha);
    list-style: none;
}
.contador { display: flex; flex-direction: column; min-width: 0; }
.contador__valor {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
}
.contador__mais { color: var(--marca-tinta); }
.contador__unidade {
    margin-left: 0.14em;
    font-size: 0.52em;
    font-weight: 400;
    color: var(--marca-tinta);
}
.contador__rotulo {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-media);
}
.procura--capa { margin: 0; }
.procura__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.35rem;
    margin: 1rem 0 0;
    font-size: 0.875rem;
}
/* Texto simples, sublinhado: as pastilhas faziam da procura um bloco de
   botões e somavam ruído a um topo que já tem faixa de cor, logótipo,
   menu e caixa de procura. */
.atalho {
    display: inline-block;
    color: var(--indigo);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--marca-linha);
    text-underline-offset: 0.25em;
}
.atalho:hover { color: var(--marca-tinta); text-decoration-color: var(--marca); }

/* --- Azulejos (categoria e distrito, com imagem do legado) ----------- */
/* O dono pediu mais respiração aqui. Cada azulejo passa a ser um cartão
   com contorno próprio — em vez da malha de filetes encostados, que
   fazia parecer uma grelha de tabela — com folga generosa entre
   cartões e um fio de acento laranja que cresce da esquerda no hover. */

.azulejos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(0.9rem, 1.9vw, 1.7rem);
}
.azulejos--sectores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.azulejos--distritos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.azulejo {
    position: relative;
    display: grid;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    transition: border-color 220ms ease, box-shadow 260ms ease,
                transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.azulejo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--marca);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.azulejo:hover,
.azulejo:focus-within {
    border-color: var(--marca-linha);
    box-shadow: 0 12px 28px -20px rgba(18, 22, 27, 0.5);
    transform: translateY(-3px);
}
.azulejo:hover::after,
.azulejo:focus-within::after { transform: scaleX(1); }

.azulejo > a {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    color: var(--tinta);
    padding-bottom: 1.15rem;
}
.azulejo > a:hover { text-decoration: none; }
.azulejo__media {
    display: block;
    overflow: hidden;
    background: var(--superficie);
    aspect-ratio: 1 / 1;
    margin-bottom: 1.05rem;
}
.azulejo--panoramico .azulejo__media { aspect-ratio: 400 / 260; }
.azulejo__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.azulejo:hover .azulejo__media img { transform: scale(1.05); }
.azulejo__nome {
    padding-inline: 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
}
.azulejo:hover .azulejo__nome { color: var(--marca-tinta); }
.azulejo__contagem {
    padding: 0.75rem 1.1rem 0;
    font-size: 0.75rem;
    color: var(--tinta-media);
}
.azulejos__resto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1.4rem;
    margin: 1.6rem 0 0;
    font-size: 0.875rem;
}
.azulejos__resto .etiqueta { margin: 0 0.35rem 0 0; color: var(--tinta-media); }
.azulejos__resto a { color: var(--tinta); }
.azulejos__resto a:hover { color: var(--marca-tinta); }
.azulejos__resto .numeros { color: var(--tinta-media); font-size: 0.75rem; margin-left: 0.25rem; }
.seccao__cabecalho--recuado { margin-top: clamp(2.75rem, 6vw, 4.25rem); }

/* --- Destaques: diário de notícias + coluna de publicidade ----------- */

.destaques__grelha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.destaques__coluna { display: grid; gap: var(--esp-3); align-content: start; }
.diario--compacto .diario__item { grid-template-columns: 6.5rem minmax(0, 1fr); padding-block: 0.85rem; }
.diario--compacto .diario__titulo { font-size: 1.0625rem; }

.fichas-recentes { border-top: 1px solid var(--linha); padding-top: 0.85rem; }
.fichas-recentes ul { list-style: none; margin: 0; padding: 0; }
.fichas-recentes li {
    border-bottom: 1px solid var(--linha);
    padding-block: 0.55rem;
    display: grid;
    gap: 0.1rem;
}
.fichas-recentes a { color: var(--tinta); font-size: 0.9375rem; font-weight: 500; }
.fichas-recentes a:hover { color: var(--marca-tinta); }
.fichas-recentes span { font-size: 0.75rem; color: var(--tinta-media); }

/* --- Publicidade ----------------------------------------------------- */

.publicidade { display: grid; gap: 0.4rem; }
.publicidade__rotulo {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-clara);
}
.publicidade img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--linha);
}
.publicidade a:hover img { border-color: var(--tinta-clara); }
.publicidade--capa-faixa { margin-top: 0; }
/* A faixa de publicidade é uma secção própria: sem peça ligada não ocupa
   espaço nem deixa um filete solto na página. */
.seccao--publicidade:has(.publicidade--capa-faixa) { padding-top: var(--esp-3); }
.seccao--publicidade:not(:has(.publicidade)) { display: none; }

/* --- Secção de notícias com a cor editorial da categoria ------------- */

.bloco-seccao { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.bloco-seccao:first-child { margin-top: 0; }
.bloco-seccao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    background: var(--cor-seccao, var(--carvao));
    color: #ffffff;
    padding: 0.55rem 0.85rem;
    min-height: 2.75rem;
}
.bloco-seccao__titulo {
    margin: 0;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}
.bloco-seccao__titulo a { color: #ffffff; }
.bloco-seccao__titulo a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.bloco-seccao__contagem { margin: 0; font-size: 0.75rem; color: #ffffff; opacity: 0.82; }
.bloco-seccao__cabecalho .ligacao-seta { color: #ffffff; margin-left: auto; }
.bloco-seccao__cabecalho .ligacao-seta:hover { color: #ffffff; }
.bloco-seccao__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    border-top: 0;
}
.bloco-seccao__lista li { background: var(--papel); }
.bloco-seccao__lista a {
    display: grid;
    gap: 0.3rem;
    height: 100%;
    padding: 0.85rem 0.9rem 1rem;
    color: var(--tinta);
}
.bloco-seccao__lista a:hover { text-decoration: none; }
.bloco-seccao__data {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--cor-seccao, var(--tinta-media));
}
.bloco-seccao__chamada { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.bloco-seccao__lista a:hover .bloco-seccao__chamada { color: var(--marca-tinta); }

/* Marcador de secção usado nas listas de notícias: quadrado + nome. */
.seccao-cor {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cor-seccao, var(--tinta-media));
}
.seccao-cor::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--cor-seccao, var(--tinta-media));
    flex: none;
}

/* --- Informação legal no rodapé -------------------------------------- */

.rodape__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    border-top: 1px solid #545a5d;
    padding-top: var(--esp-3);
}
.rodape__legal-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    font-size: 0.875rem;
}
.rodape__legal-lista a { color: #dfe2e3; }
.rodape__legal-lista a:hover { color: var(--papel); }
.rodape__livro { display: inline-block; }
.rodape__livro img { display: block; width: 13rem; height: auto; }

/* --- Entrada dos blocos novos ---------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .capa__texto,
    .capa .procura--capa {
        animation: entrar 420ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
    .capa .procura--capa { animation-delay: 100ms; }
}

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

@media (max-width: 74rem) {
    .azulejos--sectores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 68rem) {
    .destaques__grelha { grid-template-columns: minmax(0, 1fr) 16rem; }
    .procura-cabecalho { max-width: 13rem; }
}

@media (max-width: 60rem) {
    .procura-cabecalho { display: none; }
    .procura-cabecalho--movel { display: flex; }
    .capa__grelha,
    .destaques__grelha { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
    .azulejos--distritos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bloco-seccao__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* No telemóvel não há desfile: as últimas passam a ser uma tira que
       se arrasta com o dedo — o gesto natural neste ecrã — e a cópia
       duplicada (que só existe para o ciclo do desfile) desaparece. */
    .ticker__pista { animation: none; }
    .ticker__eco { display: none; }
    .ticker__janela {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }
    .ticker__janela::-webkit-scrollbar { display: none; }
    .ticker__pista li { scroll-snap-align: start; }

    .contadores__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
    .azulejos--sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .azulejos--distritos { grid-template-columns: minmax(0, 1fr); }
    .bloco-seccao__lista { grid-template-columns: minmax(0, 1fr); }
    .capa { padding-top: 1.25rem; }
    .capa__titulo { max-width: none; }
    .ticker__rotulo { font-size: 0.625rem; }
    /* Duas colunas aguentam-se em qualquer telemóvel: «+18 mil» em
       monoespaçado a 1,5rem ocupa 96 px e a célula tem 179 px. Os quatro
       números continuam a caber num só ecrã, que é o ponto da tira. */
    .contadores__promessa { display: none; }
    .rodape__legal { flex-direction: column; align-items: flex-start; }
    .rodape__livro img { width: 10.5rem; }
}

/* Áreas de toque do que é novo (WCAG 2.5.8). A linha de últimas fica de
   fora deste grupo: a manchete é `nowrap` e cresce até ao max-content,
   por isso a folga é dada dentro do próprio item do desfile. */
.procura__atalhos a,
.azulejos__resto a,
.fichas-recentes a,
.contadores__acao,
.rodape__legal-lista a {
    display: inline-block;
    padding-block: 0.35rem;
    margin-block: -0.35rem;
}
.ticker__pista a { padding-block: 0.5rem; }
.procura-cabecalho button { min-height: 2.25rem; }
/* Sectores da sub-navegação: nomes curtos (\"Pet\") davam alvos de 20x40 px.
   A folga lateral é compensada com margem negativa para o ritmo não mudar. */
.subnav__lista a { padding-inline: 0.35rem; margin-inline: -0.35rem; }
/* Título da secção colorida: a ligação tem de ter alvo de toque próprio
   (a barra é fundo, não área clicável). */
.bloco-seccao__titulo a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding-block: 0.3rem;
    margin-block: -0.3rem;
}

/* Barra de cor da secção no cabeçalho de uma página (arquivo por secção). */
.pagina__cor {
    display: block;
    width: 4rem;
    height: 3px;
    background: var(--cor-seccao, var(--marca));
    margin-bottom: 0.9rem;
}
.artigo__meta .seccao-cor { text-decoration: none; }
.artigo__meta .seccao-cor:hover { text-decoration: underline; }

/* Ponto de cor da secção, usado nos índices de notícias. */
.ponto-cor {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--cor-seccao, var(--tinta-media));
    margin-right: 0.45rem;
    vertical-align: baseline;
}
.indice__nome { display: inline-flex; align-items: center; gap: 0.45rem; }
.indice__nome .ponto-cor { margin-right: 0; }

/* =====================================================================
   COMERCIAL — venda de posicionamento
   ---------------------------------------------------------------------
   O que se vende neste portal é POSIÇÃO, não espaço: o primeiro lugar
   dentro do conteúdo que o visitante já está a consultar. Por isso estes
   blocos vivem dentro do corpo das páginas (capa e listagens) e não numa
   faixa à parte. Regras:
     - a menção de publicidade fica sempre visível;
     - o que está por vender aparece como convite, nunca preenchido com
       fichas escolhidas a dedo;
     - as posições têm número, porque o número é o produto.
   ===================================================================== */

/* --- TOP de anunciantes (capa) --------------------------------------- */

.seccao--anunciantes { background: var(--superficie); }

.anunciantes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.15rem);
}
.anunciante {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--marca);
    border-radius: var(--raio);
    transition: border-color 200ms ease, box-shadow 240ms ease,
                transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.anunciante:hover {
    box-shadow: 0 14px 30px -22px rgba(18, 22, 27, 0.55);
    transform: translateY(-3px);
}
.anunciante__ligacao {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.15rem;
    height: 100%;
    padding: 0.9rem 1.05rem 1.15rem;
    color: var(--tinta);
}
.anunciante__ligacao:hover { text-decoration: none; }
.anunciante__numero {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--marca-tinta);
}
.anunciante__rotulo {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-media);
}
.anunciante__nome {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.2;
    margin-top: 0.3rem;
}
.anunciante__ligacao:hover .anunciante__nome { color: var(--marca-tinta); }
.anunciante__meta {
    font-size: 0.8125rem;
    color: var(--tinta-media);
    margin-top: 0.35rem;
}

/* Posições por vender: contorno tracejado, peso visual menor. Não
   competem com os anunciantes que já pagaram. */
.anunciantes__livres { margin-top: clamp(1rem, 2.5vw, 1.6rem); }
.anunciantes__livres-titulo {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinta-media);
    margin: 0 0 0.7rem;
}
.anunciante--livre {
    background: transparent;
    border-style: dashed;
    border-top-style: dashed;
    border-top-width: 1px;
    border-color: var(--marca-linha);
}
.anunciante--livre:hover { border-color: var(--marca); }
.anunciante--livre .anunciante__numero { color: var(--tinta-clara); }
.anunciante--livre .anunciante__nome { color: var(--tinta-media); font-weight: 500; }
.anunciante--livre:hover .anunciante__nome { color: var(--marca-tinta); }

/* --- Anunciante no topo de uma listagem ------------------------------ */

.destaques-bloco {
    border: 1px solid var(--marca-linha);
    border-left: 3px solid var(--marca);
    background: var(--marca-fundo);
    border-radius: var(--raio);
    padding: 0.9rem 1.15rem 1.05rem;
    margin-bottom: var(--esp-3);
}
.destaques-bloco__rotulo {
    margin: 0 0 0.6rem;
    color: var(--tinta-media);
}
.destaques-bloco__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.35rem 1.5rem;
}
.destaque a {
    display: block;
    padding-block: 0.3rem;
    color: var(--tinta);
}
.destaque__nome { font-weight: 600; letter-spacing: -0.015em; }
.destaque a:hover { text-decoration: none; }
.destaque a:hover .destaque__nome { color: var(--marca-tinta); }
.destaque__meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--tinta-media);
}

/* --- Página «Anuncie»: cabeça, argumentos, formatos, passos, pedido --- */

.capa--comercial { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.capa__lead {
    font-size: 1.0625rem;
    color: var(--tinta-media);
    max-width: 46ch;
    margin: 0 0 var(--esp-2);
}
.capa__caixa {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--indigo);
    border-radius: var(--raio);
    padding: clamp(1.15rem, 2.5vw, 1.75rem);
    display: grid;
    gap: 0.7rem;
    align-content: start;
}
.capa__caixa .botao { margin-top: 0.35rem; justify-self: start; }

.argumentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
.argumento { border-top: 1px solid var(--linha); padding-top: var(--esp-2); }
.argumento__numero {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--marca-tinta);
    margin: 0 0 0.5rem;
}
.argumento__titulo { font-size: 1.125rem; margin: 0 0 0.4rem; }
.argumento__texto { font-size: var(--t-pequeno); color: var(--tinta-media); margin: 0; }

.formatos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(0.9rem, 1.9vw, 1.6rem);
}
.formato {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0.3rem;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.15rem 1.25rem 1.25rem;
    transition: border-color 200ms ease, transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.formato:hover { border-color: var(--marca-linha); transform: translateY(-3px); }
.formato__escassez {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--marca-tinta);
    margin: 0;
}
.formato__nome { font-size: 1.2rem; margin: 0.15rem 0 0; letter-spacing: -0.022em; }
.formato__unidade { font-size: 0.8125rem; color: var(--tinta-media); margin: 0; }
.formato__texto { font-size: var(--t-pequeno); color: var(--tinta-media); margin: 0.5rem 0 0; }
.formato__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin: 0.9rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--linha);
}
.formato__cobertura {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-media);
}
.formato__preco { font-weight: 600; font-size: var(--t-pequeno); }

.tabela-formatos {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-pequeno);
    text-align: left;
}
.tabela-formatos th,
.tabela-formatos td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--linha);
    vertical-align: top;
}
.tabela-formatos thead th {
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-media);
    font-weight: 400;
    border-bottom-color: var(--tinta);
}
.tabela-formatos tbody th { font-weight: 600; }
.tabela-formatos__nota {
    display: block;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--tinta-media);
}

.passos {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: passo;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2.25rem);
}
.passo { border-top: 2px solid var(--tinta); padding-top: var(--esp-2); }
.passo__numero {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--marca-tinta);
    margin-bottom: 0.5rem;
}
.passo__titulo { font-size: 1.0625rem; margin: 0 0 0.35rem; }
.passo__texto { font-size: var(--t-pequeno); color: var(--tinta-media); margin: 0; }

.seccao--pedido { background: var(--superficie); }
.pedido__grelha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.pedido__texto p { color: var(--tinta-media); max-width: 42ch; }
.pedido__contactos {
    list-style: none;
    margin: 0 0 var(--esp-2);
    padding: 0;
    display: grid;
    gap: 0.25rem;
    font-weight: 500;
}
.pedido__nota { font-size: 0.8125rem; color: var(--tinta-media); }

.pedido__formulario {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: clamp(1.15rem, 2.5vw, 1.75rem);
}
.formulario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-2);
}
.formulario .campo--largo { grid-column: 1 / -1; }
.campo textarea {
    width: 100%;
    min-height: 6.5rem;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: var(--t-pequeno);
    line-height: 1.55;
    padding: 0.6rem 0.65rem;
    resize: vertical;
}
.campo textarea:focus { outline: 2px solid var(--indigo); outline-offset: -1px; }

.campo--consentimento {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
}
.campo--consentimento input[type="checkbox"] {
    appearance: auto;
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    padding: 0;
    margin: 0.2rem 0 0;
    accent-color: var(--indigo);
}
.campo--consentimento input[type="checkbox"]:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }
.campo--consentimento label {
    font-family: var(--fonte);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinta);
}

.aviso-ok,
.aviso-erro {
    border-radius: var(--raio);
    padding: 0.85rem 1.05rem;
    margin-bottom: var(--esp-2);
    font-size: var(--t-pequeno);
}
.aviso-ok { background: #eaf5ec; border: 1px solid #b6dcc0; }
.aviso-erro { background: #fdecea; border: 1px solid #f0b6b0; }
.aviso-ok__titulo,
.aviso-erro__titulo { font-weight: 600; margin: 0 0 0.2rem; }
.aviso-erro ul { margin: 0; padding-left: 1.1rem; }

/* --- Duas acções na faixa final da capa ------------------------------ */

.apelo__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.75rem;
}
.apelo__comercial {
    color: var(--tinta);
    font-weight: 600;
    display: inline-grid;
    gap: 0.1rem;
    border-left: 1px solid rgba(58, 42, 8, 0.35);
    padding-left: 1.75rem;
}
.apelo__comercial:hover { text-decoration: none; }
.apelo__comercial:hover .apelo__comercial-apoio { text-decoration: underline; text-underline-offset: 0.2em; }
.apelo__comercial-apoio {
    font-weight: 400;
    font-size: 0.8125rem;
    color: #5c4413;
}

@media (max-width: 60rem) {
    .pedido__grelha { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 44rem) {
    .formulario { grid-template-columns: minmax(0, 1fr); }
    .apelo__comercial { border-left: 0; padding-left: 0; }
    .apelo__acoes { flex-direction: column; align-items: flex-start; }
}


/* =====================================================================
   Planos comerciais (2026-09-11)
   ---------------------------------------------------------------------
   A lista de preços é uma PAUTA, não uma grelha de cartões: quatro
   colunas separadas por filetes, preço em monoespaçado tabular alinhado
   ao topo, o que cada plano inclui por baixo em linhas de catálogo. É a
   mesma linguagem do resto do site (filete de 1px, canto direito, zero
   sombra) e não a caixa arredondada com visto verde de sempre.

   O «ordenador» mostra as faixas de prioridade. É a peça que explica,
   num relance, porque é que pagar mais aparece primeiro — sem ter de
   ler um parágrafo.
   ===================================================================== */

/* Etiqueta do plano na ficha. Discreta: fica ao lado do nome, em
   monoespaçado, e nunca tapa a informação útil da linha. */
.ficha__plano {
    margin-left: 0.55rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--marca-tinta);
    white-space: nowrap;
}
.ficha__nome { display: flex; flex-wrap: wrap; align-items: baseline; }

/* Plano pago: o filete esquerdo marca a linha na lista sem gritar. */
.ficha--paga { box-shadow: inset 2px 0 0 var(--marca-linha); }

/* Coluna lateral: lista de anunciantes empilhada. */
.anunciantes--coluna { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.anunciantes--coluna .anunciante__ligacao { padding: 0.75rem 0.9rem 0.9rem; }
.anunciantes--coluna .anunciante__nome { font-size: 1rem; }

.publicidade--nacionais { margin-top: var(--esp-3); }

/* --- Pauta de planos ------------------------------------------------- */

.planos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid var(--tinta);
    border-bottom: 1px solid var(--linha);
}
.plano {
    padding: var(--esp-3) var(--esp-3) var(--esp-4);
    border-left: 1px solid var(--linha);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.plano:first-child { border-left: 0; }

/* O plano que a casa recomenda: pestana de marca no topo da coluna. */
.plano--recomendado { background: var(--marca-fundo); }

.plano__categoria {
    margin: 0;
    font-family: var(--mono);
    font-size: var(--t-etiqueta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-media);
}
.plano__nome {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.plano__preco {
    margin: 0.15rem 0 0;
    font-family: var(--mono);
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}
.plano__unidade {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--tinta-media);
}
.plano__resumo { margin: 0.35rem 0 0; font-size: var(--t-pequeno); color: var(--tinta-media); }
.plano__inclui { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: var(--t-pequeno); }
.plano__inclui li { padding: 0.42rem 0; border-bottom: 1px solid var(--linha); }
.plano__inclui li:last-child { border-bottom: 0; }
.plano__rodape { margin-top: auto; padding-top: var(--esp-2); }
.plano__rodape .botao { width: 100%; }
.plano__nota { margin: 0.5rem 0 0; font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-media); }

/* --- Ordenador: as faixas de prioridade ------------------------------ */

.ordem { margin-top: var(--esp-4); }
.ordem__faixas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--linha);
    border-top: 2px solid var(--tinta);
}
.ordem__faixa {
    padding: 0.75rem 0.9rem 0.9rem;
    border-left: 1px solid var(--linha);
}
.ordem__faixa:first-child { border-left: 0; }
.ordem__faixa-pos {
    margin: 0;
    font-family: var(--mono);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    color: var(--marca-tinta);
}
.ordem__faixa-nome { margin: 0.2rem 0 0; font-size: 0.9375rem; font-weight: 600; }
.ordem__faixa-intervalo { margin: 0.15rem 0 0; font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-media); }
.ordem__nota { margin: var(--esp-2) 0 0; font-size: var(--t-pequeno); color: var(--tinta-media); max-width: var(--leitura); }

@media (max-width: 900px) {
    .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plano:nth-child(3) { border-left: 0; }
    .plano { border-top: 1px solid var(--linha); }
    .plano:nth-child(-n+2) { border-top: 0; }
    .ordem__faixas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ordem__faixa:nth-child(3) { border-left: 0; }
    .ordem__faixa { border-top: 1px solid var(--linha); }
    .ordem__faixa:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 560px) {
    .planos { grid-template-columns: minmax(0, 1fr); }
    .plano { border-left: 0; border-top: 1px solid var(--linha); }
    .plano:first-child { border-top: 0; }
    .ordem__faixas { grid-template-columns: minmax(0, 1fr); }
    .ordem__faixa { border-left: 0; }
}

/* =====================================================================
   Guia de região (/empresas-no-norte-de-portugal)
   ---------------------------------------------------------------------
   A banda é a imagem própria que o legado tinha no topo destas páginas
   (1900×500), agora em WebP e em dois tamanhos. Não leva texto por cima:
   a fotografia fica legível inteira e o título não corre o risco de
   ficar sem contraste — a mesma razão pela qual não se sobrepõe nada à
   imagem da capa.
   ===================================================================== */
.regiao__banda {
    margin: var(--esp-3) 0 0;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--superficie);
}
.regiao__banda img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1900 / 500;
    object-fit: cover;
}

/* Na página de região o texto de abertura vem depois dos números, e por
   isso não leva o espaço de topo das páginas institucionais. */
.pagina__cabecalho + .regiao__banda + .estatisticas { margin-top: var(--esp-3); }

/* =====================================================================
   Aviso de consentimento para a medição de audiência
   ---------------------------------------------------------------------
   Vive encostado à base do ecrã e fala a língua do resto do portal:
   papel branco, um filete de 1px em cima, cantos direitos (raio 2px),
   zero sombra e zero gradiente.

   Os dois botões têm o MESMO peso visual. Aceitar e recusar são escolhas
   simétricas: nenhum deles é cinzento, pequeno ou escondido, e não há
   caixa pré-marcada. É a diferença entre pedir consentimento e ir buscá-lo.

   O elemento está oculto no HTML (`hidden`) e é o script da página que o
   revela quando ainda não há escolha guardada. Sem JavaScript a barra não
   aparece — e como nada é pedido ao Google sem escolha, isso significa que
   ninguém é medido. A barra é estreita de propósito: uma linha de texto e
   dois botões, sem parágrafos, porque quem não quer ler também tem direito
   a decidir depressa.
   ===================================================================== */
.consentimento {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    background: var(--papel);
    border-top: 1px solid var(--tinta);
    padding: 0.7rem 0;
}
.consentimento[hidden] { display: none; }
.consentimento__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem var(--esp-2);
}
.consentimento__texto {
    margin: 0;
    flex: 1 1 24rem;
    font-size: var(--t-pequeno);
    line-height: 1.45;
    color: var(--tinta-media);
}
.consentimento__texto a { color: var(--indigo); }
.consentimento__accoes {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.consentimento__accoes .botao { padding: 0.7rem 1.15rem; }

/* No telemóvel os dois botões dividem a largura em partes iguais: ficam
   áreas de toque largas e nenhum deles fica mais fácil de acertar do que o
   outro. */
@media (max-width: 40rem) {
    .consentimento__accoes { width: 100%; }
    .consentimento__accoes .botao { flex: 1 1 0; }
}

/* Impressão: papel não tem cookies. */
@media print { .consentimento { display: none; } }

/* Bloco de dar ou retirar o consentimento, no fim das páginas legais. */
.medicao {
    margin-top: var(--esp-4);
    padding-top: var(--esp-3);
    border-top: 1px solid var(--linha);
}
.medicao .botao { margin-top: 0.35rem; }