/* A tabela das extensões - gerada; não editar à mão.
   É o MESMO CSS da página de preços (`precos/pagina-precos.py`),
   posto em ficheiro para se descarregar uma vez e ficar na cache. */



    :root { --pr-c: #d60037; --pr-t: #1d2733; --pr-cinz: #6b7683;
             --pr-l: #e3e7ec; --pr-bg: #f6f7f9; --pr-ok: #30b47a; }

    /* A PROMESSA. Três caixas, e o texto delas é o que esta página tem de
       diferente das outras: diz que o preço da tabela é o que renova. */
    #main .pr-promessa { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
    #main .pr-promessa > li { list-style: none; background: #fff; border: 1px solid var(--pr-l);
      border-radius: 12px; padding: 20px 22px; }
    /* O ÍCONE DO TEMA VEM COM `position: absolute` -- dentro de um círculo
       foge para fora e o círculo fica vazio, sem erro nenhum na consola.
       É a mesma correcção que a página da F.A.Q. e a do criador de sites
       já levam. */
    #main .pr-ico { display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; margin: 0 0 14px; border-radius: 12px;
      background: #fff5f7; color: var(--pr-c); font-size: 22px; }
    #main .pr-ico.product-icon { position: static; }
    #main .pr-promessa h3 { font-size: 17px; line-height: 24px; margin: 0 0 6px; color: var(--pr-t); }
    /* QUATRO LINHAS, para os três cartões ficarem da mesma altura. */
    /* TRÊS LINHAS (ordem do dono, 22/09/2026): eram quatro e o texto
       ficava a dizer duas vezes a mesma coisa para as encher. 69px são
       três linhas de 23. */
    #main .pr-promessa p { font-size: 15px; line-height: 23px; margin: 0;
      min-height: 69px; color: var(--pr-cinz); }
    @media (max-width: 900px) { #main .pr-promessa { grid-template-columns: 1fr; } }

    /* A PALAVRA A VERMELHO no fim do título: é a assinatura da casa
       («Opções de *pagamento*», «O que vem em *todos os planos*»). */
    #main .pr-vm { color: var(--pr-c); }
    #main .pr-cinza { background: #f5f6f8; }
    /* A F.A.Q. do tema traz fundo próprio; aqui a faixa é a da página. */
    #main .faq-area-section, #main .faq-area-section .faq-area { background: transparent; }
    #main .faq-area-section.pr-cinza { background: #f5f6f8; }
    #main .faq-area-section:not(.pr-cinza) { background: #fff; }
    #main .faq-area-section .section-padding { padding-top: 0; padding-bottom: 0; }
    /* SEM TRAVÃO DE LARGURA. Pus 720 e depois 940, e as duas vezes o
       texto partia-se em mais linhas do que devia. Fui medir a página de
       planos: lá o subtítulo tem `max-width: none` e ocupa os 1110px do
       contentor. É essa a largura da casa; aqui era eu a inventar uma. */
    #main .pr-sec > .container > .section-title p { max-width: none; margin: 10px auto 0;
      font-size: 16px; line-height: 25px; color: var(--pr-cinz); }

    /* A CABEÇA DE CADA GRUPO: nome e descrição À ESQUERDA, e à direita a
       caixa que leva à página do produto (ordem do dono, 22/09/2026, com o
       modelo à vista). Centrar o título e pôr a caixa numa barra por baixo
       era o que estava antes; isto lê-se melhor porque o olho desce pela
       mesma margem em que os cartões começam.
       A caixa tem `align-self: start` para não esticar até ao fundo da
       coluna do texto - uma caixa de três linhas esticada a seis parecia
       vazia por dentro. */
    /* A DESCRIÇÃO ACABA NA LINHA DO SEGUNDO CARTÃO (ordem do dono,
       22/09/2026). Com 1108px de contentor e três cartões de 356 com 20
       de intervalo, dois cartões medem 732 - e é aí que a coluna do texto
       tem de acabar, para as duas grelhas assentarem na mesma linha. Daí
       os 340 da caixa e os 36 de intervalo: 1108 − 340 − 36 = 732. */
    #main .pr-cab { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
      gap: 24px 36px; align-items: start; margin: 0 0 28px; }
    #main .pr-cab-txt h2 { margin: 0; text-align: left; font-size: 28px; line-height: 36px;
      font-weight: 700; color: var(--pr-t); }
    /* QUATRO LINHAS EM TODOS OS GRUPOS (ordem do dono, 22/09/2026): o
       texto é medido para lá chegar, e o `min-height` garante a altura
       mesmo onde a página do produto tem menos para dar - assim as oito
       cabeças ficam da mesma altura e os cartões começam todos na mesma
       linha. */
    /* QUATRO LINHAS, E A FRASE SEMPRE INTEIRA. O `line-clamp` que aqui
       estava cortava com reticências, e o dono recusou-o - com razão:
       cortar não é resumir. Quem decide agora é o gerador, que junta
       frases inteiras enquanto couberem. Aqui fica só o chão, para as
       oito cabeças terem a mesma altura mesmo quando uma delas acaba na
       terceira linha.
       JUSTIFICADO por ordem do dono (22/09/2026). O `hyphens: auto` que
       eu tinha posto para evitar rios de branco partia as palavras com
       hífen («recur-/sos», «aplica-/ções») e o dono não quer isso: a
       palavra vai inteira para a linha seguinte e o espaço estica.
       `hyphens: none` diz isso ao navegador em vez de contar com o valor
       por omissão, que muda com a língua declarada na página. */
    #main .pr-cab-txt p { margin: 12px 0 0;
      min-height: 100px; text-align: justify; hyphens: none;
      -webkit-hyphens: none; -ms-hyphens: none;
      font-size: 16px; line-height: 25px; color: var(--pr-cinz);
      }
    #main .pr-cab .pr-aux { align-self: start; display: block; text-align: center;
      background: var(--pr-bg); border: 1px solid var(--pr-l); border-radius: 12px;
      padding: 20px 22px; }
    /* E TRÊS LINHAS NA CAIXA (ordem do dono): os nomes dos grupos têm
       comprimentos diferentes e a frase passava de duas a três conforme o
       grupo, o que fazia o botão subir e descer de secção para secção. */
    #main .pr-cab .pr-aux p { margin: 0 0 16px; min-height: 63px;
      font-size: 14px; line-height: 21px; color: var(--pr-cinz); }
    #main .pr-cab .pr-aux-bt { display: inline-block; padding: 11px 20px; border-radius: 8px;
      background: var(--pr-c); color: #fff; font-size: 14px; line-height: 20px;
      font-weight: 700; text-decoration: none; white-space: normal;
      transition: background .18s ease; }
    #main .pr-cab .pr-aux-bt:hover, #main .pr-cab .pr-aux-bt:focus-visible {
      background: #b0002d; color: #fff; }
    /* DE GRUPO PARA GRUPO A CABEÇA TROCA DE LADO (ordem do dono,
       22/09/2026): num a caixa fica à direita, no seguinte à esquerda.
       A ORDEM NO HTML NÃO MUDA -- é sempre texto e depois caixa --, quem
       troca é o `order` do CSS. Assim, em telemóvel, onde as duas colunas
       se empilham, a leitura continua a ser a mesma em todos os grupos:
       título, descrição e só então o botão. Trocar no HTML dava, em
       metade das secções, um botão antes de se saber do que se fala. */
    #main .pr-cab-inv { grid-template-columns: 340px minmax(0, 1fr); }
    #main .pr-cab-inv .pr-cab-txt { order: 2; }
    #main .pr-cab-inv .pr-aux { order: 1; }
    /* COM A CAIXA À ESQUERDA, O TEXTO ENCOSTA À DIREITA (ordem do dono,
       22/09/2026) -- senão ficava uma coluna de texto a começar longe da
       margem e a acabar a meio, com o branco todo do lado errado.
       O parágrafo continua justificado; o que muda é a ÚLTIMA linha, que
       passa a encostar à direita (`text-align-last`). Sem isso, um bloco
       justificado acaba sempre à esquerda e desmentia o alinhamento. */
    #main .pr-cab-inv .pr-cab-txt h2 { text-align: right; }
    #main .pr-cab-inv .pr-cab-txt p { margin-left: auto; text-align: justify;
      text-align-last: right; }
    @media (max-width: 900px) {
      #main .pr-cab-inv .pr-cab-txt h2 { text-align: left; }
      #main .pr-cab-inv .pr-cab-txt p { margin-left: 0; text-align-last: auto; }
    }
    @media (max-width: 900px) {
      #main .pr-cab, #main .pr-cab-inv { grid-template-columns: minmax(0, 1fr); }
      #main .pr-cab-inv .pr-cab-txt { order: 0; }
      #main .pr-cab-inv .pr-aux { order: 0; }
      #main .pr-cab-txt h2 { font-size: 24px; line-height: 32px; }
    }

    /* OS CARTÕES DOS PLANOS. O preço grande é o MENSAL e vai a vermelho, como
       nas páginas de planos -- é o número por que toda a gente compara. Os
       outros cinco ciclos estão a um clique, na tabela. */
    /* O CARROSSEL DESLIZA A FILA INTEIRA (ordem do dono, 22/09/2026), e
       não é o cartão que aparece no sítio. A `.pr-janela` corta o que
       está fora e a `.pr-cards` é a fila que anda com `translateX`.
       OS CARTÕES DEIXARAM DE SE ESCONDER: com `hidden` não há nada para
       deslizar -- o que sai de vista tem de continuar lá, ao lado, para
       entrar a andar. Quantos se vêem de cada vez sai do `--pr-vista`,
       que muda com a largura; o JS lê-o e não o adivinha. */
    /* `touch-action: pan-y` deixa o dedo arrastar a fila na horizontal e
       a PÁGINA na vertical. Sem isto, ou o carrossel não recebe o gesto,
       ou rouba a rolagem da página a quem só queria descer. */
    #main .pr-janela { overflow: hidden; --pr-vista: 3; --pr-gap: 20px;
      touch-action: pan-y; cursor: grab; }
    #main .pr-janela.pr-a-arrastar { cursor: grabbing; user-select: none; }
    #main .pr-janela.pr-a-arrastar .pr-cards { transition: none; }
    #main .pr-janela.pr-a-arrastar .pr-card { pointer-events: none; }
    #main .pr-cards { display: grid; grid-auto-flow: column;
      grid-auto-columns: calc((100% - (var(--pr-vista) - 1) * var(--pr-gap)) / var(--pr-vista));
      gap: var(--pr-gap); transition: transform .38s cubic-bezier(.22,.61,.36,1);
      will-change: transform; }
    @media (max-width: 1000px) { #main .pr-janela { --pr-vista: 2; } }
    @media (max-width: 620px)  { #main .pr-janela { --pr-vista: 1; } }
    #main .pr-card { display: flex; flex-direction: column; background: #fff;
      border: 1px solid var(--pr-l); border-radius: 14px; padding: 24px 22px; }
    /* O `hidden` DO NAVEGADOR PERDE PARA QUALQUER `display` NOSSO. A regra
       do agente é `[hidden] { display: none }`, de especificidade zero;
       `#main .pr-card { display: flex }` ganha-lhe e o cartão continuava à
       vista com o atributo posto. Deu-se o caso de o JS dizer «três
       visíveis» e a página mostrar nove -- a medição pelo DOM estava
       certa e a página errada. Vale para tudo o que este CSS pinte com
       `display`. */

    #main .pr-card-nome { margin: 0; font-size: 17px; line-height: 24px;
      font-weight: 700; color: var(--pr-t); }
    #main .pr-card-preco { margin: 12px 0 4px; display: flex; align-items: baseline; gap: 4px;
      flex-wrap: wrap; }
    #main .pr-card-num { color: var(--pr-c); font-size: 28px; line-height: 34px;
      font-weight: 700; font-variant-numeric: tabular-nums; }
    #main .pr-card-suf { color: var(--pr-cinz); font-size: 15px; line-height: 22px; }
    /* A ALTURA MÍNIMA É PARA OS BOTÕES FICAREM ALINHADOS entre cartões: uns
       planos não têm preço anual e a linha fica vazia; sem isto o botão de
       um cartão sobe e a fila fica aos degraus. */
    #main .pr-card-nota { margin: 0 0 18px; min-height: 42px; font-size: 14px;
      line-height: 21px; color: var(--pr-cinz); }
    #main .pr-card-bt { margin-top: auto; width: 100%; display: inline-flex;
      align-items: center; justify-content: center; gap: 8px; padding: 11px 16px;
      border: 1px solid var(--pr-l); border-radius: 999px; background: #fff;
      color: var(--pr-c); font-size: 14px; line-height: 20px; font-weight: 700;
      cursor: pointer; transition: border-color .18s ease, background .18s ease; }
    #main .pr-card-bt:hover, #main .pr-card-bt:focus-visible {
      border-color: var(--pr-c); background: #fff5f7; }
    #main .pr-card.pr-aberto { border-color: var(--pr-c); }

    /* O CARROSSEL DOS PLANOS: três de cada vez, com as setas por baixo e
       ao centro. Os grupos de três não têm setas nenhumas. */
    #main .pr-nav { display: flex; align-items: center; justify-content: center;
      gap: 14px; margin: 20px 0 0; }
    /* pela terceira vez: o meu `display` ganha ao `hidden` do navegador */
    #main .pr-nav[hidden] { display: none; }
    #main .pr-nav-bt { width: 40px; height: 40px; display: inline-flex;
      align-items: center; justify-content: center; padding: 0;
      border: 1px solid var(--pr-l); border-radius: 50%; background: #fff;
      color: var(--pr-c); cursor: pointer;
      transition: border-color .18s ease, background .18s ease, color .18s ease; }
    #main .pr-nav-bt:hover:not(:disabled) { border-color: var(--pr-c);
      background: var(--pr-c); color: #fff; }
    #main .pr-nav-bt:disabled { color: #c3ccd6; cursor: default; }
    #main .pr-nav-conta { font-size: 13px; color: var(--pr-cinz);
      font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; }
    #main .pr-chev-e { transform: rotate(135deg) translate(-2px, -2px); }
    /* Os que estão fora da janela não recebem o teclado: sem isto, o Tab
       levava o foco para um cartão que ninguém está a ver e a fila
       saltava sozinha. */
    #main .pr-card[aria-hidden="true"] { visibility: hidden; }

    /* A seta, desenhada em CSS -- um ficheiro de ícone para 8px de traço era
       um pedido de rede a mais, e o `currentColor` deixa-a seguir o botão. */
    #main .pr-chev { width: 8px; height: 8px; border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
      transition: transform .2s ease; }
    #main .pr-chev-d { transform: rotate(-45deg) translate(-2px, 2px); }
    #main .pr-card.pr-aberto .pr-chev { transform: rotate(225deg) translate(-2px, -2px); }

    /* O PAINEL DOS SEIS CICLOS FECHA A ENCOLHER, como a F.A.Q. do resto do
       site (ordem do dono, 22/09/2026). A receita é a mesma de lá: o
       invólucro é uma grelha de UMA linha que passa de `0fr` a `1fr`, e o
       que está dentro leva `overflow: hidden` e `min-height: 0`. É isto
       que deixa animar uma altura que ninguém sabe de antemão -- com
       `height` era preciso medi-la em JS, e com `max-height` fica sempre
       ou curta de mais ou lenta de mais. O `hidden` continua a existir
       para quem não tem JavaScript. */
    #main .pr-painel { display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows .3s ease; margin: 24px 0 0; }
    #main .pr-painel.pr-aberta { grid-template-rows: 1fr; }
    /* OUTRA VEZ O `hidden` A PERDER. `#main .pr-painel { display: grid }`
       ganha à regra do navegador, e os 41 painéis fechados ficavam a
       desenhar a borda: uma pilha de barras finas ao longo da página, que
       foi o que o dono viu. Sempre que este CSS puser `display` numa
       coisa que também se esconde por `hidden`, tem de vir esta linha
       atrás. */
    #main .pr-painel[hidden] { display: none; }
    #main .pr-painel-in { overflow: hidden; min-height: 0;
      background: #fff; border: 1px solid var(--pr-l); border-radius: 14px; }
    #main .pr-painel-cab { display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--pr-l); background: var(--pr-bg); }
    #main .pr-painel-cab h4 { margin: 0; font-size: 16px; line-height: 23px;
      font-weight: 700; color: var(--pr-t); }
    #main .pr-fechar { flex: 0 0 auto; border: 0; background: none; padding: 4px 6px;
      color: var(--pr-c); font-size: 14px; line-height: 20px; font-weight: 700; cursor: pointer; }
    #main .pr-fechar:hover { text-decoration: underline; }
    #main .pr-painel .pr-rolo { border: 0; border-radius: 0; }

    /* A LINHA INTEIRA COMPRA. Sem botão: o alvo é a linha toda, e o que a
       anuncia é o `title` («Clique para comprar») mais o realce ao passar
       o rato. Responde ao teclado, que é o que falta a quase todas as
       linhas «clicáveis» por aí. */
    #main .pr-tab tbody tr[data-pr-url] { cursor: pointer; }
    #main .pr-tab tbody tr[data-pr-url]:hover td,
    #main .pr-tab tbody tr[data-pr-url]:hover th[scope="row"] { background: #fff5f7; }
    #main .pr-tab tbody tr[data-pr-url]:focus-visible {
      outline: 2px solid var(--pr-c); outline-offset: -2px; }

    /* O PAINEL ABRE E FECHA COM ANIMAÇÃO. O `hidden` liga e desliga o
       `display`, e por cima disso uma transição não corre - por isso o
       fecho é uma animação que ESCONDE no fim (`animationend`), e não um
       `hidden` posto logo. Com movimento reduzido encurta e perde o
       deslocamento, mas continua a ver-se: reduzir não é apagar. */


    /* AS TABELAS: UMA POR PLANO, os ciclos nas linhas -- o modelo que o dono
       mandou a 22/09/2026. Seis colunas não cabem num telemóvel: a caixa
       rola de lado e a coluna do ciclo fica presa, senão ao chegar à
       poupança já não se sabe de que ciclo se está a ler. O `tabindex` é
       para quem navega por teclado poder rolar a caixa sem rato. */
    #main .pr-grupo { margin: 0 0 48px; }
    #main .pr-grupo > h2 { font-size: 24px; line-height: 32px; margin: 0 0 12px; color: var(--pr-t); }

    /* A ABERTURA DO GRUPO: a descrição à esquerda, o atalho para a página do
       produto à direita. A descrição é LIDA da página do produto desta
       mesma pasta -- não se escreve aqui (ver `descricao_do_grupo`). */

    /* `scrollbar-gutter: stable` -- 26/09/2026, e é ISTO que mata a barra
       preta de vez.

       A CADEIA: as colunas são medidas e presas em píxeis com a lista a
       dez linhas. Ao carregar em «Todas» a lista fica mais alta do que a
       caixa e nasce uma barra de rolamento VERTICAL que come **9px** de
       largura. As colunas presas continuam a somar o que somavam, deixam
       de caber por esses 9px, e aparece a barra HORIZONTAL preta em baixo
       -- por causa de uma barra que ainda não existia quando se mediu.

       Medido: caixa 1108 sem a barra vertical, 1099 com ela; excesso de 9.

       Podia andar a remedir a cada mudança (e ando, aqui ao lado), mas a
       remedição é uma corrida contra o desenho do navegador e perdi-a
       três vezes. Com o `gutter` reservado, a caixa mede SEMPRE 1099:
       a barra vertical já não muda nada quando aparece, e a conta feita
       uma vez continua certa. */
    #main .pr-rolo { overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
      border: 1px solid var(--pr-l); border-radius: 12px; background: #fff; }
    #main .pr-rolo:focus-visible { outline: 2px solid var(--pr-c); outline-offset: 2px; }
    #main .pr-tab { border-collapse: collapse; width: 100%; min-width: 720px; margin: 0; }
    /* COM A COLUNA DE COMPRAR SÃO SETE, e a 12/16 de folga a tabela media
       1212px dentro de 1108 -- a última coluna ficava fora do ecrã e só se
       via arrastando. Apertada a folga e travadas as legendas, cabe. */
    #main .pr-tab th, #main .pr-tab td { text-align: left; padding: 11px 12px;
      border-bottom: 1px solid var(--pr-l); vertical-align: top; }
    #main .pr-th-s { white-space: nowrap; }
    #main .pr-tab thead th { background: var(--pr-bg); border-bottom: 1px solid var(--pr-l); }
    #main .pr-th { display: block; font-size: 13px; line-height: 18px; font-weight: 700;
      color: var(--pr-t); white-space: nowrap; }
    #main .pr-th-s { display: block; font-size: 11.5px; line-height: 16px; font-weight: 400;
      color: var(--pr-cinz); }
    #main .pr-tab tbody tr:nth-child(even) td, #main .pr-tab tbody tr:nth-child(even) th { background: #fafbfc; }
    #main .pr-tab tbody tr:last-child th, #main .pr-tab tbody tr:last-child td { border-bottom: 0; }
    /* A COLUNA DO CICLO FICA PRESA À ESQUERDA -- e o cabeçalho dela TAMBÉM.
       Tinha só o corpo preso: bastava arrastar um dedo para o cabeçalho
       fugir e ficar «Poupança (%)» escrito por cima de uma coluna que dizia
       «Trienal». Um cabeçalho que não bate com a coluna é pior do que
       cabeçalho nenhum -- mente a quem lê. */
    #main .pr-tab tbody th[scope="row"],
    #main .pr-tab thead th:first-child { position: sticky; left: 0; z-index: 1;
      background: #fff; box-shadow: 1px 0 0 var(--pr-l); }
    #main .pr-tab thead th:first-child { z-index: 2; background: var(--pr-bg); }
    #main .pr-tab tbody tr:nth-child(even) th[scope="row"] { background: #fafbfc; }
    #main .pr-cic { display: block; font-size: 15px; line-height: 22px; font-weight: 700;
      color: var(--pr-t); white-space: nowrap; }
    #main .pr-cic-s { display: block; font-size: 12px; line-height: 17px; color: var(--pr-cinz);
      white-space: nowrap; }
    #main .pr-total { display: block; font-size: 16px; line-height: 23px; font-weight: 700;
      color: var(--pr-t); white-space: nowrap; font-variant-numeric: tabular-nums; }
    #main .pr-equiv { display: block; font-size: 15px; line-height: 23px; color: var(--pr-t);
      white-space: nowrap; font-variant-numeric: tabular-nums; }
    #main .pr-mm { display: block; font-size: 15px; line-height: 23px; color: var(--pr-cinz);
      white-space: nowrap; font-variant-numeric: tabular-nums; }
    /* A POUPANÇA só ganha cor quando existe. Zero fica cinzento como o resto
       -- pintar um zero de verde era fazer-lhe publicidade. */
    #main .pr-tab td { font-size: 15px; line-height: 23px; color: var(--pr-cinz);
      white-space: nowrap; font-variant-numeric: tabular-nums; }
    #main .pr-poupa-n { color: #1d8a5c; font-weight: 700; }
    /* A CAMPANHA - 27/09/2026. A faixa fica entre o nome do grupo e os
       cartões, que é onde a promessa se faz, e leva o código e a percentagem
       DESTE grupo. A coluna «Com o cupão» usa o mesmo vermelho da casa: é o
       único número desta página que NÃO renova, e tem de se ler como uma
       coisa diferente das outras seis colunas. */
    #main .pr-camp { display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 4px 10px; margin: 0 0 22px; padding: 10px 16px;
      border-radius: 10px; background: #fdeaf0; color: #8a0026;
      font-size: 13.5px; line-height: 20px; text-align: center; }
    #main .pr-camp code { font: inherit; font-weight: 700; letter-spacing: .5px;
      background: #fff; color: #d60037; border-radius: 6px; padding: 1px 7px; }
    #main .pr-camp .rlxcp-b { color: #8a0026; }
    /* SEM CAMPANHA a faixa não grita: é uma nota cinzenta, não um aviso. */
    #main .pr-camp-sem { background: #f4f6f8; color: var(--pr-cinz); }
    #main .pr-cup { display: block; font-size: 16px; line-height: 23px;
      font-weight: 700; color: #d60037; }
    /* Mais caro do que pagar mês a mês: não se pinta de verde nem se
       arredonda para zero. Ver o comentário em `linhas_do_plano`. */
    #main .pr-caro { color: #b4531d; font-weight: 700; }
    #main .pr-nao { color: #c3ccd6; }
    #main .pr-gratis { color: #1d8a5c; font-weight: 700; }

    /* NÚMERO ALINHA-SE À DIREITA. Com valores de 9.000,00 a 1.602.809,88 na
       mesma coluna, alinhados à esquerda as casas não se sobrepõem e a
       comparação -- que é a única razão para esta tabela existir -- deixa
       de funcionar de relance. A primeira coluna é texto e fica à esquerda. */
    /* NOS PRODUTOS TUDO À ESQUERDA (ordem do dono, 22/09/2026). Nos
       domínios não: lá os três preços ficam ao centro e o «Finalidade» à
       direita, e essas regras estão mais abaixo, presas a `.pr-dom-tab`. */
    #main .pr-tab thead th, #main .pr-tab tbody td,
    #main .pr-tab tbody th[scope="row"] { text-align: left; }
    /* ALINHAMENTOS DA TABELA DOS DOMÍNIOS (ordem do dono, 22/09/2026):
       a extensão à esquerda, os três preços ao centro, e «Finalidade» à
       direita. */
    #main .pr-dom-tab thead th + th, #main .pr-dom-tab tbody td { text-align: center; }
    #main .pr-dom-tab thead th:last-child, #main .pr-dom-tab tbody td.pr-dom-desc { text-align: right; }
    /* A «FINALIDADE» QUEBRA; os preços não. Todas as células da tabela
       são `nowrap` -- e é o que se quer nos números, que nunca devem
       partir. Mas esta coluna é TEXTO, e com `nowrap` a tabela passava
       a ter uma largura mínima maior do que a caixa: numa janela mais
       estreita aparecia uma barra de rolamento preta em baixo e a
       coluna ficava cortada ao meio de uma palavra. O dono mandou uma
       captura disso a 26/09/2026.

       Com `normal` a coluna encolhe e passa a duas linhas quando for
       preciso, e a tabela cabe sempre. O `min-width` é o que impede
       que ela fique num fio de letras no telemóvel, onde a tabela vira
       cartões de qualquer maneira. */
    /* «FINALIDADE» NUMA LINHA SÓ -- ordem do dono, 26/09/2026, sobre uma
       imagem em que «Extensão de país» aparecia partido em duas linhas.

       Esteve `white-space: normal` por minha causa: eu tinha posto a
       quebrar para a tabela caber na largura. Mas as duas coisas podem
       ser verdade ao mesmo tempo, e a conta prova-o -- as quatro
       primeiras colunas precisam de 132, 142, 142 e 142px de conteúdo
       (medido: o valor mais largo é «2.500,00 MT», 106px, e o cabeçalho
       mais largo é «TRANSFERÊNCIA», 103px), o que soma 558 dos 1108 da
       caixa. Sobram 550 para a última, e o rótulo mais comprido de todos
       («Organizações não governamentais») mede 245. Cabe com folga.

       O que faltava era DAR essa folga à coluna que dela precisa: o
       navegador reparte a sobra por igual e a última ficava com 190px,
       cortada a meio da palavra em 7 das 128 linhas. Quem reparte agora é
       o `travaColunas()`, aqui em baixo.

       As reticências são o cinto, não o plano: num ecrã estreito em que a
       conta não feche, corta-se a palavra em vez de nascer a barra preta
       que o dono não quer. A frase inteira fica no `title` da célula. */
    #main .pr-dom-tab tbody td.pr-dom-desc { white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; max-width: 0; }

    /* O ESPAÇO ENTRE SECÇÕES. O tema dá-lhes um respiro feito para páginas
       com uma coisa só; aqui são nove blocos seguidos e os buracos ficavam
       maiores do que o conteúdo. Só nas secções desta página. */
    #main .pr-sec { padding-top: 38px; padding-bottom: 38px; }
    #main .pr-sec > .container > .section-title { margin-bottom: 22px; }

    /* Os botões estavam à esquerda por baixo de títulos centrados. */
    #main #final .rlx-accoes, #main #domains .rlx-accoes {
      display: flex; justify-content: center; margin-top: 22px; }
    /* Só para quem lê com leitor de ecrã: o travessão sozinho não diz nada. */
    #main .pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

    /* OS DOMÍNIOS, NA MESMA MESA DA PÁGINA DE TRANSFERÊNCIA (ordem do dono,
       22/09/2026: «a lista deve ser em sua tabela que nem em
       /transferencia-de-dominio»). Os valores abaixo são os da
       `.rlx-ext__tab` dessa página, copiados um a um: 14,5px de corpo,
       11px/18px de folga, cabeça a 11,5px em maiúsculas com `letter-spacing`
       de .05em sobre #f7f8fa, o preço de registo a VERMELHO e a negrito, os
       outros dois em cinzento, e o grátis a verde #0a8a4a. Se um dia essa
       página mudar, esta muda atrás -- os valores estão aqui, não a folha. */
    #main .pr-dom-topo { display: flex; flex-wrap: wrap; gap: 12px;
      align-items: center; justify-content: space-between; margin: 0 0 14px; }
    #main .pr-procura { position: relative; flex: 0 1 300px; min-width: 250px; }
    #main .pr-procura input { width: 100%; padding: 9px 13px; border: 1px solid var(--pr-l);
      border-radius: 9px; font-size: 14px; line-height: 22px; color: var(--pr-t); background: #fff; }
    #main .pr-procura input:focus { outline: 2px solid rgba(214,0,55,.35); outline-offset: 1px;
      border-color: var(--pr-c); }
    #main .pr-conta { font-size: 13px; line-height: 20px; color: var(--pr-cinz); }

    #main .pr-dom-tab { font-size: 14.5px; min-width: 520px; background: #fff; }
    #main .pr-dom-tab th, #main .pr-dom-tab td { padding: 11px 18px;
      border-bottom: 0; border-top: 1px solid #eef1f4; vertical-align: middle; }
    #main .pr-dom-tab thead th { padding: 11px 18px; font-size: 11.5px; text-transform: uppercase;
      letter-spacing: .05em; color: var(--pr-cinz); font-weight: 600; background: #f7f8fa;
      border-top: 1px solid var(--pr-l); }
    #main .pr-dom-tab tbody tr:hover td, #main .pr-dom-tab tbody tr:hover th { background: #fcfcfd; }
    #main .pr-dom-tab tbody th[scope="row"] { position: static; box-shadow: none; background: none;
      color: var(--pr-t); font-weight: 600; white-space: nowrap; }
    #main .pr-dom-preco { color: var(--pr-c); font-weight: 600; white-space: nowrap; }
    #main .pr-dica { flex: 1 1 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 18px;
      color: var(--pr-cinz); }
    /* A LINHA É CLICÁVEL e leva a extensão à caixa de pesquisa. O cursor
       sozinho não anuncia nada a quem não passa o rato -- por isso a dica
       está escrita por cima da tabela, e a linha também responde ao
       teclado (Enter e Espaço), que é o que falta a quase todas as
       tabelas «clicáveis» por aí. */
    #main .pr-dom-tab tbody tr { cursor: pointer; }
    #main .pr-dom-tab tbody tr:focus-visible { outline: 2px solid var(--pr-c); outline-offset: -2px; }
    /* A COLUNA «O QUE É» NÃO PODE COMER LARGURA. Com o texto a poder
       quebrar, o navegador dava-lhe 331px dos 1108 - quase um terço da
       tabela, para duas palavras - e apertava os preços, que são o que se
       vem cá ver. Com `nowrap` e `width: 1%` ela fica do tamanho do que
       lá está e o resto volta para as colunas dos números. A frase
       inteira continua no `title`. */
    #main .pr-dom-desc { color: var(--pr-cinz); font-size: 13.5px; line-height: 20px;
      white-space: nowrap; width: 1%; max-width: 190px;
      overflow: hidden; text-overflow: ellipsis; }
    #main .pr-dom-tab thead th:last-child { width: 1%; }

    /* O CABEÇALHO QUE ORDENA. O `<th>` perde o `padding` e passa-o ao
       botão, para a área de clique ser a célula inteira e não só as
       letras. O botão herda tudo do `<th>` (tamanho, maiúsculas,
       espacejamento) em vez de os repetir: se o tema mudar o cabeçalho,
       o botão muda com ele. */
    #main .pr-dom-tab thead th[data-pr-ord] { padding: 0; }
    #main .pr-ord { display: flex; align-items: center; gap: 7px; width: 100%;
      padding: 11px 18px; margin: 0; background: none; border: 0; border-radius: 0;
      box-shadow: none; font: inherit; color: inherit; text-transform: inherit;
      letter-spacing: inherit; line-height: inherit; text-align: inherit;
      cursor: pointer; -webkit-appearance: none; appearance: none; }
    #main .pr-ord:hover { color: var(--pr-c); }
    #main .pr-ord:focus-visible { outline: 2px solid var(--pr-c); outline-offset: -2px; }
    /* o alinhamento segue o da coluna: extensão à esquerda, preços ao
       centro, «Finalidade» à direita -- as mesmas regras de cima */
    #main .pr-dom-tab thead th + th .pr-ord { justify-content: center; }
    #main .pr-dom-tab thead th:last-child .pr-ord { justify-content: flex-end; }
    /* A SETA VEM DO `aria-sort`, não de uma classe à parte: um estado só,
       lido pelo leitor de ecrã e desenhado pelo CSS. Sem ordem nenhuma
       fica apagada, a dizer «isto ordena» sem fingir que já ordenou. */
    #main .pr-ord-i { flex: 0 0 7px; width: 7px; height: 11px; position: relative;
      opacity: .3; transition: opacity .15s ease; }
    #main .pr-ord-i::before { content: ''; position: absolute; left: 0; top: 2px;
      width: 5px; height: 5px; border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor; transform: rotate(45deg);
      transition: transform .18s ease; }
    #main .pr-dom-tab thead th[aria-sort="ascending"] .pr-ord-i::before {
      transform: rotate(-135deg); top: 4px; }
    #main .pr-dom-tab thead th:not([aria-sort="none"]) .pr-ord { color: var(--pr-c); }
    #main .pr-dom-tab thead th:not([aria-sort="none"]) .pr-ord-i { opacity: 1; }
    @media (max-width: 860px) { #main .pr-dom-tab { min-width: 700px; } }
    #main .pr-dom-reg { color: var(--pr-cinz); white-space: nowrap; }
    #main .pr-gratis { color: #0a8a4a; font-weight: 600; }

    /* «Ver todas as 127 extensões» com a forma do `.rlx-ext__mais`: pílula de
       contorno vermelho, e não uma barra cinzenta colada ao fundo da caixa. */
    /* O PAGINADOR: 10 / 25 / 50 à esquerda, «Anterior - Página X de Y -
       Seguinte» à direita. As pílulas são as do `.rlx-ext__cat` da página de
       transferência, e o botão de página o do `.rlx-ext__mais`. */
    #main .pr-pager { display: flex; flex-wrap: wrap; gap: 12px 18px;
      align-items: center; justify-content: space-between; margin: 14px 0 0; }
    #main .pr-pager-tam, #main .pr-pager-nav { display: flex; align-items: center; gap: 7px; }
    #main .pr-pager-rot { margin-right: 4px; font-size: 12.5px; color: var(--pr-cinz); }
    #main .pr-tam { appearance: none; font: inherit; font-size: 12.5px; font-weight: 500;
      cursor: pointer; padding: 7px 13px; border: 1px solid var(--pr-l); border-radius: 20px;
      background: #fff; color: #4a5461;
      transition: border-color .18s ease, background .18s ease, color .18s ease; }
    #main .pr-tam:hover { border-color: var(--pr-c); color: var(--pr-c); }
    #main .pr-tam-on, #main .pr-tam-on:hover { background: var(--pr-c);
      border-color: var(--pr-c); color: #fff; }
    #main .pr-pg { appearance: none; font: inherit; font-size: 13px; font-weight: 500;
      cursor: pointer; padding: 8px 15px; border: 1px solid var(--pr-c); border-radius: 8px;
      background: #fff; color: var(--pr-c);
      transition: background .18s ease, color .18s ease; }
    #main .pr-pg:hover:not(:disabled) { background: var(--pr-c); color: #fff; }
    /* Um botão que não leva a lado nenhum diz-se apagado, não se esconde:
       desaparecer faz a fila saltar de sítio a cada página. */
    #main .pr-pg:disabled { border-color: var(--pr-l); color: #b6bfc9; cursor: default; }
    #main .pr-pg-conta { font-size: 13px; color: var(--pr-cinz); white-space: nowrap;
      font-variant-numeric: tabular-nums; }

    /* AS CATEGORIAS, ao lado da pesquisa. São as mesmas da página de
       transferência -- o nome e a regra saem dos ficheiros dela, não de
       uma cópia -- e a pílula é a `.rlx-ext__cat`, com a contagem ao lado
       para não ser preciso um clique só para descobrir que uma categoria
       tem três extensões. */
    #main .pr-cats { display: flex; flex-wrap: wrap; gap: 7px; }
    #main .pr-cat { appearance: none; font: inherit; font-size: 12.5px; font-weight: 500;
      cursor: pointer; padding: 7px 13px; border: 1px solid var(--pr-l); border-radius: 20px;
      background: #fff; color: #4a5461;
      transition: border-color .15s ease, background .15s ease, color .15s ease; }
    #main .pr-cat:hover { border-color: var(--pr-c); color: var(--pr-c); }
    #main .pr-cat-on, #main .pr-cat-on:hover { background: var(--pr-c);
      border-color: var(--pr-c); color: #fff; }
    #main .pr-cat-n { font-size: 10.5px; font-weight: 600; margin-left: 7px; opacity: .6; }
    #main .pr-cat-on .pr-cat-n { opacity: .85; }

    /* A CAIXA DE PESQUISA DE DOMÍNIO, VESTIDA COM O ESTILO DESTA PÁGINA
       (ordem do dono, 22/09/2026: «deixa a página inicial, a caixa deve
       adaptar-se ao estilo da página de preços»). A marcação e o guião
       continuam a ser os da peça da casa - é o mesmo `data-dia-abre` e o
       mesmo formulário - mas a pintura é daqui: cartão branco de cantos
       redondos, contorno fino, e o botão no vermelho da casa em vez do azul
       da inicial. Na inicial ela vive sobre um fundo escuro e larga; aqui
       vive entre tabelas, e tinha de encolher e ganhar contorno.
       AS REGRAS LEVAM `#main` À FRENTE de propósito: a folha da peça pinta
       por `.hd-sec ...` e sem o id perdia-se a disputa -- era por isso que
       o botão ficava transparente, com o texto branco sobre nada. */
    #main .pr-busca { max-width: 760px; margin: 26px auto 0; }
    #main .pr-busca .domain-registration-main-input { margin: 0; }
    #main .pr-busca .domain-registration-main-input-text {
      display: flex; align-items: center; gap: 0; width: 100%; padding: 6px;
      background: #fff; border: 1px solid var(--pr-l); border-radius: 12px;
      box-shadow: 0 1px 2px rgba(29,39,51,.04); transition: border-color .18s ease, box-shadow .18s ease; }
    #main .pr-busca .domain-registration-main-input-text:focus-within {
      border-color: var(--pr-c); box-shadow: 0 0 0 3px rgba(214,0,55,.12); }
    #main .pr-busca .domain-registration-main-input-text > span {
      flex: 0 0 auto; padding: 0 4px 0 12px; color: var(--pr-cinz);
      font-size: 15px; line-height: 22px; }
    #main .pr-busca input[type="text"] {
      flex: 1 1 auto; min-width: 0; height: 46px; margin: 0; padding: 0 12px;
      border: 0; background: none; box-shadow: none;
      font-size: 16px; line-height: 24px; color: var(--pr-t); }
    #main .pr-busca input[type="text"]:focus { outline: none; box-shadow: none; }
    #main .pr-busca input[type="text"]::placeholder { color: #9aa4b0; }
    #main .pr-busca .domain-registration-submit {
      flex: 0 0 auto; width: auto; min-width: 132px; height: 46px; margin: 0;
      padding: 0 22px; border: 0; border-radius: 9px;
      background: var(--pr-c); color: #fff; font-size: 15px; line-height: 46px;
      font-weight: 700; cursor: pointer; transition: background .18s ease; }
    #main .pr-busca .domain-registration-submit:hover { background: #b0002d; }

    /* O BOTÃO DO MODO IA, que o `dominio-ia.js` mete DENTRO do campo (é o
       `.dia-bt`, e a `.dia-area` por baixo é onde ele escreve as sugestões).
       Não é lixo do tema - é a peça a funcionar; só vinha sem pintura nesta
       página e ficava um círculo solto entre o campo e o botão. Aqui fica
       redondo, discreto, encostado ao botão de pesquisar. */
    #main .pr-busca .dia-bt { flex: 0 0 auto; width: 38px; height: 38px; margin: 0 4px 0 0;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--pr-l); border-radius: 50%; background: #fff;
      color: var(--pr-c); cursor: pointer; padding: 0;
      transition: border-color .18s ease, background .18s ease; }
    #main .pr-busca .dia-bt:hover { border-color: var(--pr-c); background: #fff5f7; }
    #main .pr-busca .dia-bt svg { width: 18px; height: 18px; }
    #main .pr-busca .dia-area { flex: 1 1 100%; }

    /* A linha da IA por baixo, centrada e discreta: é uma sugestão, não um
       segundo botão a competir com o de pesquisar. */
    #main .pr-busca .hd-ia { display: inline-flex; align-items: center; gap: 8px;
      margin: 12px auto 0; padding: 6px 4px; border: 0; background: none;
      color: var(--pr-cinz); font-size: 14px; line-height: 21px; cursor: pointer;
      text-align: left; }
    #main .pr-busca { text-align: center; }
    #main .pr-busca .hd-ia b { color: var(--pr-t); font-weight: 700; }
    #main .pr-busca .hd-ia svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--pr-c); }
    #main .pr-busca .hd-ia:hover { color: var(--pr-t); }
    #main .pr-busca .hd-ia:hover b { text-decoration: underline; }
    @media (max-width: 560px) {
      #main .pr-busca .domain-registration-main-input-text { flex-wrap: wrap; }
      #main .pr-busca .domain-registration-submit { width: 100%; margin-top: 6px; }
    }

    /* O ACENO das linhas ao mudar de página, de tamanho ou de categoria.
       As primeiras dez entram em escada, que é o que faz a lista parecer
       que se está a desenhar; da décima em diante entram juntas - com 127
       linhas uma escada até ao fim levava quase três segundos. */
    @keyframes pr-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes pr-entra-suave { from { opacity: 0; } to { opacity: 1; } }
    @keyframes pr-sai-suave { from { opacity: 1; } to { opacity: 0; } }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]) { animation: pr-entra .24s ease both; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(2) { animation-delay: 22ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(3) { animation-delay: 44ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(4) { animation-delay: 66ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(5) { animation-delay: 88ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(6) { animation-delay: 110ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(7) { animation-delay: 132ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(8) { animation-delay: 154ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(9) { animation-delay: 176ms; }
    #main .pr-dom-tab tbody.pr-entra tr:not([hidden]):nth-child(10) { animation-delay: 198ms; }
    #main .pr-vazio { padding: 18px; margin: 0; color: var(--pr-cinz); font-size: 13.5px; }

    /* AO ABRIR AS 127 EXTENSÕES, A CAIXA É QUE ROLA -- não a página (ordem do
       dono, 22/09/2026). Com cento e tal linhas soltas a página ficava com
       um terço de tabela e perdia-se o resto; assim a lista tem tecto, rola
       por dentro, e a cabeça fica presa para se saber sempre que coluna é
       qual. É o `.rlx-ext__rolo--alto` da página de transferência, com os
       mesmos valores. O `overscroll-behavior` impede que, ao chegar ao fim
       da lista, o dedo continue a arrastar a página atrás. */
    #main .pr-rolo.pr-alto { max-height: 70vh; overflow-y: auto;
      overscroll-behavior: contain; }
    #main .pr-rolo.pr-alto thead th { position: sticky; top: 0; z-index: 2;
      box-shadow: inset 0 -1px 0 var(--pr-l); }

    /* AS NOTAS. Lê-se depois das tabelas, e é onde se diz o que o número
       grande e o número pequeno querem dizer. */
    #main .pr-notas { margin: 0; padding: 0; }
    #main .pr-notas > li { list-style: none; position: relative; padding-left: 26px;
      margin: 0 0 10px; font-size: 15px; line-height: 23px; color: var(--pr-cinz); }
    #main .pr-notas > li::before { content: ''; position: absolute; left: 6px; top: 9px;
      width: 6px; height: 6px; border-radius: 50%; background: var(--pr-c); }
    #main .pr-iva { font-size: 14px; line-height: 21px; color: var(--pr-cinz); margin: 14px 0 0; }

    /* O CORTE NO TELEMÓVEL, e porque não era culpa da página. A secção do
       tema (`.section-v3`) é `display: flex`, e num item de flex o
       `min-width` vale `auto` -- isto é, o item recusa-se a encolher abaixo
       do seu próprio conteúdo. Medido a 22/09/2026 num ecrã de 390px: o
       `.container` ficava com 550px de min-content, travado nos 540px do
       `max-width` do tema, e o `body { overflow-x: hidden }` comia os 150px
       que sobravam -- a página parecia cortada à direita e não havia barra
       nenhuma para a arrastar. Um `min-width: 0` devolve-lhe o direito de
       encolher. Fica só nesta página: o tema é de todas e não se mexe numa
       folha partilhada para arranjar uma. */
    /* O `min-width: 0` deixa-o ENCOLHER, mas não o impede de CRESCER: num
       contentor de flex em coluna o item ainda assim saía a 540px num
       ecrã de 390 -- nenhuma regra lhe dava essa largura, era a
       disposição a empurrá-lo, e o `body { overflow-x: hidden }` do tema
       comia o que passava. O `max-width: 100%` fecha essa porta seja qual
       for a causa. */
    #main .pr-pag > .container, #main .pr-pag.container {
      min-width: 0; max-width: 100%; }
    #main .pr-grupo, #main .pr-rolo { min-width: 0; }

    /* A DICA DE QUE A TABELA ROLA. Entre o telemóvel e o ecrã grande a
       tabela ainda passa da caixa; sem isto ninguém adivinha que há mais
       colunas à direita. A sombra só aparece quando há mesmo mais para ver
       (é o JS que põe a classe) e desaparece ao chegar ao fim. */
    /* `overflow-anchor: none` - SEM ISTO O «SEGUINTE» MEXIA A PÁGINA 60px,
       e não era salto nenhum do nosso guião: é o ancoramento de rolagem do
       Chrome, que ao ver linhas a desaparecer e a aparecer dentro da caixa
       corrige a posição sozinho para «manter» o que estava à vista. Medido
       a 22/09/2026. A página de transferência já leva a mesma linha na
       `.rlx-ext__rolo`, pela mesma razão. */
    #main .pr-rolo { position: relative; overflow-anchor: none; }
    #main .pr-rolo::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0;
      width: 44px; pointer-events: none; opacity: 0; transition: opacity .2s ease;
      background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.96)); }
    #main .pr-rolo.pr-ha-mais::after { opacity: 1; }

    /* O ATALHO DO ASSUNTO EM QUE SE ESTÁ. Oito grupos e a página é longa:
       sem isto perde-se a noção de onde se vai. */
    #main .pr-indice a.pr-aqui { background: var(--pr-t); border-color: var(--pr-t); color: #fff; }

    /* EM TELEMÓVEL A TABELA CONTINUA TABELA E ROLA DE LADO -- o padrão da
       casa, que o dono mandou seguir a 22/09/2026 apontando as tabelas de
       servidores da /servidor-dedicado: lá a tabela fica com os seus
       1154px dentro de um `.table-responsive` com `overflow-x: auto`.

       ANTES ISTO VIRAVA CARTÕES, um por ciclo. Lia-se bem, mas era uma
       invenção minha: o resto do site não faz assim, e uma página que se
       comporta de maneira diferente das outras obriga a reaprender.
       A caixa que rola já cá estava (`.pr-rolo`), e com ela a sombra na
       beira direita que avisa que há mais para ver. */
    @media (max-width: 720px) {
      #main .pr-tab { min-width: 640px; }
      #main .pr-dom-tab { min-width: 600px; }
      #main .pr-plano { font-size: 17px; }
      /* A TABELA DOS DOMÍNIOS TAMBÉM PRENDE A EXTENSÃO. No ecrã grande ela
         cabe inteira e a coluna foi solta de propósito (mais acima), para
         não desenhar um risco vertical no meio de uma tabela que não rola.
         Aqui rola -- e sem a extensão presa lia-se «30.000,00 Kz» sem saber
         de que extensão; pior, o cabeçalho ficava preso e a coluna não,
         e «EXTENSÃO» aparecia escrito por cima de uma coluna de preços. */
      #main .pr-dom-tab tbody th[scope="row"] { position: sticky; left: 0; z-index: 1;
        background: #fff; box-shadow: 1px 0 0 var(--pr-l); }
      #main .pr-dom-tab tbody tr:hover th[scope="row"] { background: #fcfcfd; }
      /* a coluna do ciclo já vem presa da regra de cima (`position: sticky`),
         e é ela que salva a leitura ao arrastar: sem o nome do ciclo à vista
         não se sabe de que linha se está a ler o preço. */
    }

    @media (prefers-reduced-motion: reduce) {
      /* REDUZIR NÃO É APAGAR (política da casa, 26/08/2026). Antes estava
         `animation: none` e quem tem esta preferência - o dono tem - não
         via nada e dizia, com razão, que não havia animação. Agora as
         linhas continuam a aparecer: só perdem o movimento e a escada, e
         ficam com um esbater um pouco mais lento. */
      #main .pr-dom-tab tbody.pr-entra tr:not([hidden]) {
        animation: pr-entra-suave .3s linear both; animation-delay: 0s !important; }
      /* a seta vira depressa em vez de não virar: reduzir não é apagar */
      #main .pr-ord-i::before { transition-duration: .01s; }
      /* Encurta o deslize em vez de o apagar - reduzir não é apagar. */
      #main .pr-cards { transition-duration: .2s; }
      #main .pr-cat, #main .pr-tam, #main .pr-pg, #main .pr-comprar a { transition: none; }
      /* NOMES DIFERENTES PARA ABRIR E PARA FECHAR. Com o mesmo nome o
         navegador não recomeça a animação - só lhe muda a duração - e
         nenhum `animationstart` ou `animationend` chega a disparar: o
         painel desaparecia de repente, pelo temporizador de rede. Medido
         a 22/09/2026 com os eventos sob escuta. */
      /* Encurta, não apaga: continua a encolher, só mais depressa. */
      #main .pr-painel { transition-duration: .18s; }
      #main .pr-rolo::after { transition: none; }
    }


/* OS CARTÕES DE EXTENSÃO A CINZENTO -- e só eles (ordem do dono,
   26/09/2026, depois de ver onde era).

   PORQUE SÓ ESTA. Ao pôr a tabela nesta página fiquei com duas secções
   brancas encostadas: os cartões e a tabela. Cheguei a escrever cinco
   regras para a página inteira alternar, e uma delas pintava a banda da
   procura -- o campo de pesquisa é branco e sobre cinzento parecia
   apagado. O dono mandou repor tudo, e depois aprovou só esta: é a que
   arruma o par que EU criei, e não mexe em nada que já cá estava.

   NÃO É UMA COR NOVA: é a que a página do gerador de domínios já dá a
   esta mesma secção (`#main #domaintldoffers { background: #edeff0 }`).

   SÓ NAS PÁGINAS DE REGISTO, que são as únicas que carregam esta folha.
   Na /whois e na de transferência, onde a tabela não entra, os cartões
   ficam brancos como sempre estiveram. */
#main #domaintldoffers, body #domaintldoffers { background: #edeff0; }