/* =====================================================================
   PÁGINA DE MIGRAÇÃO DE ALOJAMENTO — a folha
   12/09/2026

   O DESENHO NÃO É DAQUI. É o mesmo do `/registo-de-dominio` e do
   `/gerador-de-nome`, e por duas razões: esta página manda para o
   carrinho de alojamento e para o portal, e uma página que parece de
   outro sítio não herda a confiança do sítio.

   A PALETA É LIDA DESSAS PÁGINAS, não escolhida aqui:

     #00acc8  o ciano das acções nossas   (o número do passo, o «ler»)
     #d60037  o vermelho da marca         (contratar, pedir)
     #1f2835  o carvão dos títulos
     #76bd22  o verde do que é grátis
     #edeff0  o cinzento das superfícies
     #e2e6ea  a moldura dos cartões
     #5b6879 / #8b95a5  os dois cinzentos de texto

   Até 12/09 esta folha usava um azul #1d5297 que não existe em lado
   nenhum do site, e cantos arredondados de 10 px. Ambos foram
   corrigidos: o azul não era de ninguém, e CANTOS DIREITOS é a regra
   da casa — o tema não arredonda nem o campo de pesquisa, nem o botão,
   nem os cartões de resultado.

   As classes `dm-` e `gn-` não estão aqui: são das outras páginas. O
   que esta repete é a FORMA (moldura #E3E3E3, sombra
   `2px 12px 10px #ddd`, texto centrado), lida de lá, não inventada.
   ===================================================================== */

:root {
    --mg-ac: #00acc8;
    --mg-ac2: #0bbdd9;
    --mg-c: #d60037;
    --mg-t: #1f2835;
    --mg-l: #edeff0;
    --mg-l2: #e2e6ea;
    --mg-g: #5b6879;
    --mg-g2: #8b95a5;
    --mg-v: #76bd22;
}

/* =====================================================================
   OS FUNDOS E O RITMO VERTICAL

   Medido no ecrã a 12/09/2026, não imaginado. Estava assim, de cima
   para baixo: 44/40, 60/60, 50/55, 0/0, 50/55, 0/0, 50/55, 50/60,
   60/60, 60/60, 50/55, 47/47, 0/55, 30/30 — e três brancos seguidos a
   meio. É o defeito que o dono já tinha apanhado no gerador: não se
   percebe onde acaba um bloco e começa o seguinte.

   Passa a alternar, e todas as nossas a 60/60 (40/40 em telemóvel):

      1  três passos          BRANCO
      2  o que precisamos     CINZENTO   (hat-details, do tema)
      3  como corre o pedido  BRANCO
      4  a prática/teoria     FOTOGRAFIA (do tema — separa sozinha)
      5  de onde migramos     CINZENTO
      6  o que vem com o site BRANCO
      7  o que ganha ao mudar CINZENTO
      8  os planos            BRANCO
      9  migração interna     CINZENTO   (hat-details, do tema)
     10  precisa de ajuda     FOTOGRAFIA (do tema)
     11  porquê a Interweb    FOTOGRAFIA (do tema)
     12  artigos da KB        BRANCO
     13  F.A.Q.               CINZENTO
     14  falar connosco       BRANCO
     15  outros produtos      CINZENTO   (do tema, fica como está)

   O `.differential` e o `.other-products` ficam como o tema os tem:
   são peças partilhadas com o resto do site.
   ===================================================================== */

#de-onde, #where-from,
#o-que-ganha, #what-you-get,
#migracao-faq, #migration-faq {
    background: var(--mg-l);
}

#promotions,
#como-corre, #how-it-runs,
#o-que-vem, #what-comes-over,
#planos,
#artigos, #articles,
#falar, #talk {
    background: #fff;
}

#promotions,
#como-corre, #how-it-runs,
#de-onde, #where-from,
#o-que-vem, #what-comes-over,
#o-que-ganha, #what-you-get,
#planos,
#artigos, #articles,
#migracao-faq, #migration-faq,
#falar, #talk {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* O tema põe `padding: 47px` no `.section-v3` do F.A.Q. e zero no
   `.icons-links-list`; ambos perdem para o ID, mas fica dito porque é
   que as linhas acima existem. */

/* =====================================================================
   OS CARTÕES — os três passos e os três planos

   O `.thumbnail` do Bootstrap dá uma moldura e mais nada. O que faz as
   caixas do `/registo-de-dominio` parecerem o que parecem vive em
   `#domainintro .thumbnail`, preso ao ID daquela página. Repete-se
   aqui, com os mesmos números.

   MESMA ALTURA: sem isto, o cartão com a linha mais curta encolhia e o
   botão subia — e três botões a três alturas lêem-se como três coisas
   diferentes. O clearfix do Bootstrap (`.row::before/::after`) tem de
   ser desligado, senão conta como um item da flexbox e abre uma coluna
   vazia.
   ===================================================================== */

#promotions .row,
#planos .row {
    display: flex;
    flex-wrap: wrap;
}

#promotions .row::before, #promotions .row::after,
#planos .row::before, #planos .row::after {
    display: none;
}

#promotions .row > [class*="col-"],
#planos .row > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

