/* =========================================================
   PREGUNTAS FRECUENTES (/preguntas-frecuentes/)
   Solo reglas propias de esta página (prefijo fq-). Se carga después de jicalab.css y
   reutiliza sus tokens y componentes: cat-hero, facts, pills, faq, af-book, help-card, link-arrow.
   ========================================================= */

/* ---------- Cabecera: lo esencial en pastillas ---------- */
.fq-hero .cat-hero__head { padding-bottom: clamp(20px, 2.2vw, 28px); }
.fq-facts { padding-bottom: clamp(28px, 3.4vw, 44px); }

/* ---------- Índice de temas: hoja blanca que se queda fija bajo la cabecera ---------- */
.fq-body { position: relative; } /* la barra deja de estar fija al terminar las preguntas */
.fq-jump {
  position: sticky; top: calc(2 * var(--gutter) + var(--header-h)); z-index: 950;
  margin: 0 var(--gutter) var(--gutter); border-radius: var(--r-head);
  background: rgb(255 255 255 / .96); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  transition: box-shadow .3s var(--ease);
}
.fq-jump.is-stuck { box-shadow: 0 14px 40px rgb(30 34 22 / .12); }
.fq-jump__list {
  position: relative; max-width: var(--container); margin-inline: auto; padding: 10px var(--pad);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.fq-jump__list::-webkit-scrollbar { display: none; }
/* centrado que no recorta: si no cabe, se desliza desde el primer tema */
.fq-jump__list > :first-child { margin-left: auto; }
.fq-jump__list > :last-child { margin-right: auto; }
.fq-jump .pill .icon { width: 16px; height: 16px; color: var(--green); transition: color .2s; }
.fq-jump .pill:hover .icon { color: var(--green-dark); }
.fq-jump .pill.is-active .icon { color: var(--white); }
@media (max-width: 1100px) {
  .fq-jump__list {
    /* el borde por el que la fila sigue se funde con .fila (jicalab.css); la hoja no sangra, así que el fundido es más corto */
    padding-inline: 16px; --fila-fade: 40px; scroll-padding-inline: 40px;
  }
}
@media (max-width: 760px) { .fq-jump .pill .icon { display: none; } }
@media (pointer: coarse) { .fq-jump__list { padding-block: 8px; } }

/* ---------- Bloques de preguntas: columna centrada ---------- */
/* Icono del tema (el mismo que en su pastilla del índice) */
.fq-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 2px; background: var(--green-tint); color: var(--green-dark); }
.fq-ico .icon { width: 22px; height: 22px; }
.sheet--cream .fq-ico { background: var(--white); }
.fq-group { scroll-margin-top: calc(var(--gutter) + 64px); } /* el ancla queda por debajo de la barra de temas */
.fq-group .faq { max-width: 860px; margin-inline: auto; }
.fq-group .faq__item, .fq-group :is(summary, a) { scroll-margin-top: calc(var(--gutter) + 96px); } /* el foco nunca queda tapado por la barra */
.fq-group:not(.sheet--cream) .faq__item { background: var(--card); } /* en hoja blanca, la tarjeta se distingue del fondo */
.fq-group .faq__item[open] summary { color: var(--green-deep); }
.fq-more { display: flex; justify-content: center; margin-top: clamp(20px, 2.4vw, 32px); }
.fq-more .link-arrow { text-align: center; text-wrap: balance; }
/* Titulares y etiquetas: cortes de línea limpios en móviles estrechos */
.fq-group .label, .fq-help .lead { text-wrap: balance; }
.fq-group .h-lg .muted-word { white-space: nowrap; }
.fq-nw { white-space: nowrap; }
.fq-help .help-list { grid-auto-rows: auto; } /* si el horario va a dos líneas no estira las demás filas */

/* Respuesta: varios párrafos y listas con el mismo ancho de lectura */
.fq-a { display: grid; gap: 12px; max-width: 70ch; padding: 0 22px 22px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.fq-a p { padding: 0; max-width: none; } /* anula el relleno de .faq__item p: el bloque ya lo lleva */
.fq-a .link-inline:hover { color: var(--green-dark); }
.fq-steps { counter-reset: fq; display: grid; gap: 10px; }
.fq-steps li { counter-increment: fq; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.fq-steps li::before { content: counter(fq); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--green); color: var(--green); display: grid; place-items: center; font: 600 12px/1 var(--font); }
.fq-steps li > span { padding-top: 2px; }
.fq-list { display: grid; gap: 6px; }
.fq-list li { position: relative; padding-left: 20px; }
.fq-list li::before { content: ''; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
@media (max-width: 480px) {
  .faq__item summary { padding-left: 18px; }
  .fq-a { padding-inline: 18px; }
}

/* ---------- ¿No encuentras tu respuesta?: tarjeta de ayuda centrada ---------- */
.fq-help .help-card { width: min(100%, 600px); margin-top: 8px; gap: 18px; padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) clamp(10px, 1.2vw, 14px); text-align: left; }
.fq-help .help-card__title { max-width: 24ch; font-size: clamp(20px, 1.8vw, 24px); text-wrap: balance; }
.fq-help .help-link { padding-block: 12px; }
.fq-help .help-link small { white-space: normal; } /* en móviles estrechos el subtítulo baja de línea, sin cortarse */

/* Pendiente dentro de una respuesta (claims a validar): la etiqueta va en línea, no flotando sobre el bloque */
.fq-a .todo-tag { position: static; display: inline-block; vertical-align: .1em; max-width: none; margin-inline: 6px 2px; }