/**
 * Palo Santo: estilos que theme.json no cubre.
 * Medidas de referencia: diseño de Figma a 1920px de ancho.
 */

:root {
	--ps-rasgado: url(../images/borde-rasgado.svg);
	--ps-rasgado-alto: clamp(14px, 2.1vw, 40px);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
}

/* ---------- Cabecera ---------- */

.ps-header {
	position: relative;
	z-index: 10;
}

.ps-header__title a {
	text-decoration: none;
}

/* ---------- Animación de entrada ("el texto va apareciendo") ---------- */

.ps-js .ps-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.ps-js .ps-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ps-js .ps-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Enlaces con flecha ---------- */

.ps-enlace a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.ps-enlace a:hover,
.ps-enlace a:focus-visible {
	text-decoration: none;
	border-bottom-color: currentColor;
}

/* ---------- Bordes de papel rasgado ---------- */

.ps-rasgado {
	position: relative;
}

.ps-rasgado::before,
.ps-rasgado::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--ps-rasgado-alto);
	background: var(--wp--preset--color--pergamino-claro);
	-webkit-mask: var(--ps-rasgado) center / 100% 100% no-repeat;
	mask: var(--ps-rasgado) center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 2;
}

.ps-rasgado::before {
	top: -1px;
}

.ps-rasgado::after {
	bottom: -1px;
	transform: scale(-1, -1);
}

/* ---------- Secciones con capas sobre la foto ---------- */

.ps-historia,
.ps-queso,
.ps-premios,
.ps-certificados,
.ps-actualidad {
	position: relative;
	isolation: isolate;
}

/* Historia: viñeteado radial y sombra superior para el texto */
.ps-historia {
	background-color: var(--wp--preset--color--tinta);
	box-shadow: inset 0 0 18vw rgba(0, 0, 0, 0.75);
}

.ps-historia::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 46%);
	z-index: -1;
}

/* Presentación del queso: oscurecido superior detrás del titular */
.ps-queso {
	background-color: var(--wp--preset--color--pergamino-claro);
}

.ps-queso::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 33%);
	z-index: -1;
}

/* Premios, certificados y actualidad: velo para legibilidad (en premios, sobre la escena,
   que es la que lleva la foto) */
.ps-premios__escena,
.ps-certificados,
.ps-actualidad {
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.25);
}

.ps-premios {
	z-index: 1;
}

/* ---------- Especialidades ----------
 *
 * Detrás de historia → queso, la sección sube 100vh y queda por encima (z-index): es la hoja
 * azul de borde rasgado que tapa el queso mientras su escena sigue fija (frames 1884 y 1885).
 * El borde va pintado con el azul de la parte de arriba de cielo.webp.
 * Como el papel de la historia, entra con un margen a cada lado (5,47vw) y se ensancha al
 * llegar arriba: theme.js escribe en --p cuánto ha subido (0 asoma abajo → 1 arriba) y
 * --lado se cierra entre 0.55 y 0.90. Sin JS, --p vale 1 y la sección va a todo el ancho.
 */

.ps-especialidades {
	--p: 1;
	--lado: calc((1 - clamp(0, (var(--p) - 0.55) / 0.35, 1)) * 5.47vw);
	position: relative;
	z-index: 1;
}

.ps-escenas .ps-hq + .ps-especialidades {
	clip-path: inset(calc(-1 * var(--ps-rasgado-alto) - 2px) var(--lado) 0);
}

.ps-hq + .ps-especialidades {
	margin-top: -100vh;
}

.ps-hq + .ps-especialidades::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: var(--ps-rasgado-alto);
	background: linear-gradient(to right, #2a79c3, #2273ba 50%, #1a6eb6);
	-webkit-mask: var(--ps-rasgado) center / 100% 100% no-repeat;
	mask: var(--ps-rasgado) center / 100% 100% no-repeat;
	transform: scaleY(-1);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ps-hq + .ps-especialidades {
		margin-top: 0;
	}
}

