/* ==========================================================================
   SECCIÓN FAQ - BASUALTO EVENTOS
   Preguntas frecuentes (acordeón nativo con <details>)
   ========================================================================== */

.faq {
  padding: var(--space-4xl) 0;
  background-color: var(--color-off-white);
}

.faq__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.faq__subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-normal);
}

.faq__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-3xl);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.faq__list {
  max-width: 800px;
  margin: 0 auto;
}

.faq__item {
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.faq__item[open] {
  border-color: var(--color-primary);
}

.faq__question {
  cursor: pointer;
  padding: var(--space-lg);
  font-family: var(--font-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  list-style: none;
  position: relative;
  padding-right: var(--space-2xl);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-weight: var(--font-weight-normal);
}

.faq__item[open] .faq__question::after {
  content: "−";
}

.faq__answer {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  .faq__title {
    font-size: var(--font-size-4xl);
  }
}