/* ───── CabeceraPagina · contrato de sección (DS 2.0.8). Todo acotado a [data-bloque="cabecera-pagina"]; los colores, por variables de token.
   Variantes: data-variante = imagen | video | filtro | texto · data-fondo = heritage | nova · data-tamano = completa | compacta.
   Con «Imagen» o «Vídeo», la foto va en la «o» de la escena de la portada (.cp-forma, .hmask, .slides, svg.hveil; abajo, D-55). */
[data-bloque="cabecera-pagina"] {
	--cp-fondo: var(--heritage);
	--cp-texto: var(--blanco);
	--cp-acento: var(--nova);
	--cp-entradilla: var(--blanco);
	--cp-entradilla-peso: 300;
	--cp-meta: var(--texto-secundario-oscuro);
	--cp-migas: var(--texto-secundario-oscuro);
	--cp-migas-actual: var(--blanco);
	--cp-migas-sep: var(--nova);
	--titular-texto: var(--blanco);
	--titular-remate: var(--nova);
	--titular-marcador: none;
	position: relative;
	overflow: hidden;
	background: var(--cp-fondo);
	color: var(--cp-texto);
	padding: calc(env(safe-area-inset-top, 0px) + clamp(118px, 17vh, 168px)) 0
		clamp(64px, 10vh, 120px);
}

[data-bloque="cabecera-pagina"][data-tamano="compacta"] {
	padding-bottom: clamp(40px, 7vh, 72px);
}

[data-bloque="cabecera-pagina"][data-fondo="nova"] {
	--cp-fondo: var(--nova);
	--cp-texto: var(--heritage);
	--cp-acento: var(--heritage);
	--cp-entradilla: var(--antracita);
	--cp-entradilla-peso: 400;
	--cp-meta: var(--heritage);
	--cp-migas: var(--heritage);
	--cp-migas-actual: var(--heritage);
	--cp-migas-sep: var(--heritage);
	--titular-texto: var(--heritage);
	--titular-remate: var(--blanco);
}

[data-bloque="cabecera-pagina"] .cp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: end;
}

[data-bloque="cabecera-pagina"] .crumbs li {
	color: var(--cp-migas);
}

[data-bloque="cabecera-pagina"] .crumbs [aria-current] {
	color: var(--cp-migas-actual);
}

[data-bloque="cabecera-pagina"] .crumbs li + li::before {
	color: var(--cp-migas-sep);
}

[data-bloque="cabecera-pagina"][data-fondo="nova"] .crumbs li + li::before {
	opacity: 0.6;
}

[data-bloque="cabecera-pagina"] .eyebrow {
	color: var(--cp-acento);
}

[data-bloque="cabecera-pagina"] h1 {
	margin: 0;
	font-family: var(--font-titular);
	font-weight: 600;
	font-size: clamp(38px, 5.2vw, 84px);
	line-height: 1.1;
	letter-spacing: 0;
	max-width: 16ch;
	text-wrap: balance;
	color: var(--titular-texto);
}

[data-bloque="cabecera-pagina"] h1.long {
	font-size: clamp(32px, 3.9vw, 62px);
	line-height: 1.1;
	max-width: 22ch;
}

[data-bloque="cabecera-pagina"] h1 .cp-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.14em 0.12em 0.22em 0;
	margin: -0.14em -0.12em -0.22em 0;
}

[data-bloque="cabecera-pagina"] h1 .cp-w > span {
	display: inline-block;
}

[data-bloque="cabecera-pagina"] .lead {
	margin: clamp(22px, 3.5vh, 34px) 0 0;
	max-width: 52ch;
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.55;
	font-weight: var(--cp-entradilla-peso);
	color: var(--cp-entradilla);
}

[data-bloque="cabecera-pagina"] .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: clamp(20px, 3vh, 32px);
	font-size: 14px;
	font-weight: 600;
	color: var(--cp-meta);
}

[data-bloque="cabecera-pagina"] .meta span + span::before {
	content: "·";
	margin-right: 18px;
	color: var(--cp-acento);
}

[data-bloque="cabecera-pagina"] .acts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	margin-top: clamp(26px, 4vh, 40px);
}

[data-bloque="cabecera-pagina"] .acts .lnk {
	color: var(--cp-acento);
}

[data-bloque="cabecera-pagina"] .vctl {
	position: static;
	margin-top: 16px;
}