#promotions .thumbnail,
#planos .thumbnail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-bottom: 0;
    padding: 30px 24px 26px;
    background: #fff;
    border: 1px solid #E3E3E3;
    border-radius: 0;
    box-shadow: 2px 12px 10px #ddd;
    text-align: center;
    box-sizing: border-box;
}

#promotions .thumbnail .caption,
#planos .thumbnail .caption {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
    color: inherit;
}

#promotions .thumbnail h3,
#planos .thumbnail h3 {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 26px;
    font-weight: 700;
    color: var(--mg-t);
    text-transform: none;
}

/* Uma linha por baixo do título, para os três se lerem como uma
   sequência e não como três coisas soltas. Ciano nos passos (é
   trabalho nosso), vermelho nos planos (é uma compra). */
#promotions .thumbnail h3::after {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    margin: 12px auto 0;
    background: var(--mg-ac);
}

#promotions .thumbnail p {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

/* O botão encostado ao fundo do cartão, e não logo a seguir ao texto. */
#promotions .thumbnail .btn,
#planos .thumbnail .btn {
    margin-top: auto;
    align-self: stretch;
    border-radius: 0;
    padding: 17px 20px;
    font-size: 14px;
    letter-spacing: .02em;
}

/* A nota por baixo do botão do passo 2: o Departamento de Migração é
   só para clientes, e quem clica sem sessão cai na página de entrada.
   Mais vale dizê-lo antes do clique do que depois. */
.rlx-nota-btn {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--mg-g2);
}

.rlx-nota-btn a {
    color: var(--mg-ac);
}

/* ---------------------------------------------------------- os planos */

#planos .price {
    margin: 0 0 18px;
    line-height: 1.1;
}

#planos .price .price-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--mg-t);
}

#planos .price .suffix {
    font-size: 14px;
    color: var(--mg-g2);
    bottom: 0;
}

.rlx-plano-itens {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    text-align: left;
    flex: 1 1 auto;
}

.rlx-plano-itens li {
    padding: 8px 0;
    border-top: 1px solid var(--mg-l);
    font-size: 14px;
    color: var(--mg-g);
}

.rlx-plano-itens li:first-child {
    border-top: 0;
}

.rlx-plano-itens li strong {
    color: var(--mg-t);
    font-weight: 700;
}

/* A migração grátis é a razão de a pessoa estar nesta página: é a única
   linha da lista que muda de cor, e é o verde do «livre» da pesquisa de
   domínios, não um verde à parte.

   E quem muda de cor é o VALOR, não o rótulo. Estava ao contrário e no
   ecrã lia-se «Migração do site actual» a verde com «Grátis» a cinzento
   — o destaque a cair na etiqueta e não na palavra que decide. */
.rlx-plano-itens .rlx-gratis {
    color: var(--mg-v);
    font-weight: 700;
}

.rlx-planos-pe {
    margin: 8px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

.rlx-planos-pe a {
    color: var(--mg-ac);
}

/* =====================================================================
   Todas as secções próprias limpam os floats do tema

   As secções `icons-links-list` deixam floats por fechar dentro do seu
   `.inner`. Sem isto o título de «O que ganha ao mudar» subia para o
   lado dos ícones da secção anterior e partia-se ao meio — visto no
   navegador, não suposto.
   ===================================================================== */

.rlx-tempo,
.rlx-onde,
.rlx-ganha,
.rlx-artigos,
.rlx-fala {
    clear: both;
}

/* --- 1. Como corre o pedido ----------------------------------------- */

/* Duas colunas em ecrã largo. Seis passos numa coluna só obrigavam a
   rolar meia página para ver o fim do processo — e é justamente o fim
   que tranquiliza quem está a decidir. */
.rlx-tempo-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 34px;
}

.rlx-tempo-lista li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* O NÚMERO É DO `<ol>`, NÃO DO HTML.

   Estava escrito à mão dentro de cada `<li>`, e o `<ol>` contava outra
   vez por cima: no ecrã não se via (a lista não mostra marcadores), mas
   em texto, num leitor de ecrã e num copiar-colar saía «1. 1». Foi assim
   que o dono o apanhou — colou a página e leu-a.

   Com o contador, o número existe uma vez só e continua a ser o do
   `<ol>`: acrescentar ou trocar um passo não obriga a renumerar nada. */
.rlx-tempo-lista {
    counter-reset: rlxpasso;
}

.rlx-tempo-lista li {
    counter-increment: rlxpasso;
}

.rlx-tempo-lista li::before {
    content: counter(rlxpasso);
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: var(--mg-ac);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
}

.rlx-tempo-txt {
    min-width: 0;
}

.rlx-tempo-txt h3 {
    margin: 4px 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: var(--mg-t);
}

.rlx-tempo-txt p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

/* QUEM FAZ O QUÊ. É a pergunta que quem migra tem na cabeça — «o que é
   que eu vou ter de fazer?» — e a página respondia-lhe só por dentro do
   texto. A etiqueta diz cada passo de quem é, antes de se ler a frase.

   O «Quem faz:» que vai lá dentro não se vê: numa pastilha seria ruído,
   mas sem ele a frase lida em voz alta era «Nós. Recebemos o pedido», e
   a etiqueta passava por parte do título. */
