/* =====================================================================
   O GERADOR DE NOME PARA EMPRESA — a folha
   11/09/2026

   O DESENHO NÃO É DAQUI: é do `/registo-de-dominio`, por ordem do dono a
   11/09/2026. E não é capricho — é para onde esta página manda. Quem
   gera um nome aqui acaba a registar um domínio lá, e uma ferramenta que
   parece de outro sítio não herda a confiança do sítio.

   A PALETA E AS FORMAS SÃO LIDAS DESSA PÁGINA, não escolhidas aqui:

     #00acc8  o ciano do botão de consulta  (a acção principal)
     #d60037  o vermelho da marca           (registar, e a extensão)
     #1f2835  o carvão dos títulos
     #76bd22  o verde do «livre»
     #edeff0  o cinzento das superfícies e das molduras de campo
     #e2e6ea  a moldura dos cartões
     #5b6879 / #8b95a5  os dois cinzentos de texto

   CANTOS DIREITOS. O tema não arredonda nada: nem o campo de pesquisa,
   nem o botão, nem os cartões de resultado. Uma pastilha arredondada no
   meio disto lê-se como peça de outro sítio — foi o que esta página
   tinha até hoje.

   54 PIXÉIS é a altura dos controlos da pesquisa de domínios. Os desta
   página são os mesmos, para as duas ferramentas se lerem como uma.

   As classes `dm-` NÃO estão aqui: são da página de registo e vivem no
   `dominio-resultado.css`, que esta página também carrega. O cartão de
   nome (`.gn-cart`) é deliberadamente o irmão do `.dm-cartao` de lá —
   mesma moldura, mesmo espaçamento, mesmo tamanho de nome. Se um dia
   mudarem o de lá, este tem de ir atrás.
   ===================================================================== */

:root {
  --gn-ac: #00acc8;   /* a acção principal: gerar */
  --gn-ac2: #0bbdd9;
  --gn-c: #d60037;    /* a marca: registar */
  --gn-t: #1f2835;
  --gn-l: #edeff0;
  --gn-l2: #e2e6ea;
  --gn-g: #5b6879;
  --gn-g2: #8b95a5;
  --gn-v: #76bd22;
}

/* ------------------------------------------------------ a ferramenta */

.gn-caixa {
  background: #fff;
  border: 1px solid var(--gn-l2);
  padding: 30px 30px 32px;
  box-sizing: border-box;
}
.gn-rot {
  display: block; margin: 0 0 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gn-g);
}
/* O campo é o `input-domain` da pesquisa, feito alto: mesma moldura de
   três pixéis, mesmo cinzento, mesmo corpo de letra. */
