/* PortSync V2.5 · prototipo «4 · Fusión» · pg-preguntas.css — Preguntas frecuentes (encargo G3, doc 13 fila 3b).
   Ref. 05 n.º 3b: dos filas de tarjetas compactas que se desplazan en sentidos opuestos, con los bordes desvanecidos por
   una MÁSCARA (sirve sobre cualquier fondo) y pausa al pasar el puntero. Cada fila repite su juego de tarjetas para que un
   translateX de −50 % cierre el bucle sin salto; la copia va con aria-hidden. Debajo, la lista completa (acordeón).
   Movimiento reducido o sin JS: no hay cinta y la lista queda abierta entera (cambia el diseño, no solo el tiempo). */

.pr-cabeza__lado { display: grid; gap: 12px; padding-bottom: 6px; }
.pr-perfil { display: inline-flex; align-items: center; gap: 10px; }
.pr-perfil::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; }

/* ---------- cinta: a sangre, de borde a borde de la pantalla ---------- */
.pr-cinta { display: grid; gap: 16px; padding-block: clamp(8px, 2vh, 20px) clamp(28px, 5vh, 56px); }
.pr-fila {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--negro) 9%, var(--negro) 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--negro) 9%, var(--negro) 91%, transparent 100%);
}
.pr-pista {
  display: flex; gap: 16px; width: max-content; padding-block: 6px;
  animation: pr-izquierda var(--pr-dur, 70s) linear infinite;
  will-change: transform;
}
.pr-fila[data-sentido="derecha"] .pr-pista { animation-name: pr-derecha; }
/* pausa: al pasar el puntero, con el foco dentro, con el botón o fuera de pantalla */
.pr-fila:hover .pr-pista, .pr-fila:focus-within .pr-pista,
.pr-cinta.is-pausada .pr-pista, .pr-cinta.is-quieta .pr-pista { animation-play-state: paused; }
@keyframes pr-izquierda { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes pr-derecha { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

.pr-tarjeta {
  flex: none; width: 360px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px;
  padding: 22px 22px 18px; border-radius: 18px; text-decoration: none; color: inherit;
  background: var(--pg-carta); border: 1px solid var(--pg-carta-borde);
  box-shadow: inset 0 1px 0 var(--pg-carta-filo), 0 1px 2px var(--negro-14);
  transition: border-color var(--dur-rapida), transform .35s var(--pg-ease), background-color var(--dur-rapida);
}
.pr-tarjeta:hover { border-color: var(--accent); transform: translateY(-3px); background: var(--pg-carta-2); }
.pr-tarjeta:focus-visible { outline-offset: 2px; border-radius: 18px; }
.pr-tarjeta__p { font-family: var(--f-titulo); font-weight: 500; font-size: 24px; line-height: 1.16; letter-spacing: var(--tr-titulo); color: var(--c-tinta); text-wrap: balance; }
.pr-tarjeta__r {
  font-size: 14px; line-height: 1.5; color: var(--c-tinta-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-tarjeta__ir { font-size: 13px; font-weight: 600; color: var(--accent-ink); display: inline-flex; gap: 6px; align-items: center; }
.pr-tarjeta__ir::after { content: "→"; transition: transform .25s var(--ease-out); }
.pr-tarjeta:hover .pr-tarjeta__ir::after { transform: translateX(3px); }
.pr-cinta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }

/* ---------- lista completa (acordeón con movimiento; abierta entera con movimiento reducido) ---------- */
.pr-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vh, 56px); }   /* columnas y ancho: inicio-secciones.css */
.pr-grupo__t { margin-bottom: clamp(12px, 1.6vw, 18px); }
.pr-items { display: grid; gap: 10px; }
.pr-item {
  scroll-margin-top: 120px;
  background: var(--c-tarjeta); border: 1px solid var(--c-tarjeta-borde); border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--c-tarjeta-filo);
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
}
.pr-item[open] { background: var(--c-tarjeta-hover); }
.pr-item:target, .pr-item.is-destacada { border-color: var(--accent); }
.pr-item summary {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 64px; cursor: pointer; list-style: none;
  border-radius: 20px;
}
.pr-item summary::-webkit-details-marker { display: none; }
.pr-item summary:hover .pr-p { color: var(--accent-ink); }
.pr-p { flex: 1; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; color: var(--c-tinta); transition: color var(--dur-rapida); }
.pr-signo { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-linea-fuerte); }
.pr-signo::before, .pr-signo::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px;
  background: currentColor; border-radius: 2px; transition: transform .35s var(--pg-ease);
}
.pr-signo::after { transform: rotate(90deg); }
.pr-item[open] .pr-signo::after { transform: rotate(0deg); }
.pr-r { padding: 0 18px 20px 68px; display: grid; gap: 10px; color: var(--c-tinta-2); max-width: 78ch; }
.pr-r p { text-wrap: pretty; }
/* entrada suave de la respuesta al abrir (solo con movimiento) */
.c-js:not(.c-reducido) .pr-item[open] .pr-r { animation: pr-abre .45s var(--pg-ease); }
@keyframes pr-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* las preguntas que aparecen al abrir «¿Qué es PortSync?» (pg-preguntas.js): una tras otra; con movimiento reducido, de golpe */
.pr-item[hidden] { display: none !important; }
.pr-pista-abrir { margin: -2px 4px 0; }
.pr-entra { animation: pr-entra .55s var(--pg-ease) both; animation-delay: calc(var(--pr-k, 0) * 150ms); }
@keyframes pr-entra { from { opacity: 0; transform: translateY(-14px) scale(.985); } to { opacity: 1; transform: none; } }

.pr-cierre { display: grid; gap: 12px; justify-items: start; padding: clamp(22px, 3vw, 34px); }
.pr-cierre__t { font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.15; color: var(--c-tinta); }

@media (max-width: 899px) {
  .pr-cabeza__lado { padding-bottom: 0; }
}
@media (max-width: 560px) {
  .pr-tarjeta { width: 280px; padding: 18px; }
  .pr-tarjeta__p { font-size: 21px; }
  .pr-fila { -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--negro) 6%, var(--negro) 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, var(--negro) 6%, var(--negro) 94%, transparent 100%); }
  .pr-item summary { padding: 14px; gap: 12px; }
  .pr-r { padding: 0 14px 18px 14px; }
  .pr-p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-pista { animation: none; }
  .pr-tarjeta, .pr-signo::before, .pr-signo::after { transition: none; }
  .pr-entra { animation: none; }
}