/* ============================================================
   INPRÓS v2 — Dúvidas Frequentes (pg-duvidas-frequentes.css)
   Carregue depois de base.css e paginas.css.

   Momento-assinatura: "a pergunta mais perto de você ganha peso".
   As seis perguntas são uma lista tipográfica (Big Shoulders);
   no desktop, o peso de cada uma responde à distância do cursor
   (o eixo de peso, linguagem da marca). Abrir uma resposta acende
   a marca de partículas ao lado (pg-duvidas-frequentes.js) e o
   texto entra por máscara. O acordeão é <details> nativo: funciona
   sem JS e com teclado; com movimento reduzido nada se move.
   ============================================================ */

/* ---------- âncora da marca ao lado das perguntas ---------- */
.pagina [data-ancora="resposta"] {
  left: 66vw;
  width: 24vw;
  top: 24vh;
  height: 56vh;
}

/* ============================================================
   Lista de perguntas (acordeão)
   ============================================================ */
.faq-sec {
  padding-block: clamp(24px, 6vh, 80px) clamp(110px, 20vh, 220px);
}
.duvidas.faq {
  --peso-base: 560;
  margin-top: 0;
  max-width: min(900px, 60vw);
  border-top: 1px solid var(--linha-forte);
}
.faq details {
  border-bottom: 1px solid var(--linha-forte);
}
.faq summary {
  position: relative;
  min-height: 0;
  padding: clamp(22px, 3.6vh, 36px) 0;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
.faq__pergunta {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: var(--peso, var(--peso-base));
  font-size: clamp(2rem, 1rem + 2.3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.004em;
  color: var(--branco);
  transition: color 0.35s;
}
/* linhas do SplitText (JS): fixas, para o peso não remexer as quebras */
.faq__linha {
  display: block;
}
.faq summary:hover .faq__pergunta {
  color: var(--luz-forte);
}
.faq details[open] .faq__pergunta {
  font-weight: 800;
  color: var(--branco);
}
/* sem o cursor que dá peso (celular, teclado, movimento reduzido), o aberto se destaca pelo peso */
.faq summary::after {
  width: 46px;
  height: 46px;
  background:
    linear-gradient(var(--luz), var(--luz)) center / 16px 1.5px no-repeat,
    linear-gradient(var(--luz), var(--luz)) center / 1.5px 16px no-repeat;
  transition: transform 0.6s var(--ease), background-size 0.6s var(--ease), background-color 0.4s, border-color 0.4s;
}
.faq summary:hover::after {
  border-color: var(--luz);
}
.faq details[open] summary::after {
  background-color: rgba(124, 192, 238, 0.12);
  border-color: var(--luz);
  background-size: 16px 1.5px, 1.5px 0;
}
.faq summary:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- resposta ---------- */
.faq .duvidas__resposta {
  padding: 0 0 clamp(28px, 4.4vh, 44px);
}
.faq .duvidas__resposta p {
  position: relative;
  max-width: 54ch;
  padding-left: clamp(18px, 2vw, 28px);
  font-size: clamp(1.12rem, 1rem + 0.35vw, 1.32rem);
  line-height: 1.62;
  color: var(--branco);
  text-wrap: pretty;
}
/* fio de luz ao lado da resposta: a "resposta acesa" */
.faq .duvidas__resposta p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 2px;
  background: var(--luz);
  transform-origin: top;
}
.faq .duvidas__nfg {
  margin-left: clamp(18px, 2vw, 28px);
  margin-top: 22px;
  width: 168px;
}
/* com movimento: a resposta entra por máscara, e o fio de luz se desenha */
.cinema .faq details[open] .duvidas__resposta > * {
  animation: faq-entra 0.9s var(--ease) both;
}
.cinema .faq details[open] .duvidas__resposta > * + * {
  animation-delay: 0.12s;
}
.cinema .faq details[open] .duvidas__resposta p::before {
  animation: faq-fio 1.1s var(--ease) 0.1s both;
}
@keyframes faq-entra {
  from {
    opacity: 0;
    transform: translateY(18px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 -20% 0);
  }
}
@keyframes faq-fio {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* ============================================================
   Celular
   ============================================================ */
@media (max-width: 899px) {
  .pagina [data-ancora="resposta"] {
    left: 66vw;
    width: 28vw;
    top: calc(var(--topo-h) + 2vh);
    height: 20vh;
  }
  .duvidas.faq {
    max-width: none;
  }
  .faq__pergunta {
    font-size: clamp(1.75rem, 1rem + 3.6vw, 2.6rem);
    line-height: 1.04;
  }
  .faq summary::after {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after,
  .faq__pergunta {
    transition: none;
  }
}