.rlx-so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.rlx-tempo-quem {
    display: inline-block;
    margin: 0 0 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid var(--mg-l2);
    background: #fff;
    color: var(--mg-g);
}

.rlx-tempo-quem.rlx-nos {
    border-color: var(--mg-ac);
    color: var(--mg-ac);
}

.rlx-tempo-quem.rlx-voce {
    border-color: var(--mg-c);
    color: var(--mg-c);
}

/* --- 2. De onde migramos -------------------------------------------- */

.rlx-selos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* A PASTILHA É O BOTÃO, NÃO O `li`.

   Quando as pastilhas passaram a botões, o `li` continuou com a moldura
   e o espaço que tinha, e o botão trouxe os seus: cada pastilha ficou
   com DUAS caixas, uma dentro da outra. Visto no ecrã, não no código.
   O `li` volta a ser só um sítio na fila. */
.rlx-selos li {
    padding: 0;
    border: 0;
    background: none;
    display: flex;
}

/* O rodapé desta secção é uma ressalva, não um título: corpo pequeno,
   centrado, e com a largura travada para não fazer linhas de travessia
   inteira. */
.rlx-onde-pe {
    max-width: 760px;
    margin: 24px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

/* --- 3. O que ganha ao mudar ---------------------------------------- */

.rlx-ganha-grelha {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.rlx-ganha-item {
    padding: 24px 22px;
    border: 1px solid var(--mg-l2);
    background: #fff;
}

/* A barra em cima liga estes cartões aos do resto da página sem repetir
   a sombra: esta secção assenta em cinzento e uma sombra aqui punha-a a
   competir com os planos, que são a acção. */
.rlx-ganha-item h3 {
    margin: 0 0 10px;
    padding-top: 14px;
    border-top: 3px solid var(--mg-ac);
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: var(--mg-t);
}

.rlx-ganha-item p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

/* --- 4. Artigos da Base de Conhecimento ------------------------------ */

.rlx-artigos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.rlx-artigos-lista li {
    display: flex;
}

/* O cartão inteiro é a ligação — o mesmo que se fez no bloco de
   resultados da pesquisa, e pela mesma razão: um título clicável dentro
   de uma caixa que não o é engana o dedo em telemóvel. */
.rlx-artigos-lista a {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px 22px 20px;
    border: 1px solid var(--mg-l2);
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* DUAS CORES, E CADA UMA COM O SEU TRABALHO — 13/09/2026, por ordem do
   dono, em duas passagens.

   O VERMELHO é o chamamento: «Ler o artigo» e o título quando o rato lá
   está, porque é para onde a página manda o visitante (o portal).
   O CIANO é a moldura que acende: é a página a responder ao rato, e é a
   mesma resposta que o resto do site dá.

   Postas as duas ao mesmo tempo, o cartão dizia duas coisas com a mesma
   voz. Assim, uma diz «isto reage» e a outra diz «isto leva-te a algum
   lado». */
.rlx-artigos-lista a:hover,
.rlx-artigos-lista a:focus {
    border-color: var(--mg-ac);
    box-shadow: 2px 12px 10px #ddd;
    text-decoration: none;
}

.rlx-artigos-lista h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: var(--mg-t);
}

.rlx-artigos-lista a:hover h3,
.rlx-artigos-lista a:focus h3 {
    color: var(--mg-c);
}

/* A DESCRIÇÃO PRESA A QUATRO LINHAS — 13/09/2026, por ordem do dono.

   Os resumos vêm do índice da pesquisa com comprimentos diferentes e
   davam três linhas num cartão e quatro noutro. O `line-clamp` corta ao
   fim da quarta e o `min-height` garante que lá chega mesmo quando o
   texto é curto: quatro em todos, sempre, venha o texto que vier da
   Base de Conhecimento.

   O `flex:1` continua a empurrar o «Ler o artigo» para o fundo nos
   navegadores sem `subgrid`. */
.rlx-artigos-lista p {
    flex: 1 1 auto;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 88px;
}

.rlx-artigos-ler {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mg-c);
}

.rlx-artigos-ler::after {
    content: " \203A";
}

/* --- 5. Faixa de contacto -------------------------------------------- */

.rlx-fala-caixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 32px 34px;
    border: 1px solid var(--mg-l2);
    border-left: 4px solid var(--mg-ac);
    background: #fff;
    box-shadow: 2px 12px 10px #ddd;
}

.rlx-fala-texto {
    min-width: 0;
}

.rlx-fala-texto h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--mg-t);
}

.rlx-fala-texto p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

.rlx-fala-accoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

/* 54 pixéis é a altura dos controlos da pesquisa de domínios. Estes são
   os mesmos, para as ferramentas do site se lerem como uma. */
.rlx-fala-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 24px;
    border: 1px solid var(--mg-l2);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--mg-t);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.rlx-fala-btn:hover,
.rlx-fala-btn:focus {
    border-color: var(--mg-ac);
    color: var(--mg-ac);
    text-decoration: none;
}

