/* /perguntas-frequentes — CSS só desta página (prefixo p-pf-). Clone da a referência
   Celular primeiro. Hero de texto com a busca acesa (a lupa 3D sai do campo; a luz corre pela borda com background-position,
   nunca com caixa animada). Seção 1: no celular, a coluna de apoio centrada em cima e as abas (chips que quebram em linhas) com
   o acordeão embaixo, como a referência faz no celular; a partir de 1024, coluna de 304 grudada à esquerda e as abas em 624 à
   direita (a grade de 944 da a referência). Seção 2: o sino 3D, título e os oito guias em 2 colunas no celular e 4 no computador.
   Movimento só com transform/opacity; "menos movimento" desliga o que repete. */

/* ---------- hero: texto centrado e a busca ---------- */
#topo{overflow:visible;contain:none;z-index:3}
#topo .lp-h1 .line.acc{color:var(--red-hi)}
#topo .lp-sub{justify-self:stretch;display:grid;justify-items:center;margin-top:clamp(8px,1.6vw,20px);font-size:inherit;color:inherit}
.p-pf-busca{position:relative;display:none;width:min(100%,640px);gap:12px;justify-items:center}
.js-ok .p-pf-busca{display:grid}
/* o campo: a borda acesa é um fundo em degradê que corre (background-position), por baixo do miolo preto */
.p-pf-campo{position:relative;display:block;width:100%;border-radius:999px;padding:1.5px;
  background:linear-gradient(100deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.14) 34%,#ff5448 46%,#ffb4ad 50%,#ff5448 54%,rgba(255,255,255,.14) 66%,rgba(255,255,255,.14) 100%) 0 0/300% 100%;
  box-shadow:0 30px 90px -30px rgba(217,45,32,.55)}
