/* ==========================================================================
   PERGUNTAS — no padrão do FAQ do iHub (23/09/2026, 22h40)

   O dono, duas vezes: "comportamento errado" e depois "comportamento e o
   design tá todo errado ainda". As duas colunas de cartões soltos morreram:
   uma resposta longa (a garantia, com cinco passos) esticava uma coluna até o
   fim da tela e deixava a outra com um vão enorme, e os passos quebravam uma
   palavra por linha (li em grade de duas colunas: cada pedaço de texto virava
   uma célula).

   Agora é o FAQ do iHub (ihubaffiliates.com.br, #faq): UMA coluna estreita e
   centrada, UMA caixa de borda fina e canto de 2rem, perguntas separadas por
   linha de 1px, "+" azul que gira para "×", item aberto com a borda azul a
   20%. Cinco à vista (uma coluna = 5) e "Ver as outras perguntas (+N)", com o
   N contado pelo CSS. Abrir uma fecha a outra (details name="mgxpq") e o
   secao-faq.js segura a pergunta clicada no mesmo lugar da tela quando a de
   cima fecha.

   Prefixo novo (.mgxpq) de propósito: as regras antigas do .mgxfaq, espalhadas
   por seis folhas, não alcançam mais nada daqui.
   ========================================================================== */
.mgxpq {
  --pq-azul: #00A7FF;
  --pq-azul-claro: #4DC3FF;
  --pq-linha: rgba(255, 255, 255, 0.07);
  --pq-texto: #FFFFFF;
  --pq-apoio: #A1A1AA;
  --pq-atencao: #F59E0B;
  position: relative;
  inline-size: 100%;             /* o pai do construtor é flex: sem isto a caixa
                                    encolhia até o texto e mudava de largura
                                    ao abrir uma resposta */
  box-sizing: border-box;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--pq-apoio);
  padding-block: clamp(4.5rem, 9vh, 6rem) clamp(2rem, 5vh, 3.5rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.mgxpq .mgxpq__caixa { inline-size: 100%; max-inline-size: 46rem; margin-inline: auto; }

/* ---- topo: centrado, como o do iHub ------------------------------------- */
.mgxpq .mgxpq__topo {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  text-align: center;
}
.mgxpq .mgxpq__titulo {
  margin: 0;
  max-inline-size: 18ch;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.03em;
  color: var(--pq-texto) !important;
  text-align: center;
  text-wrap: balance;
}
.mgxpq .mgxpq__titulo b { font-weight: inherit; color: var(--pq-azul) !important; }
.mgxpq .mgxpq__linhafina {
  margin: 0;
  max-inline-size: 36rem;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--pq-apoio);
  text-align: center;
  text-wrap: pretty;
}

