/* "Preguntas frecuentes" (preguntas.html, la arma build-empleados.py; 22 oct 2026). Se carga después de clay.css,
   empleados.css y perfiles.css: el encabezado, la sección sobre blanco, el cierre y sus escalones de alto son los de
   perfiles. Acá solo la lista: dos columnas en compu (cada una la suya, así abrir una pregunta no corre la otra), una en
   celular. Cada pregunta se abre al tocarla y cierra la que estaba abierta (details con name, sin JS). */

.pq-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 4vw, 64px); align-items: start; margin-top: clamp(28px, 5vh, 56px); }
.pq-item { border-top: 1px solid var(--c-border); }
.pq-col .pq-item:last-child { border-bottom: 1px solid var(--c-border); }

.pq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer;
  list-style: none; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--c-ink);
  transition: color 0.2s;
}
.pq-q::-webkit-details-marker { display: none; }
.pq-q:hover { color: var(--ube-400); }
.pq-q:focus-visible { outline: 2px solid var(--ube-400); outline-offset: 4px; border-radius: 6px; }

/* El más que pasa a menos al abrir */
.pq-mas { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--c-oat-200); color: var(--c-ink); }
.pq-mas::before, .pq-mas::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; border-radius: 1px;
  background: currentColor; translate: -50% -50%; transition: rotate 0.25s;
}
.pq-mas::after { rotate: 90deg; }
.pq-item[open] .pq-mas { background: var(--ube-100); color: var(--ube-400); }
.pq-item[open] .pq-mas::after { rotate: 0deg; }

.pq-a { max-width: 62ch; padding: 0 48px 22px 0; font-size: 15px; line-height: 1.6; color: var(--c-muted-aa); }

/* Una sección, una pantalla (escritorio): los mismos escalones de alto que perfiles */
@media (min-width: 992px) and (max-height: 799px) {
  .pq-q { padding: 15px 0; font-size: 16px; }
  .pq-a { padding-bottom: 16px; }
}
@media (min-width: 992px) and (max-height: 699px) {
  .pq-lista { margin-top: 22px; }
  .pq-q { padding: 12px 0; }
  .pq-a { padding-bottom: 12px; font-size: 14.5px; line-height: 1.55; }
}

/* Tablet y celular: una sola columna, sin la raya doble donde se juntan */
@media (max-width: 991px) {
  .pq-lista { grid-template-columns: 1fr; }
  .pq-col:first-child .pq-item:last-child { border-bottom: 0; }
}
@media (max-width: 767px) {
  .pq-q { padding: 16px 0; font-size: 16px; }
  .pq-a { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-q, .pq-mas::before, .pq-mas::after { transition: none; }
}