/* =====================================================================
   Perguntas frequentes (/perguntas-frequentes/): só o que é desta página.
   A sanfona, a introdução ao lado (duvidas__grade / duvidas__intro), a abertura, a cena da casa e a
   chamada do fim são os componentes compartilhados (estilo.css). Aqui ficam:
   - os balõezinhos de pergunta dos três personagens de perfil na cena da abertura;
   - o índice dos assuntos (acende o assunto que está na tela; perguntas.js);
   - o topo de cada assunto (o ícone na cor do assunto + o título).
   ===================================================================== */

/* ── A cena da abertura: a casa flutuante + um balão de pergunta para cada personagem ──
   O embrulho tem o tamanho da própria .cena (as mesmas larguras em cada tela), para os balões
   ficarem presos aos personagens. Os balões surgem um depois do outro e pairam (os mesmos
   movimentos do site: surge e paira). Com "reduzir movimento", ficam parados no lugar. */
.pf-cena { position: relative; width: 100%; max-width: 460px; margin-inline: auto; }
.pf-balao { --d: .6s; position: absolute; z-index: 3; display: grid; place-items: center; width: 48px; height: 44px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 3px var(--cor), 0 12px 22px -10px rgba(11, 74, 115, .45); font: 900 1.55rem/1 var(--titulo); color: var(--texto-cor); animation: surge .6s var(--mola) var(--d) backwards, paira 5s ease-in-out calc(var(--d) + .6s) infinite; }
.pf-balao::after { content: ''; position: absolute; bottom: -7px; left: var(--cauda, 16px); width: 14px; height: 14px; background: #fff; border: solid var(--cor); border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; transform: rotate(45deg); }
.pf-balao--filho { left: 3%; top: -3%; --d: .5s; --cauda: 22px; }            /* o menino voando, em cima e à esquerda */
.pf-balao--aluno { right: 13%; top: 2%; --d: .85s; --cauda: 28px; }         /* a fada, à direita */
.pf-balao--mim { left: -2%; top: 41%; --d: 1.2s; --cauda: 30px; }           /* a ciclista, embaixo e à esquerda */

/* ── A seção das perguntas: o céu claro das dúvidas da inicial, saindo devagar do chão branco da abertura ── */
.pf { background: linear-gradient(180deg, #fff 0, var(--ceu-claro) 180px); }

/* O índice dos assuntos (no computador, preso ao lado das perguntas, como a introdução das dúvidas da inicial) */
.pf-indice .selo { margin-bottom: 14px; }
.pf-assuntos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; }
.pf-assuntos a { --c: var(--azul); display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 16px 10px 10px; border-radius: 20px; color: var(--azul-escuro); font: 800 1.08rem/1.25 var(--titulo); text-decoration: none; transition: background-color .25s, box-shadow .25s, transform .25s var(--mola); }
.pf-assuntos a:hover { background: #fff; box-shadow: var(--sombra); transform: translateX(5px); }
.pf-assuntos a.ativo { background: #fff; box-shadow: var(--sombra); }
.pf-assuntos__icone { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); transition: transform .35s var(--mola), background-color .25s, color .25s; }
.pf-assuntos__icone svg { width: 23px; height: 23px; }
.pf-assuntos a:hover .pf-assuntos__icone { transform: scale(1.06) rotate(-6deg); }
.pf-assuntos a.ativo .pf-assuntos__icone { background: var(--c); color: #fff; }
.pf-assuntos__texto { display: flex; flex-direction: column; }
.pf-assuntos small { margin-top: 2px; font: 700 .88rem/1.3 var(--texto); color: var(--suave); }

/* Cada assunto: o ícone na cor do assunto + o título; embaixo, a sanfona da inicial */
.pf-grupo { --c: var(--azul); }
.pf-grupo + .pf-grupo { margin-top: 48px; }
.pf-grupo__topo { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.pf-grupo__icone { flex: none; width: 50px; height: 50px; margin: 0; border-radius: 16px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); }
.pf-grupo__icone svg { width: 25px; height: 25px; }
.pf-grupo h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.95rem); letter-spacing: -.015em; }

/* ── Telas médias: o índice vai para cima das perguntas, em pílulas ── */
@media (max-width: 960px) {
  .pf-cena { order: -1; width: min(100%, 420px); margin-top: 14px; }   /* (a folga em cima deixa o balão do menino inteiro, mesmo quando paira) */
  .pf-assuntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
  .pf-assuntos a { min-height: 44px; padding: 5px 16px 5px 5px; border-radius: 99px; background: #fff; box-shadow: var(--sombra); font-size: .98rem; }
  .pf-assuntos a:hover { transform: translateY(-2px); }
  .pf-assuntos__icone { width: 34px; height: 34px; border-radius: 50%; }
  .pf-assuntos__icone svg { width: 18px; height: 18px; }
  .pf-assuntos small { display: none; }
  .pf-indice__whats { display: none; }   /* (no celular, o botão da abertura está logo acima e o flutuante aparece depois) */
  .pf-grupo + .pf-grupo { margin-top: 40px; }
}
/* ── Celular ── */
@media (max-width: 760px) {
  .pf-cena { width: min(100%, 350px); margin-top: 0; }
  .pf-balao { width: 36px; height: 33px; border-radius: 12px; font-size: 1.15rem; box-shadow: inset 0 0 0 2.5px var(--cor), 0 10px 18px -10px rgba(11, 74, 115, .45); }
  .pf-balao::after { bottom: -5px; width: 10px; height: 10px; border-width: 0 2.5px 2.5px 0; border-radius: 0 0 3px 0; }
  .pf-balao--filho { left: 26%; top: 9px; --cauda: 6px; }   /* (os dois de cima: abaixo da borda de cima da abertura, */
  .pf-balao--aluno { right: 16%; top: 9px; --cauda: 20px; }   /*  inteiros durante todo o pairar) */
  .pf-balao--mim { left: 1%; top: 33%; --cauda: 16px; }
  .pf { background: linear-gradient(180deg, #fff 0, var(--ceu-claro) 120px); }
  .pf-indice .selo { margin-bottom: 12px; }
  .pf-grupo__topo { gap: 12px; margin-bottom: 14px; }
  .pf-grupo__icone { width: 42px; height: 42px; border-radius: 14px; }
  .pf-grupo__icone svg { width: 21px; height: 21px; }
  .pf-grupo h2 { font-size: 1.42rem; }
}
@media (max-width: 380px) {
  .pf-assuntos a { font-size: .92rem; padding-right: 13px; }
}