.gn-campo {
  display: block; width: 100%; min-height: 118px; resize: vertical;
  padding: 14px 16px; box-sizing: border-box;
  border: solid 3px var(--gn-l); border-radius: 0;
  font-family: arial, sans-serif; font-size: 18px; line-height: 1.55; color: #333;
}
.gn-campo:focus { outline: none; border-color: var(--gn-ac); }
.gn-campo::placeholder { color: #a9b2bd; }

.gn-conta {
  display: flex; justify-content: space-between; gap: 12px; margin: 8px 2px 0;
  font-size: 12.5px; color: var(--gn-g2);
}
.gn-conta .gn-curto { color: var(--gn-c); font-weight: 700; }

/* A BARRA DO QUE FALTA. Enche-se até ao ponto em que os nomes deixam de
   melhorar (140 caracteres), não até ao mínimo aceite (60): o mínimo é o
   que se aceita, não o que se quer. Vermelha enquanto o botão está
   travado, ciano a partir do momento em que já dá para gerar. */
.gn-barra {
  height: 3px; background: var(--gn-l); margin: 6px 2px 0;
  opacity: 0; transition: opacity .2s ease;
}
.gn-barra.on { opacity: 1; }
.gn-barra-v {
  display: block; height: 100%; width: 0;
  background: var(--gn-ac); transition: width .25s ease, background .25s ease;
}
.gn-barra-v.curta { background: var(--gn-c); }
@media (prefers-reduced-motion: reduce) { .gn-barra-v { transition: none; } }
.gn-conta kbd {
  font: inherit; background: var(--gn-l); border: 1px solid var(--gn-l2);
  padding: 1px 6px; color: var(--gn-g);
}

/* -------------------------------------------------------- os estilos
   Pastilhas, e não uma lista de escolha: são nove e têm de se ver todas
   de uma vez. Um <select> nativo escondia oito, e quem não sabe que
   existe «Rimado» nunca o vai procurar. Direitas, como tudo no tema. */
.gn-estilos { margin: 22px 0 0; }
.gn-estilos > b {
  display: block; margin: 0 2px 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gn-g);
}
.gn-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-estilos button {
  padding: 9px 16px; border: 1px solid var(--gn-l2); border-radius: 0;
  background: #fff; color: var(--gn-t); font-family: inherit;
  font-size: 13.5px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.gn-estilos button:hover { border-color: var(--gn-ac); color: var(--gn-ac); }
.gn-estilos button.on { background: var(--gn-ac); border-color: var(--gn-ac); color: #fff; }
.gn-estilos button[disabled] { opacity: .55; cursor: default; }
.gn-comoe { margin: 10px 2px 0; font-size: 13px; line-height: 20px; color: var(--gn-g); min-height: 20px; }

/* --------------------------------------------------------- os botões
   O principal é o ciano da consulta de domínios, com a mesma altura, a
   mesma caixa alta e o mesmo peso. O segundo é o mesmo em negativo. */
.gn-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; }
.gn-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; padding: 0 30px; border: 0; border-radius: 0;
  background: var(--gn-ac); color: #fff;
  font-family: Ubuntu, arial, sans-serif; font-size: 15px; font-weight: 700;
  text-transform: uppercase; text-decoration: none; line-height: 1;
  cursor: pointer; transition: all .2s ease;
}
.gn-bt:hover { background: var(--gn-ac2); color: #fff; }
.gn-bt[disabled] { opacity: .5; cursor: default; }
.gn-bt svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
.gn-bt2 { background: #fff; color: var(--gn-ac); border: 1px solid var(--gn-ac); }
.gn-bt2:hover { background: #eefafc; color: var(--gn-ac); }
.gn-roda-bt {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; border-radius: 50%; animation: gn-gira .8s linear infinite; flex: 0 0 auto;
}
.gn-bt2 .gn-roda-bt { border-color: rgba(0,172,200,.3); border-top-color: var(--gn-ac); }

/* ------------------------------------------------------- os exemplos
   Uma linha só, com as que couberem, e uma seta que roda as seguintes.
   Dezasseis numa fila não se lêem, e quem não sabe o que escrever quer
   VÁRIAS hipóteses, não a mesma quatro vezes. */
.gn-ex {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  margin: 20px 0 0; font-size: 13px; color: var(--gn-g);
}
.gn-ex-t { flex: 0 0 auto; }
.gn-ex-fila { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 8px; overflow: hidden; }
.gn-ex button {
  flex: 0 0 auto; white-space: nowrap;
  padding: 7px 14px; border: 1px solid var(--gn-l2); border-radius: 0;
  background: #fff; color: var(--gn-t); font-family: inherit; font-size: 13px;
  line-height: 1; cursor: pointer;
  transition: opacity .17s ease, transform .17s ease, border-color .15s ease, color .15s ease;
}
.gn-ex button:hover { border-color: var(--gn-c); color: var(--gn-c); }
/* A TROCA VÊ-SE: os que saem vão para cima, os que entram vêm de baixo.
   Sem isto o texto mudava debaixo do rato e parecia um erro de desenho. */
.gn-ex button.gn-ex-sai { opacity: 0; transform: translateY(-7px); }
.gn-ex button.gn-ex-entra { opacity: 0; transform: translateY(7px); }
.gn-ex .gn-ex-next {
  flex: 0 0 auto; width: 32px; padding: 7px 0; font-size: 17px; line-height: 1;
  color: var(--gn-c); border-color: var(--gn-l2);
}
.gn-ex .gn-ex-next:hover { border-color: var(--gn-c); background: #fdf0f4; }
.gn-ex .gn-ex-next.gn-roda-seta { animation: gn-empurra .32s ease; }
@keyframes gn-empurra { 50% { transform: translateX(3px); } }

/* ---------------------------------------------------------- a espera */
.gn-espera {
  display: none; align-items: center; gap: 10px; margin: 24px 0 0;
  color: var(--gn-g); font-size: 14px;
}
.gn-espera.on { display: flex; }
.gn-roda {
  width: 18px; height: 18px; border: 2px solid var(--gn-l);
  border-top-color: var(--gn-ac); border-radius: 50%;
  animation: gn-gira .8s linear infinite; flex: 0 0 auto;
}
@keyframes gn-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gn-roda, .gn-roda-bt { animation: none; }
  .gn-ex button { transition: none; }
}

/* ---------------------------------------------------------- o resumo
   «7 de 12 com o domínio livre em .ao» responde de uma vez à pergunta
   que se faz ao olhar para a lista, e conta sozinho enquanto as
   respostas do registo vão chegando. */
.gn-resumo {
  display: none; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin: 26px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--gn-l);
}
.gn-resumo.on { display: flex; }
.gn-resumo b { font-size: 25px; line-height: 34px; font-weight: 700; color: var(--gn-t); font-variant-numeric: tabular-nums; }
.gn-resumo span { font-size: 14px; color: var(--gn-g); }

/* ------------------------------------------------------- os cartões
   Irmãos do `.dm-cartao` da página de registo: mesma moldura, mesmo
   espaçamento, mesmo tamanho de nome. O NOME é o que salta à vista,
   porque é o que se está a escolher; o domínio por baixo é a
   consequência, não o assunto. */
#gn-res {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
#gn-res[hidden] { display: none; }
@media (max-width: 900px) { #gn-res { grid-template-columns: 1fr; } }

.gn-cart {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--gn-l2); padding: 20px 22px;
  box-sizing: border-box; transition: border-color .15s ease;
}
.gn-cart:hover { border-color: #cfd6de; }
.gn-nome {
  margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--gn-t);
  overflow-wrap: anywhere; word-break: normal;
}
.gn-dom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.gn-dom .gn-d { font-size: 14px; color: var(--gn-g); overflow-wrap: anywhere; }
.gn-dom .gn-d b { color: var(--gn-t); font-weight: 400; }
.gn-dom .gn-d .gn-tld { color: var(--gn-c); font-weight: 700; }
.gn-cart.is-ocupado .gn-d { text-decoration: line-through; color: var(--gn-g2); }
.gn-cart.is-ocupado .gn-d b, .gn-cart.is-ocupado .gn-d .gn-tld { color: var(--gn-g2); }

/* Três estados e não dois: «a ver» existe porque a resposta do registo
   demora, e um espaço em branco durante dois segundos parece uma linha
   partida. */
.gn-eti {
  display: inline-flex; align-items: center; padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.gn-eti.a-ver { background: var(--gn-l); color: var(--gn-g2); }
.gn-eti.livre { background: #eef8e3; color: #4d8a10; }
.gn-eti.ocupado { background: #fdf0f4; color: var(--gn-c); }
.gn-preco { font-size: 17px; font-weight: 700; color: var(--gn-t); white-space: nowrap; }
.gn-preco span { font-size: 12px; font-weight: 400; color: var(--gn-g); }

/* Os botões do cartão são o `.dm-btn` da página de registo, e o
   secundário é o `.dm-btn.is-alt`. Literalmente os mesmos números. */
.gn-accoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.gn-bt3, .gn-bt4 {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 0; font-family: inherit;
  font-size: 13px; font-weight: 700; line-height: 1;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
}
.gn-bt3 { border: 0; background: var(--gn-c); color: #fff !important; }
.gn-bt3:hover { background: #b8002f; color: #fff !important; }
.gn-bt3[disabled] { cursor: default; }
.gn-bt3.gn-feito, .gn-bt3.gn-feito:hover { background: var(--gn-v); }
.gn-bt4 { background: #fff; color: var(--gn-c) !important; border: 1px solid var(--gn-c); }
.gn-bt4:hover { background: #fdf0f4; color: var(--gn-c) !important; }

/* ------------------------------------------------- avisos e rodapés */
.gn-aviso {
  margin: 22px 0 0; padding: 16px 18px; background: #fbfcfd;
  border: 1px solid var(--gn-l); color: var(--gn-g);
  font-size: 14px; line-height: 22px;
}
.gn-aviso b { display: block; margin-bottom: 4px; color: var(--gn-t); font-size: 15px; }
.gn-nota { margin: 20px 0 0; font-size: 12.5px; line-height: 20px; color: var(--gn-g2); }
/* A nota de rodapé da ferramenta ao centro, por baixo da lista: à
   esquerda, debaixo de duas colunas de cartões, ficava a apontar
   para o nada. Pedido do dono a 11/09/2026. */
.gn-nota-c { max-width: 118ch; margin-left: auto; margin-right: auto; text-align: center; }

/* ================================================================
   OS CARTÕES DAS SECÇÕES — os passos e os estilos

   O TEMA NÃO DESENHA ISTO SOZINHO, e foi o que se viu no ecrã: o
   `.thumbnail` do Bootstrap dá uma moldura e mais nada. O que faz as
   caixas do `/registo-de-dominio` parecerem o que parecem está em
   `#domainintro .thumbnail` — centrado, com respiro em cima e sombra —
   e essas regras estão presas ao ID daquela página. Sem as repetir
   aqui, os cartões saíam com o ícone ao meio e o título encostado à
   esquerda, que foi exactamente o que apareceu (11/09/2026).

   Os números são os de lá, lidos do `domain-registration.css`, não
   escolhidos: moldura #E3E3E3, sombra `2px 12px 10px #ddd`, cantos
   direitos, texto centrado.
   ================================================================ */

#comofunciona .thumbnail,
#how-it-works .thumbnail,
#estilos .thumbnail,
#styles .thumbnail,
#gn-exemplos .thumbnail {
  display: flex; flex-direction: column;
  flex: 1 1 auto; margin-bottom: 30px;
  padding: 30px 22px 26px;
  background: #fff; border: 1px solid #E3E3E3; border-radius: 0;
  box-shadow: 2px 12px 10px #ddd;
  text-align: center;
  box-sizing: border-box;
}
#comofunciona .thumbnail .caption,
#how-it-works .thumbnail .caption,
#estilos .thumbnail .caption,
#styles .thumbnail .caption,
#gn-exemplos .thumbnail .caption {
  flex: 1 1 auto; padding: 0; color: inherit;
}
#comofunciona .thumbnail h3,
#how-it-works .thumbnail h3,
#estilos .thumbnail h3,
#styles .thumbnail h3,
#gn-exemplos .thumbnail h3 {
  margin: 0 0 10px; font-size: 19px; line-height: 26px; font-weight: 700;
  color: var(--gn-t); text-transform: none;
}
/* Justificado como no `#domainintro p` de lá, mas com o último renglón
   ao centro: quatro palavras sozinhas encostadas à esquerda, por baixo
   de um título centrado, lêem-se como desalinhamento. */
#comofunciona .thumbnail p,
#how-it-works .thumbnail p,
#estilos .thumbnail p,
#styles .thumbnail p,
#gn-exemplos .thumbnail p {
  margin: 0; font-size: 14px; line-height: 22px; color: var(--gn-g);
  text-align: center;
}

/* O ícone é de fonte, não uma <img> como no tema: sem `display:block` e
   `margin:auto` ficava em linha com o texto e do tamanho dele. */
.gn-passo, .gn-estilo-i {
  display: block; margin: 0 auto 16px; line-height: 1;
  color: var(--gn-ac); text-align: center;
}
.gn-passo { font-size: 52px; }
.gn-estilo-i { font-size: 40px; color: var(--gn-c); }

/* Uma linha de separação por baixo do número do passo, para os quatro
   se lerem como uma sequência e não como quatro coisas soltas. */
#comofunciona .thumbnail h3::after,
#how-it-works .thumbnail h3::after {
  content: ''; display: block; width: 34px; height: 3px;
  margin: 10px auto 0; background: var(--gn-ac);
}
#estilos .thumbnail h3::after,
#styles .thumbnail h3::after {
  content: ''; display: block; width: 34px; height: 3px;
  margin: 10px auto 0; background: var(--gn-c);
}

/* AS DUAS SECÇÕES TÊM DE SE LER COMO DUAS. As «quatro perguntas» são uma
   lista de ícones redondos em fundo cinzento; os «nove estilos» são
   cartões com moldura em fundo branco. Coladas uma à outra sem isto,
   liam-se como um bloco só — foi o que o dono viu a 11/09/2026. */

@media (max-width: 767px) {
  .gn-caixa { padding: 22px 18px 24px; }
  .gn-nome { font-size: 21px; line-height: 29px; }
  .gn-bt, .gn-bt2 { width: 100%; }
  .gn-ex { flex-wrap: wrap; }
  .gn-ex-t { flex: 1 1 100%; }
}


/* ================================================================
   MESMA ALTURA, MESMAS LINHAS — 11/09/2026

   Duas coisas diferentes davam o mesmo defeito no ecrã: cartões a
   acabar a alturas diferentes e textos a começar a alturas diferentes.

   1. A GRELHA DO BOOTSTRAP NÃO IGUALA NADA. As colunas são `float`, e
      um `height: 100%` lá dentro não tem a que se agarrar — cada cartão
      fica com a altura do seu texto. A linha passa a `flex` e as
      colunas passam a esticar; é a única maneira de quatro cartões com
      textos de comprimentos diferentes acabarem na mesma linha.

      O clearfix do Bootstrap (`.row::before` e `::after`) tem de ser
      desligado: dentro de um contentor flex, aqueles dois pseudo-
      elementos viram ITENS, e ficava uma coluna fantasma a comer
      largura.

   2. AS «QUATRO PERGUNTAS» SÃO `display: inline-table` no tema, e
      inline-table alinha pela BASE da primeira linha. Um título que
      passe para duas linhas empurra o parágrafo dele para baixo e os
      quatro deixam de começar à mesma altura — que é exactamente o que
      se via. Passam a flex, e o título reserva sempre duas linhas,
      caiba numa ou em duas.

   Os textos também foram igualados à mão (cerca de 120 caracteres nos
   passos e nos estilos, cerca de 95 nas perguntas). O CSS garante a
   caixa; o texto igual é o que faz as LINHAS baterem certo lá dentro.
   ================================================================ */

#comofunciona .row, #how-it-works .row,
#estilos .row, #styles .row,
#gn-exemplos .row { display: flex; flex-wrap: wrap; }
#comofunciona .row::before, #comofunciona .row::after,
#how-it-works .row::before, #how-it-works .row::after,
#estilos .row::before, #estilos .row::after,
#styles .row::before, #styles .row::after,
#gn-exemplos .row::before, #gn-exemplos .row::after { display: none; }
#comofunciona .row > [class*="col-"],
#how-it-works .row > [class*="col-"],
#estilos .row > [class*="col-"],
#styles .row > [class*="col-"],
#gn-exemplos .row > [class*="col-"] { display: flex; }

/* AS QUATRO PERGUNTAS — alinhadas por GRELHA, não por altura reservada.

   O que estava aqui antes reservava duas linhas ao título
   (`min-height: 52px`), para que um título de duas linhas não empurrasse
   o parágrafo dele para baixo dos outros. Funcionava, e trazia um
   defeito próprio: quando os quatro títulos cabem numa linha — que é o
   caso desde que foram encurtados — sobram vinte e seis pixéis de nada
   debaixo de cada um, e o bloco lê-se despegado.

   A grelha resolve as duas coisas sem reservar nada. Cada item ocupa
   três filas da grelha da lista (ícone, título, texto) e herda-as com
   `subgrid`: as quatro filas do título têm a altura do título mais alto,
   as do texto a altura do texto mais longo, e nada disso é escrito à
   mão. Um título que passe a duas linhas alinha os quatro, sem sobra.

   O `@supports` não é enfeite: sem `subgrid` (navegadores mais velhos) a
   lista continua a ser a grelha de quatro colunas, e volta-se ao
   comportamento antigo, com a reserva de duas linhas. Pior, mas
   alinhado — nunca partido. */
.product-features-list .line-bottom.list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1170px; margin: 0 auto; padding: 0 16px; list-style: none;
  box-sizing: border-box;
}
/* O tema põe um marcador redondo nos `li` desta lista; com o desenho em
   quatro colunas ele aparece solto à esquerda de cada círculo, a meia
   altura, e lê-se como um defeito de carregamento. */
.product-features-list .line-bottom.list > .item::before,
.product-features-list .line-bottom.list > .item::after { display: none !important; content: none !important; }
.product-features-list .line-bottom.list > .item {
  width: auto; margin: 20px 0; padding: 0 15px;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  align-content: start;
}
/* O CÍRCULO AO CENTRO DA COLUNA.

   O tema centrava-o com `text-align: center`, e isso chegava enquanto o
   item era `inline-table`: o ícone é um `inline-block` de 120 pixéis e
   ia com o texto. Passado a item de GRELHA, o `text-align` já não o
   move — alinha o conteúdo DENTRO dele, não a caixa dele — e o círculo
   encostou-se à esquerda da coluna, com o título centrado por baixo.

   Margens automáticas resolvem-no nas três disposições ao mesmo tempo:
   grelha, flex e bloco. É por isso que não se usa aqui `justify-self`,
   que só serve a grelha e deixava o caminho do `@supports` torto. */
.product-features-list .line-bottom.list > .item > [class^="icon-"],
.product-features-list .line-bottom.list > .item > [class*=" icon-"] {
  margin-left: auto; margin-right: auto;
}

.product-features-list .line-bottom.list > .item .title {
  line-height: 26px; margin: 16px 0 8px;
}
.product-features-list .line-bottom.list > .item p { margin: 0; }

/* Sem `subgrid`: a grelha das colunas mantém-se, o item volta a ser uma
   coluna flexível e o título volta a reservar duas linhas. */
@supports not (grid-template-rows: subgrid) {
  .product-features-list .line-bottom.list > .item {
    display: flex; flex-direction: column;
  }
  .product-features-list .line-bottom.list > .item .title { min-height: 52px; }
}

@media (max-width: 991px) {
  .product-features-list .line-bottom.list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-features-list .line-bottom.list { grid-template-columns: 1fr; }
  .product-features-list .line-bottom.list > .item { grid-row: auto; grid-template-rows: none; }
  @supports not (grid-template-rows: subgrid) {
    .product-features-list .line-bottom.list > .item .title { min-height: 0; }
  }
}


/* ================================================================
   OS FUNDOS E O RITMO VERTICAL — 12/09/2026

   Corrigido depois de abrir a página e MEDIR, em vez de a imaginar.
   Duas coisas estavam mal, e eram diferentes uma da outra:

   1. UM FUNDO REPETIDO QUE NÃO ERA ENTRE SECÇÕES. A ferramenta é uma
      caixa branca e estava assente numa secção branca: a moldura de um
      pixel era tudo o que a separava do resto, e não se via. A peça
      principal da página era a menos visível dela.

      A correcção foi virar a ordem: a secção da ferramenta passa a
      CINZENTA e a caixa branca salta dela. O resto da alternância roda
      atrás, e a conta continua a fechar:

        1 a ferramenta       CINZENTO   (caixa branca por cima)
        2 os quatro passos   BRANCO
        3 as perguntas       CINZENTO
        4 os nove estilos    BRANCO
        5 garanta o nome     CINZENTO
        6 as explicações     BRANCO
        7 porquê a Interweb  a fotografia do tema (escura)
        8 F.A.Q.             BRANCO     (a de cima é escura)
        9 outros produtos    CINZENTO

   2. PADDINGS A ESMO. Medidos no ecrã, eram estes, de cima para baixo:
      44/60, 50/30, 10/30, 50/30, 0/20, 10/60, 51/51, 30/30. Secções
      encostadas com dez pixéis e outras com sessenta — e o efeito é o
      que o dono descreveu: não se percebe o que é um bloco e o que é a
      continuação do anterior. Passam todas a 60/60.

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

/* ---- os fundos ---- */
/* A secção da ferramenta já não é `.domain-search` (ver a página), por
   isso o que o tema lhe dava — padding e pouco mais — passa a vir daqui. */
#gerar,
#gn-perguntas { background: #edeff0; }
#comofunciona, #how-it-works,
#estilos, #styles,
#gn-faq { background: #fff; }
/* O `#gn-porque` não está aqui: leva a classe `white` do tema, que é o
   que o põe branco. O que está no HTML tem de dizer o que a secção é. */

/* ---- o ritmo: 60 em cima, 60 em baixo, em todas ---- */
#gerar, #comofunciona, #how-it-works, #gn-perguntas,
#estilos, #styles, #gn-garantir, #gn-porque, #gn-faq {
  padding-top: 60px; padding-bottom: 60px;
}
/* O tema põe `padding: 47px` no `.section-v3` do F.A.Q. e
   `padding-bottom: 0` no `.board-list.no-padding-top`; ambos perdem para
   o ID, mas fica dito porque é que as duas linhas acima existem. */

@media (max-width: 767px) {
  #gerar, #comofunciona, #how-it-works, #gn-perguntas,
  #estilos, #styles, #gn-garantir, #gn-porque, #gn-faq {
    padding-top: 40px; padding-bottom: 40px;
  }
}