.ps-variedades {
	list-style: none;
	padding-left: 0;
	line-height: 1.5;
}

.ps-variedades li {
	position: relative;
	padding-left: 1.4em;
	cursor: default;
	transition: font-weight 0.2s ease;
}

.ps-variedades li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.ps-variedades li:hover {
	font-weight: 800;
}

.ps-variedades strong {
	font-weight: 800;
}

.ps-brujula img {
	width: 100%;
	height: auto;
}

/* ---------- Premios: credencial del peregrino ---------- */

.ps-credencial {
	gap: 0;
	overflow-x: auto;
	scrollbar-width: thin;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
	border-radius: 4px;
}

.ps-credencial > .wp-block-group {
	flex: 0 0 auto;
	width: clamp(200px, 17vw, 320px);
	min-height: clamp(320px, 33vw, 640px);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: #f3efe6;
	color: var(--wp--preset--color--credencial);
	font-family: var(--wp--preset--font-family--eb-garamond);
	border-left: 1px solid rgba(81, 81, 80, 0.12);
	gap: var(--wp--preset--spacing--40);
}

/* La portada es más ancha que las páginas de los sellos (en el Figma, unas 1,7 veces) */
.ps-credencial > .wp-block-group:first-child {
	width: clamp(260px, 28vw, 540px);
	border-left: 0;
	justify-content: space-between;
}

.ps-credencial__titulo {
	font-size: clamp(0.9rem, 1vw, 1.25rem);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1.6;
}

.ps-credencial__texto {
	font-size: clamp(0.95rem, 1.18vw, 1.4rem);
	line-height: 1.35;
	font-weight: 500;
}

.ps-credencial__texto strong {
	font-weight: 700;
}

.ps-sello img,
.ps-credencial__concha img {
	width: 100%;
	max-width: 220px;
	height: auto;
	margin-inline: auto;
	display: block;
	mix-blend-mode: multiply;
}

/* Página en blanco al final de la credencial, como en el Figma (frame 1888) */
.ps-credencial::after {
	content: "";
	flex: 0 0 auto;
	width: clamp(200px, 17vw, 320px);
	background: #f3efe6;
	border-left: 1px solid rgba(81, 81, 80, 0.12);
}

/* Escena con scroll (frames 1886 → 1887 → 1888). Solo con .ps-escenas (theme.js activo y sin
 * movimiento reducido); si no, la credencial se queda con su scroll horizontal normal.
 * theme.js escribe --p en .ps-premios; --h (0.08–0.92) desplaza la credencial:
 *   h = 0  la portada asoma por la derecha (su borde izquierdo en el 75 % del ancho)
 *   h = 1  la página en blanco del final queda cortada por el borde derecho (8vw fuera)
 * El texto se desvanece y se aparta en el primer cuarto del recorrido.
 */
.ps-premios {
	--p: 0;
	--h: clamp(0, (var(--p) - 0.08) / 0.84, 1);
}

.ps-escenas .ps-premios {
	height: 350vh;
}

