/* ═══════════════════════════════════════════════════════════════════════════
   EL ACORDEÓN DE PREGUNTAS FRECUENTES — SU PROPIA HOJA.

   Misma historia que el héroe (`public_heroe.css`) y por el mismo motivo. Nació
   dentro de `public_services.css` para las fichas de servicio, y el 2026-09-15,
   al querer preguntas también en `/services`, apareció el problema: esa página
   ni siquiera carga esa hoja —usa `lab_listado.css` y `lab_service.css`—, y las
   de confianza cargan otra distinta. El componente no existía fuera de dos
   rutas.

   Copiarlo habría dado tres versiones del mismo acordeón que un día divergen.
   Esto es un archivo pequeño, una sola fuente de verdad, cargado por
   `base.html`; donde no hay preguntas, ninguna regla casa con nada.

   Va en `<details>` nativo a propósito: la respuesta está en el marcado desde
   el primer byte, así la lee un rastreador que no ejecuta JavaScript —que son
   casi todos los de IA— y se despliega sin una línea de código.
   ══════════════════════════════════════════════════════════════════════════ */
body.public-app .svc-faq-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
body.public-app .svc-faq-item {
  border: 1px solid var(--services-line);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
body.public-app .svc-faq-item[open] {
  border-color: var(--services-line-strong);
}
body.public-app .svc-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 500;
  /* Sin esto Android infla el tipo por su cuenta y la pregunta desborda. */
  -webkit-text-size-adjust: 100%;
}
body.public-app .svc-faq-q::-webkit-details-marker {
  display: none;
}
/* `min-width: 0` porque el texto es hijo de un flex: sin esto su anchura
   mínima es la de su palabra más larga y rompe la caja en 360px. */
body.public-app .svc-faq-q > span:first-child {
  min-width: 0;
}
body.public-app .svc-faq-chev {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgba(205, 214, 227, 0.55);
  transition: transform 160ms ease;
}
body.public-app .svc-faq-item[open] .svc-faq-chev {
  transform: rotate(180deg);
}
body.public-app .svc-faq-a {
  padding: 0 18px 16px;
}
body.public-app .svc-faq-a p {
  margin: 0;
  color: rgba(205, 214, 227, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  body.public-app .svc-faq-chev {
    transition: none;
  }
}