/* =========================================================================
   OFT-Review FAQ — Tudo sobre o curso preparatório para a Prova do CBO
   Design system OFT: gold + onyx, Orbitron h2, hexágonos ⬢ decorativos.
   Scope sob .ofq pra blindar contra WP/Elementor.
   ========================================================================= */
.ofq,.ofq *,.ofq *::before,.ofq *::after{box-sizing:border-box}

.ofq{
  --gold-200:#F8DB7D; --gold-300:#ECC575; --gold-400:#DBAD6B; --gold-500:#B58851; --gold-700:#6E5230;
  --onyx-1000:#060606; --onyx-900:#131210; --onyx-800:#1A1A1A; --onyx-700:#232220;
  --fg-on-dark:#F4F0EA; --fg-on-dark-2:#C6BFB1;
  --font-display:'Orbitron','Eurostile',system-ui,sans-serif;
  --font-body:'Exo 2','Inter',system-ui,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);

  position:relative;
  padding:clamp(56px,8vh,96px) 24px;
  background:#111111;
  color:var(--fg-on-dark);
  font-family:var(--font-body);
  isolation:isolate;
  overflow:clip;
  -webkit-font-smoothing:antialiased;
}

/* Override WP — h2/h3 brancos */
.ofq h2,.ofq h3{color:var(--fg-on-dark) !important;-webkit-text-fill-color:var(--fg-on-dark) !important;margin:0 !important}
.ofq a,.ofq a:hover,.ofq a:focus,.ofq a:visited{text-decoration:underline;color:var(--gold-300) !important}

/* Hexagons floating decorativos no fundo */
.ofq__hex-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;opacity:.4}
.ofq__hex{
  position:absolute;
  color:var(--gold-700);
  opacity:0;
  will-change:transform,opacity;
  animation:ofqHexFloat 18s ease-in-out infinite;
}
.ofq__hex:nth-child(1){left:6%;top:10%;font-size:48px;animation-delay:0s}
.ofq__hex:nth-child(2){left:88%;top:20%;font-size:36px;animation-delay:4s}
.ofq__hex:nth-child(3){left:14%;top:78%;font-size:40px;animation-delay:8s}
.ofq__hex:nth-child(4){left:82%;top:88%;font-size:54px;animation-delay:12s}
@keyframes ofqHexFloat{
  0%,100%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  20%{opacity:.35}
  80%{opacity:.35}
  50%{transform:translate3d(0,-30px,0) rotate(180deg)}
}

/* ─── HEADER ────────────────────────────────────────────────────── */
.ofq__container{position:relative;z-index:1;max-width:880px;margin:0 auto}
.ofq__header{text-align:center;margin-bottom:40px}
.ofq h2.ofq__heading{
  font-family:var(--font-display) !important;
  font-size:clamp(26px,3.4vw,36px) !important;
  font-weight:400 !important;
  line-height:1.18 !important;
  letter-spacing:0.02em !important;
  color:var(--fg-on-dark) !important;
  -webkit-text-fill-color:var(--fg-on-dark) !important;
  margin:0 0 14px !important;
  text-wrap:balance;
}
.ofq__lede{
  font-family:var(--font-body);
  font-size:16px; line-height:1.6;
  color:var(--fg-on-dark-2);
  margin:0 auto;
  max-width:64ch;
  text-wrap:balance;
}

/* ─── ACCORDION (single-open) ───────────────────────────────────── */
.ofq__list{
  display:flex; flex-direction:column;
  gap:12px;
}

.ofq__item{
  background:linear-gradient(180deg,var(--onyx-800),var(--onyx-900));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .3s var(--ease-out),box-shadow .3s,background .3s;
}
.ofq__item[open]{
  border-color:rgba(219,173,107,.32);
  background:linear-gradient(180deg,#1F1B14,var(--onyx-900));
  box-shadow:
    0 12px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(248,219,125,.08);
}
.ofq__item:hover:not([open]){
  border-color:rgba(219,173,107,.18);
}

/* Summary — clickable header */
.ofq__summary{
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  display:flex; align-items:center;
  gap:16px;
  user-select:none;
  outline:none;
}
.ofq__summary::-webkit-details-marker{display:none}
.ofq__summary::marker{content:""}

.ofq h3.ofq__question{
  font-family:var(--font-body) !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  color:var(--fg-on-dark) !important;
  -webkit-text-fill-color:var(--fg-on-dark) !important;
  margin:0 !important;
  flex:1;
}
.ofq__item[open] h3.ofq__question{color:var(--gold-200) !important;-webkit-text-fill-color:var(--gold-200) !important}

.ofq__icon-wrap{
  width:32px; height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  display:grid; place-items:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(219,173,107,.32),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.ofq__item[open] .ofq__icon-wrap{
  transform:rotate(135deg);
  box-shadow:0 6px 16px rgba(219,173,107,.5),inset 0 1px 0 rgba(255,255,255,.3);
}
.ofq__icon{width:14px;height:14px;color:var(--onyx-1000)}
.ofq__icon-h,.ofq__icon-v{transition:opacity .3s}

/* Answer */
.ofq__answer{
  padding:0 22px 20px;
  font-family:var(--font-body);
  color:var(--fg-on-dark-2);
  line-height:1.65;
  font-size:15px;
}
.ofq__answer p{margin:0 0 12px}
.ofq__answer p:last-child{margin-bottom:0}
.ofq__answer strong{color:var(--fg-on-dark);font-weight:700}
.ofq__answer ul{margin:8px 0 12px;padding-left:0;list-style:none}
.ofq__answer ul li{
  position:relative;
  padding-left:18px;
  margin-bottom:6px;
}
.ofq__answer ul li::before{
  content:"⬢";
  position:absolute;
  left:0; top:1px;
  color:var(--gold-400);
  font-size:10px;
}

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:720px){
  .ofq{padding:48px 16px}
  .ofq__header{margin-bottom:24px}
  .ofq h2.ofq__heading{font-size:24px !important}
  .ofq__lede{font-size:14px}
  .ofq__summary{padding:16px 18px;gap:12px}
  .ofq h3.ofq__question{font-size:15px !important}
  .ofq__icon-wrap{width:28px;height:28px}
  .ofq__icon{width:12px;height:12px}
  .ofq__answer{padding:0 18px 18px;font-size:14px;line-height:1.6}
}

@media (prefers-reduced-motion:reduce){
  .ofq *,.ofq *::before,.ofq *::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* PERF: below-fold — skip render quando offscreen */
@supports (content-visibility:auto){
  #oft-faq{content-visibility:auto;contain-intrinsic-size:auto 800px}
}