/* 05-ajuda.css
   Ajuda: painel violeta com as perguntas frequentes em sanfona.
*/

/* ajuda: perguntas frequentes */
.help {
  display: grid; align-content: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: clamp(32px, 6vw, 80px);
  background: var(--page);
}
.help-panel {
  position: relative; overflow: hidden;
  max-width: 1080px; width: 100%; margin-inline: auto;
  background: var(--violet); color: var(--cream);
  border-radius: clamp(26px, 3.4vw, 44px);
  padding: clamp(24px, 4.4vw, 60px) clamp(16px, 4.4vw, 60px) clamp(28px, 4.4vw, 60px);
}
.help-panel::before { /* patinhas grandes ao fundo */
  content: ""; position: absolute; right: -40px; top: -30px; width: 260px; aspect-ratio: 1; opacity: .14; rotate: 18deg;
  background: url("../public/svg/fundos/patinha-painel-ajuda.svg") center / contain no-repeat;
}
.help-panel .eyebrow { font-size: 14px; font-weight: 600; color: var(--gold); }
.help-title {
  margin: 6px 0 clamp(20px, 3vw, 36px); text-align: center;
  font: 800 clamp(44px, 7.4vw, 108px)/.86 var(--display); letter-spacing: -.05em;
  color: var(--cream); text-transform: lowercase;
}
.help-title span { display: block; color: var(--gold); }
.faq { display: grid; gap: clamp(10px, 1.4vw, 16px); }
.qa {
  --c: var(--hero);
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--c); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--c);
  transition: box-shadow .25s, translate .25s;
}
.q2 { --c: var(--gold); } .q3 { --c: var(--brown); } .q4 { --c: var(--caramel); } .q5 { --c: var(--gold); }
.qa:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--c); }
.qa summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: clamp(44px, 7vw, 96px) 1fr auto; align-items: center; gap: 12px;
  padding: clamp(10px, 1.4vw, 16px) clamp(12px, 1.6vw, 18px) clamp(10px, 1.4vw, 16px) clamp(14px, 2vw, 26px);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: 18px; }
.qa .n { font: 800 clamp(34px, 4.6vw, 64px)/.8 var(--display); color: var(--c); opacity: .45; letter-spacing: -.04em; }
.qa .q { font: 700 clamp(16px, 1.8vw, 22px)/1.15 var(--display); letter-spacing: -.02em; color: var(--brown); opacity: .75; }
.qa .tog {
  width: clamp(34px, 3.2vw, 42px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--hero); color: var(--cream);
  transition: rotate .3s, background .2s;
}
.qa .tog svg { width: 60%; height: 60%; }
.qa[open] .n { opacity: 1; }
.qa[open] .q { opacity: 1; font-size: clamp(18px, 2.2vw, 28px); color: var(--ink); }
.qa[open] .tog { rotate: 180deg; background: var(--violet); }
.ans {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 40px);
  padding: 0 clamp(18px, 2.6vw, 34px) clamp(16px, 2vw, 24px) calc(clamp(14px, 2vw, 26px) + clamp(44px, 7vw, 96px) + 12px);
  animation: open .35s ease-out;
}
.ans p { margin: 0; font-size: clamp(13px, 1.15vw, 15px); line-height: 1.5; color: var(--ink); }
@keyframes open { from { opacity: 0; translate: 0 -6px; } }

/* ajuda compacta: título à esquerda, perguntas à direita */
.help { padding-block: clamp(40px, 6vw, 80px); }
.help-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: start; padding: clamp(24px, 3.6vw, 48px); }
.help-head { display: grid; gap: 12px; justify-items: start; position: relative; z-index: 1; }
.help-title { margin: 0; text-align: left; font-size: clamp(40px, 5.2vw, 76px); }
.help-head p { margin: 0; max-width: 30ch; font-size: 15px; line-height: 1.4; opacity: .9; }
.help-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  background: var(--gold); color: var(--brown); text-decoration: none;
  font: 800 15px/1 var(--display); padding: .85em 1.3em; border-radius: 999px; transition: background .2s;
}
.help-more svg { width: 16px; height: 16px; }
.help-more:hover { background: var(--cream); }
.help-more:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.faq { gap: 10px; position: relative; z-index: 1; }
.qa { border-width: 2.5px; border-radius: 18px; box-shadow: 4px 4px 0 var(--c); }
.qa:hover { box-shadow: 6px 6px 0 var(--c); }
.qa summary { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px 12px 10px 16px; }
.qa .n { font-size: clamp(26px, 2.6vw, 36px); }
.qa .q { font-size: clamp(15px, 1.35vw, 18px); }
.qa[open] .q { font-size: clamp(16px, 1.5vw, 20px); }
.qa .tog { width: 32px; }
.ans { grid-template-columns: 1fr; gap: 8px; padding: 0 18px 14px 66px; }
.ans p { font-size: 14px; }