/*
 * Preguntas frecuentes sobre <details> nativo: abre y cierra sin JavaScript.
 */
@layer components {
  .faq {
    border-block-end: 1px solid var(--color-line);
  }

  .faq__item {
    border-block-start: 1px solid var(--color-line);
  }

  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-m);
    list-style: none; /* quita el triángulo nativo */
  }

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

  .faq__question-text {
    font-family: var(--font-brand);
    font-size: var(--step-1);
    font-stretch: 100%;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    text-wrap: pretty;
  }

  /* Signo más dibujado con dos líneas; al abrir, la vertical gira y queda un menos. */
  .faq__icon {
    position: relative;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--color-accent-text);
  }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    block-size: 0.125rem;
    border-radius: 1px;
    background-color: currentColor;
    transform: translateY(-50%);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .faq__icon::after {
    transform: translateY(-50%) rotate(90deg);
  }

  .faq__item[open] .faq__icon::after {
    transform: translateY(-50%) rotate(0deg);
  }

  .faq__answer {
    max-inline-size: 40rem;
    padding-block-end: var(--space-m);
    color: var(--color-ink-soft);
  }

  /* Contraste forzado (Windows): el signo se dibuja con fondos, que ese modo anula. */
  @media (forced-colors: active) {
    .faq__icon::before,
    .faq__icon::after {
      background-color: CanvasText;
    }
  }

  /*
   * Mejora progresiva: donde el navegador sabe animar hacia «auto», la respuesta
   * se despliega con suavidad. En el resto, abre de golpe.
   */
  @media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
      .faq {
        interpolate-size: allow-keywords;
      }

      .faq__item::details-content {
        block-size: 0;
        overflow: clip;
        transition:
          block-size var(--duration-base) var(--ease-out),
          content-visibility var(--duration-base) allow-discrete;
      }

      .faq__item[open]::details-content {
        block-size: auto;
      }
    }
  }
}