/* =====================================================================
   MAPA DO SITE — 13/09/2026

   A pagina NAO tem nenhuma lista escrita a mao. Sai de duas fontes que ja
   existem e que ja estao traduzidas por localizacao:

     - `includes/other/menu/<loc>.php`, o mesmo ficheiro de dados que
       desenha o menu do site: 5 categorias e 22 itens, cada um com
       rotulo, endereco e descricao;
     - `static/busca-<lg>.json`, o indice da pesquisa, para as paginas que
       o menu NAO mostra -- na interweb.ao sao 17, e entre elas estao as
       duas de gerador, a migracao, os metodos de pagamento, as quatro
       paginas Windows e todas as legais.

   Os 41 «produto» do indice ficam de fora de proposito: sao ligacoes de
   carrinho (`cart.php?a=add&pid=...`), nao paginas.

   A PALETA E DECLARADA AQUI, nao herdada. Na semana passada copiei um
   bloco de CSS entre folhas e deixei para tras as variaveis de que ele
   dependia: uma `var()` por definir invalida a propriedade inteira em
   silencio, e o botao ficou sem fundo nem moldura sem dar erro nenhum.
   ===================================================================== */

#mapa-menu, #mapa-artigos, #mapa-apoio {
    --mp-ac: #00acc8;   /* a acção */
    --mp-c:  #d60037;   /* a marca */
    --mp-t:  #1f2835;   /* o texto */
    --mp-l:  #edeff0;   /* o cinzento da casa */
    --mp-l2: #e2e6ea;
    --mp-g:  #5b6879;
    --mp-g2: #8b95a5;
}

/* ---- o ritmo: 60 em cima, 60 em baixo, como nas outras páginas ---- */
#mapa-menu, #mapa-artigos, #mapa-apoio { padding: 60px 0; }

/* NUNCA DOIS BLOCOS SEGUIDOS COM O MESMO FUNDO -- regra da casa.

   Ficaram os dois brancos quando o dono mandou juntar as paginas de fora
   dentro das categorias: a seccao do meio (`#mapa-extra`) desapareceu e as
   duas que restaram encostaram-se, brancas as duas. Foi o dono a apanhar.

   A ORDEM QUE O DONO PEDIU: primeira branca, a do meio cinzenta, a ultima
   branca outra vez. A do meio e a Base de Conhecimento, que entrou de
   proposito para dar esse respiro -- e o cinzento ajuda os cartoes, que sao
   brancos com moldura fina. E o mesmo par do `#gn-exemplos`. */
#mapa-menu    { background: #fff; }
#mapa-artigos { background: var(--mp-l); }
#mapa-apoio   { background: #fff; }

/* ---- a grelha de categorias ---- */
/* CADA BLOCO NA SUA ALTURA, E OS DE BAIXO PUXADOS PARA CIMA -- 13/09/2026,
   por ordem do dono, em duas voltas.

   Primeiro tirei o esticar (`align-items: start`), porque a grelha punha
   todos os da fila à altura do mais alto: medido, o de Serviços tinha 188px
   de conteúdo e 346px de caixa. Mas isso resolveu metade -- a fila seguinte
   continuava a esperar pela mais alta da anterior, e ficava um rasgo por
   baixo dos blocos curtos. Foi o que o dono viu.

   A grelha não sabe fazer isto (o `masonry` ainda não é de confiança nos
   navegadores). As COLUNAS de CSS sabem: cada bloco cai no espaço livre da
   coluna mais curta e não há rasgos.

   O QUE SE PAGA: a leitura passa a ser por coluna, de cima para baixo, e não
   por fila. A ordem no HTML não muda -- quem usa leitor de ecrã ou teclado
   continua a percorrer Hospedagem, Servidores, Domínios, e por aí.

   O `break-inside` e o `display: block` no `li` andam juntos: com `flex` há
   navegadores que partem o cartão a meio de uma coluna. */
/* TRES POR FILA, DA ESQUERDA PARA A DIREITA -- 13/09/2026, ordem do dono.

   Passei por colunas de CSS para os blocos se encaixarem sem rasgos, e
   encaixavam: a quatro colunas a seccao passava de 833px para 570 e nenhuma
   ficava vazia. Mas as colunas leem-se de CIMA PARA BAIXO, uma de cada vez, e
   o dono quer a leitura por FILA: Hospedagem, Dominios, Servidores...

   A ordem ganha. Volta a ser grelha de tres, e com `align-items: start` cada
   bloco mede o que tem em vez de esticar ate ao mais alto da fila.

   E OS BLOCOS ENCAIXAM PARA CIMA, sem perder esta ordem. Em CSS puro nao
   dava: a fila seguinte comecava abaixo do bloco MAIS ALTO da anterior. Quem
   resolve e o `static/js/mapa.js`: da a grelha linhas de 8px e diz a cada
   bloco quantas ocupa, e a colocacao automatica do grid -- que avanca e nao
   recua -- poe cada um no primeiro buraco que sirva.

   SEM ESSE FICHEIRO A PAGINA NAO PARTE: fica esta grelha, com fundo a mostrar
   por baixo dos blocos curtos, mas inteira. A classe `mp-mason` so e posta
   pelo JS. */
.mp-grelha {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}

/* o modo encaixado, posto pelo JS depois de medir */
.mp-grelha.mp-mason {
    grid-auto-rows: 8px;
    align-items: stretch;
    row-gap: 0;
}