.ps-escenas .ps-premios__escena {
	position: sticky;
	top: 0;
	box-sizing: border-box;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.ps-escenas .ps-premios__escena > .wp-block-columns {
	display: block;
}

.ps-escenas .ps-premios .wp-block-column:first-child {
	position: absolute;
	left: 14vw;
	right: 30vw;
	top: 50%;
	width: auto;
	text-align: center;
	opacity: calc(1 - var(--h) * 4);
	transform: translate(calc(var(--h) * -8vw), -50%);
}

.ps-escenas .ps-premios .wp-block-column:first-child > * {
	max-width: 34rem;
	margin-inline: auto;
}

.ps-escenas .ps-premios .wp-block-column:last-child {
	position: absolute;
	left: 100%;
	top: 50%;
	width: max-content;
	transform: translate(calc(-25vw * (1 - var(--h)) + (8vw - 100%) * var(--h)), -50%);
}

.ps-escenas .ps-credencial {
	overflow: visible;
}

@media (max-width: 781px) {
	.ps-escenas .ps-premios .wp-block-column:first-child {
		left: 1.5rem;
		right: 1.5rem;
		top: 9vh;
		transform: translateX(calc(var(--h) * -8vw));
	}

	.ps-escenas .ps-premios .wp-block-column:last-child {
		top: 62%;
	}
}

/* ---------- Canal profesional ---------- */

.ps-canal {
	background-color: #8fb0cc;
	background-image: linear-gradient(to bottom, #e9eef3 0%, #b9cbdb 44%, #3d5f80 46%, #1d3550 100%);
	overflow: hidden;
}

.ps-canal[style*="background-image"] {
	background-color: transparent;
}

.ps-estrella img {
	width: clamp(80px, 8.3vw, 160px);
	height: auto;
}

.ps-platos {
	position: relative;
	aspect-ratio: 1380 / 980;
	max-width: 1380px;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--40);
	background: url(../images/camino-punteado.svg) 56% 30% / 72% auto no-repeat;
}

.ps-plato {
	position: absolute;
	width: 33%;
	gap: 0.5rem;
}

.ps-plato--1 { left: 0; top: 0; }
.ps-plato--2 { left: 63%; top: 12%; }
.ps-plato--3 { left: 19%; top: 48%; }

.ps-plato__foto img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.3));
}

.ps-plato__nombre {
	max-width: 15em;
	color: var(--wp--preset--color--blanco);
	font-weight: 600;
	font-size: clamp(1rem, 1.25vw, 1.5rem);
	line-height: 1.2;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 781px) {
	.ps-platos {
		aspect-ratio: auto;
		display: grid;
		gap: var(--wp--preset--spacing--40);
		background: none;
	}

	.ps-plato {
		position: static;
		width: min(100%, 360px);
		margin-inline: auto;
	}
}

/* ---------- Certificados ---------- */

.ps-sellos {
	gap: var(--wp--preset--spacing--40);
}

.ps-sello-cert {
	gap: var(--wp--preset--spacing--30);
}

.ps-sello-cert__logo img {
	width: clamp(140px, 13.2vw, 254px);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--blanco);
}

.ps-sello-cert__nombre {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.46vw, 1.75rem);
	line-height: 1.33;
	letter-spacing: 0.05em;
}

/* ---------- Actualidad y tarjetas de noticia ---------- */

.ps-noticias {
	margin-top: var(--wp--preset--spacing--50);
}

.ps-noticias .wp-block-post-template {
	gap: 41px;
}

.ps-noticias .wp-block-post-template > li {
	width: min(100%, 392px);
	flex: 0 1 392px;
}

.ps-card {
	height: 100%;
	padding: 16px;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	color: var(--wp--preset--color--tinta);
}

.ps-card__imagen,
.ps-card__imagen img {
	border-radius: 6px;
}

.ps-card__imagen:empty {
	display: none;
}

.ps-card__contenido {
	padding: 8px;
}

.ps-card__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.17;
}

.ps-card__titulo a {
	text-decoration: none;
}

.ps-card__boton {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 74px;
	background: var(--wp--preset--color--azul-noche);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--lato);
	font-size: 0.75rem;
	line-height: 1;
	text-decoration: none;
}

.ps-card__boton:hover,
.ps-card__boton:focus-visible {
	background: var(--wp--preset--color--azul);
	text-decoration: none;
}

.ps-post-grid .ps-card {
	color: var(--wp--preset--color--tinta);
}

/* ---------- Huecos de imagen pendiente ---------- */

.ps-pendiente {
	display: grid;
	place-items: center;
	min-height: 160px;
	aspect-ratio: 1;
	width: 100%;
	max-width: 260px;
	margin-inline: auto;
	padding: 1rem;
	border: 2px dashed currentColor;
	border-radius: 50%;
	opacity: 0.6;
	font-size: 0.75rem;
	text-align: center;
}

/* ---------- Pie ---------- */

.ps-footer {
	font-family: var(--wp--preset--font-family--montserrat);
}

