/* ==========================================================================
   sections/faq.css
   Acordeón animado (altura animada con grid-template-rows 0fr → 1fr).
   ========================================================================== */
.faq__list { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1rem 0; text-align: left;
  font-family: var(--font-titulo); font-weight: 800; font-size: var(--fs-md);
  transition: color 0.3s;
}
.faq__q:hover { color: var(--naranja); }
.faq__icon {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--linea-2); color: var(--blanco);
  transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: currentColor; transition: transform 0.4s var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--naranja); border-color: var(--naranja); color: var(--negro); transform: rotate(180deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--gris); padding-bottom: 1rem; max-width: 62ch; }
.faq__a p strong { color: var(--blanco); }