/* Preguntas frecuentes: the last section, above the footer; one line per question and the answer opening under it.
   Mortend Regular/Light in capitals with 0.06em, as the designer's guide asks; the open question in #FF2200 */

.faq {
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  background: var(--void);
}
.faq > * { width: min(100%, 1180px); margin-inline: auto; }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.25rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.faq__q {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.15vw, 1.2rem);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.25s;
}

/* A thin plus that folds into a minus when the answer is open */
.faq__icon { position: relative; flex: none; width: 1.1rem; height: 1.1rem; color: var(--ash); transition: color 0.25s; }
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: rotate 0.35s var(--ease-out);
}
.faq__icon::after { rotate: 90deg; }

/* js/faq.js marks an item open at once (and closed at once), so the colour never waits for the slide */
.faq__item.is-open .faq__icon::after,
html:not(.js) .faq__item[open] .faq__icon::after { rotate: 0deg; }
.faq__item.is-open :is(.faq__q, .faq__icon),
html:not(.js) .faq__item[open] :is(.faq__q, .faq__icon) { color: var(--signal); }
@media (hover: hover) {
  .faq__item summary:hover :is(.faq__q, .faq__icon) { color: var(--signal); }
}

.faq__a { overflow: hidden; }
.faq__a p {
  max-width: 62ch;
  margin: 0;
  padding: 0 0 clamp(1.25rem, 2.4vw, 1.8rem);
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(0.75rem, 0.9vw, 0.95rem);
  letter-spacing: 0.06em;
  line-height: 1.95;
  text-transform: uppercase;
  color: var(--smoke);
}