/* ---- a caixa da ferramenta, agora que assenta em cinzento ----
   Sombra igual à dos cartões do tema (`#domainintro .thumbnail`), para a
   peça principal da página se ler como a peça principal. */
.gn-caixa {
  box-shadow: 2px 12px 10px rgba(0,0,0,.06);
  border-color: #dfe3e6;
}


/* ================================================================
   OS SEIS CASOS — 12/09/2026

   A secção dos nove estilos DIZ o que cada estilo é; esta MOSTRA-O, com
   nomes que o visitante já conhece. O nome vem primeiro e grande, porque
   é ele que se reconhece à distância; a etiqueta do estilo por cima liga
   o caso à secção anterior sem obrigar a subir.
   ================================================================ */

#gn-exemplos { background: #edeff0; padding-top: 60px; padding-bottom: 60px; }
#gn-exemplos .thumbnail { text-align: left; padding: 26px 24px; }
#gn-exemplos .thumbnail h3 {
  margin: 0 0 12px; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--gn-t);
}
#gn-exemplos .thumbnail h3::after { content: none; }
#gn-exemplos .thumbnail p { text-align: left; font-size: 14px; line-height: 23px; }
.gn-tag {
  display: inline-block; margin: 0 0 12px; padding: 4px 11px;
  background: #fdf0f4; color: var(--gn-c);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* A alternância roda com a secção nova no meio: o «garanta-o» passa a
   branco e o «porquê» volta ao cinzento do tema (perdeu a classe
   `white`). Ver a lista completa mais acima. */
#gn-garantir { background: #fff; }

@media (max-width: 767px) {
  #gn-exemplos { padding-top: 40px; padding-bottom: 40px; }
  #gn-exemplos .thumbnail h3 { font-size: 25px; line-height: 31px; }
}

/* ================================================================
   OS NOMES GUARDADOS — 12/09/2026

   Uma estrela em cada cartão e uma tira por cima da lista. Vive no
   navegador e em mais lado nenhum, e isso está escrito por baixo da
   tira: quem guarda um nome tem direito a saber onde ele fica.

   A tira só aparece quando há alguma coisa guardada. Uma caixa vazia a
   dizer «ainda não guardou nada» é mobília.
   ================================================================ */

/* DOIS ESTADOS, E NAO UM. O atributo `hidden` diz se a tira EXISTE; a
   classe `on` diz se esta ABERTA. `display:none` nao se anima, por isso a
   abertura e feita pela classe e nao pelo atributo — quem mexer numa tem
   de mexer na outra.

   E ANIMA-SE A LINHA DA GRELHA, NAO O `max-height`. Com `max-height` e
   preciso escolher um numero maior do que a altura real, e a caixa chega
   ao fim do caminho muito antes do fim da transicao: medido, uma tira de
   139 pixeis com tecto de 420 acabava de crescer aos 85ms de 260 e
   parecia um salto. `grid-template-rows: 0fr -> 1fr` anima ate a altura
   que o conteudo tiver, seja ela qual for, e nao ha numero para acertar.

   O involucro interior e o que leva o fundo, a moldura e o espaco: e ele
   que fica cortado enquanto a linha esta a zero. */
.gn-guardados {
  display: grid; grid-template-rows: 0fr;
  margin: 0; opacity: 0;
  transition: grid-template-rows .28s ease, opacity .22s ease, margin .24s ease;
}
.gn-guardados.on { grid-template-rows: 1fr; opacity: 1; margin: 26px 0 0; }
.gn-guardados[hidden] { display: none; }
.gn-guardados-i { overflow: hidden; min-height: 0; }
.gn-guardados.on .gn-guardados-i,
.gn-guardados .gn-guardados-i {
  background: #fbfcfd; border: 1px solid var(--gn-l2); padding: 16px 18px;
}

/* As pastilhas entram e saem a encolher. Sem isto, tirar uma fazia as
   outras saltarem para o lugar dela de um fotograma para o outro. */
.gn-g { transition: opacity .18s ease, transform .18s ease; }
.gn-g.gn-g-entra, .gn-g.gn-g-sai { opacity: 0; transform: scale(.88); }

/* MOVIMENTO REDUZIDO: MAIS DISCRETO, NAO DESLIGADO.

   O `prefers-reduced-motion` esta LIGADO no sistema do dono — e no
   Windows liga-se sozinho com o poupador de bateria, por isso nao apanha
   so quem o escolheu. Desligar aqui a transicao fazia a tira saltar para
   o sitio, que e precisamente o que se estava a tentar evitar: a tira
   nasce ACIMA da lista e empurra tudo o que esta por baixo.

   Politica 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 fica no meio, como na rolagem ate aos resultados —
   anima na mesma, mais curto e sem deslocamento, so a altura e a
   opacidade. O que incomoda quem pediu menos movimento e o movimento,
   nao a mudanca de tamanho. */
@media (prefers-reduced-motion: reduce) {
  .gn-guardados {
    transform: none;
    transition: grid-template-rows .16s linear, opacity .12s linear, margin .16s linear;
  }
  .gn-guardados.on { transform: none; }
  .gn-g { transition: opacity .12s linear; }
  .gn-g.gn-g-entra, .gn-g.gn-g-sai { transform: none; }
}
.gn-guardados-c { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gn-guardados-c b { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gn-g); }
.gn-guardados-x {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--gn-c); text-decoration: underline;
}
#gn-guardados-l { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gn-g {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: #fff; border: 1px solid var(--gn-l2); padding: 7px 8px 7px 12px;
}
.gn-g b { font-size: 14px; font-weight: 700; color: var(--gn-t); }
.gn-g .gn-g-d { font-size: 12px; color: var(--gn-g2); }
.gn-g-x {
  border: 0; background: none; padding: 0 2px; cursor: pointer; line-height: 1;
  font-size: 17px; color: var(--gn-g2); font-family: inherit;
}
.gn-g-x:hover { color: var(--gn-c); }
.gn-guardados-n { margin: 10px 0 0; font-size: 12px; color: var(--gn-g2); }

