/* ── FAQ PAGE ── */

.faq-hero {
  padding: 7rem 5vw 3.5rem;
  background: linear-gradient(135deg, var(--ink) 0%, var(--deep) 100%);
  text-align: center;
}
.faq-hero-inner { max-width: 600px; margin: 0 auto; }
.faq-hero .section-tag { color: var(--gold); }
.faq-hero .section-title { margin: .75rem 0 1.25rem; color: var(--white); }
.faq-hero .section-lead { margin: 0 auto; color: rgba(255,255,255,.72); }

.faq-listado { padding: 3.5rem 0 4.5rem; background: var(--mist); }
.faq-container { max-width: 760px; margin: 0 auto; padding: 0 5vw; }

/* Los anclajes (#enfermedad, #afectado) no deben quedar tapados por el nav fijo */
.faq-bloque {
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 90px;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
}
.faq-bloque:first-child { margin-top: 0; }

/* Acordeón con <details> nativo: abre y cierra sin JS y con teclado */
.faq-item {
  margin-bottom: .75rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 6px rgba(26,26,46,.06);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 1.25rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }

.faq-respuesta { padding: 0 1.25rem 1.25rem; color: var(--text); line-height: 1.7; }
.faq-respuesta p + p,
.faq-respuesta p + ul,
.faq-respuesta ul + p { margin-top: .75rem; }
.faq-respuesta ul { padding-left: 1.25rem; }
.faq-respuesta li + li { margin-top: .4rem; }
.faq-respuesta a { color: var(--accent); }
.faq-respuesta a:hover { color: var(--accent-hover); }

.faq-cta { margin-top: 3rem; text-align: center; }
.faq-cta p { margin-bottom: 1rem; font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }

@media (min-width: 641px) {
  .faq-hero { padding: 9rem 5vw 5rem; }
  .faq-listado { padding: 5rem 0 6rem; }
  .faq-item summary { padding: 1.1rem 1.5rem; font-size: 1.05rem; }
  .faq-respuesta { padding: 0 1.5rem 1.5rem; }
}