.ps-footer p,
.ps-footer li {
	font-family: var(--wp--preset--font-family--inter);
	line-height: 2.1;
}

.ps-footer__titulo {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.ps-footer__lista {
	list-style: none;
	padding-left: 0;
}

.ps-footer a {
	text-decoration: none;
}

.ps-footer a:hover {
	text-decoration: underline;
}

.ps-arriba a {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-left: auto;
	border-radius: 50%;
	background: #78a64f;
	color: var(--wp--preset--color--blanco);
	font-size: 1.5rem;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.ps-arriba a:hover {
	transform: translateY(-3px);
	text-decoration: none;
}

/* ---------- Ajustes en móvil ---------- */

@media (max-width: 781px) {
	.ps-queso {
		min-height: 150vw !important;
		background-position: 42% 100% !important;
		background-size: auto 64% !important;
		background-repeat: no-repeat !important;
		background-color: var(--wp--preset--color--tinta);
	}

	.ps-sellos.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ps-sello-cert__logo img {
		width: min(140px, 36vw);
	}
}

/* ---------- Hero: escena del mapa controlada por el scroll ----------
 *
 * theme.js escribe --p (0 → 1) según lo recorrido de .ps-hero.
 * Tramos sacados del storyboard del Figma (frames 1 → 5, 6, 330, 331):
 *   --t1  0.00–0.15  la silueta del mapa crece ×2 desde su centro
 *   --t2  0.15–0.24  la máscara desaparece; entra el titular
 *   --t3  0.27–0.40  el paisaje sube, sale el titular, aparece el menú lateral
 *   --t4  0.40–0.57  entra el texto de origen y asoma el sello del Camino
 *   --t5  0.60–0.70  sale el texto de origen y el sello sube al centro
 *   --t6  0.70–0.92  zoom: el sello crece hasta que su foto llena la pantalla
 *   --t7  0.83–0.93  se oscurecen los bordes (viñeta de la sección historia)
 *   0.93–1           quieto: aquí se hace el relevo
 * Relevo: .ps-hq sube 160vh por detrás del hero, así que desde 0,90 las dos escenas están
 * fijas a la vez y muestran la misma foto con la misma viñeta. En ese tramo quieto theme.js
 * pone .is-terminada (RELEVO) y la escena del hero se oculta sin que se note nada; si lo
 * hiciera al acabar el hero, su escena ya habría empezado a moverse con el scroll.
 */

body.home .ps-header {
	position: absolute;
	inset: 0 0 auto;
}

.ps-hero {
	--p: 0;
	--t1: clamp(0, var(--p) / 0.15, 1);
	--t2: clamp(0, (var(--p) - 0.15) / 0.09, 1);
	--t3: clamp(0, (var(--p) - 0.27) / 0.13, 1);
	--t4: clamp(0, (var(--p) - 0.4) / 0.17, 1);
	--t5: clamp(0, (var(--p) - 0.6) / 0.1, 1);
	--t6: clamp(0, (var(--p) - 0.7) / 0.22, 1);
	--t7: clamp(0, (var(--p) - 0.83) / 0.1, 1);
	/* Caja del mapa en el frame 1 (1018×919 en un lienzo de 1920×1080) */
	--mapa-alto: min(85.09vh, 81.25vw);
	--mapa-cx: 53.54vw;
	--mapa-cy: 50.69vh;
	--mapa-escala: calc(1 + var(--t1) * 1.02 + var(--t2) * 6);
	/* Sello (assets/images/sello.svg, 918×688). Su caja mide lo que medirá al final del
	   zoom, cuando la foto (798×491,5 dentro del sello) cubre justo la pantalla, y se
	   escala de --sello-z0 a 1 alrededor del centro de la foto. */
	--sello-foto-ancho: max(100vw, 162.35vh);
	--sello-ancho: calc(var(--sello-foto-ancho) * 1.1504);
	--sello-alto: calc(var(--sello-ancho) * 0.7495);
	--sello-z0: 0.41;
	--sello-zoom: calc(var(--sello-z0) + (1 - var(--sello-z0)) * var(--t6) * var(--t6));
	/* Desplazamiento vertical: oculto debajo → asoma (frame 5) → centrado (frame 6) */
	--sello-y: calc((50vh + var(--sello-alto) * var(--sello-z0) * 0.4444 - var(--t4) * 18vh) * (1 - var(--t5)));
	position: relative;
	z-index: 1;
	height: 700vh;
	margin-block: 0;
}

.ps-hero.is-terminada .ps-hero__escena {
	visibility: hidden;
}

/* Zoom terminado (--p ≥ 0.921, el transform ya es la identidad): sin transform, la foto
   se pinta igual que la de .ps-hq; con él iría en su propia capa, desplazada al píxel */
.ps-hero.is-sello-abierto .ps-hero__sello {
	transform: none;
}

.ps-hero__escena {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--wp--preset--color--pergamino) url(../images/papel.webp) center / cover no-repeat;
}

.ps-hero__escena > * {
	margin: 0;
}

/* Paisaje recortado con la silueta de la península */
.ps-hero__paisaje {
	position: absolute;
	inset: 0;
	--h: calc(var(--mapa-alto) * var(--mapa-escala));
	--w: calc(var(--h) * 1018 / 919);
	-webkit-mask: url(../images/mapa-mascara.svg) no-repeat;
	mask: url(../images/mapa-mascara.svg) no-repeat;
	-webkit-mask-size: var(--w) var(--h);
	mask-size: var(--w) var(--h);
	-webkit-mask-position: calc(var(--mapa-cx) - var(--w) / 2) calc(var(--mapa-cy) - var(--h) / 2);
	mask-position: calc(var(--mapa-cx) - var(--w) / 2) calc(var(--mapa-cy) - var(--h) / 2);
	will-change: mask-size, mask-position;
}

.ps-hero.is-paisaje-completo .ps-hero__paisaje {
	-webkit-mask: none;
	mask: none;
}

.ps-hero__paisaje img {
	width: 100%;
	height: 175vh;
	max-width: none;
	object-fit: cover;
	object-position: var(--paisaje-x, 50%) 0;
	transform: translateY(calc((var(--t1) * -8 + var(--t3) * -32 + var(--t4) * -35) * 1vh));
	will-change: transform;
}

/* Velo sobre el paisaje para que los titulares se lean */
.ps-hero__escena::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15) 70%);
	opacity: calc(var(--t2) * 0.9);
	pointer-events: none;
}