.mp-grelha.mp-mason > li { align-self: start; }

.mp-grelha > li {
    display: block;
    background: #fff;
    border: 1px solid var(--mp-l2);
    padding: 24px 26px 20px;
}

.mp-grelha h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--mp-t);
    line-height: 1.3;
}

/* a contagem ao lado do título da categoria: diz o tamanho antes de se ler */
.mp-conta {
    font-size: 13px;
    font-weight: 400;
    color: var(--mp-g2);
    margin-left: 6px;
}

.mp-lista {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.mp-lista li { margin-bottom: 14px; }
.mp-lista li:last-child { margin-bottom: 0; }

/* SEM NEGRITO, por ordem do dono (13/09/2026). Numa lista de quase
   quarenta nomes o negrito deixa de destacar: destaca tudo, e a coluna
   fica pesada. O que separa o nome do resto é o tamanho e a cor. */
.mp-lista a {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--mp-t);
    text-decoration: none;
    line-height: 1.35;
    transition: color .15s ease;
}

/* SEM SUBLINHADO ao passar o rato, por ordem do dono (13/09/2026). A cor
   chega para dizer que responde, e numa lista de quarenta ligações o
   sublinhado a aparecer e a sair fazia a coluna inteira tremer. */
.mp-lista a:hover,
.mp-lista a:focus { color: var(--mp-c); text-decoration: none; }

.mp-lista p {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mp-g);
}

/* ---- a faixa de apoio ---- */
.mp-apoio {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mp-apoio > li {
    border: 1px solid var(--mp-l2);
    padding: 24px 26px;
    background: #fff;
}

.mp-apoio h3 { margin: 0 0 6px; font-size: 16px; color: var(--mp-t); }
.mp-apoio p  { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--mp-g); }

.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    border: 1px solid var(--mp-c);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--mp-c);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.mp-btn:hover, .mp-btn:focus { background: var(--mp-c); color: #fff; text-decoration: none; }
.mp-btn:focus-visible { outline: 3px solid var(--mp-c); outline-offset: 2px; }

/* ---- ecrãs estreitos ---- */
@media (max-width: 991px) {
    .mp-grelha, .mp-apoio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    #mapa-menu, #mapa-artigos, #mapa-apoio { padding: 40px 0; }
    .mp-grelha, .mp-apoio { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .mp-grelha > li, .mp-apoio > li { padding: 20px 18px 16px; }
    .mp-btn { display: flex; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-lista a, .mp-btn { transition-duration: .01s; }
}

/* =====================================================================
   O `main#main` MEDIA ZERO — 13/09/2026.

   A seccao do heroi e `float: left` e o `article.content` que a contem nao
   a fecha. O float escapa, e como o `#wrapper` da casa e `display: table`
   com `table-layout: fixed`, o float a fugir parte a celula anonima: o
   `main#main` caia numa SEGUNDA coluna e ficava com largura 0 -- e com ele
   as tres seccoes desta pagina.

   Medido a 13/09/2026, nesta pagina, a 1526px de janela:
     sem nada ................... main#main = 0px
     com clearfix no article .... main#main = 1526px, grelha 1140px

   A pagina do gerador escapa a isto por acidente: tem um `<header>` vazio
   entre os dois `main`, herdado de um include, que serve de separador. Nao
   se copia um acidente -- fecha-se o float, que e a causa.

   FICA NESTA FOLHA e nao no tema: a `mapa.css` so e carregada por esta
   pagina, por isso o alcance e exactamente esse.
   ===================================================================== */

#home > article.content::after {
    content: "";
    display: table;
    clear: both;
}

/* ---- o ícone ao lado do título da categoria ----
   Por ordem do dono, 13/09/2026. O nome do ícone vem do PRIMEIRO item de
   cada categoria no ficheiro de menu, indexado por posição e não por nome:
   a ordem das cinco é a mesma nas 16 pontas, o nome muda com a língua. */
.mp-grelha h3 { display: flex; align-items: center; gap: 10px; }

.mp-ic {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--mp-ac);
}

.mp-grelha h3 .mp-conta { margin-left: auto; }

/* ---- as três portas do fim: descrição presa a DUAS linhas ----
   Por ordem do dono, 13/09/2026. O `min-height` é o que faz os três
   cartões acabarem à mesma altura mesmo quando um dos textos só enche
   uma linha — sem ele, o botão de um deles subia. */
.mp-apoio p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.6em * 2);
}

/* a contagem ao lado do título saiu (o dono não a quer); a regra fica
   sem alvo e é inofensiva, mas o `margin-left: auto` do `h3` deixava o
   ícone encostado — repõe-se o alinhamento à esquerda. */
.mp-grelha h3 { justify-content: flex-start; }


/* ---- o subtítulo do herói ----
   A LETRA FICA A DO TEMA (18px no computador, 15px em telemóvel). Cheguei a
   pô-la a 22px por ter lido mal o pedido: o dono queria o TEXTO maior, não a
   letra — «o tamanho deve ser que nem outras páginas». Desfeito.

   As duas linhas passam a vir do comprimento da frase e do `max-width: 52ch`
   que o tema já dá: cerca de 52 letras por linha, logo uma frase de umas cem
   ocupa duas. Não há aqui largura nenhuma escrita à mão. */