/* A estrela do cartão: vazada enquanto não está guardado, cheia depois.
   É o mesmo botão das outras acções, para a linha não desalinhar. */
.gn-bt5 {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--gn-l2); background: #fff;
  color: var(--gn-g); font-family: inherit; font-size: 13px; font-weight: 700;
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.gn-bt5 .gn-estrela { font-size: 15px; line-height: 1; color: var(--gn-l2); transition: color .15s ease; }
.gn-bt5:hover { border-color: #f0a202; color: var(--gn-t); }
.gn-bt5:hover .gn-estrela { color: #f0a202; }
.gn-bt5.on { border-color: #f0a202; background: #fff8e8; color: var(--gn-t); }
.gn-bt5.on .gn-estrela { color: #f0a202; }


/* ================================================================
   OS DOIS QUADROS, COM O BOTÃO À MESMA ALTURA — 12/09/2026

   O tema chama-lhes `.board.align-bottom`, mas quem alinha ali por baixo
   é só o botão dentro do seu próprio bloco — não os DOIS quadros entre
   si. Um parágrafo com mais uma linha de um lado e os botões ficam
   desencontrados, que foi o que se viu: o da direita 24 pixéis abaixo do
   da esquerda.

   Encurtar o texto resolve ao pixel de HOJE, e parte-se na primeira
   tradução ou na primeira largura de ecrã diferente. O que resolve
   sempre é a coluna esticar e o botão ser empurrado para o fundo dela.
   Faz-se as duas coisas: o texto igualado para se ler bem, e isto para
   ficar alinhado mesmo quando não estiver.
   ================================================================ */

#gn-garantir .boards { display: flex; flex-wrap: wrap; align-items: stretch; }
#gn-garantir .boards > .board { display: flex; }
#gn-garantir .board > .content,
#gn-garantir .board .board-content { display: flex; flex-direction: column; width: 100%; }
#gn-garantir .board .board-content > p { flex: 1 1 auto; }
#gn-garantir .board .button-wrapper { margin-top: auto; padding-top: 18px; }

/* O «VER MAIS» DOS RESULTADOS.

   Estava com `class="gn-bt2 gn-mais-res"` e sem a classe base `gn-bt` —
   e o `gn-bt2` sozinho so troca as cores. Ficava um rectangulo de uma
   linha de altura com uma moldura fina, do tamanho do texto, que nao se
   le como botao nenhum. Agora tem forma propria e nao depende de
   ninguem.

   Fica largo de proposito: e o unico caminho para os ultimos resultados,
   e vem depois de doze cartoes — um alvo pequeno no fim de uma grelha
   passa despercebido. A seta para baixo diz para onde leva. */
.gn-mais-res {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: fit-content; min-width: 260px; height: 50px; padding: 0 30px;
  margin: 26px auto 0; border: 1px solid var(--gn-ac); border-radius: 0;
  background: #fff; color: var(--gn-ac);
  font-family: Ubuntu, arial, sans-serif; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gn-mais-res::after {
  content: ''; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.gn-mais-res:hover { background: var(--gn-ac); border-color: var(--gn-ac); color: #fff; }
.gn-mais-res:active { background: #0899b1; border-color: #0899b1; }
.gn-mais-res[hidden] { display: none; }
@media (max-width: 767px) { .gn-mais-res { width: 100%; } }

/* ================================================================
   OS SEIS CASOS, LINHA A LINHA — 12/09/2026

   A mesma técnica das «quatro perguntas», agora com três níveis: a
   coluna, o cartão e a legenda passam todos a subgrelha, e assim a
   etiqueta, o nome e o texto de cada caso caem na MESMA fila dos outros
   cinco. Os textos também foram igualados à mão (todos à volta de 155
   caracteres), mas é isto que segura o alinhamento quando a tradução ou
   a largura do ecrã fizerem um deles quebrar noutro sítio.
   ================================================================ */

#gn-exemplos .row > [class*="col-"],
#gn-exemplos .thumbnail,
#gn-exemplos .thumbnail .caption {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
}
#gn-exemplos .thumbnail .caption > p { align-self: start; }

@supports not (grid-template-rows: subgrid) {
  #gn-exemplos .row > [class*="col-"],
  #gn-exemplos .thumbnail,
  #gn-exemplos .thumbnail .caption { display: flex; flex-direction: column; }
  #gn-exemplos .thumbnail .caption > p { flex: 1 1 auto; }
}

/* ================================================================
   A ENTRADA DOS CARTÕES — 12/09/2026

   Doze caixas a aparecerem de um fotograma para o outro lêem-se como um
   recarregamento da página, não como uma resposta a uma pergunta. Entram
   de baixo, com uma escada de 40 ms entre elas (posta em JavaScript, que
   é onde se sabe a ordem de chegada).

   Sob movimento reduzido fica só o esbatimento: sem deslocamento e sem
   escada. O que incomoda quem pediu menos movimento é o movimento — a
   mudança de opacidade não é movimento e continua a dizer «isto é novo».
   ================================================================ */

.gn-cart { transition: opacity .3s ease, transform .3s ease, border-color .15s ease; }
.gn-cart-entra { opacity: 0; transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) {
  .gn-cart { transition: opacity .18s linear, border-color .15s ease; transition-delay: 0s !important; }
  .gn-cart-entra { transform: none; }
}

/* ================================================================
   AS EXTENSÕES NACIONAIS, EM DESTAQUE — 12/09/2026

   As extensões passaram a alternar pela lista da API. O `.ao` e as suas
   irmãs deixam de ser a regra e passam a ser uma entre quinze — por isso
   ganham marca própria: um selo com o nome do país e a moldura do cartão
   na cor da marca. Sem isso, o que dá margem e o que o cliente angolano
   procura primeiro ficava com o mesmo peso que um `.xyz`.
   ================================================================ */

.gn-cart.is-nacional { border-color: #f3c7d4; }
.gn-nac {
  display: inline-flex; align-items: center; padding: 2px 8px;
  background: #fdf0f4; color: var(--gn-c);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ================================================================
   O MODAL DA CONFIRMAÇÃO
   ================================================================ */

body.gn-modal-aberto { overflow: hidden; }

.gn-modal { position: fixed; inset: 0; z-index: 10000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease; }
.gn-modal.on { opacity: 1; }
.gn-modal[hidden] { display: none; }
.gn-modal-fundo { position: absolute; inset: 0; background: rgba(31,40,53,.55); }
/* A CAIXA NAO ROLA — o CORPO dela e que rola. Com `overflow:auto` na
   caixa inteira, o total e o botao ficavam no fim do que se rola, e quem
   nao rolasse nao sabia que existiam. Agora sao tres faixas: o X por
   cima, o corpo que rola, e o rodape colado em baixo. */
.gn-modal-cx {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 680px; max-height: 88vh; overflow: hidden;
  background: #fff; border: 1px solid var(--gn-l2); padding: 0;
  transform: translateY(14px) scale(.985); transition: transform .24s cubic-bezier(.2,.7,.3,1);
}
.gn-modal-corpo { flex: 1 1 auto; overflow: auto; padding: 30px 32px 10px; }
.gn-modal.on .gn-modal-cx { transform: none; }
.gn-modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid transparent; background: #fff; color: var(--gn-g2);
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
/* O icone nao recebe cliques: assim o alvo de qualquer clique no botao
   e SEMPRE o botao, e nao o desenho la dentro. */
.gn-modal-x svg { width: 17px; height: 17px; fill: currentColor; display: block; pointer-events: none; }
.gn-modal-x:hover { color: var(--gn-c); border-color: var(--gn-l2); background: #fdf0f4; }
.gn-modal-cx h3 { margin: 0 0 6px; font-size: 24px; line-height: 31px; font-weight: 700; color: var(--gn-t); }
.gn-modal-sub { margin: 0 0 20px; font-size: 14px; line-height: 22px; color: var(--gn-g); }
.gn-modal-outras { margin: 24px 0 0; }
.gn-modal-outras > b {
  display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gn-g2);
}
.gn-modal-nada { margin: 10px 0 0; font-size: 13px; color: var(--gn-g2); }

.gn-ml-lista, #gn-modal-l { list-style: none; margin: 0; padding: 0; }
.gn-ml {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--gn-l);
}
.gn-ml-esq { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.gn-ml-nome { font-size: 16px; color: var(--gn-t); overflow-wrap: anywhere; }
.gn-ml-nome .gn-tld { color: var(--gn-c); font-weight: 700; }
.gn-ml-desc { font-size: 12px; color: var(--gn-g2); }
.gn-ml-preco { flex: 0 0 auto; font-size: 15.5px; font-weight: 700; color: var(--gn-t); white-space: nowrap; }
.gn-ml-preco span { font-size: 12px; font-weight: 400; color: var(--gn-g); }
.gn-ml-accao { flex: 0 0 auto; }
.gn-ml-espera, .gn-ml-fora { font-size: 12.5px; font-weight: 400; color: var(--gn-g2); }
.gn-ml.is-fora .gn-ml-nome { text-decoration: line-through; color: var(--gn-g2); }
.gn-ml.is-fora .gn-ml-nome .gn-tld { color: var(--gn-g2); }

/* A linha do domínio escolhido: destacada, e sem risca por baixo. */
.gn-ml.is-principal {
  background: #f7fbfc; border: 1px solid var(--gn-ac); border-bottom-color: var(--gn-ac);
  padding: 18px 18px; margin-bottom: 4px;
}
.gn-ml.is-principal .gn-ml-nome { font-size: 21px; font-weight: 700; }

.gn-modal-pe {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0; padding: 16px 32px;
  background: #fbfcfd; border-top: 1px solid var(--gn-l);
}
/* Sem nada na lista nao ha rodape nenhum: uma faixa vazia com um botao
   escondido e uma barra cinzenta a dizer nada. */
.gn-modal-pe:empty, .gn-modal-pe.gn-vazio { display: none; }
.gn-modal-total { font-size: 14px; font-weight: 700; color: var(--gn-t); }
#gn-modal-ir[hidden] { display: none; }

@media (max-width: 767px) {
  .gn-modal { padding: 0; align-items: flex-end; }
  /* EM TELEMOVEL A CAIXA NAO SE DESLOCA — ENTRA SO A ESBATER.

     A caixa esta colada ao fundo do ecra. Qualquer `translateY` positivo
     empurra-a para FORA, e a posicao de repouso passa a depender de a
     transicao chegar ao fim. Se ela nao chegar — separador em segundo
     plano, pintura suspensa pelo navegador, animacao interrompida — a
     caixa fica oito pixeis abaixo e o rodape com o botao «Rever a lista»
     fica cortado. Foi medido assim a 12/09/2026, numa transicao presa no
     tempo zero.

     Regra que fica: o que segura a posicao final nunca pode ser a
     animacao. No computador o modal esta ao centro, com folga dos dois
     lados, e ai o deslocamento nao corta nada. */
  .gn-modal-cx, .gn-modal.on .gn-modal-cx { transform: none !important; }
  .gn-modal-cx { max-width: none; max-height: 92vh; padding: 0; }
  .gn-modal-corpo { padding: 24px 18px 8px; }
  .gn-modal-pe { margin: 0; padding: 14px 18px; }
  .gn-ml-accao { flex: 1 1 100%; }
  .gn-ml-accao .gn-bt3, .gn-ml-accao .gn-bt4 { width: 100%; justify-content: center; }
}
/* MOVIMENTO REDUZIDO: mais curto, nao desligado — a politica da casa.
   Um modal que aparece de um fotograma para o outro por cima da pagina
   nao se percebe de onde veio. Fica a subida, sem o `scale` e em metade
   do tempo. */
@media (prefers-reduced-motion: reduce) {
  .gn-modal { transition: opacity .14s linear; }
  .gn-modal-cx { transform: translateY(8px); transition: transform .14s linear; }
  .gn-modal.on .gn-modal-cx { transform: none; }
}

/* A pastilha de onde veio a descrição que está no campo. Quando se
   carrega duas vezes na mesma, a ideia salta para outra — e isto diz
   qual, para a troca não parecer um engano. */
.gn-ex button.gn-ex-usado { border-color: var(--gn-c); color: var(--gn-c); background: #fdf0f4; }