/* ==========================================================================
   MGX DIGITAL — Seção 2: as perguntas que decidem a compra
   Par de fragmentos/perguntas.html. CSS puro, zero dependência, zero script.

   CARREGAR DEPOIS dos CSS do construtor de página (o tema mexe em `details`
   e `summary`). Todas as regras usam duas classes de escopo, o que vence a
   especificidade do tema sem `!important` — exceto a cor do título, que o
   construtor pinta por seletor de widget.

   COMPOSIÇÃO POR LARGURA
   ----------------------
   até 37.49rem   uma coluna, 5 perguntas à vista, as outras 8 atrás do
                  controle "ver as outras perguntas".
   37.5rem+       duas colunas, 6 perguntas à vista (múltiplo de 2, sem
                  linha órfã), as outras 7 atrás do mesmo controle.

   O NÚMERO NO BOTÃO É CONTA, NÃO TEXTO
   ------------------------------------
   Escrever "+8" à mão quebraria em uma das duas larguras, porque a sexta
   pergunta entra ou sai do grupo escondido conforme o número de colunas.
   Quem conta é um contador de CSS. Por isso a pergunta escondida NÃO usa
   `display: none`: elemento com `display: none` não gera caixa e não
   incrementa contador. Ela é reduzida a altura zero com `visibility: hidden`
   — invisível, fora do caminho do teclado e da árvore de acessibilidade, sem
   ocupar espaço (a grade usa `row-gap: 0` e o espaçamento vem da margem de
   cada item, que também vai a zero).
   ========================================================================== */

.mgxfaq {
  --mgxfaq-azul: #00A7FF;
  --mgxfaq-azul-claro: #4DC3FF;
  --mgxfaq-azul-fundo: #04141F;
  --mgxfaq-azul-borda: #0C4B6E;
  --mgxfaq-texto: #FFFFFF;
  --mgxfaq-apoio: #D4D4D8;
  --mgxfaq-fraco: #8A8A94;
  --mgxfaq-atencao: #F59E0B;
  --mgxfaq-fundo: #000000;
  --mgxfaq-caixa: #0A0A0D;
  --mgxfaq-caixa-ativa: #0D0D12;
  --mgxfaq-linha: #1D1D24;
  --mgxfaq-raio: 1.25rem;
  --mgxfaq-vao: 0.625rem;

  position: relative;
  isolation: isolate;
  background: var(--mgxfaq-fundo);
  color: var(--mgxfaq-apoio);
  font-family: 'Outfit', system-ui, sans-serif;
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  padding-inline: clamp(1rem, 0.5rem + 2.2vw, 3rem);
}

/* granulação sutil: fundo com textura, não fundo chapado */
.mgxfaq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.mgxfaq__caixa {
  max-inline-size: 72rem;
  margin-inline: auto;
}

/* ---------- cabeçalho ---------------------------------------------------- */

.mgxfaq__topo {
  display: grid;
  gap: 0.75rem;
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.mgxfaq__titulo {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--mgxfaq-texto) !important;
  margin: 0;
  text-wrap: balance;
  max-inline-size: 20ch;
}
.mgxfaq .mgxfaq__titulo b { color: var(--mgxfaq-azul) !important; font-weight:800; }

.mgxfaq__linhafina {
  margin: 0;
  font-size: 1rem;
  line-height:1.6;
  color: var(--mgxfaq-apoio);
  max-inline-size: 62ch;
}

/* ---------- grupo, gatilho e lista --------------------------------------- */

.mgxfaq__grupo { position: relative; }

/* o interruptor do "ver mais": invisível aos olhos, alcançável pelo teclado */
.mgxfaq .mgxfaq__gatilho {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
}

.mgxfaq .mgxfaq__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 0;                 /* o espaçamento vem da margem do item */
  column-gap: var(--mgxfaq-vao);
  counter-reset: mgxfaq-extra 0;
}

/* ---------- cada pergunta ------------------------------------------------ */

.mgxfaq .mgxfaq-item {
  display: block;
  margin-block-end: var(--mgxfaq-vao);
  background: var(--mgxfaq-caixa);
  border: 1px solid var(--mgxfaq-linha);
  border-radius: var(--mgxfaq-raio);
  transition: border-color 220ms ease, background-color 220ms ease;
}
.mgxfaq .mgxfaq-item[open] {
  background: var(--mgxfaq-caixa-ativa);
  border-color: var(--mgxfaq-azul-borda);
}

