/* ==========================================================================
   PÁGINA: FAQ
   Carrega por último, depois de 06-responsive.css.

   O acordeão é <details>/<summary> nativo, sem JavaScript. Abre e fecha sem
   script, funciona com teclado por padrão, é anunciado corretamente por
   leitor de tela e continua funcionando se o JS falhar. Um acordeão feito à
   mão só teria desvantagens aqui.
   ========================================================================== */

/* overflow-x:clip e não hidden: hidden cortaria o brilho do arco a seco na
   base do cabeçalho, desenhando uma linha reta na página. Ver quem-somos.css */
.faq-abertura{position:relative;overflow-x:clip;padding:150px 0 0;text-align:center}
.faq-abertura .container{display:flex;flex-direction:column;align-items:center}
.faq-abertura .arco{--arco-topo:60px;--arco-alt:420px;--arco-forca:.85}
.faq-abertura h1{font-size:clamp(31px,5vw,58px);font-weight:800;
  max-width:16ch;margin-bottom:24px;letter-spacing:-.025em}
.faq-abertura .intro{font-size:clamp(16px,1.9vw,19px);color:var(--muted);max-width:56ch}

/* A separação entre a abertura e a lista vem de um lugar só.

   Antes vinha de três somados: o padding de baixo da abertura, o padding
   padrão de <section> e mais um padding-top aqui. Dava 150px de vão no
   desktop e 118 no celular, um buraco no meio da página.

   Agora a abertura fecha em zero, a lista não tem padding proprio, e quem
   define a distância é .faq-secao, abaixo. */
.faq-secao{padding-top:52px}
.faq-lista{max-width:820px;margin:0 auto;display:grid;gap:12px}


/* ==========================================================================
   ITEM
   ========================================================================== */
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(165deg,rgba(20,20,24,.7),rgba(8,8,10,.35));
  transition:border-color .3s ease}
.faq-item:hover{border-color:rgba(212,175,55,.3)}
.faq-item[open]{border-color:rgba(212,175,55,.34)}

.faq-item summary{cursor:pointer;list-style:none;
  padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:'Sora';font-weight:600;font-size:17px;line-height:1.4;color:var(--ink)}
/* remove o triângulo padrão nos dois motores */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover{color:var(--gold-hi)}

/* o mais vira × ao abrir, girando 45 graus */
.faq-item .sinal{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(212,175,55,.32);color:var(--gold-hi);
  background:rgba(212,175,55,.07);transition:transform .3s ease,background .3s ease}
.faq-item .sinal svg{width:13px;height:13px}
.faq-item[open] .sinal{transform:rotate(45deg);background:rgba(212,175,55,.18)}

.faq-item .resposta{padding:0 24px 24px;color:var(--muted);
  font-size:16px;line-height:1.72;max-width:72ch}
.faq-item .resposta p + p{margin-top:14px}
.faq-item .resposta strong{color:var(--silver-hi);font-weight:500}


/* ==========================================================================
   FECHO
   Quem chegou até aqui leu objeção. É o momento de oferecer a conversa.
   ========================================================================== */
.faq-fecho{max-width:820px;margin:64px auto 0;padding:42px 38px;text-align:center;
  border-radius:var(--r-xl);border:1px solid rgba(212,175,55,.3);
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(24,22,16,.9),rgba(8,8,10,.85))}
.faq-fecho::after{content:"";position:absolute;top:-55%;right:-12%;width:52%;height:150%;
  background:radial-gradient(circle,rgba(212,175,55,.15),transparent 62%);pointer-events:none}
.faq-fecho p{font-family:'Sora';font-weight:600;position:relative;
  font-size:clamp(18px,2.4vw,25px);line-height:1.36;max-width:28ch;margin:0 auto 26px;
  letter-spacing:-.01em;color:var(--ink)}


@media(max-width:760px){
  .faq-abertura{padding:120px 0 0}
  .faq-secao{padding-top:34px}
  .faq-item summary{padding:19px 18px;font-size:15.5px;gap:14px}
  .faq-item .resposta{padding:0 18px 20px;font-size:15.5px}
  .faq-fecho{padding:32px 22px}
}