/* Cronología como escena (CronologiaEscena/README.md, Cronologia/README.md): tramo «Cronología como escena» de
   bundle.css (DS 2.0.7) con su responsive. Al revés que en el prototipo, la lista (.chrono-static) es el estado de
   reposo y la escena solo se monta cuando view.js marca la sección con .escena, sin .still en <html> y sin movimiento
   reducido: sin JavaScript, en el editor y con movimiento reducido la historia se lee entera como lista. */
.wp-block-villanova-cronologia-escena .chrono2 {
	position: relative;
	background: var(--fondo-claro, var(--arena-30));
	color: var(--antracita);
}

.wp-block-villanova-cronologia-escena .cstage {
	padding: calc(env(safe-area-inset-top, 0px) + clamp(96px, 14vh, 140px)) 0
		clamp(64px, 10vh, 110px);
}

.wp-block-villanova-cronologia-escena .head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr);
	gap: clamp(24px, 5vw, 80px);
	padding-inline: var(--gut);
	max-width: 1600px;
	margin-inline: auto;
	width: 100%;
	align-items: baseline;
}

.wp-block-villanova-cronologia-escena .head .eyebrow {
	color: var(--heritage);
}

.wp-block-villanova-cronologia-escena .head h2 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--t-h2-s);
	line-height: 1.25;
	letter-spacing: -0.012em;
	color: var(--titular-texto);
	max-width: 30ch;
}

/* ───── Lista (reposo, movimiento reducido, editor, sin JavaScript) */
.wp-block-villanova-cronologia-escena .odo,
.wp-block-villanova-cronologia-escena .track-wrap {
	display: none;
}

.wp-block-villanova-cronologia-escena .chrono-static {
	padding-inline: var(--gut);
	max-width: 1600px;
	margin: clamp(32px, 6vh, 64px) auto 0;
}

.wp-block-villanova-cronologia-escena .chrono-static ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--linea-sobre-claro);
}

.wp-block-villanova-cronologia-escena .chrono-static li {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 8px 20px;
	align-items: baseline;
	padding: clamp(18px, 3vh, 28px) 4px;
	border-bottom: 1px solid var(--linea-sobre-claro);
}

.wp-block-villanova-cronologia-escena .chrono-static .y {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(18px, 1.5vw, 24px);
	color: var(--heritage);
	line-height: 1.2;
}

.wp-block-villanova-cronologia-escena .chrono-static p {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(18px, 1.6vw, 26px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--antracita);
}

/* ───── Escena: rodillo del año + pista de hitos */
.wp-block-villanova-cronologia-escena .bar {
	position: absolute;
	left: var(--gut);
	right: var(--gut);
	top: 0;
	height: 2px;
	background: var(--linea-sobre-claro);
}

.wp-block-villanova-cronologia-escena .bar i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--heritage);
	width: var(--p, 0%);
}

.wp-block-villanova-cronologia-escena .odo {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(72px, min(13vw, 19vh), 220px);
	line-height: 0.9;
	letter-spacing: 0;
	color: var(--heritage);
	font-variant-numeric: lining-nums proportional-nums;
	padding-inline: var(--gut);
	max-width: 1600px;
	margin-inline: auto;
	width: 100%;
	position: relative;
}

/* Cada columna toma el ancho real de la cifra que muestra (view.js) y solo la que gira se ve en nova (.moving). */
.wp-block-villanova-cronologia-escena .odo .d {
	display: inline-block;
	height: 0.9em;
	overflow: hidden;
	position: relative;
	width: 0.62em;
	transition:
		width 0.55s var(--ease-io),
		color 0.3s ease;
}

.wp-block-villanova-cronologia-escena .odo .d.moving {
	color: var(--nova);
}

.wp-block-villanova-cronologia-escena .odo .d span {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	transition: transform 0.55s var(--ease-io);
}