.mgxfaq .mgxfaq-item__p {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-block-size: 3.375rem;          /* alvo de toque com folga (54px) */
  padding: 0.875rem 1rem 0.875rem 1.125rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mgxfaq .mgxfaq-item__p::-webkit-details-marker { display: none; }
.mgxfaq .mgxfaq-item__p::marker { content: ""; }

.mgxfaq .mgxfaq-item__txt {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:600;
  font-size: 1rem;
  line-height:1.35;
  letter-spacing: -0.012em;
  color: var(--mgxfaq-texto);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.mgxfaq .mgxfaq-item[open] .mgxfaq-item__txt { color: var(--mgxfaq-azul-claro); }

/* o sinal é desenhado em CSS: duas barras que viram "menos" ao abrir.
   Nada de emoji, nada de imagem. */
.mgxfaq .mgxfaq-item__sinal {
  position: relative;
  flex: 0 0 auto;
  inline-size: 1.375rem;
  block-size: 1.375rem;
}
.mgxfaq .mgxfaq-item__sinal::before,
.mgxfaq .mgxfaq-item__sinal::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(50% - 1px);
  block-size: 2px;
  border-radius:10px;
  background: var(--mgxfaq-azul);
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.mgxfaq .mgxfaq-item__sinal::after { transform: rotate(90deg); }
.mgxfaq .mgxfaq-item[open] .mgxfaq-item__sinal::after { transform: rotate(0deg); }

/* foco visível pelo teclado */
.mgxfaq .mgxfaq-item__p:focus-visible {
  outline: 2px solid var(--mgxfaq-azul);
  outline-offset: -3px;
  border-radius: var(--mgxfaq-raio);
}

@media (hover: hover) and (pointer: fine) {
  .mgxfaq .mgxfaq-item:hover { border-color: #2A2A34; }
  .mgxfaq .mgxfaq-item[open]:hover { border-color: var(--mgxfaq-azul-borda); }
}
.mgxfaq .mgxfaq-item__p:active .mgxfaq-item__txt { opacity: 0.75; }

/* ---------- a resposta e a abertura animada ------------------------------ */

/* 0fr → 1fr: a linha da grade cresce do zero à altura do conteúdo, sem
   ninguém medir altura em JavaScript. */
.mgxfaq .mgxfaq-item__r {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(.22, 1, .36, 1);
}
.mgxfaq .mgxfaq-item[open] .mgxfaq-item__r { grid-template-rows: 1fr; }

.mgxfaq .mgxfaq-item__r-in {
  overflow: clip;            /* clip, não hidden: não cria caixa de rolagem */
  min-block-size: 0;
  padding: 0 1.125rem 1.125rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mgxfaq-apoio);
}
.mgxfaq .mgxfaq-item__r-in > :first-child { margin-block-start: 0; }
.mgxfaq .mgxfaq-item__r-in > :last-child { margin-block-end: 0; }
.mgxfaq .mgxfaq-item__r-in p { margin: 0 0 0.75rem; max-inline-size: 66ch; }
.mgxfaq .mgxfaq-item__r-in p:last-child { margin-block-end: 0; }
.mgxfaq .mgxfaq-item__r-in b { color: var(--mgxfaq-texto); font-weight:600; }

.mgxfaq .mgxfaq-pendente {
  color: var(--mgxfaq-atencao);
  font-weight:600;
}

.mgxfaq .mgxfaq-passos {
  margin: 0 0 0.875rem;
  padding: 0;
  list-style: none;
  counter-reset: mgxfaq-passo;
  display: grid;
  gap: 0.5rem;
}
.mgxfaq .mgxfaq-passos li {
  counter-increment: mgxfaq-passo;
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height:1.6;
}
.mgxfaq .mgxfaq-passos li::before {
  content: counter(mgxfaq-passo);
  display: grid;
  place-items: center;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  border-radius: 50%;
  background: var(--mgxfaq-azul-fundo);
  border: 1px solid var(--mgxfaq-azul-borda);
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: 0.75rem;
  color: var(--mgxfaq-azul-claro);
}

/* Camada moderna: onde o navegador conhece ::details-content, o fechamento
   também anima (e não só a abertura). Onde não conhecer, vale o 0fr → 1fr. */
@supports selector(details::details-content) {
  .mgxfaq { interpolate-size: allow-keywords; }
  .mgxfaq .mgxfaq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 340ms cubic-bezier(.22, 1, .36, 1),
      content-visibility 340ms cubic-bezier(.22, 1, .36, 1);
    transition-behavior: allow-discrete;
  }
  .mgxfaq .mgxfaq-item[open]::details-content { block-size: auto; }
  /* quem controla a altura agora é o ::details-content: o embrulho sai do caminho */
  .mgxfaq .mgxfaq-item__r { grid-template-rows: 1fr; transition: none; }
}

/* ---------- o que fica escondido, e o controle que revela ---------------- */

/* celular: da 6ª em diante */
.mgxfaq .mgxfaq__lista > .mgxfaq-item:nth-child(n + 6) {
  counter-increment: mgxfaq-extra;
  block-size: 0;
  margin-block-end: 0;
  border-width: 0;
  overflow: clip;
  visibility: hidden;
}

/* duas colunas: a 6ª volta para a vista (6 é múltiplo de 2, sem órfã) */
@media (min-width: 37.5rem) {
  .mgxfaq .mgxfaq__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgxfaq .mgxfaq__lista > .mgxfaq-item:nth-child(6) {
    counter-increment: none;
    block-size: auto;
    margin-block-end: var(--mgxfaq-vao);
    border-width: 1px;
    overflow: visible;
    visibility: visible;
  }
}

/* expandido */
.mgxfaq .mgxfaq__gatilho:checked ~ .mgxfaq__lista > .mgxfaq-item:nth-child(n + 6) {
  block-size: auto;
  margin-block-end: var(--mgxfaq-vao);
  border-width: 1px;
  overflow: visible;
  visibility: visible;
}

/* um controle só, centralizado sob as colunas */
.mgxfaq .mgxfaq__mais {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  inline-size: fit-content;
  min-block-size: 2.875rem;
  margin: 0.875rem auto 0;
  padding: 0.6875rem 1.375rem;
  border: 1px solid var(--mgxfaq-azul-borda);
  border-radius:999px;
  background: var(--mgxfaq-azul-fundo);
  color: var(--mgxfaq-azul-claro);
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:600;
  font-size: 0.875rem;
  line-height:1.1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .mgxfaq .mgxfaq__mais:hover { background: #062334; border-color: var(--mgxfaq-azul); }
}
.mgxfaq .mgxfaq__mais:active { transform: scale(0.98); }
.mgxfaq .mgxfaq__gatilho:focus-visible ~ .mgxfaq__mais {
  outline: 2px solid var(--mgxfaq-azul);
  outline-offset: 3px;
}

/* o número sai do contador; o texto troca conforme o estado */
.mgxfaq .mgxfaq__n::after { content: counter(mgxfaq-extra); }
.mgxfaq .mgxfaq__mais-fechar { display: none; }
.mgxfaq .mgxfaq__gatilho:checked ~ .mgxfaq__mais .mgxfaq__mais-abrir { display: none; }
.mgxfaq .mgxfaq__gatilho:checked ~ .mgxfaq__mais .mgxfaq__mais-fechar { display: inline; }

/* ---------- folga extra onde há espaço ----------------------------------- */

@media (min-width: 64rem) {
  .mgxfaq { --mgxfaq-vao: 0.75rem; }
  .mgxfaq .mgxfaq-item__p { padding-inline: 1.375rem 1.25rem; }
  .mgxfaq .mgxfaq-item__r-in { padding-inline: 1.375rem; padding-block-end: 1.375rem; }
}

/* ---------- movimento ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mgxfaq__topo,
    .mgxfaq .mgxfaq__lista > .mgxfaq-item,
    .mgxfaq .mgxfaq__mais {
      animation: mgxfaq-entrar linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

@keyframes mgxfaq-entrar {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mgxfaq *,
  .mgxfaq *::before,
  .mgxfaq *::after {
    animation: none !important;
    transition: none !important;
  }
}