/* O chat é o caminho mais rápido e é o único cheio. Três botões iguais
   não são uma escolha, são uma hesitação. */
.rlx-fala-chat {
    background: var(--mg-ac);
    border-color: var(--mg-ac);
    color: #fff;
}

.rlx-fala-chat:hover,
.rlx-fala-chat:focus {
    background: var(--mg-ac2);
    border-color: var(--mg-ac2);
    color: #fff;
}

/* O teclado tem de ver onde está. O tema não desenha foco nenhum nestes
   elementos, e um contorno que só aparece a quem navega por tabulação
   não estorva ninguém. */
.rlx-fala-btn:focus-visible {
    outline: 3px solid var(--mg-ac);
    outline-offset: 2px;
}

.rlx-artigos-lista a:focus-visible {
    outline: 3px solid var(--mg-c);
    outline-offset: 2px;
}

/* =====================================================================
   MOVIMENTO REDUZIDO

   Política da casa (26/08/2026): onde obedecer APAGA a funcionalidade,
   passa-se por cima; onde ela continua a cumprir o seu papel,
   respeita-se. Aqui nada depende de movimento — as transições são só
   resposta ao rato — por isso encurtam-se para o mínimo em vez de
   desaparecerem: quem passa o rato continua a saber que o cartão
   respondeu.
   ===================================================================== */

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

/* =====================================================================
   ECRÃS ESTREITOS
   ===================================================================== */

@media (max-width: 991px) {
    .rlx-ganha-grelha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rlx-artigos-lista {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    #promotions,
    #como-corre, #how-it-runs,
    #de-onde, #where-from,
    #o-que-vem, #what-comes-over,
    #o-que-ganha, #what-you-get,
    #planos,
    #artigos, #articles,
    #migracao-faq, #migration-faq,
    #falar, #talk {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    /* Uma coluna: a duas colunas, cada passo ficaria com metade de um
       ecrã estreito e o texto partia-se em linhas de três palavras. */
    .rlx-tempo-lista {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .rlx-ganha-grelha {
        grid-template-columns: 1fr;
    }
    #promotions .thumbnail,
    #planos .thumbnail {
        padding: 26px 20px 22px;
    }
    .rlx-fala-caixa {
        flex-direction: column;
        align-items: stretch;
        padding: 26px 22px;
    }
    .rlx-fala-accoes {
        width: 100%;
    }
    .rlx-fala-btn {
        flex: 1 1 auto;
    }
}

/* =====================================================================
   A NOTA E O BOTÃO ANDAM JUNTOS — 12/09/2026

   A nota do passo 2 estava POR BAIXO do botão, e o botão levava
   `margin-top: auto`: resultado no ecrã, os três botões deixaram de
   estar à mesma altura — o do meio subia o tamanho da nota. O aviso
   passou para CIMA do botão, que é onde serve (lê-se antes do clique,
   não depois), e agora é ele que leva a margem automática. O botão
   perde-a, senão as duas margens dividiam o espaço livre entre si e
   nenhum dos dois chegava ao fundo.
   ===================================================================== */

#promotions .thumbnail .rlx-nota-btn {
    margin-top: auto;
    padding-top: 14px;
    margin-bottom: 12px;
}

#promotions .thumbnail .rlx-nota-btn + .btn {
    margin-top: 0;
}

/* =====================================================================
   SEGUNDA PASSAGEM, BLOCO A BLOCO — 12/09/2026
   ===================================================================== */

/* ---- os três passos: o número grande da casa -----------------------

   O `.gn-passo` do gerador, com o mesmo tamanho e a mesma cor. O «1.»
   estava dentro do título e lia-se como pontuação; fora dele, os três
   cartões lêem-se como uma sequência sem ser preciso lê-los. */

.rlx-passo-n {
    display: block;
    margin: 0 auto 14px;
    font-size: 52px;
    line-height: 1;
    font-weight: 700;
    color: var(--mg-ac);
    text-align: center;
}

/* ---- «o que precisamos de si»: lista, e não parágrafo --------------

   Era um parágrafo justificado de oito linhas com quatro pedidos lá
   dentro. É a única coisa da página que o visitante tem de IR BUSCAR
   antes de abrir o pedido — e um parágrafo não se usa como lista de
   verificação: lê-se uma vez e esquece-se a terceira alínea.

   Os visto são de texto (`✓`), e não uma imagem nem um ícone de fonte:
   esta secção é `hat-details`, partilhada com o tema, e não vale a pena
   carregar nada por causa de quatro sinais. */

.rlx-check {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rlx-check li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 24px;
    color: var(--mg-g);
}

.rlx-check li:last-child {
    margin-bottom: 0;
}

.rlx-check li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--mg-ac);
    color: #fff;
}

.rlx-check li strong {
    color: var(--mg-t);
    font-weight: 700;
}

/* A frase que tira o travão a quem acha que ainda não está pronto. */
.rlx-check-pe {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--mg-l2);
    background: #fff;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

/* ---- «de onde migramos»: por grupos --------------------------------

   Uma fila só punha `cPanel` ao lado de `WordPress`, que são coisas de
   ordens diferentes — um é o painel de onde se tira, o outro é o que
   está lá dentro. Quem chega com Plesk e um Joomla ficava sem saber se
   precisava dos dois na lista ou de um. Três grupos respondem a isso
   sem uma linha de explicação. */

