/* ==========================================================================
   FAQ (design.md §6.2)
   ========================================================================== */

.px-faq { padding-block: clamp(20px, 3vw, 34px) var(--px-section-y-sm); }

.px-faq__layout {
  display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 64px); align-items: flex-start;
}

/* --- Índice sticky ---------------------------------------------------------- */
.px-faq__index { position: sticky; top: 100px; flex: 1 1 220px; max-width: 300px; min-width: 0; }
.px-faq__index-title { margin-bottom: 16px; }
.px-faq__index nav { display: flex; flex-direction: column; gap: 2px; }
.px-faq__index-link {
  font-size: 14.5px; font-weight: 600; color: var(--px-text-strong);
  padding: 10px 14px; border-radius: var(--px-r-sm);
  border-left: 2px solid var(--px-border);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  min-height: 44px; display: flex; align-items: center;
}
.px-faq__index-link:hover { background: var(--px-blue-tint-2); border-left-color: var(--px-blue); color: var(--px-blue-deep); }

/* --- Preguntas -------------------------------------------------------------- */
.px-faq__body { flex: 999 1 min(100%, 520px); min-width: 0; display: flex; flex-direction: column; gap: clamp(38px, 4.5vw, 58px); }
.px-faq__group-title { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--px-border); }

.px-faq__item { border-bottom: 1px solid var(--px-border-soft); }
.px-faq__summary {
  display: flex; align-items: center; gap: 16px; padding: 22px 4px;
  cursor: pointer; list-style: none; min-height: 44px;
}
.px-faq__summary::-webkit-details-marker { display: none; }
.px-faq__q { flex: 1; font-size: 17px; font-weight: 600; color: var(--px-blue-deep); transition: color .2s ease; }
.px-faq__item[open] .px-faq__q { color: var(--px-blue); }
.px-faq__chevron { flex: none; transition: transform .3s ease; }
.px-faq__item[open] .px-faq__chevron { transform: rotate(180deg); }
.px-faq__answer { padding: 0 4px 26px; max-width: 760px; }

/* --- Buscador ---------------------------------------------------------------- */
.px-faq__search { position: relative; max-width: 520px; }
.px-faq__search--inline { margin-bottom: 8px; }
.px-faq__search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.px-faq__search input {
  width: 100%; font-family: inherit; font-size: 15.5px; color: var(--px-blue-deep);
  background: #fff; border: 1.5px solid var(--px-border-input); border-radius: 10px;
  padding: 16px 18px 16px 48px; outline: none; transition: border-color .25s ease;
}
.px-faq__search input:focus { border-color: var(--px-blue); }
.px-faq__empty { margin-top: 18px; font-size: 14.5px; color: var(--px-text-body); }

/* --- Tarjetas dentro de las respuestas -------------------------------------- */
.px-faq__answer .px-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 14px; margin: 4px 0 14px;
}
.px-faq__answer .px-card-note {
  background: var(--px-blue-tint-2); border: 1px solid var(--px-border);
  border-radius: 12px; padding: 18px 20px;
}
.px-faq__answer .px-card-note--accent { background: var(--px-blue-tint); border-color: #C6DCF0; }
.px-faq__answer .px-card-note--green { background: #F1F8E9; border-color: #D5E9B8; }
.px-faq__answer .px-card-note h4 { font-size: 14.5px; font-weight: 700; color: var(--px-blue-deep); margin-bottom: 8px; }
.px-faq__answer .px-card-note p { font-size: 14.5px; line-height: 1.62; margin-bottom: 0; }
.px-faq__answer .px-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.px-faq__answer .px-stack .px-card-note { display: block; }
.px-faq__answer .px-card-note--warn { background: #FDF3F3; border-color: #F3D9D9; }