/* Módulo faq — «¿Tienes dudas?». Artboard 1440: texto de x=78 a 350 y acordeón
   de x=676 a 1357, con filas cerradas de 77px.
   OJO: el hueco inferior grande es para la cabeza de la persona de banda_final,
   que sube sobre esta sección. */

.m-faq {
  --m-faq-tracking: var(--tracking-title);
  /* 21.9px del diseño para la pregunta: entre --text-lg (23) y --text-base. */
  --m-faq-q: clamp(1.125rem, 1rem + .55vw, 1.369rem);
  --m-faq-toggle: 1.78125rem;  /* círculo de 28.5px */
  --m-faq-row-y: 1.53125rem;   /* 24.5px: fila cerrada de 77px con el círculo */
  padding-block: var(--space-6) calc(var(--space-7) + var(--space-4)); /* 64 / 130px */
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.m-faq__inner {
  display: grid;
  grid-template-columns: 46.54% 53.46%;
  /* 120px de aire bajo el acordeon: la persona de banda_final sube ~308px sobre su
     banda y el padding de la seccion solo cubre 140, asi que tapaba la ultima pregunta. */
  margin-bottom: calc(var(--space-7) + var(--space-2));
}

.m-faq__title {
  margin-top: var(--space-2);
  letter-spacing: var(--m-faq-tracking);
  color: var(--color-accent);
}

.m-faq__text {
  max-width: 17em; /* mismos cortes de línea que el diseño */
  margin-top: var(--space-4);
}
.m-faq__text strong { font-weight: var(--weight-bold); }

.m-faq__list { margin: 0; padding: 0; list-style: none; }

.m-faq__item + .m-faq__item { border-top: 1px solid var(--color-line-on-primary); }
.m-faq__item:last-child { border-bottom: 1px solid var(--color-on-dark); }

.m-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--m-faq-row-y);
  font-family: var(--font-display);
  font-size: var(--m-faq-q);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  list-style: none;      /* quita el triángulo nativo (Firefox) */
  cursor: pointer;
}
.m-faq__q::-webkit-details-marker { display: none; }

/* Botón «+»: círculo con borde blanco; abierto, se rellena y el signo pasa a morado. */
.m-faq__q::after {
  content: "+";
  content: "+" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: var(--m-faq-toggle);
  height: var(--m-faq-toggle);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--text-btn);
  font-weight: var(--weight-semibold);
  line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.m-faq__details[open] .m-faq__q::after {
  background: var(--color-on-dark);
  color: var(--color-primary);
}

.m-faq__a {
  padding-bottom: calc(var(--m-faq-row-y) + var(--space-1));
  line-height: var(--leading-body);
}

/* Tablet: el texto de entrada pasa arriba y el acordeón ocupa todo el ancho. */
@media (max-width: 67.99rem) {
  .m-faq { padding-block: var(--section-y) calc(var(--section-y) + var(--space-6)); }
  /* Apilado, la persona de banda_final ya no pisa el acordeon: el aire de abajo sobra. */
  .m-faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); margin-bottom: 0; }
  .m-faq__text { max-width: 33.2em; }
}