/* ==========================================================================
   11-faq.css — perguntas frequentes (intro + acordeão) + tira hachurada
   Ref: desktop-slice-6 y866→1000 + desktop-slice-7 y0→661 · mobile-slice-5 y690→
   1440: célula 731px (y6866–7596); intro x97–700; lista x738–1343 (605);
   itens de 77px (o 5º, de 2 linhas, 105px) → linhas em 6986/7063/7140/7217/7294/7399/7476.
   ========================================================================== */

/* ---------- grade da célula (SPEC §4.12 · BUILD_PLAN 11-faq) ---------- */
.faq__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-9);                     /* 36 */
  padding:var(--sp-16) 0;              /* 64 0 */
}
.faq__intro{
  display:flex;flex-direction:column;
  gap:var(--sp-6);
  padding:0 var(--sp-8);               /* 0 32 */
}
.faq__list{padding:0}

/* ---------- item ---------- */
.faq__item{
  border-top:var(--border-1);
  overflow:hidden;
  transition:background-color var(--dur-fast) var(--ease-default);
}
.faq__item:last-child{border-bottom:var(--border-1)}
@media (hover:hover){.faq__item:hover{background:var(--c-surface-soft)}}

/* o <h3> só existe para a hierarquia; quem pinta é .faq__t (o botão herda do heading) */
.faq__h{font:inherit;letter-spacing:normal;color:inherit}

/* pergunta: 24px de padding + 20px/1.4 = 77px fechado (105 em 2 linhas) */
.faq__q{
  display:flex;align-items:center;
  gap:var(--sp-4);
  width:100%;
  padding:var(--faq-item-pad);
  background:none;border:0;
  text-align:left;cursor:pointer;
  transition:transform 120ms ease-out;
}
.faq__q:active{transform:scale(var(--active-scale))}
.faq__q:focus-visible{outline:2px solid var(--c-ink-900);outline-offset:-2px}
.faq__t{
  font:var(--fw-semibold) var(--fs-h3-card)/var(--lh-faq) var(--font-display);
  letter-spacing:var(--ls-card);
  color:var(--c-ink-800);
}

/* "+" lime 24px → gira 45° (vira ×) quando aberto */
.faq__plus{
  width:var(--icon-lg);height:var(--icon-lg);
  flex-shrink:0;
  color:var(--c-lime);
  transition:transform var(--dur-base) var(--ease-default);
}
.faq__q[aria-expanded="true"] .faq__plus{transform:rotate(45deg)}

/* ---------- resposta: grid-template-rows 0fr → 1fr (SPEC §5.2 #9) ---------- */
.faq__a{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows var(--dur-base) var(--ease-default),
             opacity var(--dur-base) var(--ease-default);
}
.faq__a>div{
  overflow:hidden;min-height:0;
  visibility:hidden;                                 /* tira o texto fechado da árvore de acessibilidade */
  transition:visibility 0s linear var(--dur-base);
}
.faq__a.is-open{grid-template-rows:1fr;opacity:1}
.faq__a.is-open>div{visibility:visible;transition-delay:0s}
/* recuo de 64px: alinha com o texto da pergunta (24 padding + 24 ícone + 16 gap) */
.faq__a p{padding:var(--sp-3) var(--sp-6) var(--sp-6) var(--sp-16)}

/* ---------- ≥769: bordas laterais nos itens, lista com px 32 ---------- */
@media (min-width:769px){
  .faq__list{padding:0 var(--sp-8)}
  .faq__item{border-left:var(--border-1);border-right:var(--border-1)}
}

/* ---------- ≥1440: 2 colunas 1fr 1fr, py 120 / px --cell-px (64 → 104 em xxl) ---------- */
@media (min-width:1440px){
  .faq__grid{
    grid-template-columns:1fr 1fr;
    padding:var(--sp-30) var(--cell-px);
  }
  .faq__intro,.faq__list{padding:0}
}

/* SPEC §5.4 / 04-motion §8.2: a altura do painel é funcional — continua animando.
   O que some é a rotação do "+" (base.css:188) e o scale do :active. */
@media (prefers-reduced-motion:reduce){
  .faq__a{transition:grid-template-rows var(--dur-base) var(--ease-default),
                     opacity var(--dur-fast) ease}
  .faq__a>div{transition:none}
  .faq__q:active{transform:none}
}