/* Filtro (Filtro/README.md; site.css «.filter» del prototipo, allí global): el tema no tiene bloque Filtro y solo lo
   pinta esta cabecera, así que sus reglas viajan acotadas con ella (desviación declarada en el CIERRE-11). */
[data-bloque="cabecera-pagina"] .filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

[data-bloque="cabecera-pagina"] .filter button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--borde-control-oscuro);
	background: transparent;
	color: var(--blanco);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition:
		background 0.3s,
		color 0.3s,
		border-color 0.3s;
}

[data-bloque="cabecera-pagina"] .filter button .c {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Sin recuento (antes de que lo escriba el listado o sin JS) no queda la pastilla vacía. */
[data-bloque="cabecera-pagina"] .filter button .c:empty {
	display: none;
}

[data-bloque="cabecera-pagina"] .filter button:hover {
	border-color: var(--nova);
	color: var(--nova);
}

[data-bloque="cabecera-pagina"] .filter button[aria-pressed="true"] {
	background: var(--nova);
	border-color: var(--nova);
	color: var(--heritage);
}

[data-bloque="cabecera-pagina"] .filter button[aria-pressed="true"] .c {
	background: var(--heritage);
	color: var(--nova);
}

@media (max-width: 899px) {
	[data-bloque="cabecera-pagina"] .cp-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	[data-bloque="cabecera-pagina"] .filter {
		margin-top: 20px;
	}
}

/* ───── Escena de la «o» (D-55): con «Imagen» o «Vídeo», la cabecera se comporta como la portada sin carrusel, con el
   motor compartido (Villanova.escenaO, assets/escena-o.js). Mismas piezas que la portada: .stage (pantalla fija), .hmask
   y .slides (la foto o el vídeo en la «o»), .hveil (brazo y cuña con el recorte propio) y .shade.
   Sin escena (sin JS, en el editor, y cuando view.js pone .estatica: en vertical con la banda bajo el texto por debajo
   del 35 % del alto, o si la «o» no cabe sin pisar el texto) se ve como antes: texto a la izquierda y la «o» a la
   derecha (encima en móvil). Con escena (.escena; antes de que view.js decida, en horizontal) el texto va arriba a la
   izquierda y la «o» a la derecha, lo más grande que quepa, y crece con el scroll. La altura de 200 vh (180 vh en
   vertical) solo vale con JS; con movimiento reducido o .still, una pantalla y la «o» en reposo. */
[data-bloque="cabecera-pagina"][data-variante="imagen"],
[data-bloque="cabecera-pagina"][data-variante="video"] {
	padding: 0;

	/* clip y no hidden: hidden haría de la sección el contenedor de scroll de .stage y la escena no quedaría fija. */
	overflow: clip;
}

[data-bloque="cabecera-pagina"] .cp-escena .stage {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	column-gap: clamp(32px, 5vw, 96px);
	align-items: end;
	max-width: 1600px;
	margin-inline: auto;
	padding: calc(env(safe-area-inset-top, 0px) + clamp(118px, 17vh, 168px))
		var(--gut) clamp(64px, 10vh, 120px);
}

[data-bloque="cabecera-pagina"][data-tamano="compacta"] .cp-escena .stage {
	padding-bottom: clamp(40px, 7vh, 72px);
}

[data-bloque="cabecera-pagina"] .cp-texto {
	display: contents;
}

[data-bloque="cabecera-pagina"] .cp-texto .crumbs {
	grid-column: 1 / -1;
}

[data-bloque="cabecera-pagina"] .cp-forma {
	position: relative;
	aspect-ratio: 1.455;
}

[data-bloque="cabecera-pagina"] .cp-escena .hmask,
[data-bloque="cabecera-pagina"] .cp-escena .slides {
	position: absolute;
	inset: 0;
}

[data-bloque="cabecera-pagina"] .cp-escena .slides {
	overflow: hidden;
	background: var(--antracita);
	-webkit-clip-path: url(#ocb);
	clip-path: url(#ocb);
}

[data-bloque="cabecera-pagina"] .cp-escena .slides img,
[data-bloque="cabecera-pagina"] .cp-escena .slides video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

[data-bloque="cabecera-pagina"] .cp-escena .hveil {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

[data-bloque="cabecera-pagina"] .hveil .a {
	fill: var(--velo-brazo);
	opacity: var(--velo-brazo-opacidad);
}

[data-bloque="cabecera-pagina"] .hveil .b {
	fill: var(--nova);
	opacity: 0.6;
}

[data-bloque="cabecera-pagina"] .cp-escena .shade {
	display: none;
}

@media (max-width: 899px) {
	[data-bloque="cabecera-pagina"] .cp-escena .stage {
		grid-template-columns: minmax(0, 1fr);
	}

	[data-bloque="cabecera-pagina"] .cp-texto .crumbs {
		order: -2;
	}

	[data-bloque="cabecera-pagina"] .cp-o {
		order: -1;
		max-width: 440px;
		margin-bottom: calc(8px + clamp(32px, 5vw, 96px));
	}
}

/* Con escena (las mismas reglas con .escena y, en horizontal, antes de que view.js decida). */
.js [data-bloque="cabecera-pagina"] .cp-escena.escena {
	height: 200vh;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .stage {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	height: 100svh;
	max-width: none;
	padding: 0;
	overflow: hidden;
	background: var(--cp-fondo);
	container-type: size;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .cp-texto {
	display: block;
	position: absolute;
	left: var(--gut);
	right: var(--gut);
	top: calc(env(safe-area-inset-top, 0px) + clamp(118px, 17vh, 168px));
	z-index: 3;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .cp-o,
.js [data-bloque="cabecera-pagina"] .cp-escena.escena .cp-forma {
	position: static;
	max-width: none;
	margin: 0;
	aspect-ratio: auto;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .hmask {
	will-change: clip-path;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .slides,
.js [data-bloque="cabecera-pagina"] .cp-escena.escena .hveil {
	inset: auto;
	left: 0;
	top: 0;
	width: min(56cqw, 86cqh * 1.455);
	height: auto;
	aspect-ratio: 1.455;
	transform: translate(calc(100cqw - var(--gut) - 100%), calc(50cqh - 50%));
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .stage.colocada .slides {
	-webkit-clip-path: none;
	clip-path: none;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .hveil {
	overflow: visible;
	z-index: 1;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .shade {
	display: block;
	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;
}

.js [data-bloque="cabecera-pagina"] .cp-escena.escena .vctl {
	position: absolute;
	right: var(--gut);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
	z-index: 4;
	margin: 0;
}

@media (min-aspect-ratio: 115/100) {
	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) {
		height: 200vh;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .stage {
		position: sticky;
		top: 0;
		display: block;
		height: 100vh;
		height: 100svh;
		max-width: none;
		padding: 0;
		overflow: hidden;
		background: var(--cp-fondo);
		container-type: size;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .cp-texto {
		display: block;
		position: absolute;
		left: var(--gut);
		right: var(--gut);
		top: calc(env(safe-area-inset-top, 0px) + clamp(118px, 17vh, 168px));
		z-index: 3;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .cp-o,
	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .cp-forma {
		position: static;
		max-width: none;
		margin: 0;
		aspect-ratio: auto;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .hmask {
		will-change: clip-path;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .slides,
	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .hveil {
		inset: auto;
		left: 0;
		top: 0;
		width: min(56cqw, 86cqh * 1.455);
		height: auto;
		aspect-ratio: 1.455;
		transform: translate(
			calc(100cqw - var(--gut) - 100%),
			calc(50cqh - 50%)
		);
	}

	.js
		[data-bloque="cabecera-pagina"]
		.cp-escena:not(.estatica)
		.stage.colocada
		.slides {
		-webkit-clip-path: none;
		clip-path: none;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .hveil {
		overflow: visible;
		z-index: 1;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .shade {
		display: block;
		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;
	}

	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) .vctl {
		position: absolute;
		right: var(--gut);
		bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
		z-index: 4;
		margin: 0;
	}
}

@media (max-aspect-ratio: 115/100) {
	.js [data-bloque="cabecera-pagina"] .cp-escena.escena {
		height: 180vh;
	}
}

/* Movimiento detenido o reducido: una pantalla y la «o» en reposo. */
.js.still [data-bloque="cabecera-pagina"] .cp-escena.escena,
.js.still [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) {
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-bloque="cabecera-pagina"] .cp-escena.escena,
	.js [data-bloque="cabecera-pagina"] .cp-escena:not(.estatica) {
		height: auto;
	}
}