/* =====================================================================
   Resultado da consulta de domínio, na própria página
   interweb.co.mz · 19/08/2026

   Ficheiro NOVO. Não se tocou numa linha do CSS antigo: o tema já tinha
   os contentores (.domain-validation e #domain-search-result) e o estado
   de espera do botão (.domain-search.loading), só lhes faltava conteúdo.

   Desenho pedido a partir de uma página concorrente: dois cartões
   grandes lado a lado — o nome pesquisado e o mesmo nome na extensão
   companheira — e por baixo a lista das outras. Sem fundo escuro: foi
   experimentado e o Roldão preferiu sem.

   Paleta lida do próprio domain-registration.css desta página:
     #d60037  vermelho da marca      #1f2835  carvão dos títulos
     #76bd22  verde já usado aqui    #edeff0  cinzento das superfícies
   ===================================================================== */

/* O formulário do tema tem .prefix e .input-domain em float:left e
   ninguém os limpa — o <form> fica sem altura e o que vem a seguir
   enrola-se à volta deles. Sem este clear, o resultado nascia espremido
   numa goteira de trinta pixéis à direita, uma letra por linha.
   Estas duas regras não alteram nada do que já existia: os dois
   contentores estavam no HTML sem uma única regra de CSS. */
.domain-search .domain-validation,
.domain-search #domain-search-result {
    clear: both;
    display: block;
    width: 100%;
}

.dm-res { clear: both; margin: 26px 0 0 0; font-family: inherit; text-align: left; }

/* -------------------- os dois cartões, lado a lado ------------------ */
/* Sem fundo escuro: os cartões seguram-se pela moldura própria, como o
   resto da página. */
.dm-faixa {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -9px;
}
.dm-col { flex: 1 1 320px; min-width: 0; padding: 0 9px 18px 9px; box-sizing: border-box; }

