/*
 * Scroll infinito de artículo en artículo.
 *
 * Va aparte de style.css para poder quitarlo de un tirón si algún día no
 * interesa: sin este fichero y sin su JS, el artículo se ve exactamente igual
 * que antes.
 */

/* El centinela se apoya en el propio artículo. */
.pce-single { position: relative; }

/*
 * Centinela: una franja invisible en el último 15% del artículo. Cuando el
 * lector llega ahí, ya se está pidiendo el siguiente, así que para cuando
 * termina de leer los recomendados el texto nuevo ya está debajo.
 */
.pce-centinela {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 15%; z-index: -1; pointer-events: none;
}

/* Progreso de lectura del artículo que se está leyendo. */
.pce-progreso {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 60; background: transparent; pointer-events: none;
}
.pce-progreso span {
  display: block; width: 0; height: 100%;
  background: var(--brand); transition: width .1s linear;
}

/* Costura entre un artículo y el siguiente. */
.pce-sig-sep {
  display: flex; align-items: center; gap: 14px;
  max-width: 760px; margin: 42px auto 0; padding: 0 18px;
  color: var(--ink-soft); font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.pce-sig-sep::before,
.pce-sig-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.pce-single-sig { padding-top: 6px; }

/* Mientras viene el siguiente. */
.pce-sig-cargando {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 18px; color: var(--ink-soft); font-size: 14px; font-weight: 600;
}
.pce-sig-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: pce-sig-giro .7s linear infinite;
}
@keyframes pce-sig-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pce-sig-spin { animation-duration: 2.5s; }
  .pce-progreso span { transition: none; }
}