/* Em TRÊS COLUNAS não cabia: o «PrestaShop» passava para uma segunda
   linha e a coluna do meio ficava mais alta que as outras duas — o
   agrupamento lia-se como desalinhamento. Em três LINHAS, com o rótulo
   à esquerda, cada grupo tem a largura de que precisa e as três
   etiquetas fazem uma espinha só. */
.rlx-selos-grelha {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 14px 24px;
    align-items: center;
    /* `max-content` nas DUAS colunas e não `1fr` na segunda: com `1fr` a
       grelha ocupava a largura toda, o conteúdo encostava à esquerda
       dela e o bloco ficava visivelmente fora do eixo do título, que é
       centrado. Assim a grelha mede exactamente o que tem lá dentro e a
       margem automática centra-a a sério. */
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

/* O grupo desaparece como caixa e deixa o rótulo e a fila caírem
   directamente na grelha: é o que mantém as três filas alinhadas pela
   mesma espinha. */
.rlx-selos-grupo {
    display: contents;
}

.rlx-selos-grupo > b {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: right;
    color: var(--mg-g2);
}

.rlx-selos {
    justify-content: flex-start;
}

/* ---- a porta para a Base de Conhecimento toda ---------------------- */

.rlx-artigos-pe {
    margin: 26px 0 0;
    text-align: center;
    font-size: 14px;
}

/* «Ver toda a Base de Conhecimento» passou de ligação a BOTÃO, por
   ordem do dono. Vazado e não cheio: os dois botões cheios de vermelho
   desta página são o «Contratar» e o «Pedir Migração», e uma porta para
   a Base de Conhecimento não pode competir com eles. Mesma altura de 54
   px dos outros controlos da casa. */
.rlx-artigos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 28px;
    border: 1px solid var(--mg-c);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--mg-c);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.rlx-artigos-btn:hover,
.rlx-artigos-btn:focus {
    background: var(--mg-c);
    color: #fff;
    text-decoration: none;
}

.rlx-artigos-btn:focus-visible {
    outline: 3px solid var(--mg-c);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    /* Em telemóvel a espinha não cabe: o rótulo volta para cima da fila
       e as pastilhas centram-se outra vez. */
    .rlx-selos-grelha {
        grid-template-columns: 1fr;
        gap: 18px;
        width: auto;
    }
    .rlx-selos-grupo > b {
        text-align: center;
        margin-bottom: -6px;
    }
    .rlx-selos {
        justify-content: center;
    }
    .rlx-passo-n {
        font-size: 44px;
    }
}

/* O que NÃO entra leva uma cruz vazada, e não vermelha: não é um erro
   nem um aviso, é uma fronteira. Vermelho ali lia-se como problema. */
.rlx-check li.nao::before {
    content: "\2715";
    background: #fff;
    border: 1px solid var(--mg-l2);
    color: var(--mg-g2);
    line-height: 18px;
}

.rlx-check-pe a {
    color: var(--mg-ac);
}

/* O tema põe `border-top` e `border-bottom` de 0,8 px no `h3` destes
   cartões. Com o número grande por cima e a barra ciano por baixo,
   ficavam QUATRO linhas horizontais seguidas no mesmo cartão — visto no
   ecrã depois de pôr o número. Fica só a barra ciano, que é a que diz
   alguma coisa. */
#promotions .thumbnail h3 {
    border-top: 0;
    border-bottom: 0;
    padding: 0;
}

/* =====================================================================
   O SALTO DAS ÂNCORAS PARA ABAIXO DO MENU

   A barra de âncoras pegajosa que vivia aqui foi retirada por ordem do
   dono a 12/09/2026: a página já tem uma barra fixa em cima e outra em
   baixo, e uma terceira era cromo a competir com o conteúdo.

   Isto fica. Sem ele, chegar com `#planos` no endereço punha o título da
   secção por trás do menu do tema e parecia que a ligação tinha falhado.
   O `--rlx-nav-alt` continua a ser MEDIDO pelo `migracao.js` a partir da
   barra do menu, e não escrito à mão.
   ===================================================================== */

#promotions,
#o-que-precisamos, #what-we-need,
#como-corre, #how-it-runs,
#de-onde, #where-from,
#planos,
#migracao-faq, #migration-faq {
    scroll-margin-top: calc(var(--rlx-nav-alt, 62px) + 20px);
}

/* =====================================================================
   O ESCOLHEDOR DE ORIGEM — 12/09/2026

   As pastilhas do «de onde migramos» eram decoração: diziam que sim, não
   diziam o que fazer a seguir. Agora cada uma responde à única pergunta
   que interessa a quem chega — «no MEU caso, o que é que têm de mim?» —
   e leva o pedido já identificado no assunto.

   Sem JavaScript as cinco respostas ficam todas visíveis, umas debaixo
   das outras. É mais comprido, e é a versão correcta: o `.on` que as
   esconde é posto pelo próprio script.
   ===================================================================== */

