/*
  Acordeón de preguntas (portada y Preguntas frecuentes)
  <details>/<summary> nativos: teclado y lector de pantalla sin JS.
  Iconos Phosphor plus/minus alternados por el estado [open].
*/

.accordion {
  border-top: 1px solid var(--rule);
}

.accordion__item {
  border-bottom: 1px solid var(--rule);
}

.accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-6);
  padding-block: var(--padding-5);
  font-family: var(--heading);
  font-size: var(--font-size-5);
  line-height: var(--line-height-9);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  cursor: pointer;
  list-style: none;
}

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

.accordion__question:hover {
  color: var(--primary-700);
}

.accordion__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--border-round);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.accordion__question:hover .accordion__icon {
  background: var(--primary-50);
}

.accordion__icon .icon {
  width: 1rem;
  height: 1rem;
}

.accordion__icon .icon--minus,
.accordion__item[open] .icon--plus {
  display: none;
}

.accordion__item[open] .icon--minus {
  display: block;
}

.accordion__answer {
  padding-bottom: var(--padding-6);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .accordion__item[open] .accordion__answer {
    animation: accordion-in var(--duration-base) var(--easing-enter);
  }
}

@keyframes accordion-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

@media (min-width: 1280px) {
  .accordion__question {
    font-size: var(--font-size-6);
    line-height: var(--line-height-10);
  }
}