/* =============================================================================
   WaterProof WEB — Página "Preguntas frecuentes" (/web/faq/).
   Depende de tokens + base + components, y de kb.css para la banda de búsqueda,
   las pastillas de tema y el "limpiar filtros" (ver el comentario de faq.html).

   El acordeón es propio (.wpf-acc) y no el de la Guía (.wpg-acc): aquí el
   cuerpo es texto editorial que llega de Wagtail —párrafos, listas, enlaces— y
   necesita su propia tipografía, no la maqueta de fichas de recurso.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.wpf-hero { text-align:center; padding:64px 0 72px; background:var(--primary-50); }
.wpf-hero h1 { color:var(--primary-900); font-size:clamp(30px,3.6vw,46px); line-height:1.2;
  max-width:22ch; margin:0 auto; }
.wpf-hero p { color:var(--text-3); margin:16px auto 0; font-size:var(--fs-lg); max-width:56ch; }

/* --- Cabecera del cuerpo: temas + recuento -------------------------------- */
.wpf-body { padding:44px 0 88px; }
.wpf-head { display:grid; gap:18px; margin-bottom:36px; }
.wpf-pills { display:flex; flex-wrap:wrap; gap:10px; }
.wpf-count { display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  color:var(--text-3); font-size:var(--fs-sm); font-weight:600; }
/* el "limpiar filtros" viene de kb.css con margen inferior propio del listado */
.wpf-count .wpk-clear { margin-bottom:0; }

/* --- Grupo de tema -------------------------------------------------------- */
.wpf-group { margin-bottom:44px; }
.wpf-group h2 { font-size:var(--fs-3xl); color:var(--primary-900); margin-bottom:20px; }

/* --- Acordeón ------------------------------------------------------------- */
.wpf-acc { display:grid; gap:14px; }
.wpf-acc__item { background:#fff; border:1px solid var(--border-blue); border-radius:var(--rounded-lg);
  overflow:hidden; transition:.15s; }
.wpf-acc__item:hover { border-color:var(--primary-200); }
.wpf-acc__item.is-open { border-color:var(--blue); box-shadow:var(--shadow-sm); }
.wpf-acc__head { width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 22px; background:#fff; border:0; text-align:left; cursor:pointer;
  font-family:var(--wp-font); font-weight:700; font-size:var(--fs-lg); color:var(--primary-900); }
.wpf-acc__toggle { flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--primary-900); color:#fff; display:grid; place-items:center; transition:.15s; }
.wpf-acc__toggle svg { width:16px; height:16px; }
.wpf-acc__toggle .ic-x { display:none; }
.wpf-acc__item.is-open .wpf-acc__toggle { background:var(--blue); }
.wpf-acc__item.is-open .wpf-acc__toggle .ic-x { display:block; }
.wpf-acc__item.is-open .wpf-acc__toggle .ic-plus { display:none; }
.wpf-acc__body { display:none; padding:0 22px 24px; }
.wpf-acc__item.is-open .wpf-acc__body { display:block; }

/* El cuerpo llega de Wagtail: se estiliza por etiqueta, no por clase. */
.wpf-acc__body p { color:var(--text-2); font-size:var(--fs-md); line-height:1.7; }
.wpf-acc__body p + p { margin-top:14px; }
.wpf-acc__body ul, .wpf-acc__body ol { margin:14px 0; padding-left:22px; display:grid; gap:8px; }
.wpf-acc__body ul li { list-style:disc; }
.wpf-acc__body ol li { list-style:decimal; }
.wpf-acc__body li { color:var(--text-2); font-size:var(--fs-md); line-height:1.65; }
.wpf-acc__body h4 { color:var(--primary-900); font-size:var(--fs-lg); margin:18px 0 8px; }
.wpf-acc__body a { color:var(--blue); word-break:break-word; }
.wpf-acc__body img { margin:16px 0; border-radius:var(--rounded-md); }

/* Anclas: al abrir un enlace directo la pregunta no debe quedar bajo el navbar. */
.wpf-acc__item, .wpf-group { scroll-margin-top:calc(var(--nav-h) + 16px); }

/* --- Sin respuesta: correo del equipo ------------------------------------- */
.wpf-ask { display:grid; gap:20px; align-items:center; margin-top:8px; padding:28px;
  background:var(--primary-900); border-radius:var(--rounded-xl); }
@media (min-width:720px){ .wpf-ask { grid-template-columns:1fr auto; } }
.wpf-ask h3 { color:#fff; font-size:var(--fs-2xl); margin-bottom:6px; }
.wpf-ask p { color:rgba(255,255,255,.78); font-size:var(--fs-sm); }
.wpf-ask .wpw-btn { justify-self:start; max-width:100%; }

/* --- Ajustes móvil (<600px): titulares, acordeón y espaciados contenidos ---- */
@media (max-width:599.98px){
  .wpf-hero { padding:44px 0 40px; }
  .wpf-body { padding:32px 0 56px; }
  .wpf-group { margin-bottom:32px; }
  .wpf-group h2 { font-size:var(--fs-2xl); }              /* 32 → 24 */
  .wpf-acc__head { padding:16px; gap:12px; font-size:var(--fs-md); }  /* 18 → 16 */
  .wpf-acc__body { padding:0 16px 20px; }
  .wpf-ask { padding:22px; }
  .wpf-ask .wpw-btn { word-break:break-word; }
}