/**
 * inloff-qna.css — Bloque 8 PDP (Preguntas y Respuestas).
 * Marca Inloff: navy #1B2540 · heart/gold #C5A184 · cream #F8F4ED · línea #E8E1D4.
 * Baseline E1; el pulido fino (skill impeccable) va en E3.
 */

.inloff-qna {
  --qna-navy: #1B2540;
  --qna-gold: #C5A184;
  --qna-gold-deep: #AD8763;
  --qna-cream: #F8F4ED;
  --qna-line: #E8E1D4;
  --qna-ink-soft: #4A4A4A;
  max-width: 760px;
  margin: 48px auto;
  padding: 0 20px;
  color: var(--qna-navy);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.inloff-qna__head {
  text-align: center;
  margin-bottom: 28px;
}
.inloff-qna__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qna-gold-deep);
  font-weight: 600;
  margin-bottom: 10px;
}
.inloff-qna__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--qna-navy);
  text-wrap: balance;
}
.inloff-qna__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--qna-ink-soft);
  margin: 0 auto;
  max-width: 52ch;
}

/* Lista de Q&A */
.inloff-qna__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inloff-qna__item {
  border: 1px solid var(--qna-line);
  border-radius: 12px;
  padding: 18px 20px;
  background: #fff;
}
.inloff-qna__q,
.inloff-qna__a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.inloff-qna__q { font-weight: 600; color: var(--qna-navy); }
.inloff-qna__a { margin-top: 12px; color: var(--qna-ink-soft); }
.inloff-qna__q-mark,
.inloff-qna__a-mark {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.inloff-qna__q-mark { background: var(--qna-navy); color: #fff; }
.inloff-qna__a-mark { background: var(--qna-cream); color: var(--qna-gold-deep); border: 1px solid var(--qna-line); }

.inloff-qna__empty {
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--qna-ink-soft);
  background: var(--qna-cream);
  border: 1px solid var(--qna-line);
  border-radius: 12px;
  padding: 22px;
  margin: 0 0 24px;
}
.inloff-qna__empty strong { color: var(--qna-navy); }

/* Zona de preguntar */
.inloff-qna__ask { text-align: center; }
.inloff-qna__ask-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--qna-navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.inloff-qna__ask-toggle:hover { background: #24304f; transform: translateY(-1px); }
.inloff-qna__ask-toggle svg { width: 18px; height: 18px; }

.inloff-qna__panel { margin-top: 20px; }
.inloff-qna__form-question,
.inloff-qna__form-contact {
  text-align: left;
  border: 1px solid var(--qna-line);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inloff-qna__contact-intro {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--qna-ink-soft);
}
.inloff-qna__search {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--qna-navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.inloff-qna__search:hover { background: #24304f; transform: translateY(-1px); }
.inloff-qna__search[data-loading] { pointer-events: none; opacity: .8; }
.inloff-qna__search[data-loading] .inloff-qna__spinner { display: inline-block; border-top-color: #fff; border-color: rgba(255,255,255,.35); }
.inloff-qna__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.inloff-qna__field { display: flex; flex-direction: column; gap: 6px; }
.inloff-qna__field--full { width: 100%; }
.inloff-qna__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--qna-navy);
}
.inloff-qna__input,
.inloff-qna__textarea {
  width: 100%;
  border: 1px solid var(--qna-line);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--qna-navy);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inloff-qna__input:focus,
.inloff-qna__textarea:focus {
  outline: none;
  border-color: var(--qna-gold);
  box-shadow: 0 0 0 3px rgba(197, 161, 132, .18);
}
.inloff-qna__textarea { resize: vertical; min-height: 76px; }

.inloff-qna__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
}

.inloff-qna__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--qna-ink-soft);
}
.inloff-qna__consent a { color: var(--qna-gold-deep); }
.inloff-qna__check { margin-top: 2px; flex: 0 0 auto; accent-color: var(--qna-navy); }

.inloff-qna__error {
  margin: 0;
  font-size: 13px;
  color: #B4232A;
  font-weight: 500;
}

.inloff-qna__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--qna-gold);
  color: var(--qna-navy);
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.inloff-qna__submit:hover { background: #b8916f; transform: translateY(-1px); }
.inloff-qna__submit[data-loading] { pointer-events: none; opacity: .8; }
.inloff-qna__spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(27,37,64,.3); border-top-color: var(--qna-navy); border-radius: 50%; animation: inloff-qna-spin .7s linear infinite; }
.inloff-qna__submit[data-loading] .inloff-qna__spinner { display: inline-block; }
@keyframes inloff-qna-spin { to { transform: rotate(360deg); } }

.inloff-qna__success {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 20px;
  border: 1px solid var(--qna-line);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--qna-cream);
  text-align: left;
}
.inloff-qna__success-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--qna-navy);
  color: #fff;
}
.inloff-qna__success-icon svg { width: 18px; height: 18px; }
.inloff-qna__success-title { font-weight: 700; margin: 0 0 3px; color: var(--qna-navy); }
.inloff-qna__success-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--qna-ink-soft); }

/* Asistente: respuestas relacionadas */
.inloff-qna__suggestions {
  text-align: left;
  margin-top: 20px;
  border: 1px solid var(--qna-line);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--qna-cream);
}
.inloff-qna__sug-title {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--qna-navy);
}
.inloff-qna__sug-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.inloff-qna__sug-item {
  background: #fff;
  border: 1px solid var(--qna-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.inloff-qna__sug-q { margin: 0 0 5px; font-weight: 600; font-size: 14px; color: var(--qna-navy); }
.inloff-qna__sug-a { margin: 0; font-size: 14px; line-height: 1.6; color: var(--qna-ink-soft); }
.inloff-qna__sug-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.inloff-qna__sug-or { font-size: 13px; color: var(--qna-ink-soft); }
.inloff-qna__sug-ok {
  background: var(--qna-navy); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.inloff-qna__sug-ok:hover { background: #24304f; }
.inloff-qna__sug-ask {
  background: transparent; color: var(--qna-navy); border: 1px solid var(--qna-line);
  border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.inloff-qna__sug-ask:hover { border-color: var(--qna-gold); }
.inloff-qna__sug-done { margin: 0; font-size: 15px; font-weight: 600; color: var(--qna-navy); }

.inloff-qna__more-wrap { text-align: center; margin: -6px 0 28px; }
.inloff-qna__more {
  background: transparent; color: var(--qna-navy); cursor: pointer;
  border: 1px solid var(--qna-line); border-radius: 999px;
  padding: 10px 22px; font-size: 14px; font-weight: 600; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.inloff-qna__more:hover { border-color: var(--qna-gold-deep); background: var(--qna-cream); }

@media (max-width: 560px) {
  .inloff-qna__row { grid-template-columns: 1fr; }
  .inloff-qna { margin: 36px auto; }
}

@media (prefers-reduced-motion: reduce) {
  .inloff-qna__ask-toggle, .inloff-qna__submit, .inloff-qna__search, .inloff-qna__sug-ok, .inloff-qna__sug-ask, .inloff-qna__more { transition: none; }
  .inloff-qna__ask-toggle:hover, .inloff-qna__submit:hover, .inloff-qna__search:hover { transform: none; }
  .inloff-qna__spinner { animation-duration: 0.001ms; }
}