/* Viñeta del final del zoom: la misma que .ps-hq__historia::after */
.ps-hero__escena::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 46%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.85) 100%);
	opacity: var(--t7);
	pointer-events: none;
}

.ps-hero__titular,
.ps-hero__origen,
.ps-hero__sello {
	z-index: 1;
}

/* Titulares */
.ps-hero__titular,
.ps-hero__origen {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(1018px, calc(100% - 2rem));
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.ps-hero__titular {
	opacity: calc(var(--t2) - var(--t3) * 1.2);
	transform: translate(-50%, calc(-50% + (1 - var(--t2)) * 4vh - var(--t3) * 50vh));
}

.ps-hero__origen {
	top: 45%;
	opacity: calc(var(--t4) - var(--t5) * 1.5);
	transform: translate(-50%, calc(-50% + (1 - var(--t4)) * 6vh - var(--t5) * 8vh));
}

/* Sello del Camino: asoma, sube al centro y se entra en su foto con un zoom */
.ps-hero__sello {
	position: absolute;
	left: calc(50% - var(--sello-ancho) / 2);
	top: calc(50% - var(--sello-alto) * 0.4444);
	width: var(--sello-ancho);
	height: var(--sello-alto);
	background: url(../images/sello.svg) center / 100% 100% no-repeat;
	transform-origin: 50% 44.44%;
	transform: translateY(var(--sello-y)) scale(var(--sello-zoom));
}

/* Hueco de la foto (798×491,5 en el sello). Calculado con las mismas medidas que
   .ps-hq__historia > .ps-hq__foto para que al final del zoom coincidan al píxel */
.ps-hero__sello-foto {
	position: absolute;
	left: calc((var(--sello-ancho) - var(--sello-foto-ancho)) / 2);
	top: calc(var(--sello-alto) * 0.4444 - var(--sello-foto-ancho) / 3.247);
	width: var(--sello-foto-ancho);
	height: calc(var(--sello-foto-ancho) / 1.6235);
}

.ps-hero__sello-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ps-hero__sello-texto {
	position: absolute;
	left: 0;
	right: 0;
	top: 80.16%;
	height: 15.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: calc(var(--sello-ancho) * 0.05);
	font-weight: 700;
	line-height: 1;
}

.ps-hero--provisional {
	--paisaje-x: 88%;
}

@media (max-width: 781px) {
	.ps-hero {
		--mapa-cx: 50vw;
		height: 590vh;
	}
}

/* Pantallas verticales: el sello de partida, más pequeño para que quepa a lo ancho */
@media (max-aspect-ratio: 1/1) {
	.ps-hero {
		--sello-z0: 0.3;
	}
}

@media (max-aspect-ratio: 2/3) {
	.ps-hero {
		--sello-z0: 0.22;
	}
}

/* Sin animaciones: el hero queda como una portada fija con el mapa y los textos */
@media (prefers-reduced-motion: reduce) {
	.ps-hero {
		height: auto;
		--p: 0;
	}

	.ps-hero__escena {
		position: relative;
		min-height: 100vh;
		display: grid;
		place-items: center;
	}

	.ps-hero__titular {
		position: static;
		transform: none;
		opacity: 1;
		color: var(--wp--preset--color--azul-textos);
		text-shadow: none;
	}

	.ps-hero__origen,
	.ps-hero__sello,
	.ps-hero__escena::before {
		display: none;
	}
}

/* ---------- Menú lateral ---------- */

.ps-nav-lateral {
	position: fixed;
	z-index: 20;
	left: clamp(1rem, 3.4vw, 65px);
	top: 50%;
	transform: translate(-1rem, -50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
	color: #fff;
	mix-blend-mode: difference;
}

.ps-nav-lateral.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}

.ps-nav-lateral__lista {
	list-style: none;
	margin: 0;
	padding: 0 0 0 clamp(1.5rem, 2.7vw, 52px);
	border-left: 1px solid currentColor;
	display: grid;
	gap: 0.9rem;
	font-size: 1.125rem;
	line-height: 1;
}

.ps-nav-lateral a {
	color: inherit;
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.ps-nav-lateral a:hover,
.ps-nav-lateral a:focus-visible,
.ps-nav-lateral a[aria-current="true"] {
	opacity: 1;
	font-weight: 800;
	text-decoration: none;
}

@media (max-width: 1100px) {
	.ps-nav-lateral {
		display: none;
	}
}

/* ---------- Historia → Queso: papel rasgado con ventana ----------
 *
 * Frames 331 → 7 → 44 → 45 → 1869 → 1883 → 1872 del Figma. theme.js escribe --p en .ps-hq:
 *   0.00–0.10        quieto: fija debajo del hero (los 60vh que se solapan con él)
 *   0.10–0.19        el texto de la historia va apareciendo, un párrafo tras otro
 *   --t1  0.23–0.40  el papel sube desde fuera de la pantalla (top 105vh → 27vh); sale el texto
 *   --t2  0.40–0.54  el papel cubre la pantalla; la cruz crece (59vh → 100vh)
 *   --t3  0.54–0.67  zoom en el cruce de los brazos (100vh → 900vh, frame 1883) y, en el
 *                    último 15 % del tramo, fundido que quita los trozos de papel que quedan
 *   --t4  0.67–0.79  entra el titular del queso
 *   0.84–1           quieto: la hoja azul de especialidades sube por encima (frames 1884 y
 *                    1885), porque .ps-hq + .ps-especialidades se solapa 100vh con esta sección
 * Detrás del hero, la sección sube 160vh y queda debajo de él: cuando el zoom del sello
 * termina, el hero se oculta y aquí ya está la misma foto (misma caja, misma viñeta).
 * La ventana es una cruz de Santiago: assets/images/cruz-santiago.svg (472×641, la máscara de
 * "Mask group" del Figma), con el cruce de los brazos al 35,9 % de su altura. --ventana-cruce-y es la altura de ese cruce en pantalla.
 */

.ps-hq {
	--p: 0;
	--t1: clamp(0, (var(--p) - 0.226) / 0.175, 1);
	--t2: clamp(0, (var(--p) - 0.401) / 0.134, 1);
	--t3: clamp(0, (var(--p) - 0.535) / 0.134, 1);
	--t4: clamp(0, (var(--p) - 0.669) / 0.125, 1);
	--papel-top: calc((105 - var(--t1) * 78 - var(--t2) * 34.5) * 1vh);
	--papel-lado: calc((5.47 - var(--t2) * 8.97) * 1vw);
	--ventana-alto: calc((59.3 + var(--t2) * 40.5 + var(--t3) * var(--t3) * 800) * 1vh);
	--ventana-ancho: calc(var(--ventana-alto) * 0.7363);
	--ventana-cruce-y: calc((141.2 - var(--t1) * 77.8 - var(--t2) * 16.1 + var(--t3) * 2.7) * 1vh);
	--ventana-fundido: clamp(0, (var(--t3) - 0.85) / 0.15, 1);
	position: relative;
	height: 710vh;
	margin-block: 0;
}

/* 160vh por detrás del hero; el ancla #historia cae donde termina el hero (60vh más abajo) */
.ps-hero + .ps-hq {
	margin-top: -160vh;
	scroll-margin-top: -60vh;
}

.ps-hq__escena {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--wp--preset--color--tinta);
}

.ps-hq__escena > *,
.ps-hq__ventana > *,
.ps-hq__historia > * {
	margin: 0;
}

.ps-hq__historia,
.ps-hq__ventana {
	position: absolute;
	inset: 0;
}

.ps-hq__foto {
	position: absolute;
	inset: 0;
	max-width: none !important;
	margin: 0 !important;
}

.ps-hq__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La foto del queso trae abajo una franja de papel rasgado (de la exportación del Figma):
   un 5 % más alta, esa franja queda fuera de la pantalla */
.ps-hq__ventana > .ps-hq__foto {
	bottom: -5%;
}

/* El peregrino, con la misma caja que la foto del sello del hero al final del zoom */
.ps-hq__historia > .ps-hq__foto {
	inset: auto;
	left: calc(50% - max(100vw, 162.35vh) / 2);
	top: calc(50% - max(100vw, 162.35vh) / 3.247);
	width: max(100vw, 162.35vh);
	height: calc(max(100vw, 162.35vh) / 1.6235);
}

/* Peregrino: viñeteado radial y oscurecido superior, como en el frame 44 */
.ps-hq__historia::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 46%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.85) 100%);
	pointer-events: none;
}

