/* =====================================================================
   PÁGINA «PERGUNTAS FREQUENTES» — 21/09/2026, a pedido do dono, com o
   desenho e o comportamento da página da HostGator.

   TRÊS PEÇAS:
     .fq-nav    a barra de assuntos, colada por baixo do menu
     .fq-sec    cada assunto: à esquerda o título e os atalhos, à direita
                as perguntas
     .fq-item   a pergunta, que abre e fecha

   O RECUO DA BARRA é o mesmo das outras segundas barras da casa — 15px do
   contentor + 24 de recuo = 39 —, medido e fixado em 21/09/2026. Não é
   escolha: é a regra que faz a barra ler-se como filha do menu.
   ===================================================================== */

/* ---- a barra dos assuntos --------------------------------------- */
.fq-nav { position: sticky; top: var(--fq-topo, 0px); z-index: 20;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #e3e7ec; }
.fq-nav-caixa { position: relative; max-width: 1140px; margin: 0 auto; }
.fq-nav-in { display: flex; align-items: center; gap: 8px; padding: 10px 39px;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: auto; }
.fq-nav-in::-webkit-scrollbar { display: none; }
/* COM OITO ASSUNTOS A BARRA DEIXOU DE CABER (medido: 1300px de conteúdo num
   ecrã de 1300). Rola, mas uma barra cortada a direito parece uma barra que
   acaba ali. Estes dois véus aparecem só do lado onde há mais para ver — é a
   única pista honesta de que se pode arrastar. */
.fq-nav-caixa::before, .fq-nav-caixa::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42px; z-index: 2;
  opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.fq-nav-caixa::before { left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.fq-nav-caixa::after { right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
.fq-nav-caixa.ha-esq::before, .fq-nav-caixa.ha-dir::after { opacity: 1; }
.fq-nav-rot { flex: 0 0 auto; margin-right: 4px; color: #5f6b78; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.fq-nav-in { position: relative; }
.fq-nav a { position: relative; z-index: 1; flex: 0 0 auto;
  padding: 7px 12px; border-radius: 8px; color: #1d2733;
  font-size: 14px; line-height: 18px; text-decoration: none; white-space: nowrap;
  transition: background .24s ease, color .24s ease; }
.fq-nav a:hover { background: #f1f3f6; }
/* o assunto em que se está: é isto que diz ao leitor onde ele está numa
   página comprida, e é a diferença entre uma lista e um índice.
   O TEXTO fica branco aqui; o FUNDO vermelho é a pastilha de baixo. */
.fq-nav a[aria-current="true"] { color: #fff; font-weight: 700; }
.fq-nav a[aria-current="true"]:hover { background: none; }

/* A PASTILHA QUE DESLIZA.
   Até 21/09/2026 cada chip pintava e despintava o seu próprio fundo em 0,16s
   (dono: «está muito rápida»). Além de curto, estava errado: filmado, a meio
   da mudança viam-se DOIS chips meio-vermelhos ao mesmo tempo — um a 0,1 de
   opacidade e o outro a 0,95. Não era uma marca a mudar de sítio, eram duas
   cores a cruzarem-se.
   Agora há UMA pastilha, que anda de um chip para o outro. É o mesmo tempo e
   a mesma curva da resposta que abre, para a página inteira se mover ao mesmo
   compasso. Vive dentro da barra que rola, por isso as medidas são
   `offsetLeft`/`offsetTop`, que já vêm em coordenadas do conteúdo. */
.fq-nav-pilula { position: absolute; left: 0; top: 0; z-index: 0;
  height: 32px; border-radius: 8px; background: var(--fq-c, #d60037);
  opacity: 0; pointer-events: none; }
.fq-nav-pilula.a-postos { transition: transform .34s cubic-bezier(.65, 0, .35, 1),
                                      width .34s cubic-bezier(.65, 0, .35, 1),
                                      opacity .24s ease; }
.fq-nav-pilula.acesa { opacity: 1; }
.fq-nav a:focus-visible { outline: 2px solid var(--fq-c, #d60037); outline-offset: 2px; }

/* A BARRA SÓ COLA se nenhum antepassado cortar com `overflow: hidden` — e o
   `#main` do tema corta. A troca por `overflow: clip` corta na mesma mas NÃO
   cria um contentor de rolagem, que é o que estraga o `sticky`. É a mesma
   receita já provada nas páginas legais (legal-indice.css, 17/09/2026); aqui
   vem com a própria página, que é quem sabe que precisa dela. */
@supports (overflow: clip) {
  #main { overflow: clip; }
}

/* ---- o assunto -------------------------------------------------- */
.fq-sec { padding: 56px 0; }
.fq-sec + .fq-sec { border-top: 1px solid #eef1f4; }
.fq-sec-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.fq-lado h2 { margin: 0 0 20px; color: #1d2733; font-size: 30px; line-height: 36px; font-weight: 700; }
.fq-atalhos { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.fq-atalho { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%;
  padding: 14px 30px 14px 14px; position: relative;
  border: 1px solid #e3e7ec; border-radius: 10px; background: #fff;
  color: #1d2733; font-size: 12.5px; line-height: 16px; font-weight: 700; text-decoration: none;
  transition: background .18s ease, border-color .18s ease; }
.fq-atalho:hover { background: #f7fafd; border-color: #f7fafd; color: #1d2733; }
.fq-atalho-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: #f3f9ff; color: var(--fq-c, #d60037);
  font-size: 15px; transition: background .18s ease; }
/* O `.product-icon` DO TEMA É `position: absolute` — dentro de um círculo ele
   foge para fora e o círculo fica vazio, sem erro nenhum na consola. É a
   mesma correcção que a página do criador de sites já leva. */
.fq-atalho-ico .product-icon { position: static; }
.fq-atalho:hover .fq-atalho-ico { background: #fff; }
/* a seta só aparece ao passar o rato: a dica de que aquilo leva a outro
   sítio, sem ruído permanente na coluna */
.fq-atalho::after { content: '›'; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%) translateX(-6px); opacity: 0;
  color: var(--fq-c, #d60037); font-size: 20px; line-height: 1; font-weight: 700;
  transition: opacity .18s ease, transform .3s ease; }
.fq-atalho:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ---- as perguntas ----------------------------------------------- */
.fq-lista { min-width: 0; }
.fq-item { border-bottom: 1px solid #cdd8df; }
.fq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex: 1 1 auto; min-width: 0;
  width: 100%; padding: 22px 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: #1d2733; font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 700;
  text-align: left; transition: color .22s ease; }
.fq-q:hover { color: var(--fq-c, #d60037); }
.fq-q:focus-visible { outline: 2px solid var(--fq-c, #d60037); outline-offset: 3px; border-radius: 4px; }
.fq-seta { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: transparent;
  transition: transform .28s cubic-bezier(.65, 0, .35, 1),
              background .18s ease, color .22s ease; }
/* a seta ganha um círculo ao passar o rato: sem ele o alvo é invisível e a
   linha inteira parece texto, não um botão */
.fq-q:hover .fq-seta { background: #f1f3f6; }
.fq-q:active .fq-seta { background: #e3e8ee; }
.fq-q:active { opacity: .82; }
.fq-seta::before { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
/* sem o `>`: a pergunta deixou de ser filha directa quando ganhou a linha que
   a partilha com o botão da ligação */
.fq-item[data-aberta="1"] .fq-q { color: var(--fq-c, #d60037); }
.fq-item[data-aberta="1"] .fq-seta { transform: rotate(180deg); }
/* A ALTURA ANIMA-SE POR GRELHA e não por `max-height`: com `max-height` é
   preciso adivinhar um número maior do que o conteúdo, e ou a animação salta
   no fim (número a mais) ou a resposta fica cortada (número a menos). Com
   `grid-template-rows: 0fr → 1fr` o navegador mede sozinho. */
/* A ANIMAÇÃO DA RESPOSTA — e é só isto (dono, 21/09/2026: «deve ser simples»).
   A caixa cresce, o texto aparece. Mais nada: sem deslize, sem esperas
   escalonadas, sem tempos diferentes conforme o tamanho da resposta, e SEM a
   página rolar — tudo isso aqui esteve e só dava na vista.
   0,28s nos dois sentidos. A curva passa metade da altura a meio do tempo,
   o que é o que faz uma coisa parecer que se move em vez de estalar: as duas
   curvas que aqui estiveram, filmadas, ou chegavam a 70% nos primeiros 82ms
   ou ficavam paradas e caíam de repente. */
.fq-r { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.65, 0, .35, 1); }
.fq-item[data-aberta="1"] > .fq-r { grid-template-rows: 1fr; }
.fq-r-in { overflow: hidden; opacity: 0; transition: opacity .28s linear; }
.fq-item[data-aberta="1"] > .fq-r > .fq-r-in { opacity: 1; }

/* ANTES DE O GUIÃO ACORDAR não se anima nada: senão, ao carregar a página,
   as respostas que já nascem abertas apareciam a desvanecer do nada. */
[data-fq]:not(.fq-vivo) .fq-r,
[data-fq]:not(.fq-vivo) .fq-r-in,
[data-fq]:not(.fq-vivo) .fq-seta { transition: none !important; }
.fq-r p, .fq-r li { color: #4a5563; font-size: 16px; line-height: 25px; }
.fq-r p { margin: 0 0 16px; }
.fq-r > .fq-r-in > :last-child { margin-bottom: 22px; }
.fq-r ul, .fq-r ol { margin: 0 0 16px; padding-left: 22px; }
.fq-r li { margin: 0 0 8px; }
.fq-r a { color: var(--fq-c, #d60037); text-underline-offset: 3px; }
.fq-r strong { color: #1d2733; }

/* ---- a procura --------------------------------------------------
   TRINTA E CINCO PERGUNTAS são demasiadas para se lerem todas. Quem chega a
   uma F.A.Q. traz uma dúvida concreta e quer escrevê-la, não percorrer sete
   assuntos. O campo filtra à medida que se escreve — nas perguntas E nas
   respostas, porque a palavra que a pessoa sabe («pró-forma», «nameserver»)
   está muitas vezes só no texto. */
.fq-procura { padding: 28px 0 0; }
.fq-procura-in { position: relative; max-width: 560px; }
.fq-procura input { width: 100%; height: 52px; padding: 0 46px 0 46px;
  border: 1px solid #e3e7ec; border-radius: 999px; background: #fff;
  color: #1d2733; font-family: inherit; font-size: 16px; outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease; }
.fq-procura input::placeholder { color: #8b96a3; }
.fq-procura input:focus { border-color: var(--fq-c, #d60037);
  box-shadow: 0 0 0 4px rgba(214, 0, 55, .12); }
.fq-procura-lupa { position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  color: #8b96a3; font-size: 16px; pointer-events: none; }
/* a tecla de atalho fica escrita, senão ninguém a descobre. Some assim que
   se escreve, e não existe em ecrã de toque, onde não há teclado nenhum. */
.fq-procura-tecla { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  min-width: 22px; padding: 2px 6px; border: 1px solid #e3e7ec; border-radius: 6px;
  background: #f7fafd; color: #8b96a3; font-size: 12px; line-height: 16px;
  text-align: center; pointer-events: none; }
.fq-procura.tem-texto .fq-procura-tecla,
.fq-procura-in:focus-within .fq-procura-tecla { display: none; }
@media (hover: none) { .fq-procura-tecla { display: none; } }
/* o «limpar» só existe quando há o que limpar: um botão permanente numa caixa
   vazia é um botão que não faz nada */
.fq-procura-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #5f6b78; font-size: 20px; line-height: 1; cursor: pointer; }
.fq-procura-x:hover { background: #f1f3f6; }
.fq-procura.tem-texto .fq-procura-x { display: block; }
.fq-conta { margin: 12px 0 0; color: #5f6b78; font-size: 14px; line-height: 20px; }
.fq-vazio { display: none; padding: 34px 0 6px; }
.fq-vazio p { margin: 0 0 14px; color: #4a5563; font-size: 16px; line-height: 25px; }
[data-fq].fq-sem-nada .fq-vazio { display: block; }
[data-fq].fq-sem-nada .fq-sec { display: none; }
/* o que a procura esconde */
[data-fq].fq-a-filtrar .fq-atalhos { display: none; }
.fq-item[hidden], .fq-sec[hidden] { display: none !important; }
.fq-nav a[data-sem="1"] { opacity: .35; }
/* a palavra encontrada fica marcada: sem isto o leitor vê a lista encolher e
   não sabe porquê */
.fq-marca { background: #ffe8ee; color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---- a ligação directa a uma pergunta ---------------------------
   O apoio precisa de mandar alguém a UMA resposta, não à página. O botão só
   aparece ao passar o rato ou com o teclado — não rouba atenção à pergunta. */
.fq-elo { flex: 0 0 auto; width: 30px; height: 30px; margin-top: 19px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: none; color: #8b96a3; cursor: pointer;
  opacity: 0; transition: opacity .18s ease, background .18s ease, color .18s ease; }
.fq-elo:hover { background: #f1f3f6; color: var(--fq-c, #d60037); }
.fq-item:hover .fq-elo, .fq-elo:focus-visible { opacity: 1; }
.fq-elo:focus-visible { outline: 2px solid var(--fq-c, #d60037); outline-offset: 2px; }
.fq-elo.fq-elo-ok { opacity: 1; color: #15803d; }
.fq-q-linha { display: flex; align-items: flex-start; gap: 6px; }
/* num ecrã de toque não há «passar o rato»: ou o botão está lá, ou não existe */
@media (hover: none) { .fq-elo { opacity: .5; } }

/* ---- impressão --------------------------------------------------
   Em papel não há clicar: todas as respostas abertas, e sem a barra nem o
   convite, que não servem numa folha. */
@media print {
  .fq-nav, .fq-procura, .fq-cta, .fq-elo, .fq-vazio { display: none !important; }
  .fq-r { grid-template-rows: 1fr !important; }
  .fq-sec { padding: 18px 0; break-inside: auto; }
  .fq-item { break-inside: avoid; }
  .fq-lado { position: static !important; }
}

/* ---- o convite do fim ------------------------------------------- */
.fq-cta { padding-bottom: 64px; }
.fq-cta-in { display: grid; gap: 22px; padding: 44px 32px; border-radius: 20px;
  background: linear-gradient(135deg, #16202c, #1d2733); }
.fq-cta h2 { margin: 0 0 10px; color: #fff; font-size: 28px; line-height: 36px; font-weight: 700; }
.fq-cta p { margin: 0; color: #e8eef4; font-size: 16px; line-height: 25px; }
.fq-cta-bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 700;
  text-decoration: none !important; white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease; }
.fq-cta-p { background: var(--fq-c, #d60037); color: #fff !important; }
.fq-cta-p:hover { background: var(--fq-c2, #b30030); transform: translateY(-2px); }
.fq-cta-s { border: 1px solid rgba(255,255,255,.38); color: #fff !important; }
.fq-cta-s:hover { background: #fff; border-color: #fff; color: #1d2733 !important; transform: translateY(-2px); }
.fq-cta-accoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---- ecrã largo -------------------------------------------------- */
@media (min-width: 768px) {
  .fq-sec-in { grid-template-columns: minmax(0, 344px) minmax(0, 1fr); gap: 56px; align-items: start; }
  /* a coluna da esquerda acompanha a leitura: o assunto fica à vista
     enquanto se descem as perguntas dele */
  .fq-lado { position: sticky; top: calc(var(--fq-topo, 0px) + var(--fq-nav-alto, 56px) + 24px); }
  .fq-atalho { max-width: 168px; }
  .fq-cta-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 52px 44px; }
}
@media (max-width: 767px) {
  .fq-nav-in { padding: 10px 15px; }
  .fq-sec { padding: 40px 0; }
  .fq-lado h2 { font-size: 24px; line-height: 30px; margin-bottom: 16px; }
  .fq-atalhos { flex-direction: column; }
  .fq-atalho { max-width: 100%; }
  .fq-q { font-size: 15px; line-height: 22px; padding: 18px 0; }
  .fq-r p, .fq-r li { font-size: 14.5px; line-height: 23px; }
  .fq-cta-in { padding: 32px 22px; }
  .fq-cta h2 { font-size: 22px; line-height: 29px; }
}
/* MOVIMENTO REDUZIDO: encurta-se, NÃO se apaga. A política da casa (26/08/2026)
   é que onde obedecer à definição APAGA a funcionalidade se passa por cima, e
   onde ela continua a cumprir o seu papel se respeita. Numa pergunta que abre,
   pôr a transição a 0,01ms não é discrição — é a resposta a aparecer do nada, e
   o leitor perde a ligação entre o que clicou e o que mudou.
   Fica em 0,18s LINEAR, nos dois sentidos: anima na mesma, sem curva e sem
   balanço. É o mesmo critério da rolagem até aos resultados da busca.
   (Dono, 21/09/2026: «ainda não» — e era isto, outra vez.) */
/* MOVIMENTO REDUZIDO: aqui NÃO se encurta nada, por ordem do dono
   (21/09/2026, depois de ver as duas versões lado a lado com a chave
   `?rlxanima=1`: «agora sim, aplique este»).
   É uma decisão defensável e não um desleixo: o que esta página anima é uma
   ALTURA e uma OPACIDADE, durante 0,28s. Não há deslize, nem escala, nem
   parallax, nem nada que atravesse o ecrã — que é o que a definição do
   sistema existe para travar. A chave `?rlxanima=1` continua a ser lida e a
   pôr a classe `fq-mov`, para quando for preciso comparar; hoje dá no mesmo.
   O resto do site mantém a política da casa, que é caso a caso. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.fq-mov) .fq-atalho::after { transition-duration: .12s; }
}