/* ==========================================================================
   Andréia Freitas — PERGUNTAS FREQUENTES
   <details>/<summary> nativos (acessível e sem JavaScript).
   Consome os tokens de system.css e reaproveita .af-wrap e .af-arrow.
   Valores vindos do protótipo aprovado.
   ========================================================================== */

.af-faq{
  background:var(--areia);
  padding:110px 0;
  font-family:var(--display);
  line-height:1.2;
}
.af-faq__grid{
  display:grid;
  grid-template-columns:4fr 8fr;
  gap:80px;
  align-items:start;
}

/* ---------- coluna esquerda ---------- */
.af-faq__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 20px;
  color:var(--gold-text); /* dourado como texto em fundo claro */
  font-size:13px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.af-faq__eyebrow::before{
  content:"";
  width:30px;
  height:1px;
  background:var(--gold);
}
.af-faq__title{
  margin:0;
  font-weight:500;
  color:var(--ink);
  font-size:clamp(38px, 3.4vw, 52px);
  line-height:1.08;
  letter-spacing:-.01em;
}
.af-faq__title em{ color:var(--gold-text); }
.af-faq__sub{
  margin:22px 0 0;
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.75;
  color:var(--text);
  max-width:30ch;
}
.af-faq__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:26px;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:500;
  padding-bottom:6px;
  border-bottom:1px solid var(--gold);
  transition:gap .25s;
}
.af-faq__link:hover{ gap:14px; }

/* ---------- lista ---------- */
.af-faq__list{ border-top:1px solid rgba(34,51,63,.16); }
.af-faq__item{ border-bottom:1px solid rgba(34,51,63,.16); }
.af-faq__item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px 0;
  font-weight:500;
  font-size:clamp(21px, 1.8vw, 25px);
  line-height:1.3;
  color:var(--ink);
}
.af-faq__item summary::-webkit-details-marker{ display:none; }
.af-faq__item summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:4px;
}

/* círculo dourado fino com + ; aberto: preenchido, e o + vira − */
.af-faq__icon{
  position:relative;
  width:36px;
  height:36px;
  flex:none;
  border-radius:50%;
  border:1px solid rgba(181,169,100,.7);
  transition:background .25s, border-color .25s;
}
.af-faq__icon::before,
.af-faq__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1.4px;
  background:var(--gold);
  transform:translate(-50%,-50%);
  transition:transform .3s ease, background .25s;
}
.af-faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.af-faq__item[open] .af-faq__icon{
  background:var(--gold);
  border-color:var(--gold);
}
.af-faq__item[open] .af-faq__icon::before,
.af-faq__item[open] .af-faq__icon::after{ background:var(--cream); }
.af-faq__item[open] .af-faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg); }
.af-faq__item summary:hover .af-faq__icon{ border-color:var(--gold); }

.af-faq__answer{
  margin:0;
  padding:0 72px 28px 0;
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.8;
  color:var(--text-2);
  max-width:62ch;
}

@media (max-width:1023px){
  .af-faq{ padding:72px 0; }
  .af-faq__grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .af-faq__sub{ max-width:48ch; }
  .af-faq__item summary{
    padding:20px 0;
    font-size:20px;
  }
  .af-faq__answer{
    padding-right:0;
    font-size:15px;
  }
}
@media (max-width:767px){
  .af-faq__link{ min-height:44px; font-size:15px; }
}

/* o reset global de movimento reduzido zera todo transform; aqui o transform
   é o desenho do ícone (+ e −), não animação */
@media (prefers-reduced-motion:reduce){
  .af-faq__icon::before,
  .af-faq__icon::after{ transition:none; }
  .af-faq__icon::before{ transform:translate(-50%,-50%) !important; }
  .af-faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg) !important; }
  .af-faq__item[open] .af-faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg) !important; }
}