.ps-hq__historia {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 11.5vh 1rem 0;
	gap: 1.5rem;
}

.ps-hq__texto {
	position: relative;
	z-index: 1;
	max-width: 680px;
	opacity: calc(1 - var(--t1) * 2.5);
	transform: translateY(calc(var(--t1) * -6vh));
}

/* Con las escenas activas (theme.js añade .ps-escenas), el texto aparece barriendo de
   izquierda a derecha, un párrafo tras otro (--r: 0 → 1 de cada párrafo) */
.ps-escenas .ps-hq__texto {
	--r: clamp(0, (var(--p) - 0.1) / 0.05, 1);
	opacity: calc(min(1, var(--r) * 4) - var(--t1) * 2.5);
	-webkit-mask-image: linear-gradient(to right, #000 calc(var(--r) * 130% - 30%), rgba(0, 0, 0, 0.25) calc(var(--r) * 130%));
	mask-image: linear-gradient(to right, #000 calc(var(--r) * 130% - 30%), rgba(0, 0, 0, 0.25) calc(var(--r) * 130%));
}

.ps-escenas .ps-hq__texto + .ps-hq__texto {
	--r: clamp(0, (var(--p) - 0.142) / 0.05, 1);
}

/* Hoja de papel que sube; el borde superior va rasgado */
.ps-hq__papel {
	position: absolute;
	left: var(--papel-lado);
	right: var(--papel-lado);
	top: var(--papel-top);
	bottom: -20vh;
	background: var(--wp--preset--color--pergamino) url(../images/papel.webp) center / cover;
	box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.35);
}

.ps-hq__papel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--ps-rasgado-alto);
	background: var(--wp--preset--color--pergamino);
	-webkit-mask: var(--ps-rasgado) center / 100% 100% no-repeat;
	mask: var(--ps-rasgado) center / 100% 100% no-repeat;
	transform: scaleY(-1);
}

