/* =========================================================
   FAQ · acordeón de preguntas frecuentes
   ========================================================= */

.faq { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item button {
  width: 100%; background: none; border: 0; color: var(--color-text);
  font: inherit; font-size: 19px; font-weight: 500; letter-spacing: -.01em; text-align: left;
  padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer;
}
.faq-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-line-strong);
  position: relative; transition: transform .35s, border-color .3s;
}
.faq-icon:before, .faq-icon:after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px;
  background: var(--color-text); transform: translate(-50%, -50%);
}
.faq-icon:after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s; }
.faq-item.is-open .faq-icon { border-color: var(--color-accent); }
.faq-item.is-open .faq-icon:after { transform: translate(-50%, -50%) rotate(0); }

.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-answer p { padding: 0 50px 28px 0; color: var(--color-text-muted); font-size: 16px; }

@media (max-width: 720px) {
  .faq-item button { font-size: 17px; }
}