.rlx-selos li button {
    display: block;
    padding: 10px 18px;
    border: 1px solid var(--mg-l2);
    border-radius: 0;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--mg-t);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.rlx-selos li button:hover {
    border-color: var(--mg-ac);
    color: var(--mg-ac);
}

.rlx-selos li button.on {
    background: var(--mg-ac);
    border-color: var(--mg-ac);
    color: #fff;
}

.rlx-selos li button:focus-visible {
    outline: 3px solid var(--mg-ac);
    outline-offset: 2px;
}

.rlx-onde-respostas {
    max-width: 760px;
    margin: 26px auto 0;
}

/* Com o script a correr a caixa começa vazia, e uma caixa vazia com
   moldura é um buraco no meio da secção. A moldura vive nas respostas,
   não no invólucro. */
.rlx-onde-r {
    padding: 24px 26px;
    border: 1px solid var(--mg-l2);
    border-left: 4px solid var(--mg-ac);
    background: #fff;
    text-align: left;
}

.rlx-onde-respostas:not(.on) .rlx-onde-r + .rlx-onde-r {
    margin-top: 14px;
}

.rlx-onde-r h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: var(--mg-t);
}

.rlx-onde-r p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 24px;
    color: var(--mg-g);
}

.rlx-onde-r p a {
    color: var(--mg-ac);
}

.rlx-onde-r strong {
    color: var(--mg-t);
    font-weight: 700;
}

/* 54 px, como os controlos da pesquisa de domínios. */
.rlx-onde-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 28px;
    background: var(--mg-c);
    border: 1px solid var(--mg-c);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    transition: opacity .15s ease;
}

.rlx-onde-btn:hover,
.rlx-onde-btn:focus {
    opacity: .85;
    color: #fff;
    text-decoration: none;
}

.rlx-onde-btn:focus-visible {
    outline: 3px solid var(--mg-c);
    outline-offset: 2px;
}

/* O rodapé da secção deixa de ser a única resposta a «e o meu caso?»:
   agora é a nota de pé de uma coisa que já respondeu. */
.rlx-onde-pe {
    margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .rlx-selos li button,
    .rlx-onde-btn {
        transition-duration: .01s;
    }
}

@media (max-width: 767px) {
    .rlx-onde-r {
        padding: 20px 18px;
    }
    .rlx-onde-btn {
        display: flex;
        width: 100%;
    }
}

/* =====================================================================
   OS PLANOS: O CICLO E O DOMÍNIO — 12/09/2026

   A fila de ciclos é a mesma pastilha das outras filas da página e do
   `/gerador-de-nome`: moldura, cantos direitos, e a activa cheia de
   ciano. Não há aqui percentagem de poupança nenhuma porque não há
   poupança nenhuma — medido na base, um ano custa exactamente doze
   meses. O que a escolha decide é o domínio grátis.
   ===================================================================== */

.rlx-ciclos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    margin: 0 0 34px;
}

.rlx-ciclos-rot {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mg-g2);
}

.rlx-ciclos-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rlx-ciclos-fila button {
    padding: 10px 18px;
    border: 1px solid var(--mg-l2);
    border-radius: 0;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--mg-t);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.rlx-ciclos-fila button:hover {
    border-color: var(--mg-ac);
    color: var(--mg-ac);
}

.rlx-ciclos-fila button.on {
    background: var(--mg-ac);
    border-color: var(--mg-ac);
    color: #fff;
}

.rlx-ciclos-fila button:focus-visible {
    outline: 3px solid var(--mg-ac);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rlx-ciclos-fila button {
        transition-duration: .01s;
    }
}

@media (max-width: 767px) {
    .rlx-ciclos {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 26px;
    }
    .rlx-ciclos-fila {
        justify-content: center;
    }
}


/* =====================================================================
   O CARTÃO DE PLANO, NA ANATOMIA DA HOSTINGER — 12/09/2026

   O dono mandou a página de preços deles e disse «use este estilo». O
   que se copiou foi a ANATOMIA, e é boa: emblema no canto, nome, uma
   linha de para-quem, preço, BOTÃO ANTES DA LISTA, letra miúda por
   baixo do botão, e só então os traços com visto — mais um traço a
   cinzento para o que aquele plano não tem.

   O botão antes da lista é a parte que mais muda: quem já decidiu não
   tem de percorrer onze linhas para encontrar onde carregar, e quem não
   decidiu continua a ter a lista logo a seguir.

   O QUE NÃO SE COPIOU, E PORQUÊ:

     - o preço riscado e o «80% de desconto». Medido no `tblpricing`: não
       há desconto nenhum nestes planos. Um preço riscado ali seria uma
       mentira desenhada.
     - o «Renovação por» quatro vezes o preço anunciado. Em nós é o
       contrário e está na letra miúda: taxa de instalação a zero nos
       três planos e nos quatro ciclos, e renova pelo mesmo preço.
     - a «Política de uso justo» do rodapé deles. Procurei nos Termos, no
       Acordo de Serviços e na Política de Privacidade: não existe. Não
       se cita o que não há.
     - o cartão destacado com «Oferta especial». Não há dado nenhum que
       diga qual é o mais escolhido.
     - os cantos arredondados. A regra da casa, dada a 11/09, é cantos
       direitos, e o resto da página cumpre-a.
   ===================================================================== */

