/* =====================================================================
   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; }
.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: 78ch; 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 {
  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 {
  flex: 1 1 auto; padding: 0; color: inherit;
}
#comofunciona .thumbnail h3,
#how-it-works .thumbnail h3,
#estilos .thumbnail h3,
#styles .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 {
  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 { 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 { display: none; }
#comofunciona .row > [class*="col-"],
#how-it-works .row > [class*="col-"],
#estilos .row > [class*="col-"],
#styles .row > [class*="col-"] { display: flex; }

/* As quatro perguntas: a mesma altura e a mesma primeira linha. */
.product-features-list .line-bottom.list {
  display: flex; flex-wrap: wrap; align-items: stretch;
  max-width: 1170px; margin: 0 auto; padding: 0 16px; list-style: none;
  box-sizing: border-box;
}
/* O tema poe 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 {
  display: flex; flex-direction: column;
  width: 25%; margin: 20px 0; padding: 0 15px;
}
.product-features-list .line-bottom.list > .item .title {
  line-height: 26px; min-height: 52px;   /* duas linhas, caiba numa ou em duas */
  margin: 18px 0 10px;
}
.product-features-list .line-bottom.list > .item p { flex: 1 1 auto; }

@media (max-width: 991px) {
  .product-features-list .line-bottom.list > .item { width: 50%; }
}
@media (max-width: 600px) {
  .product-features-list .line-bottom.list > .item { width: 100%; }
  .product-features-list .line-bottom.list > .item .title { min-height: 0; }
}


/* ================================================================
   OS FUNDOS ALTERNAM, SEMPRE — 11/09/2026

   Regra do dono: nunca dois blocos seguidos com o mesmo fundo. Não é
   gosto — é o que diz ao leitor onde acaba um assunto e começa o
   seguinte. Três secções brancas encostadas lêem-se como uma só, e foi
   o que esta página tinha (o «garanta-o», o «porquê» e o F.A.Q.).

   A ordem, de cima para baixo, e o que cada uma é:

     1  #gerar          a ferramenta          BRANCO
     2  #comofunciona   os quatro passos      CINZENTO
     3  #gn-perguntas   as quatro perguntas   BRANCO
     4  #estilos        os nove estilos       CINZENTO
     5  #gn-garantir    garanta o nome        BRANCO
     6  #gn-porque      as duas explicações   CINZENTO
     7  .differential   porquê a Interweb     o do tema (escuro)
     8  #gn-faq         as perguntas          BRANCO
     9  .other-products outros produtos       o do tema (cinzento)

   O cinzento é o `#edeff0` do tema, o mesmo do `dark-white` — não é um
   cinzento novo inventado aqui.

   Quem acrescentar uma secção no meio tem de virar as de baixo todas,
   ou partir a alternância. É por isso que esta lista está escrita.
   ================================================================ */

#gerar, #gn-perguntas, #gn-garantir, #gn-faq { background: #fff; }
#comofunciona, #how-it-works,
#estilos, #styles { background: #edeff0; }
/* O `#gn-porque` NAO esta aqui de propósito: o `.hat-details` do tema já
   nasce `#edeff0`. Levava a classe `white` que o pintava de branco — foi
   ela que saiu, em vez de se lhe pôr um fundo por cima. O que está no
   HTML tem de dizer o que a secção é. */

#comofunciona, #how-it-works { padding: 50px 0 30px; }
#estilos, #styles { padding: 50px 0 30px; }
#gn-perguntas { padding: 10px 0 30px; }
#gn-porque { padding-top: 10px; }