/*
 * Preguntas frecuentes.
 *
 * El FAQ de Webflow era una lista corrida de dieciséis preguntas. El copy que
 * mantiene el equipo en web/FQS.md son veintiocho repartidas en siete
 * apartados, y hacía falta un encabezado para esos apartados: el CSS de Webflow
 * solo traía .questions, que es el de cada pregunta.
 */
.faq-seccion {
  color: #000;
  text-transform: uppercase;
  border-top: 1px solid #00000014;
  width: 100%;
  margin: 34px 0 0;
  padding-top: 40px;
  font-family: Montserrat, sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 46px;
}

/* el primero abre la página: ni línea ni aire de separación */
.faq-wrapper > .faq-seccion:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.faq-vineta {
  margin-bottom: 9px;
  padding-left: 1.15em;
  text-indent: -1.15em;
  display: block;
}

.faq-vineta:last-child {
  margin-bottom: 0;
}

.text-faq-p a {
  color: #b41a81;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .faq-seccion {
    margin-top: 24px;
    padding-top: 28px;
    font-size: 32px;
    line-height: 34px;
  }
}

/*
 * El acordeón.
 *
 * Las veintiocho respuestas abiertas a la vez medían 19 804 px —casi
 * veinticinco pantallas—, así que para llegar a la de facturación había que
 * pasar por delante de las otras veintitrés. Plegadas, las siete secciones
 * caben en pantalla y media.
 *
 * Es <details> nativo: sin JavaScript, con teclado, y la respuesta sigue en el
 * HTML aunque se vea plegada, que es lo que necesita el buscador.
 */
.faq-item {
  border-top: 1px solid #00000014;
  width: 100%;
  display: block;
}

.faq-item > summary {
  cursor: pointer;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 20px 0;
  display: flex;
  /* el triángulo del navegador; `list-style` es el dialecto de Firefox */
  list-style: none;
  /*
   * Los 37px de .questions son de cuando la pregunta era el encabezado de su
   * respuesta y no había otra cosa a su lado. Plegada, ocupaba dos y tres
   * líneas: cabían cinco por pantalla y la lista dejaba de poderse ojear, que
   * es justo para lo que sirve un acordeón. Encima competía con los 44px del
   * título de sección, así que no se veía cuál mandaba.
   */
  font-size: 26px;
  line-height: 32px;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

/* el signo de la derecha: + plegada, – abierta */
.faq-item > summary:after {
  content: "+";
  color: #b41a81;
  flex: 0 0 auto;
  font-size: 34px;
  font-weight: 300;
  line-height: 30px;
}

.faq-item[open] > summary:after {
  content: "–";
}

.faq-item > summary:hover {
  opacity: .7;
}

/* sin esto no se ve por dónde va quien navega con el tabulador */
.faq-item > summary:focus-visible {
  outline: 2px solid #b41a81;
  outline-offset: 4px;
}

.faq-item > .text-faq-p {
  padding-bottom: 26px;
}

@media screen and (max-width: 767px) {
  .faq-item > summary {
    gap: 16px;
    padding: 16px 0;
    font-size: 21px;
    line-height: 26px;
  }

  .faq-item > summary:after {
    font-size: 28px;
    line-height: 24px;
  }

  .faq-item > .text-faq-p {
    padding-bottom: 20px;
  }
}