#planos .rlx-cartao .caption {
    text-align: left;
    position: relative;
}

/* O emblema no canto, como o do desconto deles — só que o nosso anuncia
   uma coisa que existe, e desaparece nos ciclos que não a dão. */
.rlx-selo-dom {
    position: absolute;
    top: -6px;
    right: 0;
    padding: 5px 10px;
    background: #f4fbec;
    border: 1px solid rgba(118, 189, 34, .45);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: #4d7a1b;
    white-space: nowrap;
}

#planos .rlx-cartao h3 {
    margin: 0 0 8px;
    padding-right: 96px;
    font-size: 21px;
    line-height: 28px;
}

.rlx-cartao-desc {
    margin: 0 0 18px;
    min-height: 44px;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

#planos .rlx-cartao .price {
    margin: 0 0 16px;
}

/* A letra miúda por baixo do botão. Não se esconde em ciclo nenhum: é
   ali que se diz o que se paga ao certo, e é ali que quem compara vai
   procurar a armadilha. Não havendo, diz-se isso. */
.rlx-cartao-nota {
    margin: 12px 0 0;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--mg-l);
    font-size: 12.5px;
    line-height: 19px;
    color: var(--mg-g2);
}

/* A lista perde as linhas divisórias: com onze traços, onze linhas
   faziam uma grade. O que separa passa a ser o visto. */
.rlx-plano-itens {
    margin: 18px 0 0;
}

.rlx-plano-itens li {
    position: relative;
    padding: 5px 0 5px 26px;
    border-top: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--mg-g);
}

.rlx-plano-itens li::before {
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
}

.rlx-plano-itens li.sim::before {
    content: "\2713";
    color: var(--mg-v);
}

/* O TRAÇO, E NÃO UM X. É o sinal que a Hostinger usa para o que o plano
   não tem, e está certo: não é um erro nem uma recusa, é uma ausência.
   O texto fica em cinzento claro pela mesma razão. */
.rlx-plano-itens li.nao {
    color: var(--mg-g2);
}

.rlx-plano-itens li.nao::before {
    content: "\2013";
    color: var(--mg-l2);
}

.rlx-plano-itens li strong {
    color: var(--mg-t);
    font-weight: 700;
}

.rlx-plano-itens li.nao strong {
    color: var(--mg-g2);
    font-weight: 700;
}

/* O sub-grupo, como o «Crie com:» deles: separa o que vem do WHMCS do
   que é da casa, sem abrir outra caixa. */
.rlx-plano-sub {
    display: block;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--mg-l);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mg-g2);
}

.rlx-plano-extra {
    margin-top: 8px;
}

/* A lista vai até ao fim do cartão para que os três acabem juntos; o
   botão já não precisa de margem automática porque subiu para cima da
   lista. */
#planos .rlx-cartao .rlx-plano-extra {
    flex: 1 1 auto;
}

#planos .rlx-cartao .btn {
    margin-top: 0;
}

.rlx-planos-nota {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 19px;
    color: var(--mg-g2);
}

@media (max-width: 991px) {
    #planos .rlx-cartao h3 {
        padding-right: 0;
    }
    .rlx-selo-dom {
        position: static;
        display: inline-block;
        margin: 0 0 10px;
    }
    .rlx-cartao-desc {
        min-height: 0;
    }
}

/* =====================================================================
   «FICA DE FORA» — 12/09/2026

   A coluna «o que a migração inclui» tinha, no meio, duas coisas que NÃO
   estão incluídas. No ecrã distinguiam-se pelo traço cinzento; em texto,
   num leitor de ecrã ou num copiar-colar, o traço desaparece e a lista
   passa a dizer que a migração inclui plataformas incompatíveis.

   O sentido não pode viver só num sinal gráfico. O cabeçalho resolve-o
   sem tirar nada: quem vê continua a ver o traço, quem lê passa a ler a
   fronteira. É o mesmo «JÁ INCLUÍDO» que os cartões de plano usam — a
   mesma ideia diz-se da mesma maneira na mesma página.
   ===================================================================== */

.rlx-check-sub {
    display: block;
    /* Aperta-se o espaço à volta porque este cabeçalho é o que faz a
       coluna da direita ficar mais alta do que a da esquerda, e os dois
       lados deste bloco lêem-se como um par (regra do dono, 12/09). Não
       se apaga: o que ele diz não estava dito em mais lado nenhum. */
    margin: 12px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mg-g2);
}

/* =====================================================================
   AS DUAS COLUNAS ACABAM JUNTAS — 12/09/2026

   Medido no ecrã: a coluna da esquerda ia de 1313 a 1685 e a da direita
   de 1313 a 1695, e as duas notas de rodapé começavam a alturas
   diferentes (1613 contra 1645). Os itens já tinham todos duas linhas —
   o que sobrava era ESTRUTURA, não texto.

   A causa é o tema: o `.inner` deste bloco é `display: block` com as
   duas metades em `float: left`, e duas caixas flutuantes não têm de ter
   a mesma altura. Passa a `flex` (só aqui, que esta folha é só destas
   duas páginas) e as duas passam a medir o mesmo. A nota vai ao fundo
   com `margin-top: auto`: seja qual for o texto que venha a ter, as duas
   assentam sempre na mesma linha.

   É a correcção certa para isto — igualar contando caracteres arruma o
   caso de hoje e volta a partir-se no dia em que alguém mudar uma
   palavra.
   ===================================================================== */