/* Ventana con forma de cruz de Santiago por la que se ve el queso. La segunda capa de la
   máscara (un color liso con opacidad --ventana-fundido) descubre al final el resto de la foto */
.ps-hq__ventana {
	-webkit-mask-image: url(../images/cruz-santiago.svg), linear-gradient(rgba(0, 0, 0, var(--ventana-fundido)), rgba(0, 0, 0, var(--ventana-fundido)));
	mask-image: url(../images/cruz-santiago.svg), linear-gradient(rgba(0, 0, 0, var(--ventana-fundido)), rgba(0, 0, 0, var(--ventana-fundido)));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: var(--ventana-ancho) var(--ventana-alto), 100% 100%;
	mask-size: var(--ventana-ancho) var(--ventana-alto), 100% 100%;
	-webkit-mask-position: calc(50vw - var(--ventana-ancho) / 2) calc(var(--ventana-cruce-y) - var(--ventana-alto) * 0.359), 0 0;
	mask-position: calc(50vw - var(--ventana-ancho) / 2) calc(var(--ventana-cruce-y) - var(--ventana-alto) * 0.359), 0 0;
	-webkit-mask-composite: source-over;
	mask-composite: add;
	will-change: mask-size, mask-position;
}

.ps-hq.is-ventana-abierta .ps-hq__ventana {
	-webkit-mask: none;
	mask: none;
}