.p-pf-in{display:block;width:100%;height:60px;border:0;border-radius:999px;padding:0 22px 0 84px;background:#0a0a0a;
  font:inherit;font-size:1rem;color:#fff;outline:none;-webkit-appearance:none;appearance:none}
.p-pf-in::placeholder{color:rgba(255,255,255,.56)}
.p-pf-in::-webkit-search-cancel-button{filter:invert(1);opacity:.6;cursor:pointer}
.p-pf-campo:focus-within{box-shadow:0 0 0 3px rgba(255,84,72,.35),0 30px 90px -30px rgba(217,45,32,.7)}
.p-pf-lb{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a lupa 3D: a moeda recortada num círculo, maior que o campo, saindo por cima e por baixo */
.p-pf-lupa{position:absolute;z-index:2;left:-6px;top:50%;width:76px;height:76px;margin-top:-38px;border-radius:50%;overflow:hidden;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(255,96,80,.6),0 0 0 6px #000,0 18px 44px -10px rgba(217,45,32,.75)}
.p-pf-lupa img{display:block;width:100%;height:100%;object-fit:cover;object-position:59% 50%}
/* resultados: por cima da página, logo abaixo do campo */
.p-pf-res{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 10px);display:grid;gap:2px;padding:8px;border-radius:24px;text-align:left;
  background:rgba(14,14,14,.94);box-shadow:0 0 0 1px var(--line2) inset,0 30px 80px -20px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-pf-res[hidden]{display:none}
#topo .p-pf-ri{display:grid;justify-items:start;gap:2px;min-height:52px;align-content:center;padding:10px 14px;border-radius:16px;text-decoration:none;color:#fff;transition:background-color .2s}
.p-pf-ri b{font-size:1rem;line-height:1.3;font-weight:600;color:#fff}
.p-pf-ri small{font-size:.875rem;line-height:1.3;color:var(--red-hi)}
.p-pf-ri:focus-visible{outline:2px solid var(--red-hi);outline-offset:-2px;background:rgba(255,255,255,.06)}
.p-pf-vz{display:block;padding:12px 14px;font-size:1rem;line-height:1.4;color:var(--lp-mut2)}
#topo .p-pf-vz a{display:inline-flex;align-items:center;min-height:44px;color:var(--red-hi);text-decoration:underline;text-underline-offset:3px}
.p-pf-st{font-size:.875rem;color:var(--lp-mut)}
.p-pf-at{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;font-size:.875rem;color:var(--lp-mut)}
.p-pf-at>span{margin-right:2px}
.p-pf-at button{min-height:44px;padding:0 14px;border-radius:999px;font-size:.9375rem;font-weight:600;color:var(--lp-mut2);
  box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .2s,color .2s,transform .15s var(--ease)}
.p-pf-at button:active{transform:scale(.96)}
@media (min-width:768px){
  .p-pf-in{height:68px;padding-left:112px;font-size:1.0625rem}
  .p-pf-lupa{left:-14px;width:104px;height:104px;margin-top:-52px}
}
@media (hover:hover) and (pointer:fine){
  #topo .p-pf-ri:hover{background:rgba(255,255,255,.06)}
  .p-pf-at button:hover{background:rgba(255,255,255,.08);color:#fff}
}
@media (prefers-reduced-motion:no-preference){
  .p-pf-campo{animation:p-pf-luz 5s linear infinite}
  .p-pf-lupa{animation:p-pf-entra .8s var(--ease) .2s both}
}
@keyframes p-pf-luz{from{background-position:100% 0}to{background-position:-50% 0}}
@keyframes p-pf-entra{from{opacity:0;transform:translateX(-14px) rotate(-18deg) scale(.86)}to{opacity:1;transform:none}}

/* ---------- 1. as respostas por assunto ---------- */
.p-pf-s1{position:relative;z-index:1}
.p-pf-g{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.p-pf-l{display:grid;justify-items:center;gap:14px;text-align:center}
.p-pf-l .lp-h2{max-width:14em}
.p-pf-l .lp-p{max-width:34em}
.p-pf-ainda{margin-top:-6px}
.p-pf-cta{margin-top:6px}
/* abas: chips que quebram em linhas (nada de trilho), com o número de perguntas */
.p-pf-r .lp-abas{justify-content:center;gap:8px;margin-bottom:8px}
.p-pf-r .lp-abas button{display:inline-flex;align-items:center;gap:8px;padding:0 8px 0 16px}
.p-pf-r .lp-abas small{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;font-size:.8125rem;font-weight:600;
  background:rgba(255,255,255,.1);color:inherit}
.p-pf-r .lp-abas button[aria-selected="true"] small{background:#000;color:#fff}
html:not(.js-ok) .p-pf-r .lp-abas{display:none}
html:not(.js-ok) .p-pf-r .lp-painel[hidden]{display:block}
.p-pf-h3{margin:28px 0 20px;font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);line-height:1;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
/* o acordeão da referência: linha fina em cima de cada pergunta, pergunta em branco a 56%, "+" à direita que vira "×" */
.p-pf-acc{border-bottom:1px solid rgba(255,255,255,.12)}
.p-pf-q{border-top:1px solid rgba(255,255,255,.12);scroll-margin-block:96px}
.p-pf-q summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:16px;min-height:68px;padding:20px 4px 20px 6px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent}
.p-pf-q summary::-webkit-details-marker{display:none}
.p-pf-qt{font-size:1.125rem;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.66);text-wrap:pretty;transition:color .2s}
.p-pf-x{display:grid;place-items:center;width:24px;height:24px;color:#fff;transition:transform .3s var(--ease),color .2s}
.p-pf-x .ic{width:22px;height:22px}
.p-pf-q[open] .p-pf-qt{color:#fff}
.p-pf-q[open] .p-pf-x{transform:rotate(45deg);color:var(--red-hi)}
.p-pf-q summary:focus-visible{outline:2px solid var(--red-hi);outline-offset:2px;border-radius:8px}
.p-pf-a{padding:0 40px 24px 6px}
.p-pf-a p{font-size:1rem;line-height:1.5;color:var(--lp-mut2);text-wrap:pretty}
.p-pf-a a{color:var(--red-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding-block:12px}
.p-pf-guia{margin-top:22px;white-space:normal;text-wrap:balance}
/* resposta achada pela busca: um contorno inteiro que acende e apaga (sem faixa grossa de um lado só) */
.p-pf-q.acha{animation:p-pf-acha 1.6s var(--ease)}
@keyframes p-pf-acha{0%,100%{box-shadow:none}20%{box-shadow:0 0 0 1px rgba(255,84,72,.55),0 0 28px rgba(255,84,72,.16)}}
@media (prefers-reduced-motion:no-preference){
  .p-pf-q[open] .p-pf-a{animation:p-pf-abre .4s var(--ease)}
}
@keyframes p-pf-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){
  .p-pf-q summary:hover .p-pf-qt{color:#fff}
  .p-pf-q summary:hover .p-pf-x{transform:scale(1.12)}
  .p-pf-q[open] summary:hover .p-pf-x{transform:rotate(45deg) scale(1.12)}
}
@media (min-width:768px){
  .p-pf-qt{font-size:1.25rem;line-height:1.1}
  .p-pf-q summary{min-height:73px;padding:24px 0 24px 8px}
  .p-pf-a{padding:0 64px 28px 8px}
}
/* computador: a grade de 944 da referência (304 + 16 + 624), coluna da esquerda grudada enquanto o acordeão rola */
@media (min-width:1024px){
  .p-pf-g{grid-template-columns:304px 624px;justify-content:center;column-gap:16px;align-items:start}
  .p-pf-l{position:sticky;top:104px;justify-items:start;text-align:left}
  .p-pf-l .lp-h2{font-size:2.75rem;line-height:1.02}
  .p-pf-r .lp-abas{justify-content:flex-start;margin-top:4px}
  .p-pf-h3{margin:40px 0 40px}
}

/* ---------- 2. "Central de ajuda": o sino 3D e os guias ---------- */
.p-pf-obj{width:min(558px,86%);margin:0 auto clamp(20px,3vw,40px);aspect-ratio:3/2;
  -webkit-mask:radial-gradient(closest-side,#000 62%,#0000 100%);mask:radial-gradient(closest-side,#000 62%,#0000 100%)}
.p-pf-obj img{display:block;width:100%;height:100%;object-fit:cover}
.p-pf-s2 .lp-head{margin-bottom:clamp(28px,4vw,56px)}
.p-pf-gd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p-pf-gd li{display:grid}
.p-pf-gd a{display:grid;grid-template-rows:auto 1fr auto;gap:12px;min-height:180px;padding:20px 16px;border-radius:24px;
  border:1px solid transparent;
  background:linear-gradient(#111,#0d0d0d) padding-box,linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08)) border-box;
  transition:transform .25s var(--ease),box-shadow .3s}
.p-pf-gd .ic{width:24px;height:24px;color:var(--red-hi)}
.p-pf-gd h3{font-size:1.125rem;line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-pf-gd p{align-self:end;font-size:1rem;line-height:1.3;color:var(--lp-mut)}
.p-pf-gd a:active{transform:scale(.98)}
@media (min-width:768px){
  .p-pf-gd{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .p-pf-gd a{min-height:230px;padding:24px}
  .p-pf-gd h3{font-size:1.25rem;line-height:1.1}
  .p-pf-gd p{line-height:1.25}
}
@media (hover:hover) and (pointer:fine){
  .p-pf-gd a:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,84,72,.45),0 24px 60px -24px rgba(217,45,32,.55)}
}
@media (prefers-reduced-motion:no-preference){
  .p-pf-obj img{animation:p-pf-boia 6s ease-in-out infinite}
}
@keyframes p-pf-boia{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1.5deg)}}