.wp-block-villanova-cronologia-escena .odo .d span i {
	display: block;
	height: 0.9em;
	font-style: normal;
	text-align: left;
}

.wp-block-villanova-cronologia-escena .odo .suf {
	font-size: 0.22em;
	letter-spacing: 0;
	align-self: flex-end;
	margin: 0 0 0.35em 0.2em;
	color: var(--antracita);
	font-family: var(--font-body);
	font-weight: 600;
	max-width: 14ch;
	line-height: 1.2;
}

.wp-block-villanova-cronologia-escena .track-wrap {
	position: relative;
	overflow: hidden;
	padding-block: 8px;
}

.wp-block-villanova-cronologia-escena .track {
	display: flex;
	gap: clamp(20px, 2.4vw, 40px);
	padding-inline: var(--gut);
	width: max-content;
	will-change: transform;
	list-style: none;
	margin: 0;
	--amplio: var(--curva-s);
}

/* La forma de la foto no cambia al activarse (README). */
.wp-block-villanova-cronologia-escena .hito {
	flex: 0 0 clamp(240px, min(26vw, 40vh), 420px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Regla de grupo (.track.gc): la primera foto abre arriba a la izquierda y la última cierra abajo a la derecha. */
.wp-block-villanova-cronologia-escena .hito .pic {
	position: relative;
	aspect-ratio: 3/2;
	overflow: hidden;
	border-radius: var(--rtl, var(--radius-m)) var(--radius-m)
		var(--rbr, var(--radius-m)) var(--radius-m);
	background: var(--arena);
	transition: opacity 0.4s ease;
}

/* El hito inactivo se apaga solo en la foto, al 0,55 del sistema. Se aparta de B2:635, que vela el hito entero al
   0,55: la fecha y el texto quedarían por debajo de AA sobre arena-30, y el proyecto exige axe a cero (R9). */
.wp-block-villanova-cronologia-escena .hito:not(.on) .pic {
	opacity: 0.55;
}

.wp-block-villanova-cronologia-escena .hito .pic img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-villanova-cronologia-escena .hito .y {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(20px, 1.7vw, 28px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--heritage);
	font-variant-numeric: lining-nums proportional-nums;
}

.wp-block-villanova-cronologia-escena .hito p {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--antracita);
}

/* La escena se monta (view.js: .escena) solo con movimiento y sin «Pausar movimiento». */
@media (prefers-reduced-motion: no-preference) {
	html:not(.still) .wp-block-villanova-cronologia-escena .chrono2.escena {
		height: 300vh;
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .cstage {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100svh;
		overflow: hidden;
		display: grid;
		grid-template-rows: auto auto auto;
		align-content: center;
		row-gap: clamp(20px, 3.2vh, 44px);
		padding-bottom: clamp(28px, 5vh, 56px);
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .odo {
		display: flex;
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .track-wrap {
		display: block;
	}

	html:not(.still)
		.wp-block-villanova-cronologia-escena
		.escena
		.chrono-static {
		display: none;
	}
}

/* Móvil (<900 px): la sección deja de ser fija; la pista se desliza en horizontal con scroll-snap. */
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
	html:not(.still) .wp-block-villanova-cronologia-escena .chrono2.escena {
		height: auto;
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .cstage {
		position: static;
		height: auto;
		display: block;
		padding-bottom: clamp(48px, 8vh, 80px);
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .odo {
		font-size: clamp(72px, 22vw, 120px);
		padding-block: 24px 8px;
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .track-wrap {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .track {
		transform: none !important;
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .hito {
		scroll-snap-align: start;
		flex-basis: 76vw;
	}

	html:not(.still) .wp-block-villanova-cronologia-escena .escena .hito .pic {
		opacity: 1;
	}
}

@media (max-width: 899px) {
	.wp-block-villanova-cronologia-escena .head {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-villanova-cronologia-escena .chrono-static li {
		grid-template-columns: 112px minmax(0, 1fr);
	}
}