/* Titular del queso (frame 1872: arriba a la izquierda) */
.ps-hq__ventana::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 40%);
	opacity: var(--t4);
	pointer-events: none;
}

.ps-hq__queso {
	position: absolute;
	z-index: 2;
	top: 7vh;
	left: clamp(1rem, 8.65vw, 166px);
	right: clamp(1rem, 8.65vw, 166px);
	opacity: var(--t4);
	transform: translateY(calc((1 - var(--t4)) * 4vh));
}

.ps-hq__queso > * + * {
	margin-top: 1rem;
}

@media (max-width: 781px) {
	.ps-hq {
		--ventana-alto: calc((42 + var(--t2) * 58 + var(--t3) * var(--t3) * 800) * 1vh);
		height: 660vh;
	}
}

/* Ancla del menú lateral: cae donde ya se ve el queso */
.ps-hq__ancla-queso {
	position: absolute;
	top: 70%;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

/* Sin animaciones: historia y queso como dos bloques estáticos */
@media (prefers-reduced-motion: reduce) {
	.ps-hq,
	.ps-hero + .ps-hq {
		height: auto;
		margin-top: 0;
		scroll-margin-top: 0;
	}

	.ps-hq__escena {
		position: relative;
		height: auto;
		overflow: visible;
	}

	.ps-hq__historia,
	.ps-hq__ventana {
		position: relative;
		min-height: 100vh;
	}

	.ps-hq__texto,
	.ps-hq__queso {
		opacity: 1;
		transform: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ps-hq__papel {
		display: none;
	}

	.ps-hq__ventana {
		-webkit-mask: none;
		mask: none;
	}

	.ps-hq__ventana::before {
		opacity: 1;
	}
}