/* ---------- 8 · Perguntas frequentes (o papel) ---------- */
/* a transição 7 → 8: o arco amarelo da 7 desce sobre este papel; aqui o papel recebe a luz que sobra dele no alto */
.faq{overflow:clip;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,110px);align-items:start;padding-top:clamp(64px,8vw,110px);
  background:radial-gradient(60% 30% at 50% 0%,rgb(255 198 26 / .16),transparent 70%),var(--papel)}
.faq__lado{position:sticky;top:110px}
.faq__apoio{margin-top:16px;color:var(--tinta-2);font-size:clamp(16px,1.2vw,18px);max-width:26em}
/* "ainda tem dúvidas?": a nota em tinta, com o WhatsApp à mão */
.duvida{margin-top:clamp(28px,3vw,40px);padding:26px;border-radius:24px;background:var(--tinta);color:var(--papel);display:grid;gap:10px;justify-items:start;position:relative;overflow:hidden}
/* o símbolo da UNE como marca d'água, no canto, girando devagar */
.duvida::before{content:"";position:absolute;right:-46px;top:-52px;width:180px;aspect-ratio:175/172;background:var(--sol);opacity:.13;pointer-events:none;-webkit-mask:url("../marca/simbolo.svg") center/contain no-repeat;mask:url("../marca/simbolo.svg") center/contain no-repeat;animation:g-gira 60s linear infinite}
.duvida > *{position:relative}
.duvida b{font:700 22px/1.2 var(--manchete);letter-spacing:-.01em}
.duvida p{color:#b9c6d2;font-size:15px}
.duvida .botao{margin-top:8px}
.duvida .botao svg{width:20px;height:20px}
.duvida__mail{font-size:14px;color:#9fb1c1;text-decoration:underline;text-decoration-color:rgb(159 177 193 / .4);text-underline-offset:3px}
.duvida__mail:hover{color:var(--papel)}

/* o acordeão: cada pergunta é uma linha do caderno; a aberta vira um cartão com o fio de energia na margem */
.perguntas,.perguntas__col{display:grid;gap:10px;align-content:start}
.pergunta{position:relative;border-radius:20px;background:transparent;border:1px solid var(--linha-papel);transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.pergunta::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--sol),var(--folha));transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.pergunta[open]{background:#fffdf8;border-color:transparent;box-shadow:0 1px 0 rgb(10 28 43 / .04),0 24px 48px -30px rgb(10 28 43 / .4)}
.pergunta[open]::before{transform:none}
.pergunta summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 22px 22px 24px;border-radius:20px}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.pergunta__n{font:700 13px/1 var(--texto);letter-spacing:.08em;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.pergunta[open] .pergunta__n{color:#b07d00}
.pergunta h3{font:700 clamp(18px,1.5vw,21px)/1.3 var(--manchete);letter-spacing:-.01em;color:var(--tinta);transition:translate .35s var(--ease)}
.pergunta summary:hover h3{translate:4px 0}
/* o "+" que vira "×": 2 traços num círculo que se enche de tinta */
.pergunta summary > i{position:relative;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--linha-papel);transition:background .4s var(--ease),border-color .4s var(--ease),rotate .5s cubic-bezier(.3,1.4,.5,1)}
.pergunta summary > i::before,.pergunta summary > i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--tinta);transition:background .4s var(--ease)}
.pergunta summary > i::after{rotate:90deg}
.pergunta summary:hover > i{border-color:var(--tinta)}
.pergunta[open] summary > i{rotate:135deg;background:var(--tinta);border-color:var(--tinta)}
.pergunta[open] summary > i::before,.pergunta[open] summary > i::after{background:var(--sol)}
.pergunta__r{padding:0 26px 26px calc(24px + 18px + 2ch)}
.pergunta__r p{color:var(--tinta-2);max-width:60ch}
.pergunta__r p + p{margin-top:12px}
.pergunta__r a{color:var(--tinta);font-weight:700;text-decoration:underline;text-decoration-color:var(--sol);text-decoration-thickness:3px;text-underline-offset:4px}
/* a abertura macia, onde o navegador deixa animar a altura do conteúdo do <details> */
@supports (interpolate-size: allow-keywords){
  .perguntas{interpolate-size:allow-keywords}
  .pergunta::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .5s var(--ease),opacity .4s var(--ease),content-visibility .5s allow-discrete}
  .pergunta[open]::details-content{block-size:auto;opacity:1}
}
@media (max-width:1000px){
  /* no estreito, o lado se desfaz na grade: o título, as perguntas e, por último, a nota do WhatsApp */
  .faq{grid-template-columns:1fr;gap:0}
  .faq__lado{display:contents}
  .faq .sobre{justify-self:start}
  .perguntas{order:1;margin-top:clamp(28px,5vw,40px)}
  .duvida{order:2;margin-top:28px}
}
@media (max-width:560px){
  .pergunta summary{gap:12px;padding:18px 16px 18px 18px}
  .pergunta__n{display:none}
  .pergunta summary{grid-template-columns:minmax(0,1fr) auto}
  .pergunta__r{padding:0 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .pergunta::details-content{transition:none}
  .pergunta summary > i,.pergunta::before{transition:none}
  .duvida::before{animation:none}
}