/* =====================================================================
   faq.css — Docokids FAQ accordion (.faq).

   A zero-JS objection-handling accordion built on native <details>/<summary>.
   Editorial styling: hairline dividers between items, no heavy chrome, no
   boxes. The summary is the question; the body is the answer. The native
   triangle marker is replaced with a token-colored +/− glyph.

   Page-agnostic: any page can include _faq.html. Every value is a
   var(--token); the only literal is the marker rotation transition.
   ===================================================================== */
.faq {
  max-width: var(--measure-narrow);
  margin: 0;
}
.faq__item {
  border-top: 1px solid var(--hairline);
}
.faq__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

/* The clickable question row. */
.faq__item summary {
  list-style: none; /* hide default marker (Firefox) */
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-serif);
  font-weight: 600;
  /* Questions are interactive labels, not section titles — one rung below the
     component-title size (--fs-h3) so the section title stays the loud voice. */
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--gris-oscuro);
  transition: color 150ms ease;
}
.faq__item summary::-webkit-details-marker {
  display: none; /* hide default marker (Safari/Chrome) */
}
.faq__item summary:hover {
  color: var(--p-verde);
}

/* Token-colored +/− glyph, drawn as the summary's own marker. */
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1;
  color: var(--p-verde);
  transition: transform 150ms ease;
}
.faq__item[open] summary::after {
  content: "−";
}

.faq__answer {
  padding: 0 0 var(--space-4) 0;
  max-width: var(--measure-prose);
  color: var(--gris-secundario);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.faq__answer p:last-child {
  margin-bottom: 0;
}