#o-que-precisamos .inner,
#what-we-need .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

#o-que-precisamos .inner > .left,
#o-que-precisamos .inner > .right,
#what-we-need .inner > .left,
#what-we-need .inner > .right {
    display: flex;
}

#o-que-precisamos .item,
#what-we-need .item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#o-que-precisamos .rlx-check-pe,
#what-we-need .rlx-check-pe {
    margin-top: auto;
}

/* «FICA DE FORA» ESTAVA A SUSSURRAR.

   Era #8b95a5 a 12 px — o elemento menos visível do bloco, e é ele que
   diz que os dois itens por baixo são o contrário dos de cima. Passa ao
   cinzento de texto e ganha um traço por cima: quem varre a página vê a
   fronteira sem ter de ler a etiqueta. */
.rlx-check-sub {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mg-l2);
    font-size: 12.5px;
    color: var(--mg-g);
}

@media (prefers-reduced-motion: reduce) {
    .rlx-artigos-btn {
        transition-duration: .01s;
    }
}

@media (max-width: 767px) {
    .rlx-artigos-btn {
        display: flex;
        width: 100%;
    }
}

/* =====================================================================
   OS TRÊS CARTÕES DE ARTIGO ALINHADOS POR DENTRO — 13/09/2026

   Os cartões já tinham a mesma altura e o «Ler o artigo» no mesmo sítio,
   mas por dentro andavam à deriva: um título de uma linha ao lado de dois
   de duas faz o resumo começar a alturas diferentes.

   ALINHA-SE POR GRELHA, NÃO POR ALTURA RESERVADA. Reservar duas linhas ao
   título deixa um buraco quando o título só tem uma — é a lição que já
   está escrita no `gerador.css`, na secção das quatro perguntas. Com
   `subgrid`, as três linhas (título, resumo, chamamento) são as MESMAS
   linhas da grelha de fora, e os três cartões partilham-nas.

   Os títulos e os resumos vêm da Base de Conhecimento e do índice da
   pesquisa — não se reescrevem aqui para caberem. É o desenho que se
   adapta ao texto, e não o contrário.

   O `@supports` não é enfeite: sem `subgrid` (navegadores mais velhos) o
   cartão volta a ser uma caixa em coluna, que é como estava, e continua
   a ler-se.
   ===================================================================== */

@supports (grid-template-rows: subgrid) {
    .rlx-artigos-lista {
        grid-template-rows: auto auto auto;
    }

    .rlx-artigos-lista li {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
    }

    .rlx-artigos-lista a {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
    }

    /* Com a grelha a mandar nas alturas, o `flex` do resumo deixa de ter
       o que esticar — e a margem que o separava do chamamento passa a ser
       a goteira da grelha. */
    .rlx-artigos-lista p {
        flex: none;
        margin-bottom: 0;
        align-self: start;
        /* Já tem as quatro linhas presas em cima; aqui só não estica. */
        min-height: 88px;
    }

    .rlx-artigos-lista a {
        row-gap: 14px;
    }

    .rlx-artigos-lista h3 {
        margin-bottom: 0;
    }

    .rlx-artigos-ler {
        align-self: end;
    }
}

@media (max-width: 991px) {
    /* Numa coluna só não há nada para alinhar entre cartões. */
    @supports (grid-template-rows: subgrid) {
        .rlx-artigos-lista {
            grid-template-rows: none;
        }
        .rlx-artigos-lista li,
        .rlx-artigos-lista a {
            grid-row: auto;
            grid-template-rows: none;
        }
        .rlx-artigos-lista a {
            display: flex;
        }
        .rlx-artigos-lista p {
            flex: 1 1 auto;
            margin-bottom: 14px;
        }
        .rlx-artigos-lista h3 {
            margin-bottom: 10px;
        }
    }
}

/* =====================================================================
   42 PX ERA POUCO PARA UM DEDO — 13/09/2026

   Medido num `<iframe>` de 380 px (que é como se vê o telemóvel sem
   conseguir encolher a janela do Chrome — fica a receita): as pastilhas
   de «de onde migramos» e as do ciclo de pagamento eram os únicos
   controlos da página abaixo dos 44 px que as guias de toque pedem.
   Dois pixéis de espaço de cada lado resolvem-no sem mudar o desenho.

   A REGRA É `hover: none` E NÃO SÓ UMA LARGURA. O que decide não é o
   ecrã ser estreito, é o dedo: um tablet de 900 px tem o mesmo dedo que
   um telemóvel de 360. A largura fica como rede para navegadores que
   não respondam ao `hover`.
   ===================================================================== */

@media (hover: none), (max-width: 991px) {
    .rlx-selos li button,
    .rlx-ciclos-fila button {
        padding: 12px 18px;
    }
}