/* Portada (README general 2.0.7, FormaO/README.md, ControlesMovimiento/README.md): tramo «hero» de bundle.css v2
   (B2:78-118) con sus reglas responsive (304, 918-925), .still y de movimiento reducido (333-338). La máscara de
   palabras del H1 está en base.css (.mw). La «o» (#ocb) está en los <defs> globales de assets/simbolo.svg.
   Reposo (spec ORDEN-08 §8; sin JS, en el editor y con JS antes de layout()): .slides es la caja de la «o» a la
   derecha, recortada con #ocb, y el velo ocupa la misma caja en las unidades de la «o» (viewBox 1,455 : 1). view.js
   pone .colocada en .stage al colocarla: desde ahí la «o» la recorta en píxeles sobre .hmask y frame() mueve las
   piezas. Para no desplazar la maquetación al colocarla, .slides y .hveil tienen siempre su origen en la esquina de
   .stage y se colocan con transform (en reposo, en unidades del contenedor .stage): frame() cambia el transform y el
   tamaño de .slides, y el velo conserva la caja de reposo y pasa a coordenadas de .stage con el viewBox. La altura
   de 260 vh (220 vh por debajo de 900 px) solo vale con JS, que es quien hace crecer la «o». */
.wp-block-villanova-portada .hero {
	--titular-texto: var(--blanco);
	--titular-remate: var(--nova);
	--titular-marcador: none;
	--velo-brazo: var(--blanco);
	--velo-brazo-opacidad: 0.4;
	position: relative;
	background: var(--heritage);
}

.js .wp-block-villanova-portada .hero {
	height: 260vh;
}

.wp-block-villanova-portada .stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--heritage);
	container-type: size;
}

.wp-block-villanova-portada .hmask {
	position: absolute;
	inset: 0;
	will-change: clip-path;
}

.wp-block-villanova-portada .slides {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	background: var(--antracita);
}

.wp-block-villanova-portada .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.wp-block-villanova-portada .slide.on {
	opacity: 1;
}

.wp-block-villanova-portada .slide img,
.wp-block-villanova-portada .slide video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-villanova-portada .slide img {
	transform-origin: 60% 50%;
}

/* Imagen animada mientras no hay vídeo: acercamiento lento y continuo. */
.wp-block-villanova-portada .slide.on img {
	animation: villanova-portada-kb 9s ease-in-out infinite alternate;
}

@keyframes villanova-portada-kb {
	from {
		transform: scale(1.02) translate3d(0, 0, 0);
	}

	to {
		transform: scale(1.14) translate3d(-2%, -1.5%, 0);
	}
}

.wp-block-villanova-portada .paused-kb .slide img {
	animation-play-state: paused;
}

.wp-block-villanova-portada .hveil {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 1;
}

.wp-block-villanova-portada .hveil .a {
	fill: var(--velo-brazo);
	opacity: var(--velo-brazo-opacidad);
}

.wp-block-villanova-portada .hveil .b {
	fill: var(--nova);
	opacity: 0.6;
}

/* Reposo: la «o» a la derecha, a la altura que le da layout() (centrada y un 3 % más abajo). */
.wp-block-villanova-portada .stage:not(.colocada) .slides,
.wp-block-villanova-portada .hveil {
	width: min(86vw, 92svh * 1.455);
	height: auto;
	aspect-ratio: 1.455;
	transform: translate(calc(100cqw - var(--gut) - 100%), calc(53cqh - 50%));
}

.wp-block-villanova-portada .stage:not(.colocada) .slides {
	clip-path: url(#ocb);
}

.wp-block-villanova-portada .shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(
			90deg,
			rgba(55, 58, 54, 0.6) 0%,
			rgba(55, 58, 54, 0) 55%
		),
		linear-gradient(
			180deg,
			rgba(55, 58, 54, 0.35) 0%,
			rgba(55, 58, 54, 0) 28%,
			rgba(55, 58, 54, 0) 38%,
			rgba(55, 58, 54, 0.92) 100%
		);
	opacity: 0;
	pointer-events: none;
}

.wp-block-villanova-portada .h-top {
	position: absolute;
	left: var(--gut);
	right: var(--gut);
	top: calc(env(safe-area-inset-top, 0px) + clamp(110px, 15vh, 150px));
	color: var(--blanco);
	z-index: 3;
}

