/* preguntas · equivalente a /faq/ de 619: un título centrado y una lista plana de 5 preguntas.
   La fila (.row) y el módulo (20 px) vienen de la base; aquí solo va el acordeón. */

/* 15-oct: un ícono discreto sobre el título (sistema de íconos de la base, sección 21) */
.page-preguntas .faq > .icon { display: block; width: 40px; height: 40px; margin: 0 auto 18px; }
@media (max-width: 767.98px) { .page-preguntas .faq > .icon { width: 36px; height: 36px; margin-bottom: 14px; } }

.page-preguntas .faq__title {
  margin: 0 0 40px;
  text-align: center;
  color: var(--c-ink);
}

.page-preguntas .faq__list {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* línea de 1 px solo ENTRE preguntas */
.page-preguntas .faq__item {
  padding: 20px 0;
  border-top: 1px solid var(--c-ink);
}
.page-preguntas .faq__item:first-child { border-top: 0; }

/* pregunta: 24/30 en todos los anchos, acento, sin mayúsculas ni icono */
.page-preguntas .faq__q {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--ls-fix-text);
  text-transform: none;
  color: var(--c-accent);
}
.page-preguntas .faq__q button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 20px 40px;             /* 40 px a ambos lados: el signo va a la derecha y el texto sigue centrado en el eje */
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: center;
  color: inherit;
  cursor: pointer;
  transition: none;               /* el cambio de color es instantáneo */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) {
  .page-preguntas .faq__q button:hover { color: var(--c-ink); }
}
.page-preguntas .faq__q button:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }

/* signo fino: dos trazos de 1 px y 14 px, el mismo trazo del aspa del panel. No es un icono.
   Al abrir, el trazo vertical gira 90° y se funde: queda un menos. */
.page-preguntas .faq__q button::before,
.page-preguntas .faq__q button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 1px;
  margin-top: -.5px;
  background: var(--c-accent);
  pointer-events: none;
}
.page-preguntas .faq__q button::after {
  transform: rotate(90deg);
  transition: transform .35s ease, opacity .35s ease;
}
.page-preguntas .faq__q button[aria-expanded="true"]::after {
  transform: rotate(180deg);
  opacity: 0;
}
@media (hover: hover) {
  .page-preguntas .faq__q button:hover::before,
  .page-preguntas .faq__q button:hover::after { background: var(--c-ink); }
}
/* respuesta: 16/28 centrada, a todo el ancho de la lista */
.page-preguntas .faq__a { overflow: hidden; }
.page-preguntas .faq__a p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-ink);
}
.page-preguntas .faq__a.is-animating { transition: height .35s ease; }

/* el texto de la respuesta acompaña a la altura con un fundido corto (solo con JS: .is-shut lo pone preguntas.js) */
.page-preguntas .faq__a p { transition: opacity .35s ease .06s, transform .35s ease .06s; }
.page-preguntas .faq__item.is-shut .faq__a p {
  opacity: 0;
  transform: translateY(-6px);
  transition-delay: 0s;
  transition-duration: .2s;
}
@media (prefers-reduced-motion: reduce) {
  .page-preguntas .faq__a.is-animating,
  .page-preguntas .faq__a p,
  .page-preguntas .faq__q button::after { transition: none; }
  .page-preguntas .faq__item.is-shut .faq__a p { transform: none; }
}