.dm-cartao {
    background: #fff;
    border: 1px solid #e2e6ea;
    padding: 22px 24px;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.dm-fita {
    font-size: 12px; line-height: 18px; color: #5b6879; margin: 0 0 4px 0;
}
.dm-fita b { color: #1f2835; font-weight: 700; }
.dm-fita .fa { color: #d60037; margin-right: 5px; }

.dm-nome {
    margin: 0 0 6px 0;
    font-size: 27px; line-height: 36px; font-weight: 700; color: #1f2835;
    overflow-wrap: anywhere; word-break: normal;
}
.dm-nome .dm-tld { color: #d60037; }

.dm-desc { margin: 0 0 16px 0; font-size: 13px; line-height: 20px; color: #5b6879; }

/* preço à esquerda, botão à direita */
.dm-compra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.dm-precos { flex: 1 1 auto; min-width: 0; }
.dm-preco  { font-size: 24px; font-weight: 700; color: #1f2835; }
.dm-preco span { font-size: 13px; font-weight: 400; color: #5b6879; }
.dm-renova { margin: 4px 0 0 0; font-size: 12px; line-height: 18px; color: #8b95a5; }

.dm-btn {
    flex: 0 0 auto;
    display: inline-block; padding: 12px 24px;
    background: #d60037; color: #fff !important; text-decoration: none !important;
    font-size: 14px; font-weight: 700; border: 0; cursor: pointer; white-space: nowrap;
}
.dm-btn:hover  { background: #b8002f; color: #fff !important; }
.dm-btn .fa    { margin-right: 6px; }
.dm-btn.is-alt { background: #fff; color: #d60037 !important; border: 1px solid #d60037; }
.dm-btn.is-alt:hover { background: #fdf0f4; }

/* a linha do rodapé do cartão: o veredicto */
.dm-veredicto {
    margin: 18px -24px -22px -24px; padding: 13px 24px; background: #fbfcfd;
    border-top: 1px solid #edeff0;
    font-size: 13px; line-height: 20px; color: #1f2835;
}
.dm-veredicto .fa { margin-right: 7px; }
.dm-veredicto.is-livre   .fa { color: #76bd22; }
.dm-veredicto.is-ocupado .fa { color: #d60037; }
.dm-veredicto.is-duvida  .fa { color: #f0a202; }


/* ---------------------- a lista das restantes ---------------------- */
.dm-sug-titulo {
    margin: 34px 0 18px 0; text-align: center;
    font-size: 25px; line-height: 34px; font-weight: 700; color: #1f2835;
}
.dm-sug-titulo em { font-style: normal; color: #d60037; }

.dm-lista { list-style: none; margin: 0; padding: 0; }
.dm-lista li {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid #edeff0; padding: 16px 4px; margin: 0;
}
/* GRELHA A SÉRIO: só o nome cresce; as outras três têm largura fixa.
   Antes cresciam duas células ao mesmo tempo e a da acção mudava de
   largura conforme o conteúdo — "Adicionado + caixote" é bem mais largo
   que um carrinho, e "Transferir" outra vez diferente. O espaço que
   sobrava era repartido de maneira diferente em cada linha, e os
   selectores acabavam a alturas diferentes. Com três colunas fixas,
   ficam todos uns debaixo dos outros. */
/* flex-basis 0, não auto. Com "auto" a célula pede a largura do seu
   conteúdo INTEIRO, e uma descrição longa — o .ac.mz tem 124 caracteres
   — faz a linha quebrar antes de haver encolhimento: o selector ia para
   o canto e o preço e o botão caíam para baixo. Com base 0 a célula fica
   só com o espaço que sobra e o texto quebra lá dentro, que é onde deve
   quebrar. */
.dm-l-esq   { flex: 1 1 0; min-width: 0; padding-right: 16px; }
.dm-l-nome  { font-size: 17px; color: #1f2835; overflow-wrap: anywhere; word-break: normal; }
.dm-l-nome .dm-tld { color: #d60037; font-weight: 700; }
.dm-l-desc  { margin: 3px 0 0 0; font-size: 12px; line-height: 18px; color: #8b95a5; }
.dm-l-preco { flex: 0 0 200px; text-align: right; padding: 0 18px 0 0; box-sizing: border-box; }
.dm-l-preco .v { font-size: 17px; font-weight: 700; color: #1f2835; }
.dm-l-preco .v span { font-size: 12px; font-weight: 400; color: #5b6879; }
.dm-l-preco .r { font-size: 11px; line-height: 17px; color: #8b95a5; }
.dm-l-accao { flex: 0 0 155px; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; }
.dm-lista .dm-btn { padding: 9px 18px; font-size: 13px; }
.dm-lista li.is-ocupado .dm-l-nome { text-decoration: line-through; color: #8b95a5; }
.dm-lista li.is-ocupado .dm-l-nome .dm-tld { color: #8b95a5; }

/* ------------------------- estado de espera ------------------------ */
/* Um ícone a rodar, não a palavra "a processar". O fa-spin já existe no
   Font Awesome 4.7 que esta página carrega — não se acrescenta peso. */
.dm-espera { color: #b6bec8; }
.dm-espera .fa { font-size: 15px; }
.dm-espera-grande { padding: 26px 0; text-align: center; color: #b6bec8; }
.dm-espera-grande .fa { font-size: 26px; }

.dm-aviso {
    background: #fdf0f4; border-left: 4px solid #d60037;
    padding: 12px 16px; margin: 0 0 14px 0; font-size: 14px; line-height: 22px; color: #1f2835;
}

@media only screen and (max-width: 767px) {
    .dm-col { flex: 1 1 100%; }
    .dm-nome { font-size: 23px; line-height: 31px; }
    .dm-sug-titulo { font-size: 20px; line-height: 28px; }
    .dm-l-esq   { flex: 1 1 100%; padding-right: 0; }
    .dm-l-preco { flex: 0 0 auto; text-align: left; padding: 8px 16px 0 0; }
    .dm-l-accao { flex: 0 0 auto; justify-content: flex-start; padding-top: 10px; }
}

/* --------------------- "Mostrar mais opções" ----------------------- */
/* Vendemos 127 extensões e o menu do formulário mostra-as todas de uma
   vez. Aqui revelam-se por lotes de oito, e só se consulta o que se
   mostra — 127 consultas aos registos por pesquisa era abusivo. */
.dm-mais {
    display: block; width: 100%;
    margin: 18px 0 0 0; padding: 14px 20px;
    background: #fff; border: 1px solid #d5dbe3;
    font-family: inherit; font-size: 14px; font-weight: 700; color: #1f2835;
    cursor: pointer; text-align: center;
}
.dm-mais:hover { background: #f7f8fa; border-color: #b6bec8; }
.dm-mais .fa   { color: #8b95a5; }

/* O .wait do botão de pesquisa vinha com uma <div class="loading"> sem
   nenhuma regra no tema — o botão ficava vazio a processar. O conteúdo
   é posto pelo JS; aqui só se alinha. */
.domain-search .domain-search-form .btn-search .dm-btn-spin { white-space: nowrap; }
.domain-search .domain-search-form .btn-search .dm-btn-spin .fa { margin-right: 7px; }

/* =====================================================================
   A LISTA — escolher vários e mandar todos ao carrinho de uma vez
   ===================================================================== */

.dm-accao { display: inline-flex; align-items: center; white-space: nowrap; }

.dm-adicionado {
    display: inline-flex; align-items: center;
    color: #2f8f2f; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.dm-adicionado .fa { margin-right: 6px; font-size: 15px; }

.dm-tirar {
    background: none; border: 0; cursor: pointer;
    padding: 6px 8px; margin-left: 8px; color: #9aa5b1; font-size: 15px; line-height: 1;
}
.dm-tirar:hover { color: #d60037; }

/* A barra que fica em baixo enquanto houver escolhas. */
.dm-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: none; align-items: center; justify-content: space-between;
    background: #fff; border-top: 1px solid #d5dbe3;
    box-shadow: 0 -2px 14px rgba(31, 40, 53, .12);
    padding: 14px 22px; font-family: inherit;
}
.dm-barra.on   { display: flex; }
.dm-barra-txt  { font-size: 15px; color: #1f2835; }
.dm-barra-n    { color: #d60037; font-weight: 700; }
.dm-barra-btn  { margin: 0; }

/* O painel lateral. */
.dm-fundo {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(31, 40, 53, .45);
    opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
.dm-fundo.on { opacity: 1; visibility: visible; }

.dm-painel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060;
    width: 420px; max-width: 92vw;
    background: #fff; padding: 26px 26px 30px 26px;
    overflow-y: auto; font-family: inherit;
    transform: translateX(102%); transition: transform .22s ease;
    box-shadow: -3px 0 18px rgba(31, 40, 53, .16);
}
.dm-painel.on { transform: translateX(0); }

.dm-voltar {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #d60037; font-size: 14px; font-weight: 700; font-family: inherit;
}
.dm-voltar .fa { margin-right: 6px; }

.dm-painel-tit { margin: 16px 0 8px 0; font-size: 24px; font-weight: 700; color: #1f2835; }
.dm-painel-sub { margin: 0 0 20px 0; font-size: 13px; line-height: 20px; color: #8b95a5; }

.dm-painel-lista { list-style: none; margin: 0; padding: 0; }
.dm-painel-lista li {
    display: flex; align-items: center;
    padding: 14px 0; border-bottom: 1px solid #edeff0;
}
.dm-pl-esq   { flex: 1 1 auto; min-width: 0; }
.dm-pl-nome  { font-size: 16px; color: #1f2835; overflow-wrap: anywhere; }
.dm-pl-per   { font-size: 12px; color: #8b95a5; margin-top: 2px; }
.dm-pl-preco { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: #1f2835; padding-left: 14px; white-space: nowrap; }

.dm-painel-total {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0 6px 0; font-size: 14px; color: #5b6879;
}
.dm-painel-total strong { font-size: 17px; color: #1f2835; }

.dm-painel-ir { display: block; width: 100%; margin: 12px 0 0 0; text-align: center; }
.dm-continuar {
    display: block; width: 100%; margin: 14px 0 0 0; padding: 10px;
    background: none; border: 0; cursor: pointer;
    color: #d60037; font-size: 14px; font-weight: 700; font-family: inherit;
}

@media only screen and (max-width: 640px) {
    .dm-barra { padding: 12px 14px; }
    .dm-barra-txt { font-size: 13px; }
    .dm-painel { padding: 20px 18px 26px 18px; }
}

/* =====================================================================
   A CAIXA DE PESQUISA, sem o menu de extensões (19/08/2026)

   O menu de ~120 extensões saiu: a caixa aceita o domínio inteiro e a
   extensão escrita ganha sempre. Sobrou o espaço dele.

   Em vez de esticar a largura fixa de 440px para outra largura fixa,
   passa-se a linha a flexbox e a caixa cresce sozinha até ao botão. Fica
   fluida em qualquer ecrã, o que a versão de larguras fixas (440px, e
   270px abaixo de 991px) nunca esteve.

   Efeito lateral bem-vindo: com flexbox o <form> passa a ter altura, e
   os floats do .prefix e do .input-domain deixam de escapar — que era a
   causa do resultado nascer espremido numa goteira à direita.
   ===================================================================== */
.domain-search .domain-search-form {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.domain-search .domain-search-form .input-domain-wrapper {
    display: flex;
    flex: 1 1 260px;
    min-width: 0;
}
.domain-search .domain-search-form .prefix {
    float: none;
    flex: 0 0 auto;
}
.domain-search .domain-search-form .input-domain {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
}
.domain-search .domain-search-form .btn-search {
    flex: 0 0 auto;
    margin-left: 10px;
}
/* O marcador de exemplo não pode competir com o que se escreve. */
.domain-search .domain-search-form .input-domain::placeholder { color: #a9b2bc; opacity: 1; }
.domain-search .domain-search-form .input-domain:-ms-input-placeholder { color: #a9b2bc; }

@media only screen and (max-width: 640px) {
    .domain-search .domain-search-form .input-domain-wrapper { flex: 1 1 100%; }
    .domain-search .domain-search-form .btn-search { flex: 1 1 100%; margin: 10px 0 0 0; }
}

/* =====================================================================
   A MESMA CAIXA, NA PÁGINA INICIAL (19/08/2026)

   O formulário de lá tem outras classes mas o mesmo problema: o menu de
   extensões saiu e o <input> tinha largura fixa (365px), deixando um
   buraco. Mesma solução — flexbox, e a caixa cresce até ao botão.

   Nota para quem mexer: o <form> TEM de manter a classe
   .domain-registration-main-input-text. Eu substituí a linha do <form>
   para lhe mudar o destino, perdi a classe pelo caminho, e o formulário
   ficou com o botão à esquerda e a caixa encolhida. É a única coisa que
   segura o span, o input e o botão na mesma linha.
   ===================================================================== */
.domain-registration-main-input-text {
    display: flex;
    align-items: stretch;
}
.domain-registration-main-input-text span {
    float: none;
    flex: 0 0 auto;
}
.domain-registration-main-input-text input {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
}
.domain-registration-main-input-text .domain-registration-submit {
    float: none;
    flex: 0 0 auto;
}
@media only screen and (max-width: 640px) {
    .domain-registration-main-input-text { flex-wrap: wrap; }
    .domain-registration-main-input-text input { flex: 1 1 100%; }
    .domain-registration-main-input-text .domain-registration-submit { flex: 1 1 100%; margin-top: 10px; }
}

/* A lista separa registos de transferências, porque o carrinho aceita um
   só tipo por pedido. */
.dm-painel-grupo {
    margin: 20px 0 4px 0; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #8b95a5;
}
.dm-painel-ir + .dm-painel-ir { margin-top: 10px; }
.dm-painel-nota {
    margin: 12px 0 0 0; font-size: 12px; line-height: 19px; color: #8b95a5;
}
.dm-esvaziar {
    display: block; width: 100%; margin: 4px 0 0 0; padding: 10px;
    background: none; border: 0; cursor: pointer;
    color: #9aa5b1; font-size: 13px; font-family: inherit;
}
.dm-esvaziar:hover { color: #d60037; text-decoration: underline; }

/* --------------------- categorias do "mais opções" ------------------ */
/* Uma categoria sem nada por mostrar não chega a aparecer — um separador
   vazio é uma promessa falhada. */
/* Ao centro, como o título que está por cima — alinhados à esquerda
   ficavam a apontar para lado nenhum.
   Margens simétricas nas fichas em vez de "gap": o gap em flexbox não
   existe no Safari mais antigo, e com margem só à direita a fila fica
   deslocada meio espaço para a esquerda quando centrada. */
.dm-cats {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin: 18px -4px 6px -4px; padding: 0;
}
.dm-chip {
    background: #fff; border: 1px solid #d5dbe3; cursor: pointer;
    padding: 8px 15px; margin: 0 4px 8px 4px;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #5b6879;
    white-space: nowrap;
}
.dm-chip:hover { border-color: #b6bec8; color: #1f2835; }
.dm-chip.on { background: #1f2835; border-color: #1f2835; color: #fff; }
.dm-vazio { padding: 18px 4px; color: #8b95a5; font-size: 14px; }

/* =====================================================================
   ECRÃ PEQUENO — o que faltava (19/08/2026)

   Auditei o ficheiro à procura de componentes sem regra para telemóvel.
   Estes quatro não tinham, e o primeiro é o que estragava mais.
   ===================================================================== */

/* 1. A barra fixa tapava o fim da página. Nada empurrava o conteúdo, e a
      última linha da lista ficava debaixo dela — justamente quando a
      barra aparece, que é quando há domínios escolhidos para ver. */
body.dm-com-barra { padding-bottom: 86px; }

@media only screen and (max-width: 767px) {
    /* 2. As fichas de categoria: nove separadores num ecrã de telemóvel
          davam quatro linhas de fichas antes de se ver um resultado.
          Passam a rolar na horizontal, que é o que se espera delas. */
    .dm-cats {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: 0; margin-right: 0;
        padding-bottom: 4px;
    }
    .dm-chip { flex: 0 0 auto; }


    .dm-cartao { padding: 18px 16px; }
    .dm-veredicto { margin: 16px -16px -18px -16px; padding: 12px 16px; }

    /* 4. No painel, nome + preço + caixote não cabem numa linha de 320px. */
    .dm-painel-lista li { flex-wrap: wrap; }
    .dm-pl-preco { padding-left: 0; padding-top: 4px; }
}

@media only screen and (max-width: 400px) {
    .dm-nome { font-size: 20px; line-height: 28px; }
    .dm-preco { font-size: 20px; }
    body.dm-com-barra { padding-bottom: 104px; }
}

/* Dois "nowrap" que num ecrã estreito transbordam: o botão do painel
   ("Ir para o carrinho — 3 transferências") e o preço quando é a frase
   "Transferência grátis" em vez de um número. Deixam quebrar. */
@media only screen and (max-width: 480px) {
    .dm-painel-ir { white-space: normal; }
    .dm-preco     { white-space: normal; }
}

/* ------------------------- selector de anos ------------------------- */
/* Vendemos de 1 a 10 anos e o carrinho honra o período. Só aparece quando
   há mais do que um período activo — um selector com uma opção é ruído. */
.dm-anos {
    position: relative; display: block; margin: 0; min-width: 104px;
    width: 100%; box-sizing: border-box;
}
.dm-anos__b:focus-visible { outline: 2px solid #d60037; outline-offset: 1px; }

/* Coluna própria e AO MEIO da linha. Com largura fixa colava-se ao
   preço — o nome crescia, empurrava-o para a direita, e os três ficavam
   amontoados num canto. A crescer, ocupa a faixa do meio e as três
   partes da linha ficam à mesma distância umas das outras. */
.dm-l-anos {
    flex: 0 0 190px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
}
.dm-lista li .dm-l-anos:empty { display: none; }

/* No cartão grande vai na mesma fila do preço e do botão. */
.dm-compra .dm-anos { width: auto; min-width: 104px; margin-right: 16px; flex: 0 0 auto; }

/* --------------------- tablet: 768 a 991 px ------------------------- */
/* Medido: com as colunas fixas em 190+200+155 = 545px, a 768px sobravam
   193px para o nome — um domínio de vinte caracteres não cabe lá sem
   partir a descrição em quatro linhas. Entre estes dois tamanhos as
   colunas encolhem; abaixo de 767px já empilham. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .dm-l-anos  { flex: 0 0 150px; padding: 0 10px; }
    .dm-l-preco { flex: 0 0 165px; padding-right: 12px; }
    .dm-l-accao { flex: 0 0 130px; }
    .dm-anos    { min-width: 0; }
    .dm-anos__b { padding: 8px 6px; font-size: 12px; }
    .dm-lista .dm-btn { padding: 9px 12px; }
    .dm-l-nome  { font-size: 16px; }
}

/* =====================================================================
   PÁGINA INICIAL, TELEMÓVEL — o contentor tinha altura fixa (19/08/2026)

   `.domain-registration-main-input` traz `height: 60px` do tema e NUNCA
   é reposto em nenhuma media query. Enquanto o formulário era uma linha
   só, ninguém deu por isso. Ao passá-lo a flexbox, o botão quebra para
   segunda linha no telemóvel — e como o contentor continua com 60px, o
   botão sai por fora e tapa o "Saiba mais sobre domínios" que vem a
   seguir. Foi o que apareceu na captura.

   Altura automática nos dois contentores, e o espaçamento passa a vir do
   fluxo em vez de uma altura adivinhada.
   ===================================================================== */
@media only screen and (max-width: 767px) {
    .domain-registration-main-input,
    .domain-registration-main-input-text {
        height: auto;
    }
    .domain-registration-main-input-text {
        display: block;          /* em coluna: caixa em cima, botão em baixo */
    }
    .domain-registration-main-input-text input {
        display: block; width: 100%; box-sizing: border-box;
        margin: 0 0 12px 0;      /* o tema punha 20px; 12 chega com o botão logo abaixo */
    }
    .domain-registration-main-input-text .domain-registration-submit {
        display: block; width: 100%; margin: 0;
    }

    /* O título e o subtítulo corriam por baixo da aba fixa "Enviar
       mensagem", que vive colada à direita do ecrã. Um respiro nos lados
       resolve, sem mexer na aba nem no tema. */
    .home-domain-registration .inner { padding-left: 16px; padding-right: 16px; }
}


/* =====================================================================
   TELEMÓVEL — BLOCO FINAL. Tem de ficar no FIM do ficheiro.
   19/08/2026, depois de medir a página a 375px num navegador a sério.

   O erro que isto corrige: eu tinha as regras de telemóvel a meio do
   ficheiro e as regras base DEPOIS delas. Com a mesma especificidade
   ganha a última, portanto metade das minhas correcções de telemóvel
   nunca chegou a aplicar-se — o selector continuava com os 190px da
   coluna de computador, numa linha só para ele.

   Medido no navegador, não deduzido: .dm-l-anos dava 190x37 a 375px.

   REGRA PARA O FUTURO: qualquer override de ecrã pequeno vai para o fim
   deste ficheiro. Não basta a regra existir dentro de um @media.
   ===================================================================== */
@media only screen and (max-width: 767px) {

    /* O "www." comia 120px dos 345 disponíveis — um terço da largura
       para dizer o que toda a gente já sabe. Some, e a caixa fica com a
       linha inteira. */
    .domain-search .domain-search-form .prefix { display: none; }
    .domain-search .domain-search-form .input-domain { width: 100%; }

    /* A linha deixa de ser quatro blocos empilhados (162px de altura) e
       passa a duas alturas: o nome em cima, e por baixo o período, o
       preço e o botão lado a lado. */
    .dm-lista li { flex-wrap: wrap; padding: 14px 2px; }
    .dm-l-esq    { flex: 1 1 100%; padding: 0 0 12px 0; }
    .dm-l-anos   { flex: 0 0 auto; justify-content: flex-start; padding: 0 12px 0 0; }
    .dm-l-anos .dm-anos { width: auto; min-width: 0; }
    .dm-l-anos .dm-anos__b { padding: 7px 8px; }
    /* base 90px e a encolher: sem isto a frase "Renova por 3.000,00 MT
       ao ano" fazia o preço ocupar 251px dos 341, e o botão caía para uma
       terceira linha. Assim a frase quebra e as três peças cabem numa. */
    .dm-l-preco  { flex: 1 1 90px; min-width: 0; text-align: left; padding: 0 12px 0 0; }
    .dm-l-preco .v { font-size: 16px; }
    .dm-l-preco .r { line-height: 15px; }
    .dm-l-accao  { flex: 0 0 auto; justify-content: flex-end; padding: 0; }

    /* No cartão, o selector e o preço cabem numa linha mas o botão não —
       caía sozinho, pequeno e encostado à esquerda, com ar de engano.
       Passa a ocupar a linha inteira, que é o que um botão principal
       deve fazer num ecrã estreito. */
    .dm-compra { align-items: flex-start; }
    .dm-compra .dm-anos { margin: 0 12px 0 0; }
    .dm-compra .dm-accao { flex: 1 1 100%; margin-top: 14px; }
    /* box-sizing obrigatório: sem ele os 48px de padding somam-se aos
       100% e o botão saía 360px dentro de um cartão de 345 — a página
       inteira passava a rolar na horizontal. */
    .dm-compra .dm-accao .dm-btn {
        display: block; width: 100%; box-sizing: border-box; text-align: center;
    }
    .dm-compra .dm-accao { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════
   A BARRA DE PESQUISA FIXA, e a arrumação do fundo do ecrã
   25/08/2026

   O PROBLEMA MEDIDO. Nesta página o fundo tinha três coisas fixas em cima
   umas das outras: a faixa promocional (~104 px, `z-index` 100), a barra de
   selecção (~70 px, `z-index` 1040) — as duas em `bottom: 0`, portanto a
   segunda a tapar a primeira — e o chat por cima das duas, precisamente
   sobre o canto onde está o botão «Rever a lista».

   A ARRUMAÇÃO, de baixo para cima: selecção, pesquisa, chat. Cada uma sabe
   a altura da que está por baixo através de duas propriedades escritas no
   `<html>` pelo `domain-search.js`:

       --dm-sel-h    altura da barra de selecção  (0 quando não há)
       --rlx-fundo   o total ocupado no fundo     (o chat lê esta)
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- 1. a promoção sai destas páginas ----------

   Sempre, haja ou não domínio escolhido: é o lugar que a barra de pesquisa
   vai ocupar, e duas faixas a disputá-lo seria o mesmo problema com outro
   nome.

   ERRO MEU, CORRIGIDO EM 25/08/2026. Escrevi aqui que este CSS só era
   carregado pelas páginas de registo de domínio. NÃO É: as 11 homepages
   (`/index.php`, `/mz/index.php`, …) também o carregam, porque têm a caixa
   de pesquisa mas não o `domain-search.js`. Resultado: a promoção
   desapareceu da página inicial, que ninguém pediu. O dono viu antes de mim.

   A CONDIÇÃO CERTA É O JAVASCRIPT, não o CSS. O `domain-search.js` é
   carregado SÓ pelas 10 páginas de registo — a sua presença é a definição
   de «página de domínio». Ele põe `dm-pagina-dominio` no <html> ao
   arrancar, e é disso que esta regra depende.

   Não se toca no `vendor.js` nem nos 12 rodapés — a faixa continua igual em
   todo o resto do site, e continua a fechar-se no × com as 24 h de sempre.

   Os DOIS ids: o `-desktop` e o da versão móvel, que é outro elemento. */
html.dm-pagina-dominio #bottom-banner-with-counter-holder-desktop,
html.dm-pagina-dominio #bottom-banner-with-counter-holder { display: none !important; }

/* ---------- 2. a barra de pesquisa ---------- */

.dm-fixa {
    position: fixed; left: 0; right: 0;
    bottom: var(--dm-sel-h, 0px);
    z-index: 1035;                     /* abaixo da selecção (1040) */
    padding: 12px 16px;
    pointer-events: none;              /* o vazio dos lados não apanha cliques */

    /* ENTRA E SAI A DESLIZAR. Não é enfeite: uma barra que aparece de
       repente por baixo do dedo faz a pessoa perder o sítio onde estava.
       Fica sempre no DOM (é `fixed`, não ocupa espaço) e é o `transform`
       que a esconde — assim há de onde animar. O `visibility` só muda no
       fim da saída, senão ficava a apanhar cliques enquanto desliza. */
    transform: translateY(130%);
    opacity: 0;
    visibility: hidden;
    transition: transform .30s cubic-bezier(.22, .61, .36, 1),
                opacity   .18s linear,
                visibility 0s linear .30s;
}
.dm-fixa.on {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1),
                opacity   .20s linear,
                visibility 0s linear 0s;
}
/* Quem pediu ao sistema para não haver movimento, não tem movimento. */
@media (prefers-reduced-motion: reduce) {
    .dm-fixa, .dm-fixa.on { transition: none; }
}

.dm-fixa-caixa {
    pointer-events: auto;
    display: flex; align-items: center; gap: 14px;
    max-width: 1000px; margin: 0 auto;
}

/* A pastilha branca. */
.dm-fixa-forma {
    flex: 1 1 auto;
    display: flex; align-items: stretch;
    background: #fff; border-radius: 999px;
    box-shadow: 0 6px 26px rgba(31, 40, 53, .16);
    padding: 10px 10px 10px 0;
    overflow: hidden;
}
.dm-fixa-www {
    display: flex; align-items: center;
    padding: 0 0 0 26px; margin-right: 16px;
    font-size: 15px; color: #8b939c; white-space: nowrap;
    letter-spacing: .2px;
}
/* Um risco a separar o «www» do que se escreve, para os dois nao se lerem
   como uma frase so. Pseudo-elemento e nao `border-right`: a pastilha
   alinha por `stretch` e a borda descia do cimo ao fundo, o que num campo
   arredondado fica pesado. */
.dm-fixa-www::after {
    content: ''; display: block;
    width: 1px; height: 22px; margin-left: 16px;
    background: #e2e6ea;
}
.dm-fixa-campo {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: none;
    font: inherit; font-size: 16px; color: #1f2835;
}
.dm-fixa-campo::placeholder { color: #a7b0bd; }

/* O ANEL DE FOCO E DA PASTILHA INTEIRA, e nao do campo. Estava no campo,
   com `outline-offset: 4px`, e o resultado era um rectangulo de cantos
   quase rectos desenhado por cima da pastilha arredondada e a passar por
   baixo do botao da lupa — visto pelo dono em 26/08/2026.

   Posto na pastilha, o anel segue o `border-radius: 999px` dela e fica uma
   peca so. O campo perde o contorno proprio porque ja nao precisa dele: o
   que esta em foco e visivelmente aquela pastilha, que e o unico sitio
   onde ha o que escrever. */
.dm-fixa-forma { transition: box-shadow .18s ease; }
.dm-fixa-forma:focus-within {
    box-shadow: 0 8px 30px rgba(31, 40, 53, .22),
                0 0 0 2px #00acc8;
}
.dm-fixa-campo:focus,
.dm-fixa-campo:focus-visible { outline: none; box-shadow: none; }
.dm-fixa-btn { transition: background .15s ease, transform .12s ease; }
.dm-fixa-btn:active { transform: scale(.94); }
.dm-fixa-x { transition: background .15s ease, transform .12s ease; }
.dm-fixa-x:active { transform: scale(.94); }

/* O botão da lupa. Na imagem de referência era amarelo; amarelo não existe
   em lado nenhum desta casa, por isso leva o vermelho da marca. Trocar é
   mudar esta linha. */
.dm-fixa-btn {
    flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: #d10303; color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.dm-fixa-btn:hover { background: #b00202; }
.dm-fixa-btn svg { width: 20px; height: 20px; display: block; }

/* O × fora da pastilha, como na referência. */
.dm-fixa-x {
    pointer-events: auto;
    flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: #fff; color: #1f2835;
    box-shadow: 0 4px 16px rgba(31, 40, 53, .14);
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.dm-fixa-x:hover { background: #f2f4f7; }

@media (max-width: 640px) {
    .dm-fixa { padding: 10px 10px; }
    .dm-fixa-caixa { gap: 8px; }
    .dm-fixa-www { padding: 0 10px 0 16px; font-size: 13px; }
    .dm-fixa-campo { font-size: 15px; }
    .dm-fixa-btn { width: 42px; height: 42px; }
    .dm-fixa-x { width: 36px; height: 36px; font-size: 18px; }
}

/* Com a barra de pesquisa no ar, o fim da página não pode ficar por baixo
   dela — pelo mesmo motivo que já existe o `body.dm-com-barra`. */
body.dm-com-fixa { padding-bottom: 96px; }
body.dm-com-fixa.dm-com-barra { padding-bottom: 172px; }

/* O LUGAR DO CHAT NA LINHA. Com a classe posta pelo `domain-search.js`, a
   barra recua o suficiente para o botao do chat caber a sua direita — e o
   `--rlx-chat-d` do chat sai da MESMA conta, por isso a folga entre os
   dois e a mesma em qualquer largura. Sem a classe nao muda nada. */
html.dm-chat-na-linha .dm-fixa {
    /* O chat esta a 20px da direita e nao arreda; a barra recua o que ele
       ocupa mais 24px de folga. */
    padding-right: calc(20px + var(--rlx-chat-l, 0px) + 24px);
    /* E a folga de baixo poe o centro da pastilha na altura do centro do
       botao do chat. A conta esta no `alinhaChat()`. */
    padding-bottom: var(--dm-fixa-pb, 12px);
}

/* A PASTILHA ENCOSTA-SE AO CHAT em vez de ficar centrada com um vazio no
   meio. Centrada, sobravam 185px entre o × e o botao do chat — media-se a
   olho que eram duas coisas e nao uma linha.

   O `max-width` sai da caixa e passa para a pastilha: assim a caixa ocupa
   a largura toda que sobra, a pastilha mantem o seu tecto de 1000px e o
   `margin-left: auto` empurra o conjunto para a direita, ate encostar ao
   lugar guardado. A folga que fica e a mesma que se reservou acima. */
html.dm-chat-na-linha .dm-fixa-caixa { max-width: none; }
html.dm-chat-na-linha .dm-fixa-forma { max-width: 1000px; margin-left: auto; }

/* ======================================================================
   SELECTOR DE ANOS — botao + lista, com abertura de cima para baixo
   (pedido do dono, 05/09/2026). Era um <select> nativo: o menu dele e
   desenhado pelo sistema e nao se anima nem se estiliza. A altura e
   animada por JS (domain-search.js); aqui fica so o desenho. Mantem a
   mesma caixa de sempre — 1px #d5dbe3, fundo branco, 13px — para nada
   saltar de sitio.
   ====================================================================== */
.dm-anos__b {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; margin: 0; padding: 8px 10px;
    background: #fff; border: 1px solid #d5dbe3;
    font-family: inherit; font-size: 13px; line-height: 1.3; color: #1f2835;
    text-align: left; cursor: pointer; box-sizing: border-box;
    transition: border-color .15s;
}
.dm-anos__b:hover { border-color: #b9c2cd; }
.dm-anos.aberto .dm-anos__b { border-color: #d60037; }
/* a seta: gira ao abrir */
.dm-anos__b::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px;
    border: solid #6b737c; border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
}
.dm-anos.aberto .dm-anos__b::after { transform: rotate(-135deg) translateY(-1px); border-color: #d60037; }

.dm-anos__l {
    position: absolute; z-index: 30; top: 100%; left: 0; right: 0;
    margin: 0; padding: 4px 0; list-style: none;
    max-height: 260px; overflow-y: auto; overflow-x: hidden;
    background: #fff; border: 1px solid #d5dbe3; border-top: 0;
    box-shadow: 0 10px 26px rgba(31, 40, 53, .12);
    box-sizing: border-box;
}
.dm-anos__o {
    padding: 8px 10px; font-size: 13px; line-height: 1.3;
    color: #1f2835; cursor: pointer; white-space: nowrap;
}
.dm-anos__o:hover { background: #f6f8fa; }
.dm-anos__o.on { background: #fdf0f4; color: #d60037; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    .dm-anos__b, .dm-anos__b::after { transition-duration: .01ms; }
}