/* ============================================================
   WIST · Barra de progreso de navegación (2026-10-12)
   ------------------------------------------------------------
   La activa js/wist-progreso.js al tocar un enlace que cambia de
   página: solo añade `.is-activa`. Todo lo demás es CSS, a
   propósito: en Safari para iPhone, al empezar a cargar la página
   siguiente se detienen los temporizadores de JavaScript, pero las
   animaciones de `transform` y `opacity` las sigue pintando el
   navegador. Por eso la primera versión (avance por JavaScript) no
   se veía en el iPhone.

   - Aparece en el instante del toque (desde el 2026-10-13; antes a los
     150 ms): el script pinta la barra y navega dos fotogramas después,
     para que Safari en iPhone llegue a dibujarla.
   - Es el borde SUPERIOR de la cabecera (decisión del dueño, 2026-10-13):
     va dentro de `.wist-progreso-pista`, que cubre la píldora con sus
     mismas esquinas y recorta la barra. Fija arriba solo si la cabecera
     está escondida, y entonces debajo de la barra de administración. La
     versión fija arriba del todo se pintaba ENCIMA de la barra de
     administración de WordPress (lo vio el dueño) y no se veía en el
     iPhone.
   - Avanza deprisa al principio y cada vez más despacio, hasta el
     92 % a los 10 s; la página nueva la reemplaza antes.
   - Línea de 3 px arriba del todo, por encima de la cabecera
     pegajosa, del carrito lateral y del velo del checkout (10000).
   ============================================================ */

.wist-progreso {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	height: 3px;
	background: var(--wist-blue-base);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Dentro de la cabecera: la pista cubre la píldora (también su filete) y
   toma sus esquinas; la barra va pegada arriba, a todo el ancho. */
.wist-progreso-pista {
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.wist-progreso.is-cabecera {
	position: absolute;
	top: 0;
	bottom: auto;
	border-radius: 0;
}

/* Respaldo fijo (cabecera escondida): debajo de la barra de administración
   de WordPress, no encima. WordPress publica su altura en esta variable. */
.wist-progreso:not(.is-cabecera) {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.wist-progreso.is-activa {
	animation:
		wist-progreso-aparece .12s ease-out both,
		wist-progreso-avanza 10s cubic-bezier(.08, .7, .2, 1) both;
}

@keyframes wist-progreso-aparece {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wist-progreso-avanza {
	from { transform: scaleX(.12); }
	to   { transform: scaleX(.92); }
}

/* Con «reducir movimiento»: aparece, sin deslizarse. */
@media (prefers-reduced-motion: reduce) {
	.wist-progreso.is-activa {
		transform: scaleX(.6);
		animation: wist-progreso-aparece .01s linear both;
	}
}