/* ==================================================
   FAQ
   ================================================== */

.faq-tabs-wrapper {
  position: relative;

  width: 100%;
  max-width: 100%;

  margin-bottom: var(--space-4);

  overflow: hidden;
}

.faq-tabs {
  width: 100%;
  max-width: 100%;

  display: flex;
  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  overscroll-behavior-x: contain;

  -webkit-overflow-scrolling: touch;

  padding: 0 44px 10px 0;

  box-sizing: border-box;

  scrollbar-width: none;
}

.faq-tabs::-webkit-scrollbar {
  display: none;
}

.faq-tab {
  flex: 0 0 auto;

  max-width: calc(100vw - 48px);

  padding: 11px 17px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-pill);

  background: rgba(255, 255, 255, 0.86);

  color: var(--color-text-secondary);

  font-size: var(--font-size-sm);

  font-weight: var(--font-weight-bold);

  white-space: nowrap;

  cursor: pointer;

  box-sizing: border-box;
}

.faq-tab.active {
  background: var(--color-primary);

  border-color: var(--color-primary);

  color: var(--color-white);

  box-shadow: 0 10px 22px rgba(132, 47, 131, 0.2);
}

.faq-scroll-arrow {
  display: none;

  position: absolute;
  top: 0;
  z-index: 3;

  width: 34px;
  height: 42px;

  border: 0;

  border-radius: var(--radius-pill);

  background: rgba(132, 47, 131, 0.94);

  color: var(--color-white);

  font-size: 24px;

  cursor: pointer;

  box-shadow: var(--shadow-sm);
}

.faq-scroll-left {
  left: 0;
}

.faq-scroll-right {
  right: 0;
}

.faq-scroll-arrow.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-list {
  width: 100%;
  max-width: 100%;

  display: grid;
  gap: var(--space-2);

  overflow: hidden;

  box-sizing: border-box;
}

.faq-item {
  width: 100%;
  max-width: 100%;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  box-sizing: border-box;
}

.faq-question {
  width: 100%;
  max-width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: var(--space-3);

  padding: var(--space-3);

  background: transparent;

  color: var(--color-text);

  font-size: var(--font-size-md);

  font-weight: var(--font-weight-bold);

  text-align: left;

  cursor: pointer;

  box-sizing: border-box;
}

.faq-question.active {
  color: var(--color-primary);
}

.faq-question span:first-child {
  min-width: 0;
}

.faq-icon {
  flex: 0 0 30px;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--color-primary-soft);

  color: var(--color-primary);

  font-weight: var(--font-weight-bold);
}

.faq-answer {
  display: none;

  width: 100%;
  max-width: 100%;

  padding: 0 var(--space-3) var(--space-3);

  color: var(--color-text-secondary);

  box-sizing: border-box;
}

.faq-answer.active {
  display: block;
}

.faq-answer p {
  margin: 0;

  line-height: 1.65;
}

/* Seguridad extra para evitar desplazamiento lateral de la página */
body {
  overflow-x: hidden;
}