/* ============================================================
   preguntas.css — Página "Preguntas" (4ª de 5).
   Encabezado de página (fondo claro, sin hero, centrado) + acordeón FAQ
   (10 ítems, 1º abierto — reusa .accordion--faq de home.css) + banda CTA.
   Tokens en tokens.css. Verdad visual: knowledge/despiece/preguntas.png.
   Lienzo de página = --bg-areas (mismo off-white cálido que Áreas, sampleo).
   ============================================================ */

/* ---------- Lienzo de la página (header + encabezado + acordeón) ----------
   Preguntas no tiene hero: header en flujo, mismo lienzo claro que el encabezado.
   Se fija con la clase de body .page-preguntas para no afectar otras páginas. */
body.page-preguntas { background: var(--bg-areas); }
.page-preguntas .site-header { background: var(--bg-areas); }

/* ---------- ENCABEZADO DE PÁGINA (centrado, sin imagen) ---------- */
.page-head {
  background: var(--bg-areas);
  padding: 64px 0 36px;          /* aire entre el header y el título */
  text-align: center;
}
.page-head .section-heading { margin-bottom: 0; }
.page-head .section-heading__eyebrow { margin-bottom: 12px; }
.page-head__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: var(--lh-base);
  max-width: 44em;               /* intro de 3 líneas centradas, como el diseño */
  margin: 22px auto 0;
}
/* "Rosso Estudio Jurídico Integral" inline = Jost-SemiBold (span del manifiesto) */
.page-head__lead strong { font-weight: 600; }
/* Bajada final ("Ante cualquier duda…") separada del párrafo anterior */
.page-head__lead--last { margin-top: 14px; }

/* ---------- ACORDEÓN FAQ ----------
   Estilo .accordion--faq (Cardo-Bold 24 #A27EA0, centrado) ya vive en home.css.
   Aquí solo el contenedor de la sección y el ancho propio del FAQ. */
.faq-section {
  background: var(--bg-areas);
  padding: 16px 0 var(--space-section);
}
/* Las preguntas FAQ ocupan más ancho que el acordeón de áreas del Home
   (manifiesto: cuerpo de la 1ª ~705pt ≈ 62% del artboard). Anclar al
   container intermedio para que las preguntas largas no se quiebren feo. */
.faq-section .accordion { max-width: 1000px; }
/* La PREGUNTA va centrada (hereda el center del .accordion__panel), pero el CUERPO
   de la respuesta va alineado a la IZQUIERDA (como el diseño: líneas a ras izq, derecha
   irregular). Scoped a .faq-section para no tocar el acordeón Home (cuyo body va centrado). */
.faq-section .accordion__body { max-width: 760px; text-align: left; }
/* La respuesta abierta tiene 3 párrafos con separación visible (manifiesto:
   gap ~40pt entre bloques). El reset global .accordion__body p{margin:0} los
   pega → restaurar el espaciado SOLO en el FAQ (no afecta el acordeón Home,
   cuyos ítems son de 1 párrafo). */
.faq-section .accordion__body p + p { margin-top: 1em; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .page-head { padding: 40px 0 24px; }
  .page-head__lead { max-width: none; }
}