/* ===== Perguntas frequentes =====
   Feira Regional da Beleza — adicionado 2026-10-15
   Arquivo isolado: remover o <link> e a <section id="faq"> desfaz tudo. */

#faq{
  background:linear-gradient(180deg,#f7e7d6,#fbf1e7);
  padding:72px 0 86px;
}
.faqWrap{ max-width:900px; margin:0 auto; padding:0 20px; }

.faqHead{ text-align:center; margin-bottom:38px; }
.faqKicker{
  display:inline-block;
  font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:#a9752a; margin-bottom:10px;
}
.faqKicker::before,
.faqKicker::after{ content:"—"; margin:0 10px; opacity:.6; }
.faqHead h2{
  margin:0;
  font-size:clamp(26px,4vw,38px); font-weight:800; line-height:1.15; color:#3a1020;
}

.faqItem{
  background:#fff;
  border:1px solid rgba(90,14,42,.12);
  border-radius:14px;
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faqItem[open]{
  border-color:rgba(201,147,58,.5);
  box-shadow:0 10px 30px rgba(90,14,42,.09);
}
.faqItem > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px;
  font-size:15.5px; font-weight:700; color:#3a1020; line-height:1.4;
}
.faqItem > summary::-webkit-details-marker{ display:none; }
.faqItem > summary:hover{ color:#7a1536; }
.faqItem > summary:focus-visible{ outline:2px solid #c9933a; outline-offset:-2px; }
.faqItem > summary::after{
  content:"";
  flex:0 0 auto;
  width:11px; height:11px;
  border-right:2.5px solid #c9933a; border-bottom:2.5px solid #c9933a;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.faqItem[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }

.faqAns{
  padding:0 22px 21px;
  font-size:14.5px; line-height:1.72; color:#6a4a56;
}
.faqAns strong{ color:#3a1020; }
.faqAns a{ color:#a9752a; font-weight:700; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  #faq{ padding:56px 0 64px; }
  .faqItem > summary{ padding:17px 18px; font-size:14.5px; }
  .faqAns{ padding:0 18px 19px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  .faqItem, .faqItem > summary::after{ transition:none; }
}