.wp-block-villanova-portada .h1 {
	margin: 0;
	font-family: var(--font-titular);
	font-weight: 600;
	font-size: clamp(34px, 4.4vw, 80px);
	line-height: 1.1;
	letter-spacing: 0;
	max-width: 13ch;
	color: var(--titular-texto);
}

.wp-block-villanova-portada .h-bot {
	position: absolute;
	left: var(--gut);
	bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(24px, 5vh, 56px));
	z-index: 3;
	color: var(--blanco);
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: min(32vw, 440px);
}

.wp-block-villanova-portada .h-bot .btn {
	align-self: flex-start;
}

.wp-block-villanova-portada .h-bot p {
	margin: 0;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.5;
}

.wp-block-villanova-portada .pager {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wp-block-villanova-portada .pager .cap {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	min-height: 20px;
}

.wp-block-villanova-portada .prow {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wp-block-villanova-portada .dots {
	display: flex;
	gap: 6px;
	flex: 1 1 auto;
}

.wp-block-villanova-portada .dot {
	position: relative;
	flex: 1 1 0;
	min-width: 28px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.wp-block-villanova-portada .dot::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.34);
}

.wp-block-villanova-portada .dot i {
	position: absolute;
	left: 0;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 3px;
	background: var(--nova);
	width: 0;
}

.wp-block-villanova-portada .dot.done i {
	width: 100%;
}

.js .wp-block-villanova-portada .dot.on i {
	animation: villanova-portada-llenar var(--dur-slide) linear forwards;
}

.wp-block-villanova-portada .paused .dot.on i {
	animation-play-state: paused;
}

@keyframes villanova-portada-llenar {
	to {
		width: 100%;
	}
}

.wp-block-villanova-portada .cpause {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--borde-control-oscuro);
	background: transparent;
	color: var(--blanco);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.wp-block-villanova-portada .cpause svg {
	width: 14px;
	height: 14px;
}

.wp-block-villanova-portada .cpause .i-play {
	display: none;
}

.wp-block-villanova-portada .paused .cpause .i-play {
	display: block;
}

.wp-block-villanova-portada .paused .cpause .i-pause {
	display: none;
}

/* Reposo en vertical (W/H < 1,15, el corte de layout()): la «o» centrada y de ancho completo bajo el titular. */
@media (max-aspect-ratio: 115/100) {
	.wp-block-villanova-portada .stage:not(.colocada) .slides,
	.wp-block-villanova-portada .hveil {
		width: calc(100% - 16px);
		transform: translate(8px, calc(50cqh - 50%));
	}
}

@media (max-width: 899px) {
	.js .wp-block-villanova-portada .hero {
		height: 220vh;
	}

	.wp-block-villanova-portada .h-bot {
		max-width: none;
		right: var(--gut);
		gap: 14px;
	}
}

@media (max-width: 520px) {
	.wp-block-villanova-portada .h-bot p {
		font-size: 15px;
	}
}

/* Móvil bajo y pantallas bajas en horizontal. */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 700px) {
	.wp-block-villanova-portada .h-bot p {
		display: none;
	}
}

@media (orientation: landscape) and (max-height: 560px) {
	.wp-block-villanova-portada .h-top {
		top: calc(env(safe-area-inset-top, 0px) + 72px);
	}

	.wp-block-villanova-portada .h1 {
		font-size: min(4.7vw, 9vh);
	}

	.wp-block-villanova-portada .h-bot {
		gap: 10px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
		right: auto;
		max-width: min(40vw, 360px);
	}

	.wp-block-villanova-portada .h-bot p,
	.wp-block-villanova-portada .pager .cap {
		display: none;
	}

	.wp-block-villanova-portada .h-bot .btn {
		min-height: 44px;
	}
}

/* Movimiento detenido o reducido: frame(0) deja la «o» en reposo, el hero mide una pantalla y no hay acercamiento. */
.still .wp-block-villanova-portada .hero {
	height: auto;
}

.still .wp-block-villanova-portada .slide.on img {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .wp-block-villanova-portada .hero {
		height: auto;
	}

	.wp-block-villanova-portada .slide.on img {
		animation: none;
	}
}