/* ---- a caixa única ------------------------------------------------------ */
.mgxpq .mgxpq__grupo { position: relative; display: grid; justify-items: center; }
.mgxpq .mgxpq__gatilho {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
}
.mgxpq .mgxpq__lista {
  inline-size: 100%;
  counter-reset: mgxpq-extra 0;
  border: 1px solid var(--pq-linha);
  border-radius: 2rem;
  overflow: clip;
  background: rgba(6, 9, 14, 0.78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* ---- cada pergunta ------------------------------------------------------ */
.mgxpq .mgxpq-item {
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.mgxpq .mgxpq-item + .mgxpq-item { box-shadow: inset 0 1px 0 var(--pq-linha); }
.mgxpq .mgxpq-item[open] {
  background: rgba(0, 167, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(0, 167, 255, 0.2), inset 0 -1px 0 rgba(0, 167, 255, 0.2);
}
.mgxpq .mgxpq-item:first-child[open] { box-shadow: inset 0 -1px 0 rgba(0, 167, 255, 0.2); }
.mgxpq .mgxpq-item__p {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-block-size: 3.75rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mgxpq .mgxpq-item__p::-webkit-details-marker { display: none; }
.mgxpq .mgxpq-item__p::marker { content: ""; }
.mgxpq .mgxpq-item__txt {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--pq-texto);
  text-align: start;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .mgxpq .mgxpq-item__p:hover .mgxpq-item__txt { color: var(--pq-azul); }
}
.mgxpq .mgxpq-item[open] .mgxpq-item__txt { color: var(--pq-azul-claro); }
/* o "+" do iHub: pequeno, azul, gira 45° e vira "×" */
.mgxpq .mgxpq-item__sinal {
  position: relative;
  flex: none;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.mgxpq .mgxpq-item__sinal::before,
.mgxpq .mgxpq-item__sinal::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(50% - 1px);
  block-size: 2px;
  border-radius: 2px;
  background: var(--pq-azul);
}
.mgxpq .mgxpq-item__sinal::after { transform: rotate(90deg); }
.mgxpq .mgxpq-item[open] .mgxpq-item__sinal { transform: rotate(45deg); }
.mgxpq .mgxpq-item__p:focus-visible { outline: 2px solid var(--pq-azul); outline-offset: -4px; border-radius: 1rem; }

/* ---- a resposta --------------------------------------------------------- */
.mgxpq .mgxpq-item__r-in {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--pq-apoio);
  text-align: start;
}
.mgxpq .mgxpq-item__r-in p { margin: 0 0 0.75rem; }
.mgxpq .mgxpq-item__r-in > :last-child { margin-block-end: 0; }
.mgxpq .mgxpq-item__r-in b { font-weight: 600; color: #E4E4E7; }
.mgxpq .mgxpq-pendente, .mgxpq b.mgxpq-pendente { color: var(--pq-atencao); font-weight: 600; }
/* dentro da resposta a pendência é o texto âmbar; o contorno tracejado e a
   etiqueta de canto (mgx-pendente.css) quebravam a linha no meio do parágrafo */
.mgxpq .mgxpq-item__r-in [data-preencher] { outline: 0; }
.mgxpq .mgxpq-item__r-in [data-preencher]::after { content: none; }

/* passos numerados: o número fica FORA do fluxo do texto (antes era uma grade
   de duas colunas e cada pedaço de texto virava uma célula) */
.mgxpq .mgxpq-passos {
  display: grid;
  gap: 0.625rem;
  margin: 0 0 0.875rem;
  padding: 0;
  list-style: none;
  counter-reset: mgxpq-passo;
}
.mgxpq .mgxpq-passos li {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 0 0 2.25rem;
  counter-increment: mgxpq-passo;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.mgxpq .mgxpq-passos li::before {
  content: counter(mgxpq-passo);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.1rem;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 167, 255, 0.35);
  background: rgba(0, 167, 255, 0.08);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.6875rem;
  color: var(--pq-azul-claro);
}

/* abrir e fechar animados onde o navegador sabe animar o conteúdo do details */
@supports selector(details::details-content) {
  .mgxpq { interpolate-size: allow-keywords; }
  .mgxpq .mgxpq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 420ms cubic-bezier(.16, 1, .3, 1), content-visibility 420ms allow-discrete;
  }
  .mgxpq .mgxpq-item[open]::details-content { block-size: auto; }
  /* quando outra pergunta abre, a que fecha some na hora (sem animar): assim
     a pergunta clicada não sai correndo para cima da tela */
  .mgxpq .mgxpq-item.mgxpq-item--seco::details-content { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mgxpq .mgxpq-item::details-content { transition: none; }
  .mgxpq .mgxpq-item__sinal { transition: none; }
}

/* ---- cinco à vista; o resto atrás do controle --------------------------- */
.mgxpq .mgxpq__lista > .mgxpq-item:nth-child(n + 6) {
  counter-increment: mgxpq-extra;
  block-size: 0;
  overflow: clip;
  visibility: hidden;
  box-shadow: none;
}
.mgxpq .mgxpq__gatilho:checked ~ .mgxpq__lista > .mgxpq-item:nth-child(n + 6) {
  block-size: auto;
  overflow: visible;
  visibility: visible;
  box-shadow: inset 0 1px 0 var(--pq-linha);
}
.mgxpq .mgxpq__gatilho:checked ~ .mgxpq__lista > .mgxpq-item:nth-child(n + 6)[open] {
  box-shadow: inset 0 1px 0 rgba(0, 167, 255, 0.2), inset 0 -1px 0 rgba(0, 167, 255, 0.2);
}

/* o controle: pílula de vidro azul, a mesma do botão da navbar do iHub */
.mgxpq .mgxpq__mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  margin-block-start: 1.25rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 167, 255, 0.3);
  background: rgba(0, 167, 255, 0.1);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.mgxpq .mgxpq__mais::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: -0.2rem;
  border-inline-end: 2px solid var(--pq-azul);
  border-block-end: 2px solid var(--pq-azul);
  transform: rotate(45deg);
  transition: transform 300ms ease;
}
.mgxpq .mgxpq__gatilho:checked ~ .mgxpq__mais::after { transform: rotate(-135deg); margin-block-start: 0.25rem; }
@media (hover: hover) and (pointer: fine) {
  .mgxpq .mgxpq__mais:hover { border-color: rgba(0, 167, 255, 0.6); background: rgba(0, 167, 255, 0.18); }
}
.mgxpq .mgxpq__gatilho:focus-visible ~ .mgxpq__mais { outline: 2px solid #7AD4FF; outline-offset: 3px; }
.mgxpq .mgxpq__n::before { content: counter(mgxpq-extra); }
.mgxpq .mgxpq__mais-fechar { display: none; }
.mgxpq .mgxpq__gatilho:checked ~ .mgxpq__mais .mgxpq__mais-abrir { display: none; }
.mgxpq .mgxpq__gatilho:checked ~ .mgxpq__mais .mgxpq__mais-fechar { display: inline; }

/* ---- celular ------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .mgxpq { padding-block: 4.5rem 2rem; }
  .mgxpq .mgxpq__topo { gap: 0.625rem; margin-block-end: 1.25rem; }
  .mgxpq .mgxpq__lista { border-radius: 1.5rem; }
  .mgxpq .mgxpq-item__p { min-block-size: 3.5rem; padding: 0.875rem 1.125rem; gap: 0.75rem; }
  .mgxpq .mgxpq-item__txt { font-size: 0.9375rem; }
  .mgxpq .mgxpq-item__r-in { padding: 0 1.125rem 1.25rem; }
  .mgxpq .mgxpq__mais { inline-size: 100%; margin-block-start: 1rem; }
}