/**
 * Prexenz · Capa visual de secciones.
 *
 * Propiedad de B. Aquí vive TODO lo visual de las clases del §3 de la
 * especificación, los 7 @keyframes del §4.2 y el CSS de revelado del §4.8.
 *
 * Reglas que este archivo cumple sin excepción:
 *  · No declara ningún token nuevo. Consume los --prexenz-* de :root (style.css).
 *    Las únicas variables que aparecen con valor por defecto son las de
 *    instancia autorizadas (§3.9) y las que escribe movimiento.js.
 *  · No declara :focus-visible: el foco es propiedad de A y es global.
 *  · No usa !important, ni @import, ni peticiones externas.
 *  · Todo selector arranca por una clase del §3 (o :root / @property).
 *
 * Orden obligatorio:
 *  1 capas globales · 2 utilidades · 3 cabecera · 4 hero · 5 cinta ·
 *  6 showreel · 7 servicios · 8 sectores · 9 índice+visor+placa · 10 clientes ·
 *  11 créditos · 12 I+D · 13 cierre · 14 pie · 15 revelado
 */

/* Registro de las dos variables que escribe movimiento.js sobre el hero.
   No son tokens nuevos: son las del §4.3. Se registran para que el foco de
   puntero pueda interpolarse (transition) en lugar de saltar, y para que
   tengan valor inicial cuando el JS no arranca. */
@property --prexenz-luz-x {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 38%;
}
@property --prexenz-luz-y {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 32%;
}


/* ═══════════════════════════════════════════════════════════════════════
   1 · CAPAS GLOBALES
   Tres capas fijas, sin eventos, inyectadas una sola vez en wp_body_open.
   Son las que construyen «la sala»: una única fuente de luz cenital, un
   relleno frío de rebote, viñeta, retícula de encuadre y grano de película.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-sala {
	position: fixed;
	inset: 0;
	z-index: var(--prexenz-z-sala);
	pointer-events: none;
	/* Orden de pintado: la viñeta va la última porque cierra la escena. */
	background-image:
		var(--prexenz-haz-cenital),
		var(--prexenz-relleno-frio),
		var(--prexenz-vineta);
}

.prexenz-reticula {
	position: fixed;
	inset: 0;
	z-index: var(--prexenz-z-reticula);
	pointer-events: none;
	/* 12 columnas exactamente sobre el ancho de contenido, no sobre el
	   viewport: así la retícula coincide con lo que se compone encima. */
	background-image: repeating-linear-gradient(
		90deg,
		var(--prexenz-linea-ambiente) 0 var(--prexenz-filo),
		transparent var(--prexenz-filo) calc(100% / var(--prexenz-columnas))
	);
	background-size: min(1320px, calc(100% - var(--prexenz-margen) * 2)) 100%;
	background-position: 50% 0;
	background-repeat: no-repeat;
	/* Se apaga a 72vh: firma de encuadre en el primer plano, no papel pautado. */
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 34vh, transparent 72vh);
	mask-image: linear-gradient(180deg, #000 0, #000 34vh, transparent 72vh);
}

.prexenz-grano {
	/* Desbordado un 25% por lado para que el desplazamiento del grano nunca
	   descubra un borde sin ruido. */
	position: fixed;
	inset: -25%;
	z-index: var(--prexenz-z-grano);
	pointer-events: none;
	opacity: .055;
	mix-blend-mode: overlay;
	/* feTurbulence en data-URI: 0 peticiones, 0 imágenes, 0 dependencias. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

@keyframes prexenz-grano {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(4%, -5%, 0); }
}

@media (prefers-reduced-motion: no-preference) {
	/* steps(10): el grano salta como fotogramas, no se desliza. */
	.prexenz-grano { animation: prexenz-grano var(--prexenz-t-grano) steps(10) infinite; }
}


/* ═══════════════════════════════════════════════════════════════════════
   2 · UTILIDADES
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-dato {
	font-family: var(--wp--preset--font-family--datos);
	font-variant-numeric: tabular-nums slashed-zero;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .04em;
	color: var(--prexenz-texto-dato);
}

.prexenz-etiqueta {
	/* Familia de datos, no de cuerpo: los antetítulos y las etiquetas son
	   rótulos técnicos —sitio, sector, año— y así se separan del texto
	   corrido. Era la única excepción entre más de diez usos de esta
	   familia en el resto del tema. */
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: var(--prexenz-lh-medio);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
	/* #c2c2c2 y no #a8a8a8: es texto por debajo de 12px (Anexo A). */
	color: var(--prexenz-texto-dato);
}

/* La única palabra iluminada del sitio. Solo dentro del titular del hero. */
.prexenz-hero__titular .prexenz-destello {
	color: var(--prexenz-luz);
	/* El halo hace que la palabra emita en vez de estar simplemente pintada. */
	text-shadow: 0 0 32px var(--prexenz-luz-35);
}

.prexenz-banda {
	position: relative;
	background-color: var(--prexenz-sala);
	border-block: var(--prexenz-filo) solid var(--prexenz-linea-ambiente);
	border-radius: var(--prexenz-radio-0);
	box-shadow: var(--prexenz-sombra-banda);
}

.prexenz-medida { max-width: var(--prexenz-medida); }


/* ═══════════════════════════════════════════════════════════════════════
   3 · CABECERA
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-cabecera {
	/* Fija en TODO el sitio, no solo en la portada. Con sticky ocupaba su
	   sitio en el flujo y empujaba el contenido: en las fichas de proyecto el
	   render empezaba en y=92 en vez de bajo la barra, y la cabecera se leía
	   como una franja negra separada en lugar de flotar sobre la imagen.
	   Las secciones que empiezan con portada a sangre reservan su altura con
	   padding; las que no, lo hacen en main (§ COMPENSACIÓN). */
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--prexenz-z-cabecera);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--prexenz-cabecera-alto);
	/* Despegada del borde: la píldora flota, no se pega arriba. El paso 20 de
	   la escala daba 7px y seguía leyéndose como una barra con las esquinas
	   redondeadas, no como algo que flota. */
	padding-block-start: clamp(12px, 1.5vw, 22px);
	/* La cabecera ya no pinta nada, así que no debe capturar el puntero en
	   todo el ancho: solo la píldora es clicable. */
	pointer-events: none;
	isolation: isolate;
}

/* El cristal de la píldora. Va SIEMPRE encendido y no se enciende con el
   scroll: flotando sobre el render necesita contraste desde el primer
   fotograma, o los enlaces quedan desnudos sobre la imagen.

   El desenfoque va en ::before y NUNCA en el elemento. backdrop-filter
   convierte a quien lo lleva en bloque contenedor de sus hijos position:fixed,
   y el panel del menú es uno: acabaría encerrado dentro de la píldora en vez
   de ocupar la pantalla. Ya pasó una vez con la cabecera. */
.prexenz-cabecera__barra::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	/* Primer intento demasiado tímido: con la base al 62% y realces al 24/16/08
	   el negro de fondo ganaba siempre. Aquí la base baja al 40% y hay TRES
	   capas de cian —lavado uniforme, barrido diagonal, foco superior— para
	   que el tinte se lea en toda la píldora, no solo en una esquina. */
	background-color: color-mix(in srgb, var(--prexenz-sala) 40%, transparent);
	background-image:
		radial-gradient(150% 240% at 16% -70%, var(--prexenz-luz-50) 0%, transparent 60%),
		linear-gradient(115deg, var(--prexenz-luz-fria-12) 0%, transparent 72%),
		linear-gradient(var(--prexenz-luz-16), var(--prexenz-luz-16));
	border: var(--prexenz-filo) solid var(--prexenz-luz-35);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	backdrop-filter: blur(20px) saturate(1.8);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 14px 40px rgba(0, 0, 0, .46),
		0 0 40px var(--prexenz-luz-24);
}

.prexenz-cabecera__marca {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--prexenz-track-marca);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--prexenz-texto);
	white-space: nowrap;
}

.prexenz-cabecera__marca a {
	color: inherit;
	text-decoration: none;
}

.prexenz-cabecera__nav {
	margin-inline-start: auto;
}

.prexenz-cabecera__nav a {
	position: relative;
	/* El enlace de menú NUNCA cambia de color: el acento no se gasta aquí. */
	color: var(--prexenz-texto-dato);
	text-decoration: none;
}

/* Hairline inferior que crece: la retroalimentación es geométrica, no cromática. */
.prexenz-cabecera__nav a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -.45em;
	height: var(--prexenz-filo);
	background-color: var(--prexenz-linea-marca);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-cabecera__nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.prexenz-cabecera__nav a:is(:hover, :focus-visible) { color: var(--prexenz-texto); }

.prexenz-cabecera__nav :where(ul, ol) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.prexenz-cabecera__cta { margin-inline-start: var(--wp--preset--spacing--30); }

/* Por debajo de 48rem el menú central estorba: manda la marca y el botón. */
@media (max-width: 47.999rem) {
	.prexenz-cabecera__nav { display: none; }
	.prexenz-cabecera__cta { margin-inline-start: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   4 · HERO
   Un fotograma completo: letterbox arriba y abajo, metadatos de rodaje,
   cartel a la izquierda, filo de luz vertical y pie con coordenadas.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-hero {
	position: relative;
	display: grid;
	/* Una sola pista. Quedaban tres («auto 1fr auto») de una versión anterior
	   del hero que tenía tres partes; con un único hijo en flujo, este caía
	   en la primera fila y el align-items:end no hacía nada: 376px vacíos en
	   móvil y 403 en escritorio, la mitad del hero. */
	grid-template-rows: 1fr;
	gap: var(--wp--preset--spacing--50);
	min-height: 100svh;
	/* La cabecera es sticky y flota encima: se le reserva su altura. */
	/* OJO: hay una segunda regla .prexenz-hero más abajo en este mismo
	   archivo y es la que manda. El relleno inferior real se fija allí. */
	padding-block:
		calc(var(--prexenz-letterbox) + var(--prexenz-cabecera-alto))
		calc(var(--prexenz-letterbox) + var(--wp--preset--spacing--40));
	isolation: isolate;
	overflow: hidden;
	/* Foco de luz que sigue al puntero. Sin JS se queda en su valor inicial
	   (38% / 32%), que es exactamente donde debe estar la fuente. */
	background-image: radial-gradient(
		42rem 32rem at var(--prexenz-luz-x) var(--prexenz-luz-y),
		var(--prexenz-luz-08),
		transparent 62%
	);
	transition:
		--prexenz-luz-x var(--prexenz-t-panel) var(--prexenz-curva-servo),
		--prexenz-luz-y var(--prexenz-t-panel) var(--prexenz-curva-servo);
}

/* Las dos bandas de letterbox. No son adorno: son lo que declara que esto
   es un plano y no una cabecera de plantilla. */
.prexenz-hero::before,
.prexenz-hero::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	height: var(--prexenz-letterbox);
	background-color: var(--prexenz-sala);
	z-index: 2;
	pointer-events: none;
}

.prexenz-hero::before {
	top: 0;
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea-ambiente);
}

.prexenz-hero::after {
	bottom: 0;
	border-top: var(--prexenz-filo) solid var(--prexenz-linea-ambiente);
}

.prexenz-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	align-items: baseline;
}

.prexenz-hero__titular {
	position: relative;
	max-width: 15ch;
	margin-block: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--cartel);
	font-weight: 800;
	/* NUNCA por debajo de 0.92: decapita Á, Í, Ñ. */
	line-height: var(--prexenz-lh-cartel);
	letter-spacing: var(--prexenz-track-cartel);
	text-align: left;
	text-wrap: balance;
	color: var(--prexenz-texto);
}

.prexenz-hero__linea {
	display: block;
}

@keyframes prexenz-linea-hero {
	from {
		opacity: 0;
		translate: 0 1.5rem;
		clip-path: inset(0 0 100% 0);
		filter: blur(8px);
	}
	to {
		opacity: 1;
		translate: 0 0;
		clip-path: inset(0 0 0 0);
		filter: blur(0);
	}
}

.prexenz-hero__filo {
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(var(--prexenz-margen) * -.5);
	width: var(--prexenz-filo);
	background-image: var(--prexenz-filo-luz-v);
	transform-origin: top center;
}

/* El resplandor del filo no puede ir en box-shadow: con 1px de ancho y
   spread negativo no se pintaría nada. Se compone como halo propio. */
.prexenz-hero__filo::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline: -13px;
	background-image: radial-gradient(50% 42% at 50% 50%, var(--prexenz-luz-24), transparent 70%);
	pointer-events: none;
}

@keyframes prexenz-filo {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Animación de carga, una sola vez. `both` deja el estado final fijado.
	   Sin este @media el titular se ve directamente: nunca queda invisible. */
	.prexenz-hero__linea {
		animation: prexenz-linea-hero var(--prexenz-t-cortina) var(--prexenz-curva-corte) both;
		animation-delay: calc(300ms + var(--prexenz-i, 0) * 120ms);
	}

	.prexenz-hero__filo {
		animation: prexenz-filo var(--prexenz-t-cortina) var(--prexenz-curva-camara) both;
		animation-delay: 200ms;
	}
}

.prexenz-hero__entradilla {
	max-width: 52ch;
	margin-block: var(--wp--preset--spacing--30) 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: var(--prexenz-lh-entradilla);
	color: var(--prexenz-texto-suave);
}

.prexenz-hero__pie {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea-tenue);
}

@keyframes prexenz-latido {
	from { opacity: .4; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	/* Late el último hijo del pie: el «DESLIZA ↓». Es la única invitación
	   a interactuar de toda la portada. */
	.prexenz-hero__pie > :last-child {
		animation: prexenz-latido var(--prexenz-t-latido) ease-in-out infinite alternate;
	}
}

/* En pantallas bajas el 100svh aprieta demasiado: se libera el cartel. */
@media (max-height: 34rem) {
	.prexenz-hero { min-height: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   5 · ENCABEZADO DE SECCIÓN Y SHOWREEL
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Encabezado común a las secciones 7–12 ─────────────────────────────
   Alineado a la izquierda y numerado. Sustituye al centrado sistemático:
   un número de sección es una marca de continuidad, un título centrado
   sin nada debajo es solo aire. */

/* ── Encabezado de sección ─────────────────────────────────────────────
   Medido antes de tocarlo: el h2 salía a 52px, EXACTAMENTE el mismo tamaño
   que el h3 de la tarjeta que va justo debajo. Un encabezado que mide lo
   mismo que sus hijos no jerarquiza nada, y por eso pasaba desapercibido.
   Ahora queda por encima de las tarjetas (52px) y del CTA (63px), y por
   debajo del cartel de portada (92px), que es quien manda.

   El número no se escribe a mano: lo lleva un contador. Numerar aquí sí
   dice algo —la portada es una secuencia de secciones y ese es su orden de
   lectura—, y así añadir o mover una sección no obliga a renumerar nada. */

body { counter-reset: prexenz-seccion; }

.prexenz-encabezado {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(1rem, 2.2vw, 2.25rem);
	row-gap: var(--wp--preset--spacing--20);
	align-items: start;
	position: relative;
	counter-increment: prexenz-seccion;
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	isolation: isolate;
	text-align: start;
	/* El filete ya no es una línea plana: la luz entra por la izquierda, justo
	   por donde está el número, y se va apagando al cruzar la página. Va como
	   fondo y no como «border-top» porque el borde no admite degradado. */
	background-image: linear-gradient(90deg,
		var(--prexenz-luz)          0%,
		var(--prexenz-luz)          5%,
		var(--prexenz-linea-luz)   13%,
		var(--prexenz-linea-fuerte) 32%,
		var(--prexenz-linea)       100%);
	background-size: 100% var(--prexenz-filo-doble);
	background-repeat: no-repeat;
}

/* Resplandor de esquina: el derrame de esa misma luz sobre el número y el
   arranque del título.

   Va en un pseudoelemento desbordado y no en el fondo del propio bloque
   porque ahí se recortaba contra la caja y se leía como un rectángulo azul
   con dos cantos rectos, que es justo lo contrario de un resplandor. */
.prexenz-encabezado::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset-block: -18% -170%;
	inset-inline: -15vw auto;
	width: min(48vw, 640px);
	/* «closest-side» y no un radio en porcentajes: garantiza que el degradado
	   llegue a transparente antes del borde por los cuatro lados. Con radios
	   a ojo quedaba alfa residual en el canto y se veía el rectángulo. */
	background-image: radial-gradient(closest-side,
		var(--prexenz-luz-16)  0%,
		var(--prexenz-luz-08) 38%,
		var(--prexenz-luz-04) 62%,
		transparent           84%);
	pointer-events: none;
}

/* El número SÍ va en cian, y es un cambio deliberado sobre la norma de §8.6
   («el número de sección jamás en cian»): esa regla venía de racionar el
   acento, pero aquí el número es el punto donde nace el haz y dejarlo gris
   partía el gesto por la mitad. El área teñida sigue siendo mínima. */
.prexenz-encabezado::before {
	content: counter(prexenz-seccion, decimal-leading-zero);
	grid-row: 1 / -1;
	font-family: var(--wp--preset--font-family--datos);
	/* Tamaño de figura, no de etiqueta: a 14px el número era un pie de foto y
	   el cian no se veía. A este cuerpo es el elemento gráfico que marca la
	   sección, y el acento ocupa poca área pero pesa. */
	font-size: clamp(1.15rem, .55rem + 1.5vw, 2.1rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--prexenz-track-h3);
	color: var(--prexenz-luz);
	/* Alineado con la altura de mayúscula del título, no con su caja: si no,
	   el número flota por encima de la primera línea. */
	padding-block-start: .22em;
}

/* Tipografía de título de sección, en un solo sitio.

   La comparten los encabezados numerados y el cierre «Hablemos.». El cierre
   se queda con la tipografía pero SIN filete ni número, y no por descuido:
   su borde superior funde a propósito (ver .prexenz-cierre::before) y sale en
   diez plantillas, así que un contador le pondría «01» en cada ficha de
   proyecto, que es numerar una secuencia que no existe. */
.prexenz-encabezado h2,
.wp-block-heading.prexenz-cierre__titulo {
	margin: 0;
	font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.5rem);
	line-height: var(--prexenz-lh-titular);
	color: var(--prexenz-texto);
}

.prexenz-encabezado h2 {
	grid-column: 2;
	max-width: 16ch;
}

.prexenz-encabezado > :not(h2) {
	grid-column: 2;
	margin: 0;
}

/* Red de seguridad: el patrón ya no trae el número escrito a mano, pero si
   alguien pega una copia antigua saldría dos veces. */
.prexenz-encabezado .prexenz-etiqueta { display: none; }

@media (max-width: 47.99rem) {
	/* En móvil el número pasa arriba: en columna le robaba ancho al título. */
	.prexenz-encabezado { grid-template-columns: 1fr; }
	.prexenz-encabezado::before { grid-row: auto; padding-block-start: 0; }
	.prexenz-encabezado h2,
	.prexenz-encabezado > :not(h2) { grid-column: 1; }
}

/* ── Showreel ──────────────────────────────────────────────────────────
   Hueco de vídeo con proporción ya reservada: cuando llegue el póster,
   no se mueve un solo píxel de la página. */

/* A sangre, como el mosaico de proyectos. El grupo «alignwide» que lo
   envolvía no llegaba a aplicarse —WordPress deja el margen en 0 con
   .has-global-padding > .alignwide— y lo dejaba en los 720px de
   .entry-content: la mitad de ancho que la parrilla que va justo debajo.
   Mismo mecanismo que .prexenz-zona-servicios. */
.prexenz-showreel {
	/* Se centra con left + translate, no con márgenes negativos: WordPress
	   fuerza «margin-left/right: 0 !important» sobre los .alignfull hijos de
	   un contenedor constrained y el margen salía a 0, dejando el panel 360px
	   a la derecha. Es el mismo recurso que usa .prexenz-portadilla. */
	position: relative;
	left: 50%;
	translate: -50%;
	width: 100vw;
	max-width: 100vw;
	margin-block: var(--wp--preset--spacing--70);
	box-sizing: border-box;
	display: grid;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--prexenz-radio-panel);
	background-image: var(--prexenz-panel-luz);
	box-shadow: var(--prexenz-bisel), var(--prexenz-sombra-flotante);
}

/* Retícula interna de 32px: el panel vacío tiene textura de monitor, no de
   caja gris. Desaparece en cuanto hay imagen o vídeo dentro. */
.prexenz-showreel::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg, var(--prexenz-linea-ambiente) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(180deg, var(--prexenz-linea-ambiente) 0 1px, transparent 1px 32px);
	pointer-events: none;
}

.prexenz-showreel:has(img, video, iframe)::before { opacity: 0; }

.prexenz-showreel > * {
	grid-area: 1 / 1;
	align-self: stretch;
	justify-self: stretch;
	position: relative;
	z-index: 1;
}

.prexenz-showreel :where(img, video, iframe) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════════════
   6 · SERVICIOS
   Filas de altura de plano, no tarjetas. El título es BLANCO.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-servicios {
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-servicios__fila {
	position: relative;
	display: grid;
	/* El render manda: antes iba a 1fr contra 1.4fr del texto y salía a
	   284×160, diminuto para lo que este estudio vende. */
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	align-items: center;
	/* Sin min-height. Con 42svh la fila se estiraba al alto de la ventana y no
	   al de su contenido: medido, sobraban 135px por fila en una pantalla de
	   1200px de alto y hasta 193px en móvil, casi la mitad de la caja en aire.
	   El relleno ya da el aire que necesita. */
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--30);
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea);
	transition:
		background-color var(--prexenz-t-panel) var(--prexenz-curva-corte),
		translate var(--prexenz-t-panel) var(--prexenz-curva-camara);
}

/* Filo superior encendido. Antes era una barra vertical de 2px en el borde
   izquierdo, plana y de un color a otro: un subrayado lateral que no se
   parecía a nada más de la página.

   Ahora es el mismo gesto que el filete de los encabezados de sección: luz
   que entra por el filo de arriba. Y no uniforme —se enciende en el centro y
   se apaga hacia los extremos, sin cantos— reutilizando --prexenz-filo-luz,
   que ya existía para esto.

   El resplandor lo dan las dos sombras: una corta y densa pegada al filo,
   otra ancha y tenue que se derrama hacia abajo, sobre la fila. Hacia arriba
   apenas sube para no manchar la fila anterior. */
.prexenz-servicios__fila::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: var(--prexenz-filo-doble);
	background-image: var(--prexenz-filo-luz);
	box-shadow:
		0 1px 10px var(--prexenz-luz-50),
		0 8px 28px var(--prexenz-luz-24);
	opacity: 0;
	transform: scaleX(.4);
	transform-origin: center;
	transition:
		opacity   var(--prexenz-t-panel) var(--prexenz-curva-corte),
		transform var(--prexenz-t-panel) var(--prexenz-curva-camara);
}

/* Cristal al pasar por encima: el mismo lenguaje de la píldora de la
   cabecera, aquí en una fila entera.

   Va en ::after y no en el elemento porque el ::before ya está ocupado por la
   barra de estado lateral. Y NO lleva backdrop-filter, a diferencia de la
   píldora: desenfocar el fondo en un elemento que se desplaza con la página
   obliga a repintar en cada fotograma. La píldora puede permitírselo porque
   es fija; una fila de contenido, no. El tinte se consigue con capas de color,
   que no cuestan nada.

   El fondo sólido anterior (--prexenz-elev-1) se sustituye por esto. */
.prexenz-servicios__fila::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--prexenz-sala) 55%, transparent);
	background-image:
		radial-gradient(120% 260% at 12% -60%, var(--prexenz-luz-35) 0%, transparent 58%),
		linear-gradient(115deg, var(--prexenz-luz-fria-12) 0%, transparent 70%),
		linear-gradient(var(--prexenz-luz-10), var(--prexenz-luz-10));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 0 34px var(--prexenz-luz-16);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--prexenz-t-panel) var(--prexenz-curva-corte);
}

.prexenz-servicios__fila:is(:hover, :focus-within)::after {
	opacity: 1;
}

/* isolation + z-index negativo del ::after: el cristal queda por detrás del
   contenido de la fila pero por delante del fondo de la sección. */
.prexenz-servicios__fila {
	isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-servicios__fila::after,
	.prexenz-servicios__fila::before { transition: none; }
	/* Sin la apertura lateral: el filo aparece ya entero. */
	.prexenz-servicios__fila::before { transform: scaleX(1); }
}

.prexenz-servicios__fila:is(:hover, :focus-within)::before {
	opacity: 1;
	transform: scaleX(1);
}

.prexenz-servicios__num {
	align-self: start;
	/* #00adb5 nunca por debajo de 14px sobre superficie elevada (§2.4):
	   se sube de `x-small` a `small` para no bajar del umbral. */
	font-size: var(--wp--preset--font-size--small);
	color: var(--prexenz-luz-fria);
}

.prexenz-servicios__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: var(--prexenz-lh-titular);
	letter-spacing: var(--prexenz-track-h2);
	/* Blanco. Era la fuga de acento más grave del sitio anterior. */
	color: var(--prexenz-texto);
	transition: translate var(--prexenz-t-panel) var(--prexenz-curva-camara);
}

.prexenz-servicios__titulo a {
	color: inherit;
	text-decoration: none;
}

/* El enlace del título cubre la fila entera: área de clic de fila completa. */
.prexenz-servicios__titulo a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.prexenz-servicios__fila:is(:hover, :focus-within) .prexenz-servicios__titulo {
	translate: .5rem 0;
}

.prexenz-servicios__texto {
	max-width: 52ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--prexenz-lh-cuerpo);
	color: var(--prexenz-texto-suave);
}

@media (max-width: 47.999rem) {
	/* En móvil se apila todo en una columna. Con dos columnas, el grupo de
	   título y texto caía en la de 4ch y «Realidad Aumentada» se pintaba una
	   letra por línea. */
	.prexenz-servicios__fila {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		min-height: 0;
		gap: var(--wp--preset--spacing--20);
	}

	.prexenz-servicios__fila > * { grid-column: 1 / -1; }
}


/* ═══════════════════════════════════════════════════════════════════════
   7 · SECTORES
   Seis paneles idénticos en estructura y distintos en dirección de luz:
   --prexenz-g gira la fuente, así ninguno parece copiado del anterior.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SECTORES · BANDAS
   Antes esto era una rejilla de tarjetas con borde, radio, bisel, dos
   sombras, gradiente cónico, líneas de barrido, velo y desplazamiento en
   hover: nueve tratamientos decorativos sobre una caja cuyo único trabajo
   es enseñar un render. La caja desaparece. El render ocupa el ancho
   entero y la estructura la dan el ritmo de las bandas y la tipografía.
   Rima con el letterbox del hero, que ya estaba en el sistema.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-sectores {
	display: block;
}

.prexenz-sector {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(15rem, 38vh, 25rem);
	overflow: hidden;
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
	isolation: isolate;
}

.prexenz-sector:last-child {
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea);
}

/* El render, sin apagar. Lo que se vende aquí es la calidad de imagen: el
   velo va aparte y solo donde hace falta para leer.

   Se posiciona la FIGURA, no la imagen. WordPress envuelve la destacada en
   figure > a > img; al poner en absoluto solo el img, su bloque contenedor
   pasaba a ser un figure sin contenido en flujo —y por tanto de altura
   cero—, así que la imagen medía 0×0 y ni siquiera llegaba a cargarse. */
.prexenz-sector .prexenz-sector__lienzo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	overflow: hidden;
}

.prexenz-sector .prexenz-sector__lienzo a {
	display: block;
	width: 100%;
	height: 100%;
}

.prexenz-sector .prexenz-sector__lienzo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--prexenz-t-panel) var(--prexenz-curva-corte);
}

/* Velo en cuña: carga a la izquierda, donde va el texto, y deja limpia la
   derecha de la imagen. Un velo uniforme apagaba el render entero, que era
   justo lo que había que evitar. */
.prexenz-sector::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		/* Cuña lateral: protege la columna de texto. */
		linear-gradient(
			95deg,
			rgba(10, 10, 11, .95) 0%,
			rgba(10, 10, 11, .88) 28%,
			rgba(10, 10, 11, .55) 46%,
			rgba(10, 10, 11, .12) 64%,
			transparent 76%
		),
		/* Zócalo inferior: el rótulo se apoya abajo y sobre un render claro
		   —una pared blanca, un cielo— el extracto se perdía. Las dos capas
		   juntas cargan en la esquina inferior izquierda y dejan limpia la
		   superior derecha, que es donde se mira la imagen. */
		linear-gradient(
			to top,
			rgba(10, 10, 11, .78) 0%,
			rgba(10, 10, 11, .34) 22%,
			transparent 46%
		);
	pointer-events: none;
	transition: opacity var(--prexenz-t-panel) var(--prexenz-curva-corte);
}

/* El rótulo se alinea con la columna de contenido del resto de la página
   aunque la banda vaya a sangre. */
.prexenz-sector__rotulo {
	width: min(100%, 1180px);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--prexenz-margen);
}

.prexenz-sector__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp(1.6rem, 3.2vw, 3rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: var(--prexenz-track-h3);
	color: var(--prexenz-texto);
	text-wrap: balance;
}

.prexenz-sector__nombre a {
	color: inherit;
	text-decoration: none;
}

.prexenz-sector__nombre a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.prexenz-sector__linea {
	max-width: 44ch;
	margin: .45rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto-suave);
}

/* Único gesto: la banda se enciende. El render se acerca y el velo cede.
   No mueve nada de sitio, así que no hay salto de maquetación. */
@media (hover: hover) {
	.prexenz-sector:is(:hover, :focus-within) .prexenz-sector__lienzo img { scale: 1.04; }
	.prexenz-sector:is(:hover, :focus-within)::before { opacity: .78; }
}

/* En móvil el rótulo ocupa el ancho completo, así que la cuña lateral deja
   el final de cada línea sobre la parte iluminada del render. El velo pasa a
   ser un zócalo vertical, que es lo que corresponde a esa maquetación. */
@media (max-width: 47.999rem) {
	.prexenz-sector::before {
		background-image: linear-gradient(
			to top,
			rgba(10, 10, 11, .94) 0%,
			rgba(10, 10, 11, .86) 34%,
			rgba(10, 10, 11, .44) 58%,
			rgba(10, 10, 11, .12) 78%,
			transparent 100%
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-sector .prexenz-sector__lienzo img { transition: none; }
	.prexenz-sector:is(:hover, :focus-within) .prexenz-sector__lienzo img { scale: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════
   8 · CLIENTES INSTITUCIONALES
   Sin logos todavía: los nombres compuestos como una franja de créditos.
   Los hairlines se obtienen con gap de 1px sobre fondo, así también
   funcionan cuando la franja envuelve a dos líneas.
   ═══════════════════════════════════════════════════════════════════════ */

/* A sangre con left + translate, como el showreel y el comparador: al dejar
   de estar dentro de otro grupo, la franja pasó a ser hija directa del
   contenedor constrained y WordPress le anula el margen de .alignfull,
   dejándola en los 720px de .entry-content. */
.prexenz-clientes {
	position: relative;
	left: 50%;
	translate: -50%;
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--prexenz-filo);
	background-color: var(--prexenz-linea);
	border-block: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-clientes__item {
	display: grid;
	place-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 6.5rem;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	background-color: var(--prexenz-fondo);
	text-align: center;
	text-wrap: balance;
	color: var(--prexenz-texto-dato);
	transition: color var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-clientes__item:hover { color: var(--prexenz-texto); }

/* Cuando lleguen los logos: mismo contenedor, tratados como marca de agua. */
.prexenz-clientes__item :where(img) {
	max-height: 2.75rem;
	width: auto;
	filter: grayscale(1) brightness(1.9) contrast(.85);
	opacity: .6;
	transition: opacity var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-clientes__item:hover :where(img) { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════
   9 · CRÉDITOS (EQUIPO)
   Compuesto como los créditos finales de una película: cargo a la derecha,
   inicial en el eje, nombre a la izquierda. Cero discos cian.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-creditos {
	/* A la columna de 1180, como los encabezados y el resto de secciones.
	   Con 52rem las filas quedaban 230px a la derecha del titular que las
	   encabeza. Se centra con left+translate por el mismo motivo que allí:
	   hay contenedores anidados y el margen negativo salía desplazado. */
	position: relative;
	left: 50%;
	translate: -50%;
	width: min(100vw - var(--prexenz-margen) * 2, 1180px);
	max-width: none;
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

/* Orden de lectura: inicial · nombre · cargo. Antes era cargo · inicial ·
   nombre con el cargo alineado a la derecha en una rejilla simétrica, y en
   720px de ancho eso dejaba un borde izquierdo dentado y cargos partidos en
   dos líneas. A 1180 se lee como lo que es: una lista de créditos. */
.prexenz-creditos__fila {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea-tenue);
}

/* La fila también va fijada. Con solo la columna, la colocación automática
   no retrocede: el cargo va primero en el marcado y ocupaba la columna 3 de
   la fila 1, así que inicial y nombre caían a una segunda fila. */
.prexenz-creditos__inicial { grid-column: 1; grid-row: 1; }
.prexenz-creditos__nombre  { grid-column: 2; grid-row: 1; }
.prexenz-creditos__cargo   { grid-column: 3; grid-row: 1; }

.prexenz-creditos__cargo {
	margin: 0;
	text-align: end;
	/* Nunca cian: el cargo es información, no acento. */
	color: var(--prexenz-texto-suave);
}

/* Sin caja: era un panel con borde, radio y degradado —el lenguaje que se
   retiró del resto— metido en mitad de la fila. La inicial se queda como
   letra, que es lo que sustituye a la foto que aún no hay. */
.prexenz-creditos__inicial {
	display: grid;
	place-items: center;
	width: 56px;
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	line-height: 1;
	color: var(--prexenz-texto-dato);
}

.prexenz-creditos__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: var(--prexenz-lh-medio);
	letter-spacing: var(--prexenz-track-h3);
	color: var(--prexenz-texto);
	text-wrap: balance;
}

@media (max-width: 47.999rem) {
	/* En móvil la simetría de créditos no cabe: se apila alineado a inicio. */
	.prexenz-creditos__fila {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}
	.prexenz-creditos__cargo {
		grid-column: 2;
		grid-row: 2;
		text-align: start;
	}
	.prexenz-creditos__inicial { grid-row: 1 / span 2; }
	.prexenz-creditos__nombre { grid-column: 2; grid-row: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════
   10 · I+D Y FEDER
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-id {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 64rem) {
	.prexenz-id {
		grid-template-columns: minmax(14rem, 1fr) 2.6fr;
		align-items: start;
	}

	/* Pegajoso SOLO con dos columnas, que es donde tiene sentido: el título
	   acompaña al texto de al lado. Por debajo de 64rem la rejilla colapsa a
	   una columna y el título quedaba flotando por encima de la tabla de
	   financiación, tapándole las celdas al bajar. */
	.prexenz-id__titulo {
		position: sticky;
		top: calc(var(--prexenz-cabecera-alto) + 2rem);
	}
}

.prexenz-id__titulo {
	margin: 0;
}

.prexenz-tabla {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Aviso visual de que hay más tabla a la derecha en pantallas estrechas. */
	overscroll-behavior-x: contain;
}

.prexenz-feder {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--prexenz-sala);
	border-block: var(--prexenz-filo) solid var(--prexenz-linea);
}

@media (min-width: 48rem) {
	.prexenz-feder { grid-template-columns: 260px minmax(0, 1fr); }
}

/* Aquí había un hueco reservado para el logo FEDER: una caja con borde y
   fondo que, vacía, se leía como una imagen rota —sobre todo en móvil, donde
   ocupa todo el ancho—. El emblema oficial ya aparece en la franja de
   distintivos del pie, y el texto de al lado lleva la atribución completa.
   Cuando llegue el archivo basta con añadir la imagen al bloque: la regla de
   abajo ya la dimensiona. */

.prexenz-feder :where(img) {
	width: 100%;
	max-width: 260px;
	height: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   11 · CIERRE
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-cierre {
	position: relative;
	padding-block: var(--wp--preset--spacing--80);
	background-color: var(--prexenz-sala);
	box-shadow: var(--prexenz-sombra-banda);
}

/* El borde superior no corta: funde. Es el mismo token de fundido inferior
   volteado, para no inventar un gradiente nuevo. */
.prexenz-cierre::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: var(--wp--preset--spacing--60);
	background-image: var(--prexenz-fundido-inferior);
	transform: scaleY(-1);
	pointer-events: none;
}

.prexenz-cierre > * { position: relative; z-index: 1; }

/* Dos columnas: el reclamo con su invitación y sus botones a la izquierda,
   los datos de contacto como ficha a la derecha. Antes eran cinco elementos
   apilados en una columna estrecha pegada a x=0, con dos tercios del ancho
   vacíos. */
.prexenz-cierre__cuerpo {
	width: min(100% - var(--prexenz-margen) * 2, 1180px);
	margin-inline: auto;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 62rem) {
	.prexenz-cierre__cuerpo {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}

.prexenz-cierre h2 {
	max-width: 14ch;
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--cartel);
	line-height: var(--prexenz-lh-cartel);
	letter-spacing: var(--prexenz-track-cartel);
	color: var(--prexenz-texto);
}

.prexenz-cierre__entrada {
	max-width: 46ch;
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* La ficha de datos: cada uno con su etiqueta encima, como en las fichas de
   proyecto. Un filete de luz a la izquierda la separa del reclamo sin
   necesidad de una caja. */
.prexenz-cierre__ficha {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: start;
}

@media (min-width: 62rem) {
	.prexenz-cierre__ficha {
		padding-inline-start: var(--wp--preset--spacing--40);
		border-inline-start: var(--prexenz-filo) solid var(--prexenz-luz-24);
	}
}

.prexenz-cierre__dato {
	display: grid;
	gap: .25rem;
}

.prexenz-cierre__clave {
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
	color: var(--prexenz-texto-dato);
}

.prexenz-cierre__valor {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto);
	text-decoration: none;
}

a.prexenz-cierre__valor {
	/* Zona táctil cómoda sin cambiar el tamaño de letra. */
	display: inline-block;
	min-height: 44px;
	padding-block: .35rem;
	transition: color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

a.prexenz-cierre__valor:hover,
a.prexenz-cierre__valor:focus-visible { color: var(--prexenz-acento); }

/* El correo sigue siendo el dato principal, pero ya no compite con el
   reclamo: baja de «x-large» a «large» y vive dentro de la ficha. */
.prexenz-cierre__email {
	display: inline-block;
	min-height: 44px;
	padding-block: .2rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: var(--prexenz-lh-medio);
	letter-spacing: var(--prexenz-track-h3);
	color: var(--prexenz-texto);
	text-decoration: underline;
	text-decoration-color: var(--prexenz-luz-35);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition:
		text-decoration-color var(--prexenz-t-micro) var(--prexenz-curva-corte),
		text-decoration-thickness var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-cierre__email:hover {
	text-decoration-color: var(--prexenz-luz);
	text-decoration-thickness: 2px;
}

/* El botón primario del cierre es la única pieza maciza de cian del sitio. */
.prexenz-cierre .wp-block-button__link {
	transition:
		background-color var(--prexenz-t-control) var(--prexenz-curva-corte),
		border-color var(--prexenz-t-control) var(--prexenz-curva-corte),
		color var(--prexenz-t-control) var(--prexenz-curva-corte),
		box-shadow var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-cierre .wp-block-buttons > :first-child .wp-block-button__link:hover {
	box-shadow: var(--prexenz-resplandor);
}


/* ═══════════════════════════════════════════════════════════════════════
   12 · PIE
   ═══════════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════════
   13 · REVELADO
   Aquí había un revelado hecho con animation-timeline: view(). Se retira.

   El contrato decía «el CSS solo oculta si el JS arrancó», pero
   animation-timeline es CSS puro: se aplicaba igual con JavaScript
   desactivado y dejaba invisible, entre otras cosas, la franja de contacto
   entera. Medido: 122 elementos ocultos sin JS en las 12 páginas.

   El revelado lo hace ahora escena.js con GSAP, que sí puede garantizar que
   nada se esconde si no hay quien lo devuelva a la vista.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   OBRAS · La parrilla de proyectos con el render de protagonista.
   El estudio vende imagen: la imagen ocupa la tarjeta entera y el texto
   se apoya encima sobre un degradado, no en una columna al lado.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Proyectos: parrilla de tres ───────────────────────────────────────
   Antes de esto hubo tres intentos: un desfile horizontal anclado que
   secuestraba el desplazamiento, un mosaico de zigzag 7+5 que dejaba la
   sección en 3132px de alto, y una parrilla de cuatro con una pieza doble
   cada siete.

   Tres por fila, todas iguales y a filo de 2px. La imagen es bastante más
   grande que a cuatro y los títulos respiran; la sección ocupa 1442px, la
   mitad que el mosaico. Sin destacados: en un archivo el visitante viene a
   verlos todos, y que uno pese más que otro no le ayuda. */

.prexenz-obras {
	padding-inline: 0;
}

/* Con el selector del padre: WordPress emite las columnas del post-template
   («repeat(auto-fill, minmax(min(440px, 100%), 1fr))») en una clase generada
   con la misma especificidad que esta, y como su hoja va después, ganaba. */
.prexenz-obras .prexenz-obras__lista {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--prexenz-filo-doble);
}

/* min-width: 0 no es cosmético: los elementos de rejilla nacen con
   «min-width: auto» y .prexenz-obra pide 462px de mínimo —260px de alto por
   su proporción—, así que en móvil la pieza se salía de una ventana de
   390px. No se veía como desborde porque el body lleva overflow-x: clip. */
.prexenz-obras .prexenz-obras__lista > * { min-width: 0; margin: 0; }

/* La proporción va en la casilla, no en la tarjeta: estando en .prexenz-obra
   —que lleva height: 100%— el ancho se calculaba desde la altura de la fila
   y la tarjeta se salía de su casilla. */
.prexenz-obras .prexenz-obras__lista > * { aspect-ratio: 4 / 3; }
.prexenz-obras .prexenz-obras__lista > * .prexenz-obra { width: 100%; height: 100%; min-height: 0; }

/* El bloque de imagen destacada escribe su proporción EN LÍNEA sobre la
   <img>, y eso gana a cualquier hoja: la imagen se quedaba a 269px dentro de
   una tarjeta de 359 y el título caía en una banda negra debajo en vez de
   apoyarse sobre el render. El !important es la única forma de anularlo. */
.prexenz-obras .prexenz-obra .prexenz-obra__lienzo img {
	aspect-ratio: auto !important;
	height: 100%;
}

/* Dos columnas en tableta y una sola en móvil, donde el formato se abre a
   16:9 porque a 4:3 la tarjeta ocupaba casi la pantalla entera. */
@media (max-width: 63.999rem) {
	.prexenz-obras .prexenz-obras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.999rem) {
	.prexenz-obras .prexenz-obras__lista { grid-template-columns: 1fr; }
	.prexenz-obras .prexenz-obras__lista > * { aspect-ratio: 16 / 9; }
}

.prexenz-obra {
	position: relative;
	overflow: hidden;
	background: var(--prexenz-elev-1);
	isolation: isolate;
	/* Rellena la celda: si no, la tarjeta que comparte fila con la destacada
	   deja un hueco negro debajo de su imagen. */
	height: 100%;
	min-height: 260px;
}

.prexenz-obra .prexenz-obra__lienzo,
.prexenz-obra .prexenz-obra__lienzo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* El zoom lo comparten la imagen destacada y los fotogramas del pase: si
   solo creciera la de debajo, al pasar un fotograma la tarjeta daría un
   respingo hacia atrás.

   Reposa en 1, no en 1.02: el revelado de entrada termina en 1 y ahí se le
   devuelve la propiedad al CSS, así que cualquier otro valor produciría un
   salto justo al acabar la animación. */
.prexenz-obra .prexenz-obra__lienzo img,
.prexenz-obra .prexenz-obra__fotograma img {
	scale: 1;
	/* Curva simétrica —arranca y termina despacio— y no una de salida rápida:
	   con curva-servo la entrada quedaba bien, pero al soltar el puntero el
	   movimiento empezaba de golpe y luego se arrastraba. Con esta, ir y
	   volver se sienten igual, que es lo que se espera de un zoom. */
	transition: scale var(--prexenz-t-plano) var(--prexenz-curva-camara);
}

.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__lienzo img,
.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__fotograma img {
	scale: 1.05;
}

.prexenz-obra .prexenz-obra__lienzo img {
	/* Reposa casi a plena luz. Antes bajaba a brightness(.78) y saturate(.72):
	   apagaba justo la calidad de imagen que es el producto. Se deja un
	   margen mínimo para que el hover siga notándose. */
	filter: saturate(.94) contrast(1.02) brightness(.94);
	transition:
		filter var(--prexenz-t-panel) var(--prexenz-curva-camara),
		scale  var(--prexenz-t-plano) var(--prexenz-curva-camara);
}

.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__lienzo img {
	filter: saturate(1) contrast(1.04) brightness(1);
}

/* Velo inferior: garantiza contraste del texto sea cual sea el render. */
.prexenz-obra::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 58%;
	/* Reforzado al subir el brillo del render de .78 a .94: con el velo
	   anterior el título quedaba justo en el filo del contraste sobre los
	   renders claros —el mural del hospital, el loft blanco—. */
	background: linear-gradient(to top,
		rgba(6, 6, 7, .96) 14%,
		rgba(6, 6, 7, .82) 40%,
		rgba(6, 6, 7, .34) 70%,
		transparent 100%);
	pointer-events: none;
	z-index: 1;
}

.prexenz-obra__pie {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: grid;
	gap: .35rem;
	padding: var(--wp--preset--spacing--30);
}

.prexenz-obra__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--prexenz-lh-titular);
	/* Sin partir palabras: «Aumentada» no puede quedar como «Aumenta-da». */
	hyphens: none;
	text-wrap: balance;
}

.prexenz-obra__titulo a {
	color: var(--prexenz-texto);
	text-decoration: none;
}

/* Toda la tarjeta es zona de clic, sin anidar enlaces. */
.prexenz-obra__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.prexenz-obra__meta {
	margin: 0;
	color: var(--prexenz-texto-dato);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
}

/* Filo de luz al posarse: el acento ilumina, no rellena. */
.prexenz-obra::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	box-shadow: inset 0 0 0 1px var(--prexenz-linea-luz);
	opacity: 0;
	transition: opacity var(--prexenz-t-control) var(--prexenz-curva-corte);
	pointer-events: none;
}

.prexenz-obra:is(:hover, :focus-within)::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	/* El estado de hover va incluido a propósito: sin él, su selector tiene
	   más especificidad que el de reposo y la imagen seguía creciendo a 1.05
	   con el movimiento reducido. Antes no se notaba porque el zoom no
	   llegaba a aplicarse nunca. */
	.prexenz-obra .prexenz-obra__lienzo img,
	.prexenz-obra .prexenz-obra__fotograma img,
	.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__lienzo img,
	.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__fotograma img {
		filter: none;
		scale: 1;
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   CABECERA CON MATERIAL
   Un estudio que vende realismo no puede presentarse con tipografía sobre
   negro. El render va detrás, a sangre, y el texto se apoya encima con el
   contraste garantizado por dos velos.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(94vh, 900px);
	/* El relleno inferior reserva la banda de letterbox. Al bajar el
	   contenido al fondo con align-items:end, los botones quedaban
	   cortados por ella.

	   Y suma el hueco del banner de cookies mientras esté en pantalla: es
	   fijo al fondo y tapaba «Ver proyectos», que es el botón principal. La
	   variable la publica el plugin y vale 0 cuando no hay banner. */
	padding: var(--wp--preset--spacing--60) var(--prexenz-margen)
		calc( var(--prexenz-letterbox) + var(--wp--preset--spacing--40) + var(--prexenz-hueco-consentimiento, 0px) );
	overflow: hidden;
	isolation: isolate;
	background: var(--prexenz-sala);
}

.prexenz-hero .prexenz-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.prexenz-hero .prexenz-hero__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Apagada y fría: el render ambienta, el texto manda. */
	filter: saturate(.62) brightness(.46) contrast(1.06);
	scale: 1.04;
}

/* Velo vertical para el texto + viñeta lateral para cerrar el encuadre. */
.prexenz-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(6,6,7,.96) 4%, rgba(6,6,7,.70) 38%, rgba(6,6,7,.30) 70%, rgba(6,6,7,.55) 100%),
		var(--prexenz-vineta);
	pointer-events: none;
}

.prexenz-hero__cuerpo {
	position: relative;
	/* Ancho generoso: el claim son seis palabras y con una medida corta
	   quedaba una letra por línea. */
	width: min(100%, 1180px);
}

.prexenz-hero__titular {
	margin: .6rem 0 0;
	/* Grande, pero no tanto como para que una sola palabra ocupe la línea. */
	font-size: clamp(2.5rem, 6.4vw, 6rem);
	line-height: var(--prexenz-lh-cartel);
	letter-spacing: var(--prexenz-track-cartel);
	/* Sin partir palabras y sin desbordar por la derecha, que es lo que
	   pasaba con el titular anterior a 1440 px. */
	hyphens: none;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.prexenz-hero__entradilla {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 46ch;
	color: var(--prexenz-texto-suave);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--prexenz-lh-entradilla);
}

.prexenz-hero__acciones {
	margin-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 640px) {
	.prexenz-hero__cuerpo { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-hero .prexenz-hero__fondo img { scale: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SANGRE COMPLETA
   Las secciones de imagen tienen que llegar al borde de la pantalla aunque
   estén dentro de un contenedor con ancho de lectura. alignfull de WordPress
   solo escapa un nivel; estas van anidadas dentro de patrones, así que se
   fuerza aquí.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sin :where(): esa pseudoclase anula la especificidad y era justo lo que
   hacía falta conservar aquí. */
.wp-block-group.prexenz-hero,
.wp-block-query.prexenz-obras,
.wp-block-group.prexenz-obras,
.wp-block-query.prexenz-bandas,
.wp-block-query.prexenz-entradas,
.wp-block-group.prexenz-faq {
	/* Especificidad deliberada (0-2-0): WordPress aplica
	   .has-global-padding > .alignfull con esa misma especificidad y, como
	   .entry-content mide 720px sin relleno global, deja los márgenes a 0 y
	   la sección no llega al borde. Esta regla carga después y gana. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	/* Sin esto el relleno lateral se suma al 100vw y la sección se desborda
	   por la derecha. */
	box-sizing: border-box;
}

/* El interior sí respeta el margen de lectura. */
.prexenz-hero__cuerpo {
	margin-inline: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   ESCALONADO DE LOS CRÉDITOS
   El retardo venía de un style="--prexenz-i" en el marcado, y eso invalida
   el bloque en el editor. Como las filas son pocas y fijas, se deriva aquí.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-creditos__fila:nth-child(1) { --prexenz-i: 0; }
.prexenz-creditos__fila:nth-child(2) { --prexenz-i: 1; }
.prexenz-creditos__fila:nth-child(3) { --prexenz-i: 2; }
.prexenz-creditos__fila:nth-child(4) { --prexenz-i: 3; }
.prexenz-creditos__fila:nth-child(5) { --prexenz-i: 4; }
.prexenz-creditos__fila:nth-child(6) { --prexenz-i: 5; }
.prexenz-creditos__fila:nth-child(n+7) { --prexenz-i: 6; }

/* ═══════════════════════════════════════════════════════════════════════
   CORRECCIONES DE DESBORDE
   Dos titulares se salían de su caja: el tamaño «cartel» está pensado para
   la cabecera, que ocupa el ancho entero, no para columnas estrechas.
   ═══════════════════════════════════════════════════════════════════════ */

/* «Ficha de financiación» se metía encima de la tabla porque el título vivía
   en una columna estrecha y la palabra es más ancha que ella. Dos columnas no
   aportaban nada aquí: el título va encima y la tabla debajo, a todo el ancho.
   Es además lo que mejor se lee en móvil. */
@media (min-width: 48rem) {
	.prexenz-feder { grid-template-columns: minmax(0, 1fr); }
}

.prexenz-feder > :is(h2, h3) {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
	overflow-wrap: normal;
	hyphens: none;
}

/* «Hablemos» se salía de la caja. Se ajusta el tamaño a lo que cabe de
   verdad y NO se permite partir la palabra: «Hablemo / s.» es peor que un
   titular algo menor. */
.prexenz-cierre h2 {
	max-width: 100%;
	font-size: clamp(2.25rem, 5.2vw, 5rem);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.prexenz-cierre__email {
	max-width: 100%;
	font-size: clamp(1.35rem, 2.6vw, 2.25rem);
	overflow-wrap: anywhere;
}

/* Titular del cierre. No usa el preset «cartel» a propósito: las clases de
   tamaño de WordPress llevan !important y a 1440px daban 151px, con lo que
   «Hablemos.» se salía de sus 720px de caja. */
.wp-block-heading.prexenz-cierre__titulo {
	/* El tamaño ya no se fija aquí: lo comparte con los encabezados de
	   sección. Lo que queda es lo que impide que «Hablemos.» se parta. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* El título de I+D vive en una columna de 224px y «Investigación» no cabe
   en ella a tamaño de titular. */
.wp-block-heading.prexenz-id__titulo {
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOSAICO DE CABECERA
   Cinco renders encadenados con un acercamiento lento. Hace el efecto de un
   vídeo de fondo sin los megas de un vídeo de fondo: cada imagen pesa unos
   200 KB en WebP y el navegador solo pinta la que toca.

   Los fotogramas están escritos para CINCO capas (cada una ocupa el 20% del
   ciclo). Si se cambia el atributo «cuantos» del bloque hay que ajustar los
   porcentajes: los selectores de @keyframes no admiten calc().
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-mosaico {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: var(--prexenz-sala);

	--prexenz-plano: 7s;
	--prexenz-ciclo: calc(var(--prexenz-plano) * 5);
}

.prexenz-mosaico__capa {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	will-change: opacity, scale;
	animation:
		prexenz-encadenado var(--prexenz-ciclo) linear infinite,
		prexenz-acercar    var(--prexenz-ciclo) linear infinite;
	/* Cada capa entra un plano después que la anterior. */
	animation-delay: calc(var(--prexenz-capa) * var(--prexenz-plano));
}

.prexenz-mosaico__capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Apagada y fría: el render ambienta, el claim manda. */
	filter: saturate(.6) brightness(.42) contrast(1.08);
}

/* Velo del hero. No existía: lo que se creía velo eran las bandas de
   letterbox. Va dentro del mosaico, por encima de las capas de imagen y por
   debajo del contenido, y carga abajo, que es donde se apoya el claim. */
.prexenz-mosaico::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(6, 6, 7, .74) 0%,
		rgba(6, 6, 7, .46) 32%,
		rgba(6, 6, 7, .16) 62%,
		transparent 84%);
	pointer-events: none;
}

@keyframes prexenz-encadenado {
	0%   { opacity: 0; }
	2%   { opacity: 1; }
	18%  { opacity: 1; }
	20%  { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes prexenz-acercar {
	0%   { scale: 1.02; }
	20%  { scale: 1.12; }
	100% { scale: 1.12; }
}

/* Quien ha pedido menos movimiento ve una sola imagen, quieta. */
@media (prefers-reduced-motion: reduce) {
	.prexenz-mosaico__capa { animation: none; opacity: 0; }
	.prexenz-mosaico__capa:first-child { opacity: 1; }
	.prexenz-mosaico__capa img { scale: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECUENCIA EN LAS TARJETAS
   Al posarse sobre una obra, sus renders se encadenan. Es lo más parecido a
   ver el proyecto en movimiento sin cargar un solo vídeo de terceros.
   ═══════════════════════════════════════════════════════════════════════ */

/* El pase entero se funde con el contenedor, no fotograma a fotograma: al
   soltar el puntero se retiraba la animación y la opacidad saltaba a 0 sin
   transicionar —quitar una animación no dispara transiciones—, así que el
   fotograma que hubiera en pantalla desaparecía de un corte. */
.prexenz-obra__secuencia {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity var(--prexenz-t-panel) var(--prexenz-curva-camara);
	pointer-events: none;
}

.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__secuencia { opacity: 1; }

.prexenz-obra__fotograma {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.prexenz-obra__fotograma img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1) contrast(1.04);
}

/* Solo se anima al posarse: en reposo la tarjeta está quieta y no consume.

   Iba con steps(1, end) y saltos de opacidad de 0 a 1 en un 1% del ciclo:
   eso no es una transición, es un corte de plano. Ahora cada fotograma entra
   y sale con rampa, y el ciclo se alarga de 3,2s a 4,4s —1,1s por imagen—
   porque a 0,8s el pase no daba tiempo ni a mirar el render.

   Las rampas son asimétricas a propósito: el que entra tarda un 6% y el que
   sale un 10%, así que el nuevo ya está opaco antes de que el anterior se
   vaya. Debajo siempre está la imagen destacada, de modo que el solape nunca
   deja ver el fondo. */
/* La animación está siempre declarada pero PAUSADA en reposo, y no puesta
   solo al posarse: una animación pausada no consume, y sobre todo no salta
   al soltar el puntero —se queda en el fotograma que estuviera— para que el
   fundido del contenedor tenga algo que desvanecer. */
.prexenz-obra__fotograma {
	animation: prexenz-pasar-fotograma 4.4s linear infinite;
	animation-delay: calc((var(--prexenz-fotograma) - 1) * 1.1s);
	animation-play-state: paused;
}

.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__fotograma {
	animation-play-state: running;
}

@keyframes prexenz-pasar-fotograma {
	0%   { opacity: 0; }
	6%   { opacity: 1; }
	25%  { opacity: 1; }
	35%  { opacity: 0; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-obra__fotograma,
	.prexenz-obra:is(:hover, :focus-within) .prexenz-obra__fotograma {
		animation: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPARADOR
   El claim pregunta si sabrías decir qué es real. Aquí se puede comprobar.
   El corte lo lleva una variable que mueve el input de rango, así que la
   pieza se maneja con ratón, con dedo y con teclado.
   ═══════════════════════════════════════════════════════════════════════ */

/* A sangre, igual que el showreel y el mosaico. Mismo recurso que allí:
   left + translate, porque el margen negativo lo anula WordPress. */
.prexenz-comparador {
	position: relative;
	left: 50%;
	translate: -50%;
	width: 100vw;
	max-width: 100vw;
	margin-block: var(--wp--preset--spacing--50);
	box-sizing: border-box;
}

.prexenz-comparador__lienzo {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--prexenz-elev-1);
	border: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-comparador__base,
.prexenz-comparador__encima {
	position: absolute;
	inset: 0;
}

.prexenz-comparador__base img,
.prexenz-comparador__encima img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* La capa de encima se recorta hasta el corte. Sin JavaScript el corte vale
   el 50% que trae escrito, así que la pieza se ve igualmente. */
.prexenz-comparador__encima {
	clip-path: inset(0 calc(100% - var(--prexenz-corte)) 0 0);
}

.prexenz-comparador__filo {
	position: absolute;
	inset-block: 0;
	left: var(--prexenz-corte);
	width: 2px;
	margin-left: -1px;
	background: var(--prexenz-luz);
	box-shadow: var(--prexenz-resplandor-duro);
	pointer-events: none;
}

.prexenz-comparador__asa {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3rem;
	height: 3rem;
	translate: -50% -50%;
	border: 2px solid var(--prexenz-luz);
	border-radius: 50%;
	background: rgba(6, 6, 7, .55);
	backdrop-filter: blur(6px);
}

/* Las dos flechas del asa, dibujadas con bordes. */
.prexenz-comparador__asa::before,
.prexenz-comparador__asa::after {
	content: "";
	position: absolute;
	top: 50%;
	width: .5rem;
	height: .5rem;
	border: solid var(--prexenz-luz);
	border-width: 2px 2px 0 0;
}

.prexenz-comparador__asa::before { left: .55rem;  rotate: -135deg; translate: 0 -50%; }
.prexenz-comparador__asa::after  { right: .55rem; rotate: 45deg;   translate: 0 -50%; }

.prexenz-comparador__etiqueta {
	position: absolute;
	bottom: var(--wp--preset--spacing--20);
	padding: .35rem .75rem;
	background: rgba(6, 6, 7, .72);
	color: var(--prexenz-texto);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
}

.prexenz-comparador__etiqueta--iz { left: var(--wp--preset--spacing--20); }
.prexenz-comparador__etiqueta--de { right: var(--wp--preset--spacing--20); }

/* El mando cubre toda la pieza y es invisible: se arrastra donde se ve. */
.prexenz-comparador__mando {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	background: transparent;
}

.prexenz-comparador__mando::-webkit-slider-thumb {
	appearance: none;
	width: 3rem;
	height: 100%;
}

.prexenz-comparador__mando::-moz-range-thumb {
	width: 3rem;
	height: 100%;
	border: 0;
	background: transparent;
}

/* El foco tiene que verse aunque el mando sea invisible. */
.prexenz-comparador:has(.prexenz-comparador__mando:focus-visible) .prexenz-comparador__lienzo {
	outline: 2px solid var(--prexenz-luz);
	outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   COREOGRAFÍA
   Nada se esconde por defecto. Es escena.js quien marca <html> con la clase
   .prexenz-escena, y solo entonces se preparan los elementos para revelarlos.
   Si el JavaScript no llega, la página se ve entera.
   ═══════════════════════════════════════════════════════════════════════ */

/* Máscara de palabra: recorta, y la palabra sube desde debajo del recorte. */
.prexenz-mascara {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Sitio para las colas de la g, la j, la q y el signo de apertura.

	   Medido, no estimado: a 92px Kanit desciende 22px bajo la línea base,
	   0.24em. El 0.12em que valía para Technor —una grotesca de descendentes
	   cortas— cortaba los rabos justo por la mitad. Se deja 0.26em, con algo
	   de holgura para pesos distintos. */
	padding-bottom: 0.26em;
	margin-bottom: -0.26em;
}

.prexenz-palabra {
	display: inline-block;
	will-change: transform;
}

/* Telón de entrada. */
.prexenz-telon {
	position: fixed;
	inset: 0;
	z-index: var(--prexenz-z-telon);
	background: var(--prexenz-sala);
	pointer-events: none;
}

/* Mientras el telón está echado no se puede desplazar la página. */
body:has(.prexenz-telon) { overflow: hidden; }

/* Desfile horizontal de proyectos. */
/* La sección anclada deja un resto de 360px asomando por el lado: es el hueco
   que dejan sus márgenes negativos cuando ScrollTrigger la saca del flujo.
   Se recorta en la raíz con «clip» y no con «hidden», porque hidden crea un
   contexto de desplazamiento y rompería el propio anclaje. */
html,
body {
	overflow-x: clip;
}


/* Los botones se mueven con el puntero: el envoltorio no debe recortarlos. */
.prexenz-escena .wp-block-button { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════════════
   CABECERA
   Antes era un menú suelto flotando sobre el contenido. Ahora es una barra
   de verdad: se pega arriba al bajar, se difumina lo que pasa por detrás y
   se aparta cuando el visitante está leyendo.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-cabecera {
	/* Fija, no pegajosa. Antes era sticky para no tener que compensar con
	   relleno, pero eso hacía que ocupara sitio en el flujo y empujara el
	   contenido: en las fichas de proyecto el render arrancaba en y=92 y la
	   barra se leía como una franja negra separada en vez de flotar sobre la
	   imagen. La compensación se hace ahora en un solo sitio
	   (§ COMPENSACIÓN DE LA CABECERA FIJA), solo donde hace falta.

	   OJO: esta regla llega después de la del bloque 3 y es la que manda.
	   Cambiar solo aquella no surte efecto. */
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--prexenz-z-cabecera);
	transition:
		transform var(--prexenz-t-panel) var(--prexenz-curva-corte),
		background-color var(--prexenz-t-panel) var(--prexenz-curva-corte),
		border-color var(--prexenz-t-panel) var(--prexenz-curva-corte);
	border-bottom: var(--prexenz-filo) solid transparent;
}

/* El fondo y el desenfoque van en ::before, NUNCA en el elemento.
   backdrop-filter convierte a la cabecera en bloque contenedor de sus hijos
   position:fixed, y el panel del menú es uno: quedaba encerrado en los 64px
   de la barra en vez de ocupar la pantalla. */
/* Al bajar se aparta; al subir vuelve. */
.prexenz-cabecera--oculta {
	transform: translateY(-100%);
}

.prexenz-cabecera__barra {
	position: relative;
	/* Píldora flotante: ancho al contenido, centrada y despegada del borde.
	   Antes ocupaba la columna de contenido a todo lo ancho. */
	flex: 0 1 auto;
	width: max-content;
	max-width: calc(100% - var(--prexenz-margen) * 2);
	margin-inline: auto;
	/* Relleno asimétrico: holgado a la izquierda para el logo, mínimo a la
	   derecha para que el botón quede a ras del borde interior. */
	padding: .45rem .45rem .45rem 1.35rem;
	border-radius: 999px;
	gap: var(--wp--preset--spacing--40);
	pointer-events: auto;
}

.prexenz-cabecera__logo img {
	display: block;
	/* Dentro de la píldora el logo a 150px la llenaba de arriba abajo y el
	   texto tocaba el borde inferior. Manda la altura, no el ancho. */
	width: auto;
	height: clamp(26px, 2.4vw, 34px);
	transition: opacity var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-cabecera__logo a:hover img { opacity: .75; }

.prexenz-cabecera__derecha {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.prexenz-cabecera__menu a {
	position: relative;
	color: var(--prexenz-texto);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Subrayado que crece desde la izquierda. */
.prexenz-cabecera__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.45em;
	width: 100%;
	height: 2px;
	background: var(--prexenz-luz);
	transform-origin: left;
	scale: 0 1;
	transition: scale var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-cabecera__menu a:hover::after,
.prexenz-cabecera__menu a:focus-visible::after,
.prexenz-cabecera__menu .current-menu-item a::after {
	scale: 1 1;
}

/* ── Selector de idioma ───────────────────────────────────────────────────
   Dos siglas separadas por una barra fina, del tamaño del menú pero sin su
   peso: es una utilidad, no una sección. El idioma activo va en el color de
   marca y no es un enlace, para que se lea de un vistazo dónde estás. */
.prexenz-idiomas__lista {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.prexenz-idiomas__pieza + .prexenz-idiomas__pieza::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin-inline: 0.55em;
	vertical-align: -0.1em;
	background: var(--prexenz-linea-fuerte);
}

.prexenz-idiomas__enlace,
.prexenz-idiomas__actual {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.prexenz-idiomas__actual { color: var(--prexenz-luz); }

.prexenz-idiomas__enlace {
	color: var(--prexenz-texto-tenue, var(--prexenz-texto));
	opacity: 0.65;
	transition: opacity var(--prexenz-t-control) var(--prexenz-curva-corte),
	            color var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-idiomas__enlace:hover,
.prexenz-idiomas__enlace:focus-visible {
	color: var(--prexenz-luz);
	opacity: 1;
}

/* Ni el selector ni el botón pueden partirse: son dos palabras cortas y al
   romperse la barra pasa de 58 a 78px de alto y se ve descuadrada. */
.prexenz-idiomas,
.prexenz-idiomas__lista,
.prexenz-cabecera__accion .wp-element-button {
	white-space: nowrap;
}

.prexenz-idiomas { flex: 0 0 auto; }

/* Por debajo de 860px el menú central se pliega en el desplegable y el selector
   se queda en la barra: es lo único que permite cambiar de idioma en el móvil.
   
   A 390px la barra tiene 335px útiles y lo que hay dentro pide 336 con el hueco
   de escritorio: se pasaba por un pelo y partía las dos piezas. Con el hueco a
   12px y el botón un poco más estrecho quedan 325 y entra en una línea. */
@media (max-width: 860px) {
	.prexenz-cabecera__barra .prexenz-cabecera__derecha { gap: 0.75rem; }

	.prexenz-cabecera__accion .wp-element-button {
		padding: 0.55rem 0.9rem;
	}

	.prexenz-idiomas__pieza + .prexenz-idiomas__pieza::before {
		margin-inline: 0.4em;
	}
}

/* El botón de la cabecera es más pequeño que los del cuerpo. */
.prexenz-cabecera__accion .wp-element-button {
	padding: 0.6rem 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
}

/* Separado del menú. Medido: quedaba a 16px del último enlace, exactamente la
   misma distancia que hay entre enlaces, así que se leía como un elemento más
   de la lista en vez de como la acción principal. Solo en escritorio: por
   debajo de 860px el menú central desaparece y el botón ya va suelto. */
@media (min-width: 53.75rem) {
	/* Con el padre en el selector: .prexenz-cabecera__accion a secas perdía
	   frente a la regla de layout de WordPress para .wp-block-buttons y el
	   margen se quedaba en 0. El padre es flex con gap:16px, la misma
	   separación que hay entre enlaces del menú, y por eso el botón se leía
	   como un elemento más de la lista. */
	.prexenz-cabecera__derecha > .prexenz-cabecera__accion {
		margin-inline-start: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 860px) {
	.prexenz-cabecera__accion { display: none; }
}

/* En la portada sí se superpone al render, a propósito: ahí la cabecera flota
   sobre la imagen y no debe empujarla hacia abajo. */
/* Al ser fija no ocupa sitio en el flujo, así que el hero tiene que reservar
   su altura. Esta compensación existía solo dentro de la media query de móvil
   (max-width: 47.999rem), con un comentario que describía este mismo fallo;
   en escritorio nunca llegaba a aplicarse y el antetítulo «MÉRIDA ·
   EXTREMADURA» quedaba por debajo de la barra, pisado por el logo. */
.home .prexenz-hero {
	padding-top: calc( var(--prexenz-cabecera-alto) + var(--wp--preset--spacing--40) );
}

/* ═══════════════════════════════════════════════════════════════════════
   PIE
   Era una línea de texto centrada. Ahora es el cierre de un estudio: marca,
   contacto real, tres columnas de navegación, redes y los distintivos
   institucionales que la financiación FEDER obliga a mostrar.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-pie {
	background: var(--prexenz-sala);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
	padding: var(--wp--preset--spacing--60) var(--prexenz-margen) var(--wp--preset--spacing--40);
}

.prexenz-pie__cuerpo {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
}

@media (min-width: 62rem) {
	.prexenz-pie__cuerpo {
		grid-template-columns: 1.6fr repeat(3, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

.prexenz-pie__marca .wp-block-site-logo { margin-bottom: var(--wp--preset--spacing--30); }

.prexenz-pie__lema {
	max-width: 42ch;
	color: var(--prexenz-texto-suave);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--prexenz-lh-entradilla);
}

.prexenz-pie__contacto {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--prexenz-texto-dato);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 2;
}

.prexenz-pie__contacto a {
	color: var(--prexenz-texto);
	text-decoration-color: var(--prexenz-luz-35);
}

.prexenz-pie__redes { margin-top: var(--wp--preset--spacing--30); }

.prexenz-pie__titulo {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--prexenz-luz);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
}

.prexenz-pie__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prexenz-pie__lista li { margin-bottom: .55rem; }

.prexenz-pie__lista a {
	color: var(--prexenz-texto-suave);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-pie__lista a:hover,
.prexenz-pie__lista a:focus-visible { color: var(--prexenz-texto); }

/* Distintivos institucionales. */

.prexenz-distintivos {
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin: var(--wp--preset--spacing--50) auto 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-distintivos__pie {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: none;
	color: var(--prexenz-texto-dato);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .04em;
}

.prexenz-distintivos__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* Fondo claro detrás: los emblemas oficiales vienen sobre blanco y no se
   pueden recolorear ni recortar, así que se les da su propio soporte. */
.prexenz-distintivo {
	display: inline-flex;
	align-items: center;
	padding: .55rem .85rem;
	background: #ffffff;
	border-radius: 2px;
	transition: opacity var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-distintivo:hover { opacity: .82; }

.prexenz-distintivo__img {
	display: block;
	width: auto;
	height: clamp(28px, 3vw, 40px);
	object-fit: contain;
}

/* Cierre legal. */

.prexenz-pie__cierre {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin: var(--wp--preset--spacing--50) auto 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-pie__legal,
.prexenz-pie__firma {
	margin: 0;
	max-width: none;
	color: var(--prexenz-texto-dato);
	font-size: var(--wp--preset--font-size--x-small);
}

.prexenz-pie__legal a {
	color: var(--prexenz-texto-dato);
	text-decoration-color: var(--prexenz-linea-fuerte);
}

.prexenz-pie__legal a:hover { color: var(--prexenz-texto); }

/* ═══════════════════════════════════════════════════════════════════════
   FICHA DE PROYECTO
   La página donde un cliente decide. Empieza por el render a sangre, no por
   texto sobre negro: para un estudio que vende imagen, arrancar con lo que
   menos vende era un error.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sin .wp-block-group delante: este es un bloque propio y su envoltorio lleva
   la clase wp-block-prexenz-proyecto-portada, no la de grupo. El selector
   anterior no llegaba a coincidir con nada. */
.prexenz-ficha {
	/* Anclada al centro del contenedor en vez de a sus márgenes: el truco de
	   los márgenes negativos depende del relleno del padre y aquí lo dejaba
	   desplazada 58px, que es justo el relleno de main. */
	position: relative;
	left: 50%;
	translate: -50%;
	width: 100vw;
	max-width: 100vw;
	margin-inline: 0;
	box-sizing: border-box;
	display: grid;
	align-items: end;
	min-height: min(72vh, 720px);
	padding: var(--wp--preset--spacing--60) var(--prexenz-margen) var(--wp--preset--spacing--50);
	overflow: hidden;
	isolation: isolate;
	background: var(--prexenz-sala);
}

.prexenz-ficha__imagen {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Mismo criterio que la portada de proyecto: el filtro deja de apagar la
	   imagen y el contraste del texto lo garantiza el velo de abajo. */
	filter: saturate(.98) brightness(.92) contrast(1.02);
}

.prexenz-ficha::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(6,6,7,.96) 6%, rgba(6,6,7,.62) 42%, rgba(6,6,7,.25) 78%, rgba(6,6,7,.5) 100%);
	pointer-events: none;
}

.prexenz-ficha__texto {
	position: relative;
	width: min(100%, 1000px);
	margin-inline: auto;
}

.prexenz-ficha__titulo {
	margin: .5rem 0 0;
	font-size: clamp(2.25rem, 5.4vw, 4.75rem);
	line-height: var(--prexenz-lh-cartel);
	letter-spacing: var(--prexenz-track-h1);
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

.prexenz-ficha__entradilla {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 56ch;
	color: var(--prexenz-texto-suave);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--prexenz-lh-entradilla);
}

/* Galería: seis renders y hasta ahora solo se veía uno. */

/* El grupo que la envuelve es alignwide, pero el bloque de dentro lo vuelve a
   constreñir a la medida de lectura. Se le da el ancho amplio aquí. */
/* ── Rótulo compartido de las secciones de la ficha ──────────────────── */

.prexenz-obra-ficha__rotulo-seccion {
	width: min(100% - var(--prexenz-margen) * 2, 1180px);
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--40);
}

.prexenz-obra-ficha__rotulo-seccion .prexenz-etiqueta { margin: 0 0 .2rem; }

.prexenz-obra-ficha__subtitulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto);
}

/* ── Vídeo ───────────────────────────────────────────────────────────── */

/* El ancho lo declara la lista de piezas a sangre de arriba, que es la
   convención de esta plantilla: «.prexenz-obra-ficha > *» limita todos los
   hijos a 1320px y hay que salirse ahí, no con left+translate. Aquí solo el
   ritmo vertical. */
.prexenz-obra-ficha__video,
.prexenz-obra-ficha__galeria {
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: 0;
}

.prexenz-obra-ficha__video .prexenz-video {
	width: min(100% - var(--prexenz-margen) * 2, 1400px);
	margin-inline: auto;
	position: relative;
	overflow: hidden;
	/* Filo de luz y sombra profunda: el vídeo deja de ser un rectángulo pegado
	   al fondo y pasa a leerse como una pieza propia. */
	box-shadow:
		0 0 0 var(--prexenz-filo) var(--prexenz-luz-24),
		0 40px 90px rgba(0, 0, 0, .55);
}

/* ── Galería en mosaico ──────────────────────────────────────────────── */

.prexenz-galeria {
	width: min(100% - var(--prexenz-margen) * 2, 1400px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--prexenz-filo-doble);
}

.prexenz-galeria__pieza {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--prexenz-elev-1);
	cursor: pointer;
	/* Por defecto media fila. El ritmo lo marcan las reglas de abajo. */
	grid-column: span 3;
}

/* La primera abre a todo el ancho, y a partir de ahí el mosaico alterna
   parejas y piezas sueltas para que no sea una parrilla uniforme. */
.prexenz-galeria__pieza:first-child { grid-column: span 6; }
.prexenz-galeria__pieza:nth-child(6n + 5) { grid-column: span 2; }
.prexenz-galeria__pieza:nth-child(6n + 6) { grid-column: span 4; }

.prexenz-galeria__pieza img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition:
		scale var(--prexenz-t-plano) var(--prexenz-curva-camara),
		filter var(--prexenz-t-panel) var(--prexenz-curva-corte);
}

.prexenz-galeria__pieza:first-child img { aspect-ratio: 21 / 9; }

/* La lupa aparece al acercarse: dice que la imagen se puede ampliar, que
   antes solo lo sabía quien lo probara. */
.prexenz-galeria__lupa {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--20);
	inset-inline-end: var(--wp--preset--spacing--20);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: var(--prexenz-filo) solid var(--prexenz-luz-35);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--prexenz-sala) 55%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	translate: 0 .5rem;
	transition:
		opacity var(--prexenz-t-panel) var(--prexenz-curva-corte),
		translate var(--prexenz-t-panel) var(--prexenz-curva-corte);
}

/* El signo «+», dibujado con dos filetes: sin icono externo ni fuente. */
.prexenz-galeria__lupa::before,
.prexenz-galeria__lupa::after {
	content: '';
	position: absolute;
	background-color: var(--prexenz-texto);
}

.prexenz-galeria__lupa::before { width: 14px; height: 2px; }
.prexenz-galeria__lupa::after  { width: 2px; height: 14px; }

@media (hover: hover) {
	.prexenz-galeria__pieza:hover img,
	.prexenz-galeria__pieza:focus-visible img { scale: 1.05; }

	.prexenz-galeria__pieza:hover .prexenz-galeria__lupa,
	.prexenz-galeria__pieza:focus-visible .prexenz-galeria__lupa {
		opacity: 1;
		translate: 0 0;
	}
}

/* En táctil no hay hover: la lupa se queda visible siempre, que es la única
   forma de que se sepa que la imagen se amplía. */
@media (hover: none) {
	.prexenz-galeria__lupa { opacity: 1; translate: 0 0; }
}

@media (max-width: 47.999rem) {
	/* En móvil el mosaico no aporta: media fila es demasiado estrecha para
	   ver un render. Todas a ancho completo. */
	.prexenz-galeria__pieza,
	.prexenz-galeria__pieza:first-child,
	.prexenz-galeria__pieza:nth-child(6n + 5),
	.prexenz-galeria__pieza:nth-child(6n + 6) { grid-column: span 6; }

	.prexenz-galeria__pieza:first-child img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-galeria__pieza img,
	.prexenz-galeria__lupa { transition: none; }
	.prexenz-galeria__pieza:hover img { scale: 1; }
}

@media (min-width: 62rem) {
	.prexenz-galeria { grid-template-columns: repeat(6, 1fr); }
	.prexenz-galeria__pieza { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-galeria__pieza:hover img { scale: 1; }
}

/* La fila de servicio pasó a llevar imagen: número · render · texto. El
   título y el extracto van juntos en un grupo para que la rejilla de tres
   columnas siga teniendo exactamente tres hijos. */
.prexenz-servicios__cuerpo {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: center;
}

.prexenz-servicios__cuerpo .prexenz-servicios__titulo,
.prexenz-servicios__cuerpo .prexenz-servicios__texto {
	margin: 0;
	max-width: 52ch;
}

.prexenz-servicios__fila .prexenz-servicios__lienzo,
.prexenz-servicios__fila .prexenz-servicios__lienzo img {
	display: block;
	width: 100%;
	margin: 0;
}

@media (max-width: 61.99rem) {
	/* En estrecho la imagen ocupa la fila entera, debajo del número. */
	.prexenz-servicios__fila .prexenz-servicios__lienzo { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AJUSTES DE MÓVIL
   Revisado en un teléfono de verdad, no solo contando desbordes. Lo que
   funcionaba a 1440 px no funcionaba a 390.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 47.999rem) {

	/* En la portada la cabecera es fija y se comía el antetítulo: el logo se
	   solapaba con «MÉRIDA · EXTREMADURA». */
	.home .prexenz-hero {
		padding-top: calc( var(--prexenz-cabecera-alto) + var(--wp--preset--spacing--40) );
		min-height: 88svh;
	}

	/* El render de fondo estaba tan apagado que en una pantalla pequeña no se
	   distinguía nada. Se sube el brillo y se baja el velo: en móvil el texto
	   ocupa menos sitio y no necesita tanto contraste de apoyo. */
	.prexenz-mosaico__capa img,
	.prexenz-ficha__imagen {
		filter: saturate(.82) brightness(.66) contrast(1.04);
	}

	/* Con el render más claro y el texto a todo el ancho, el velo del hero
	   tiene que cargar más: la entradilla se quedaba en 2,69 de contraste
	   sobre 4,5 exigidos a 19px. */
	.prexenz-mosaico::after {
		background: linear-gradient(to top,
			rgba(6, 6, 7, .92) 0%,
			rgba(6, 6, 7, .80) 34%,
			rgba(6, 6, 7, .52) 62%,
			rgba(6, 6, 7, .18) 88%);
	}

	/* Solo la ficha. Antes esta regla incluía .prexenz-hero::before, que NO
	   es un velo sino una de las dos bandas de letterbox de 44px: le pintaba
	   un degradado dentro de la banda y no cubría el texto en absoluto. El
	   hero tiene ahora su propio velo en .prexenz-mosaico::after. */
	.prexenz-ficha::before {
		background: linear-gradient(to top,
			rgba(6, 6, 7, .95) 8%,
			rgba(6, 6, 7, .86) 34%,
			rgba(6, 6, 7, .62) 58%,
			rgba(6, 6, 7, .24) 100%);
	}

	/* La barra iba apretada: logo, menú y botón peleándose por el ancho. */
	.prexenz-cabecera__barra { gap: var(--wp--preset--spacing--20); }
	/* Sin width fijo: la altura manda desde que la barra es una píldora, y
	   fijar 118px de ancho junto a 26px de alto deformaba el logo, que es
	   150×49. */
	.prexenz-cabecera__logo img { width: auto; }

	/* Menos aire vertical: a 390px los espaciados de escritorio dejaban
	   pantallas enteras en negro entre secciones. */
	.prexenz-hero { padding-bottom: calc( var(--prexenz-letterbox) + var(--wp--preset--spacing--30) + var(--prexenz-hueco-consentimiento, 0px) ); }

	.prexenz-obras { padding-inline: 0; }
	.prexenz-obras__lista { gap: var(--prexenz-filo-doble); }

	.prexenz-ficha {
		min-height: 62svh;
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	/* Titulares: nada de partir palabras en pantallas estrechas. */
	.prexenz-servicios__titulo,
	.prexenz-obra__titulo,
	.prexenz-ficha__titulo {
		hyphens: none;
		overflow-wrap: normal;
		word-break: normal;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   MENÚ DESPLEGABLE
   El de WordPress se abría en blanco puro con el texto pegado al borde
   derecho. En una web negra eso es saltar a otro sitio. Se reconstruye:
   negro, un render detrás, y los enlaces entrando desde debajo de su
   máscara, como el resto de la casa.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El botón: tres trazos que se convierten en aspa ───────────────────── */

.prexenz-cabecera .wp-block-navigation__responsive-container-open {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Se ocultan los iconos SVG del núcleo: dibujamos los trazos nosotros. */
.prexenz-cabecera .wp-block-navigation__responsive-container-open svg,
.prexenz-cabecera .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.prexenz-cabecera .wp-block-navigation__responsive-container-open::before,
.prexenz-cabecera .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 24px;
	height: 2px;
	background: var(--prexenz-texto);
	translate: -50% 0;
	transition: translate var(--prexenz-t-control) var(--prexenz-curva-servo);
}

.prexenz-cabecera .wp-block-navigation__responsive-container-open::before { top: 18px; }
.prexenz-cabecera .wp-block-navigation__responsive-container-open::after  { top: 25px; }

.prexenz-cabecera .wp-block-navigation__responsive-container-open:hover::before { translate: -50% -2px; }
.prexenz-cabecera .wp-block-navigation__responsive-container-open:hover::after  { translate: -50% 2px; }

/* ── El panel ──────────────────────────────────────────────────────────── */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--prexenz-sala) !important;
	padding: 0 !important;
	color: var(--prexenz-texto);
}

/* Resplandor cenital: la misma luz que la cabecera de portada. */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--prexenz-haz-cenital);
	pointer-events: none;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100svh;
	padding: calc( var(--prexenz-cabecera-alto) + var(--wp--preset--spacing--40) ) var(--prexenz-margen) var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* ── Los enlaces ───────────────────────────────────────────────────────── */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding-block: clamp( .65rem, 2.2vh, 1.15rem );
	color: var(--prexenz-texto);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp( 1.9rem, 9vw, 3rem );
	font-weight: 800;
	letter-spacing: var(--prexenz-track-h2);
	line-height: 1.05;
	text-decoration: none;
	text-transform: none;
}


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:active,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
	color: var(--prexenz-luz);
}

/* El subrayado del escritorio no pinta nada aquí. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a::after {
	display: none;
}

/* ── Cerrar ────────────────────────────────────────────────────────────── */

.wp-block-navigation__responsive-container-close {
	position: relative;
	width: 44px;
	height: 44px;
	color: var(--prexenz-texto);
}

.wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 2px;
	background: currentColor;
	translate: -50% -50%;
}

.wp-block-navigation__responsive-container-close::before { rotate: 45deg; }
.wp-block-navigation__responsive-container-close::after  { rotate: -45deg; }

/* ── Pie del panel: lo añade escena.js al abrir ────────────────────────── */

.prexenz-menu__pie {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-menu__pie a {
	display: block;
	color: var(--prexenz-texto);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.prexenz-menu__pie a + a { margin-top: .4rem; }

.prexenz-menu__lugar {
	margin: .9rem 0 0;
	color: var(--prexenz-texto-dato);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
}

/* Con el menú abierto la página de detrás no se mueve. */
html.prexenz-menu-abierto,
html.prexenz-menu-abierto body {
	overflow: hidden;
	touch-action: none;
}

/* El menú de escritorio va alineado a la derecha, y el panel heredaba esa
   alineación: los enlaces quedaban pegados al borde con un vacío enorme a la
   izquierda y los números en zigzag. Dentro del panel se alinea a la
   izquierda, que es donde empieza a leerse. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	justify-content: flex-start;
	text-align: left;
}

.prexenz-menu__pie { text-align: left; }

/* La alineación a la derecha de la barra se hace aquí y no con el atributo
   del bloque: ese atributo añade la clase items-justified-right, que también
   se aplicaba dentro del panel desplegable y empujaba los enlaces contra el
   borde. Con margin-left:auto se consigue lo mismo sin ensuciar el panel. */
.prexenz-cabecera__derecha { margin-left: auto; }

/* Dentro del panel, todo a la izquierda y a todo el ancho. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   HAZ DE LUZ, REUTILIZABLE
   Es lo que hace que el menú desplegable funcione: negro profundo con una
   sola fuente de luz cian cayendo desde arriba.

   Se aplica como imagen de fondo y no con un pseudoelemento, para poder
   ponerlo encima de cualquier cosa sin pelearse con los ::before que ya
   tienen algunas secciones.

   Va SOLO donde hay una llegada sin fotografía que la sostenga. Si se pone
   en todas las superficies negras deja de ser una luz y pasa a ser relleno,
   que es justo lo contrario de lo que buscamos.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-haz {
	background-color: var(--prexenz-sala);
	background-image: var(--prexenz-haz-cenital);
	background-repeat: no-repeat;
}

/* Variante lateral: para cuando dos secciones con haz quedan cerca y el
   cenital repetido cantaría. */
.prexenz-haz--lateral {
	background-image:
		radial-gradient(90% 120% at 12% 0%, rgba(0,192,255,.13) 0%, rgba(0,192,255,.035) 42%, transparent 74%);
}

/* ── Aplicaciones ──────────────────────────────────────────────────────── */

/* El cierre: es el último momento de la página y donde vive «Hablemos.».
   La luz cae sobre la llamada a la acción como un foco de escenario. */
.prexenz-cierre {
	background-image: var(--prexenz-haz-cenital);
	background-repeat: no-repeat;
}

/* La ficha FEDER era un rectángulo plano de datos. Con el haz lateral tiene
   presencia sin convertirse en decoración, que en una ficha oficial sería
   inapropiado. */
.prexenz-feder {
	background-image:
		radial-gradient(80% 130% at 8% 0%, rgba(0,192,255,.10) 0%, rgba(0,192,255,.03) 45%, transparent 76%);
	background-repeat: no-repeat;
}

/* Cabeceras de archivo y página de error: son las pantallas más planas del
   sitio, negro liso con un título encima. */
.prexenz-portadilla {
	/* Anclada al centro, no con márgenes negativos: esos dependen del relleno
	   del contenedor padre y dejaban la portadilla desplazada 58px. */
	position: relative;
	left: 50%;
	translate: -50%;
	width: 100vw;
	max-width: 100vw;
	margin-inline: 0;
	box-sizing: border-box;
	/* El degradado NO se pinta aquí sino en el body (§ LUZ DE PÁGINA): esta
	   caja empieza por debajo de la cabecera y el fondo no puede salirse de
	   ella, así que el primer tramo de la página quedaba en negro plano.
	   Subirla con un margen negativo no funciona: WordPress emite
	   «:root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 }»
	   y esa regla gana por especificidad. */
	padding: var(--wp--preset--spacing--60) var(--prexenz-margen);
	background-color: transparent;
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-portadilla > * {
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
}

/* Un filete de luz en el borde inferior: cierra la portadilla y repite el
   gesto del filo del menú. */
.prexenz-portadilla::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--prexenz-filo-luz);
	opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════
   TÁCTIL
   El fallo de fondo era que el estado de REPOSO era el estado feo: las
   tarjetas se dibujaban apagadas y solo se iluminaban al pasar el ratón.
   En un teléfono no hay ratón, así que se quedaban apagadas para siempre.
   Donde no hay puntero, el reposo pasa a ser el estado bueno.
   ═══════════════════════════════════════════════════════════════════════ */

@media (hover: none) {

	/* Las obras se ven ya a plena luz. */
	.prexenz-obra .prexenz-obra__lienzo img {
		filter: saturate(1) contrast(1.02) brightness(.95);
		scale: 1;
	}

	/* La secuencia de fotogramas depende del puntero: sin él, sobra. Y si se
	   dejara, el :hover pegajoso del táctil la dispararía al tocar la tarjeta
	   justo mientras se navega a otra página. */
	.prexenz-obra__secuencia { display: none; }

	/* Logos de cliente a plena opacidad: estaban al 55% esperando un ratón. */
	.prexenz-clientes__item :where(img) { opacity: 1; }

	/* La galería no crece al tocarla, se amplía: el zoom lo hace el visor. */
	.prexenz-galeria__pieza:hover img { scale: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VISOR DE IMAGEN
   Antes las seis imágenes de la ficha no se podían ampliar. En un móvil eso
   son renders de 350px de ancho, que para un estudio que vende calidad
   gráfica es enseñar el trabajo por una rendija.
   ═══════════════════════════════════════════════════════════════════════ */

/* La pieza es un botón: hay que quitarle el aspecto de botón. */
.prexenz-galeria__pieza {
	display: block;
	padding: 0;
	border: 0;
	background: var(--prexenz-elev-1);
	cursor: zoom-in;
	appearance: none;
}

.prexenz-visor {
	position: fixed;
	inset: 0;
	z-index: var(--prexenz-z-visor);
	display: grid;
	/* El bloque —barra, imagen y pie— se centra como una sola pieza en vez de
	   repartirse por toda la altura. Antes la barra vivía pegada al borde
	   superior de la ventana, lejos de la foto y de donde se está mirando. */
	grid-template-rows: 1fr auto auto 1fr;
	align-content: center;
	background-color: var(--prexenz-sala);
	background-image: var(--prexenz-haz-cenital);
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--prexenz-t-panel) var(--prexenz-curva-corte),
		visibility 0s linear var(--prexenz-t-panel);
}

.prexenz-visor[data-abierto] {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.prexenz-visor__barra {
	grid-row: 2;
	/* Al ancho de la imagen, no al de la ventana: así el contador queda sobre
	   el borde izquierdo de la foto y los botones sobre el derecho. */
	width: min(100% - var(--prexenz-margen) * 2, var(--prexenz-visor-ancho, 1400px));
	margin-inline: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: 0 0 var(--wp--preset--spacing--30);
}

/* Contador y pie de foto, apilados a la izquierda de la barra. */
.prexenz-visor__datos {
	display: grid;
	gap: .15rem;
	min-width: 0;
}

@media (max-width: 47.999rem) {
	/* En estrecho el pie se recortaba a media palabra: se le dan dos líneas
	   y los botones bajan de 48 a 44px para dejarle sitio. */
	.prexenz-visor__pie {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.prexenz-visor__navegar { gap: .4rem; }

	.prexenz-visor__barra .prexenz-visor__boton {
		width: 44px;
		height: 44px;
	}
}

.prexenz-visor__cuenta {
	color: var(--prexenz-luz);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
}

.prexenz-visor__lienzo {
	grid-row: 3;
	display: grid;
	place-items: center;
	/* Altura acotada para dejar sitio a la barra y al pie sin que la imagen
	   los empuje fuera de la pantalla. */
	max-height: calc(100svh - 9rem);
	padding-inline: var(--prexenz-margen);
	overflow: hidden;
}

.prexenz-visor__lienzo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.prexenz-visor__pie {
	margin: 0;
	color: var(--prexenz-texto-suave);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--prexenz-lh-medio);
	/* Sin cortar en seco: si el pie es largo se recorta con puntos suspensivos
	   en vez de empujar los botones fuera de la barra. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Controles: 48px de lado como mínimo, que es lo que pide un dedo. */
.prexenz-visor__boton {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: var(--prexenz-filo) solid var(--prexenz-linea);
	border-radius: 50%;
	background: rgba(255, 255, 255, .04);
	color: var(--prexenz-texto);
	font-size: 1.1rem;
	cursor: pointer;
	transition: border-color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-visor__boton:hover,
.prexenz-visor__boton:focus-visible { border-color: var(--prexenz-luz); }

.prexenz-visor__boton[disabled] { opacity: .3; cursor: default; }

.prexenz-visor__navegar {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

html.prexenz-visor-abierto,
html.prexenz-visor-abierto body {
	overflow: hidden;
	touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-visor { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FICHA DE PROYECTO EN PHP
   Sin el motor de anchuras del editor de por medio, los anchos se definen
   aquí y punto: nada de alignfull ni de márgenes negativos peleando con el
   relleno del contenedor.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-obra-ficha {
	--prexenz-medida-ficha: 1320px;
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.prexenz-obra-ficha > * {
	width: min(100% - var(--prexenz-margen) * 2, var(--prexenz-medida-ficha));
	margin-inline: auto;
}

/* Las piezas a sangre se declaran, no se pelean. box-sizing obligatorio: sin
   él el relleno lateral se suma al 100% y la pieza se sale 115px. */
.prexenz-obra-ficha__portada,
.prexenz-obra-ficha__video,
.prexenz-obra-ficha__galeria,
.prexenz-siguiente,
.prexenz-obra-ficha > .prexenz-cierre {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

/* ── Portada ───────────────────────────────────────────────────────────── */

.prexenz-obra-ficha__portada {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(78vh, 760px);
	padding: var(--wp--preset--spacing--60) var(--prexenz-margen) var(--wp--preset--spacing--50);
	overflow: hidden;
	isolation: isolate;
	background: var(--prexenz-sala);
}

.prexenz-obra-ficha__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Casi a plena luz. Con brightness(.5) el render se pintaba a la mitad de
	   luz ANTES de que entrara el degradado, así que la zona sin texto seguía
	   apagada por mucho que el velo fuera transparente ahí. Quien protege el
	   texto es el degradado, no el filtro. */
	filter: saturate(.98) brightness(.92) contrast(1.02);
}

.prexenz-obra-ficha__portada::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Valores fijados a mano. Caída rápida: opaco abajo hasta el 6%, .61 al
	   20% y transparente ya al 30%, para que el render se vea limpio en casi
	   toda su altura. Arriba se conserva un oscurecido ligero para que la
	   cabecera fija tenga algo sobre lo que leerse.

	   NO TOCAR para arreglar contraste: son valores elegidos a propósito y
	   priman sobre la medición. Con el velo abriendo ya en el 30%, sobre
	   portadas claras fallan el antetítulo (1,01 en The Attic; 1,16 en
	   Formación, frente al 4,5 de AA) y el propio título (2,74–2,85 frente
	   al 3 de texto grande). Decisión tomada a sabiendas. */
	background: linear-gradient(to top, rgba(6,6,7,1) 6%, rgba(6,6,7,.61) 20%, rgba(6,6,7,0) 30%, rgba(6,6,7,.22) 80%, rgba(6,6,7,.45) 100%);
}

.prexenz-obra-ficha__rotulo {
	width: min(100%, var(--prexenz-medida-ficha));
	margin-inline: auto;
}

.prexenz-obra-ficha__sector {
	display: inline-block;
	margin-bottom: .5rem;
	color: var(--prexenz-luz);
	text-decoration: none;
}

.prexenz-obra-ficha__titulo {
	margin: 0;
	font-size: clamp(2.25rem, 5.6vw, 5rem);
	line-height: var(--prexenz-lh-cartel);
	letter-spacing: var(--prexenz-track-h1);
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

.prexenz-obra-ficha__entradilla {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 56ch;
	color: var(--prexenz-texto-suave);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--prexenz-lh-entradilla);
}

/* ── Cuerpo: los datos acompañan a la lectura ──────────────────────────── */

.prexenz-obra-ficha__cuerpo {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 62rem) {
	.prexenz-obra-ficha__cuerpo {
		grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr);
		gap: var(--wp--preset--spacing--60);
	}

	/* Se quedan a la vista mientras se lee el texto: es la información que
	   un cliente quiere tener delante todo el rato. */
	.prexenz-obra-ficha__datos {
		position: sticky;
		top: calc( var(--prexenz-cabecera-alto) + var(--wp--preset--spacing--40) );
		align-self: start;
	}
}

.prexenz-datos-rail {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--prexenz-filo-doble) solid var(--prexenz-luz);
}

.prexenz-datos-rail dt {
	margin-bottom: .2rem;
	color: var(--prexenz-texto-dato);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
}

.prexenz-datos-rail dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.prexenz-datos-rail__enlace {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.prexenz-obra-ficha__texto {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--prexenz-lh-entradilla);
}

.prexenz-obra-ficha__texto p { max-width: 62ch; }

/* ── Siguiente proyecto ────────────────────────────────────────────────── */

.prexenz-siguiente {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(58vh, 520px);
	padding: var(--wp--preset--spacing--60) var(--prexenz-margen);
	overflow: hidden;
	isolation: isolate;
	background: var(--prexenz-sala);
	color: var(--prexenz-texto);
	text-align: center;
	text-decoration: none;
}

.prexenz-siguiente__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.6) brightness(.36) contrast(1.05);
	scale: 1.04;
	transition:
		filter var(--prexenz-t-plano) var(--prexenz-curva-camara),
		scale var(--prexenz-t-plano) var(--prexenz-curva-camara);
}

.prexenz-siguiente:is(:hover, :focus-visible) .prexenz-siguiente__fondo {
	filter: saturate(.9) brightness(.55) contrast(1.05);
	scale: 1.1;
}

/* Velo centrado bajo el rótulo. Este bloque solo contaba con el
   brightness(.36) de la imagen, y sobre los renders más claros el antetítulo
   se quedaba en 4,07 de contraste, por debajo del 4,5 que exige AA a 14px.
   Radial y no uniforme: oscurece donde está el texto y deja respirar los
   bordes de la imagen. */
.prexenz-siguiente::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(
		60% 70% at 50% 50%,
		rgba(6, 6, 7, .72) 0%,
		rgba(6, 6, 7, .45) 45%,
		transparent 78%
	);
	pointer-events: none;
}

.prexenz-siguiente__rotulo { display: grid; gap: .5rem; }

.prexenz-siguiente__titulo {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp(1.9rem, 4.6vw, 3.5rem);
	font-weight: 700;
	letter-spacing: var(--prexenz-track-h2);
	line-height: 1.05;
}

@media (hover: none) {
	.prexenz-siguiente__fondo { filter: saturate(.85) brightness(.5) contrast(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-siguiente__fondo { scale: 1; transition: none; }
}

/* Fichas de servicio y sector: mismo esqueleto que la de proyecto, con los
   beneficios ocupando el raíl lateral en lugar de los datos del encargo. */

.prexenz-solucion__rotulo {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--prexenz-filo-doble) solid var(--prexenz-luz);
	color: var(--prexenz-texto-dato);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
}

.prexenz-solucion__titulo {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-large);
}

.prexenz-solucion .prexenz-beneficios { margin-block: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   Archivo es variable: tiene eje de anchura. En los titulares grandes se
   expande, que es donde ese eje se nota y donde da la sensación de
   señalética técnica. En los pequeños se deja normal, porque expandida a
   tamaño pequeño solo estorba la lectura.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-hero__titular,
.prexenz-obra-ficha__titulo,
.prexenz-siguiente__titulo,
.prexenz-portadilla h1 {
	font-weight: 800;
}

/* Separado del h1 de portadilla: «Hablemos.» es un <h2> y le toca el 700 de
   su nivel. Compartiendo regla se llevaba el 800 del h1. */
.prexenz-cierre__titulo {
	font-weight: 700;
}

/* Entradilla de archivo.

   Medida corta a propósito: es texto de orientación, no un artículo. A 62ch
   la línea se lee de una pasada y el bloque no compite con el H1. */
/* Con el selector hijo: «.prexenz-portadilla > *» aparece más abajo en este
   mismo archivo con la misma especificidad y le ganaba el ancho por orden. */
.prexenz-portadilla > .prexenz-portadilla__entrada {
	width: min(100%, 62ch);
	/* El !important no es pereza: la disposición «constrained» de WordPress
	   emite «margin-left: auto !important; margin-right: auto !important»
	   sobre los hijos directos. Al ser esta caja más estrecha que la columna
	   de 1180px, el auto la centraba y quedaba a 341px del H1. Sin
	   !important no hay especificidad que lo gane.

	   El margen inicial no es 0 sino el mismo hueco que deja la columna de
	   1180px al centrarse: puesto a 0 el párrafo se iba al borde del
	   contenedor, 72px por delante del H1. Con el max() se alinea con él a
	   cualquier ancho y se queda en 0 cuando ya no cabe la columna. */
	margin-inline: max(0px, (100% - 1180px) / 2) auto !important;
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--texto-suave, #a9adb3);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	text-wrap: pretty;
}

/* El destello del claim no se duplica en color: en los fantasmas hereda el
   blanco, para que la palabra iluminada siga siendo una sola. */


/* El antetítulo del hero heredaba un max-width genérico de párrafo (372px
   calculados) y partía en «REALIDAD / VIRTUAL Y AUMENTADA», rompiendo el
   sintagma. En el hero hay 1180px de columna y el texto mide unos 740px:
   cabe entero en una línea. En móvil el contenedor es estrecho y vuelve a
   partir, que ahí es lo correcto. */
.prexenz-hero__cuerpo > .prexenz-etiqueta {
	max-width: none;
}

/* El botón vive dentro de la píldora: con esquinas rectas peleaba con la
   geometría que lo rodea. Se redondea igual y queda a ras del borde interior,
   que es lo que hace que se lea como una sola pieza y no como un rectángulo
   metido dentro de un óvalo. */
/* Aparición del cian sólido: es el único CTA de la cabecera, visible en
   todas las páginas, y necesita distinguirse de los enlaces del menú (que
   son blancos). El mismo acento que ya lleva «Ver proyectos» en el hero. */
.prexenz-cabecera__accion .wp-block-button__link {
	border-radius: 999px;
	border-color: var(--prexenz-luz);
	transition:
		background-color var(--prexenz-t-micro) var(--prexenz-curva-corte),
		color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-cabecera__accion .wp-block-button__link:hover,
.prexenz-cabecera__accion .wp-block-button__link:focus-visible {
	background-color: var(--prexenz-luz);
	color: var(--prexenz-texto-inverso);
}

/* El antetítulo del hero era el único texto sobre imagen que no llegaba al
   contraste AA: 3,86 medido contra el p95 del fondo, con 4,5 exigido a 12px.
   Sube a blanco. Es una etiqueta pequeña sobre fotografía, y el peso ligero
   más el interletrado ancho mantienen la jerarquía sin necesidad de gris. */
.prexenz-hero__cuerpo > .prexenz-etiqueta {
	color: var(--prexenz-texto);
}

/* Servicios se quedaba en los 720px de .entry-content mientras el hero, las
   bandas y el mosaico de proyectos usan la columna de 1180 o van a sangre.

   Con alignwide no había manera: WordPress aplica .has-global-padding >
   .alignwide con la misma especificidad y dejaba el margen en 0. La sección
   pasa a alignfull y usa el mismo mecanismo que el hero: la caja sale a
   sangre y el contenido se centra dentro. Un min(100%, 1180px) tampoco
   servía, porque ese 100% son los 720px del padre. */
.wp-block-query.prexenz-zona-servicios {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	box-sizing: border-box;
}

.prexenz-zona-servicios .prexenz-servicios {
	width: min(100% - var(--prexenz-margen) * 2, 1180px);
	margin-inline: auto;
}

/* Los encabezados de sección se quedaban en la columna de lectura de 720px
   mientras las secciones que encabezan usan la de 1180 o van a sangre: el
   título caía 230px a la derecha del contenido que titula.

   Se centra con left+translate y NO con márgenes negativos: el margen
   negativo depende del ancho del padre, y aquí hay dos contenedores anidados,
   así que salía desplazado 130px en el sentido contrario. left:50% se
   resuelve contra el padre —que ya está centrado en la ventana— y el
   translate lo devuelve a su sitio sea cual sea ese ancho. */
.entry-content .prexenz-encabezado {
	position: relative;
	left: 50%;
	translate: -50%;
	width: min(100vw - var(--prexenz-margen) * 2, 1180px);
	max-width: none;
}

/* La portadilla va a sangre con relleno lateral, pero sus hijos no recibían
   el ancho de contenido declarado en la plantilla y se estiraban hasta el
   relleno: el h1 arrancaba en x60 mientras la portada y las secciones usan
   x130. Se declara aquí, que carga después del layout de WordPress. */
.prexenz-portadilla > * {
	width: min(100%, 1180px);
	max-width: 1180px;
	margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   ZONAS TÁCTILES
   Medido a 390px: los enlaces del pie quedaban en 18px de alto y los de
   contacto entre 15 y 22. WCAG 2.2 AA pide 24×24 como mínimo. Se resuelve
   con relleno vertical y no con más tamaño de letra, para no alterar la
   jerarquía tipográfica que ya está decidida.

   Los títulos de obra y de sector NO entran aquí: su enlace lleva un ::after
   con inset:0 que convierte la pieza entera en zona de clic.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-pie__lista a,
.prexenz-pie__contacto a,
.prexenz-pie__legal a,
.prexenz-cierre__email,
.prexenz-cierre .prexenz-etiqueta a,
.prexenz-cierre a:not(.wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@media (pointer: coarse) {
	/* En pantalla táctil se sube al tamaño cómodo, no al mínimo legal. */
	.prexenz-pie__lista a,
	.prexenz-pie__contacto a,
	.prexenz-pie__legal a,
	.prexenz-cierre__email,
	.prexenz-cierre a:not(.wp-block-button__link) {
		min-height: 44px;
	}

	.prexenz-pie__lista li { margin-bottom: 0; }
}

/* Correo y teléfono en el cuerpo de las páginas. Se agranda con relleno y no
   con min-height: el relleno vertical de un elemento en línea no separa las
   líneas del párrafo, así que la zona de clic crece sin descuadrar el texto
   cuando el enlace va dentro de una frase. 20px + 8 = 28, por encima de 24. */
.entry-content a[href^="mailto:"],
.entry-content a[href^="tel:"] {
	padding-block: 4px;
}

/* La tabla de financiación en pantalla estrecha. A 390px las dos columnas
   quedaban en 172 y 178px, y los valores alineados a la derecha se partían
   en cuatro líneas —«Junta de Extremadura / (Consejería de / Economía e /
   Infraestructuras)»—. Cada fila pasa a leerse como etiqueta encima y valor
   debajo, a todo el ancho y alineado a la izquierda. */
@media (max-width: 47.999rem) {
	.prexenz-tabla table,
	.prexenz-tabla tbody,
	.prexenz-tabla tr,
	.prexenz-tabla th,
	.prexenz-tabla td {
		display: block;
		width: 100%;
		/* Con content-box el relleno se sumaba al 100% y la celda salía 382px
		   dentro de una tabla de 350. */
		box-sizing: border-box;
		text-align: start;
	}

	/* style.css alinea a la derecha la última celda de cada fila —correcto en
	   una tabla de dos columnas, pero aquí ya no hay columnas—. Hace falta
	   esta especificidad para ganarle. */
	.prexenz-tabla .wp-block-table td:last-child {
		text-align: start;
	}

	.prexenz-tabla tr {
		padding-block: var(--wp--preset--spacing--20);
		border-bottom: var(--prexenz-filo) solid var(--prexenz-linea);
	}

	.prexenz-tabla th {
		padding-bottom: .2rem;
		border: 0;
		background: none;
	}

	.prexenz-tabla td {
		border: 0;
		color: var(--prexenz-texto);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES
   Con el bloque nativo «Detalles»: se abre y cierra sin JavaScript y es
   navegable con teclado. El estilo se limita a quitar el triángulo del
   navegador y poner uno propio que gira, y a darle el ritmo de filas del
   resto del sitio.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-faq {
	padding-block: var(--wp--preset--spacing--60);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-faq__cuerpo {
	width: min(100% - var(--prexenz-margen) * 2, 1180px);
	margin-inline: auto;
}

.prexenz-faq__cuerpo > h2 {
	margin-block: .2rem var(--wp--preset--spacing--40);
}

.prexenz-faq__item {
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea-tenue);
}

.prexenz-faq__item > summary {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	/* Zona táctil cómoda: la pregunta es lo que se pulsa. */
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto);
	transition: color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-faq__item > summary::-webkit-details-marker { display: none; }

.prexenz-faq__item > summary::after {
	content: '';
	flex: 0 0 auto;
	width: .62em;
	height: .62em;
	margin-inline-start: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: 45deg;
	translate: 0 -.1em;
	transition: rotate var(--prexenz-t-panel) var(--prexenz-curva-corte);
}

.prexenz-faq__item[open] > summary::after { rotate: -135deg; }

.prexenz-faq__item > summary:hover,
.prexenz-faq__item > summary:focus-visible { color: var(--prexenz-acento); }

.prexenz-faq__item p {
	max-width: 68ch;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--prexenz-texto-suave);
}

.prexenz-faq__item a { color: var(--prexenz-acento); }

@media (prefers-reduced-motion: reduce) {
	.prexenz-faq__item > summary::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SEGUIR LEYENDO
   El enlace de vuelta del servicio o el sector hacia el artículo que lo
   explica. Se alimenta de las etiquetas, no de una lista a mano.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-lecturas {
	padding-block: var(--wp--preset--spacing--60);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

.prexenz-lecturas__cuerpo {
	width: min(100% - var(--prexenz-margen) * 2, 1180px);
	margin-inline: auto;
}

.prexenz-lecturas__titulo {
	margin-block: .2rem var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto);
}

.prexenz-lecturas__lista {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.prexenz-lecturas__pieza { margin: 0; }

.prexenz-lecturas__enlace {
	display: grid;
	gap: .3rem;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea-tenue);
	text-decoration: none;
	transition: color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-lecturas__nombre {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto);
	text-wrap: balance;
}

.prexenz-lecturas__pie {
	max-width: 68ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto-suave);
}

.prexenz-lecturas__enlace:hover .prexenz-lecturas__nombre,
.prexenz-lecturas__enlace:focus-visible .prexenz-lecturas__nombre { color: var(--prexenz-acento); }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG · LISTADO
   Las tarjetas llevaban borde, radio y fondo propio: el lenguaje que se
   retiró de sectores y proyectos. Aquí manda la imagen, igual que en el
   resto del sitio, y la separación la da el aire, no una caja.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-entradas__lista {
	width: min(100% - var(--prexenz-margen) * 2, 1180px);
	margin-inline: auto;
}

.prexenz-entrada {
	position: relative;
	display: grid;
	/* La imagen manda la altura y el texto se apoya debajo: así todas las
	   tarjetas alinean su primera línea de título aunque el titular tenga
	   distinto número de líneas. */
	grid-template-rows: auto auto auto 1fr;
	gap: .35rem;
	isolation: isolate;
}

.prexenz-entrada__lienzo {
	margin: 0 0 var(--wp--preset--spacing--20);
	overflow: hidden;
	background-color: var(--prexenz-elev-1);
}

.prexenz-entrada__lienzo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--prexenz-t-panel) var(--prexenz-curva-corte);
}

.prexenz-entrada__categoria {
	margin: 0;
}

.prexenz-entrada__categoria a {
	color: var(--prexenz-texto-dato);
	text-decoration: none;
}

.prexenz-entrada__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: var(--prexenz-lh-medio);
	letter-spacing: var(--prexenz-track-h3);
	color: var(--prexenz-texto);
	text-wrap: balance;
	/* «Aumentada» no puede partirse como «Aumenta-da». */
	hyphens: none;
}

.prexenz-entrada__titulo a {
	color: inherit;
	text-decoration: none;
}

/* Toda la tarjeta es zona de clic, sin anidar enlaces dentro de enlaces.
   Va por encima del enlace de la imagen y del de la categoría, que quedan
   accesibles por teclado igualmente. */
.prexenz-entrada__titulo a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.prexenz-entrada__resumen {
	margin: 0;
	max-width: 46ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto-suave);
}

@media (hover: hover) {
	.prexenz-entrada:hover .prexenz-entrada__lienzo img,
	.prexenz-entrada:focus-within .prexenz-entrada__lienzo img { scale: 1.04; }

	.prexenz-entrada:hover .prexenz-entrada__titulo,
	.prexenz-entrada:focus-within .prexenz-entrada__titulo { color: var(--prexenz-acento); }
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-entrada__lienzo img { transition: none; }
	.prexenz-entrada:hover .prexenz-entrada__lienzo img { scale: 1; }
}

.prexenz-paginacion {
	width: min(100% - var(--prexenz-margen) * 2, 1180px);
	margin-inline: auto;
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
}

.prexenz-paginacion a { color: var(--prexenz-texto-suave); text-decoration: none; }
.prexenz-paginacion a:hover,
.prexenz-paginacion a:focus-visible { color: var(--prexenz-acento); }
.prexenz-paginacion .current { color: var(--prexenz-texto); }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG · NAVEGACIÓN ENTRE ENTRADAS
   Dos columnas, anterior a la izquierda y siguiente a la derecha. En los
   extremos de la serie WordPress no imprime nada, así que el lado vacío se
   colapsa: no se deja un hueco que parezca un fallo.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-navega {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--prexenz-filo) solid var(--prexenz-linea);
}

@media (min-width: 48rem) {
	.prexenz-navega { grid-template-columns: 1fr 1fr; }
}

.prexenz-navega__lado {
	display: grid;
	gap: .4rem;
	align-content: start;
}

/* Sin enlace no hay lado: el bloque de navegación no imprime nada en el
   primero y el último artículo de la serie. */
.prexenz-navega__lado:not(:has(a)) { display: none; }

.prexenz-navega__lado--siguiente { text-align: end; }

.prexenz-navega__enlace a {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto);
	text-decoration: none;
	text-wrap: balance;
	hyphens: none;
	transition: color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

.prexenz-navega__enlace a:hover,
.prexenz-navega__enlace a:focus-visible { color: var(--prexenz-acento); }

/* Zona táctil cómoda sin tocar el tamaño de letra. */
.prexenz-navega__enlace a {
	display: inline-block;
	min-height: 44px;
	padding-block: .2rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   LUZ DE PÁGINA
   El resplandor cian arranca en el borde superior real de la ventana, por
   detrás de la cabecera, en vez de dentro de la caja de cada sección.

   Va en el body y no en la portadilla porque una caja no puede pintar su
   fondo fuera de sí misma: la portadilla empieza a ~128px del borde y el
   degradado se cortaba ahí, dejando la cabecera sobre negro plano. Subirla
   con margen negativo tampoco vale: WordPress emite
   «:root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 }»
   y esa regla gana por especificidad, así que el margen se descartaba en
   silencio (el padding sí se aplicaba, de ahí que pareciera que funcionaba
   a medias).

   `background-attachment: fixed` mantiene la luz anclada a la ventana: es
   una fuente de luz de la escena, no un elemento que se desplaza con el
   contenido. Y no se pone en `html` para no interferir con el rebote de
   desplazamiento del navegador.
   ═══════════════════════════════════════════════════════════════════════ */

body {
	background-image: var(--prexenz-haz-cenital);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100vh;
}

/* La portada no lo lleva: ahí manda el render a pantalla completa y una luz
   cenital encima solo le restaría contraste. */
body.home {
	background-image: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACTO
   Dos columnas: la invitación con sus botones a la izquierda, la ficha de
   datos a la derecha. Antes eran tres h2 en tamaño cartel compitiendo entre
   sí y con el h1, el correo repetido tres veces en la misma columna y media
   página vacía por debajo.
   ═══════════════════════════════════════════════════════════════════════ */

.prexenz-contacto {
	/* A la columna del sitio: la página estaba en los 720px de lectura
	   mientras el resto usa 1180. Mismo mecanismo que los encabezados de
	   sección: left+translate y no márgenes negativos, que dependen del
	   ancho del padre. */
	position: relative;
	left: 50%;
	translate: -50%;
	width: min(100vw - var(--prexenz-margen) * 2, 1180px);
	max-width: none;
	margin-block-start: var(--wp--preset--spacing--60);
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 62rem) {
	.prexenz-contacto {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}

.prexenz-contacto__entrada {
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--prexenz-lh-entradilla);
	color: var(--prexenz-texto-suave);
}

.prexenz-contacto__principal > .prexenz-etiqueta {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.prexenz-contacto__texto {
	max-width: 46ch;
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--prexenz-lh-cuerpo);
	color: var(--prexenz-texto);
}

.prexenz-contacto__nota {
	max-width: 52ch;
	margin-block: var(--wp--preset--spacing--40) 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--prexenz-lh-medio);
	font-style: italic;
	color: var(--prexenz-texto-dato);
}

/* La ficha, con el mismo filete de luz que el cierre. */
.prexenz-contacto__ficha {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: start;
}

@media (min-width: 62rem) {
	.prexenz-contacto__ficha {
		padding-inline-start: var(--wp--preset--spacing--40);
		border-inline-start: var(--prexenz-filo) solid var(--prexenz-luz-24);
	}
}

.prexenz-contacto__dato { display: grid; gap: .25rem; }

.prexenz-contacto__clave {
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--prexenz-track-etiqueta);
	text-transform: uppercase;
	color: var(--prexenz-texto-dato);
}

.prexenz-contacto__valor {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--prexenz-lh-medio);
	color: var(--prexenz-texto);
	text-decoration: none;
}

a.prexenz-contacto__valor {
	/* Zona táctil cómoda sin tocar el tamaño de letra. */
	display: inline-block;
	min-height: 44px;
	padding-block: .35rem;
	transition: color var(--prexenz-t-micro) var(--prexenz-curva-corte);
}

a.prexenz-contacto__valor:hover,
a.prexenz-contacto__valor:focus-visible { color: var(--prexenz-acento); }

/* ═══════════════════════════════════════════════════════════════════════
   COMPENSACIÓN DE LA CABECERA FIJA
   Desde que la cabecera es fixed en todo el sitio ya no ocupa lugar en el
   flujo, así que las páginas que empiezan directamente con texto —sin una
   portada a sangre que absorba la barra— tienen que reservar su altura.

   Solo estas: las fichas de proyecto, servicio y sector arrancan con un
   render a pantalla casi completa que YA reserva su espacio con padding, y
   sumarles esto les metería un hueco negro sobre la imagen.
   ═══════════════════════════════════════════════════════════════════════ */

/* La compensación de page.html y single.html se hace en el relleno superior
   de la propia plantilla: su style en línea gana a cualquier hoja, así que
   una regla aquí no surtía efecto. */

/* Las portadillas de archivo sí llevan su propio relleno generoso, pero se
   pintan bajo la barra: se les suma la altura para que el antetítulo no
   quede pegado a ella. */
.prexenz-portadilla {
	padding-block-start: calc( var(--prexenz-cabecera-alto) + var(--wp--preset--spacing--60) );
}

/* ═══════════════════════════════════════════════════════════════════════
   ÍNDICE DE PROYECTOS CON VISOR
   Filas tipográficas a la izquierda; el render del proyecto que se recorre,
   grande y pegado al desplazamiento, a la derecha.
   ═══════════════════════════════════════════════════════════════════════ */

/* Columna ancha propia: dentro de .entry-content el índice se quedaba en
   720px y, con el visor llevándose 30rem, a la columna del título le
   sobraban 20px: los nombres se pintaban una letra por línea. El
   «alignwide» del grupo no basta, así que se centra a mano como el resto. */
.prexenz-indice {
	position: relative;
	left: 50%;
	translate: -50%;
	width: min(100vw - var(--prexenz-margen) * 2, 1180px);
	max-width: none;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	counter-reset: prexenz-plano;
}

@media (min-width: 64rem) {
	.prexenz-indice {
		grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
		align-items: start;
	}
}

.prexenz-indice__lista { margin: 0; padding: 0; list-style: none; }

.prexenz-indice__fila {
	position: relative;
	display: grid;
	grid-template-columns: 4ch minmax(0, 1fr) minmax(0, auto);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: var(--prexenz-filo) solid var(--prexenz-linea);
	counter-increment: prexenz-plano;
	transition: translate var(--prexenz-t-panel) var(--prexenz-curva-camara);
}

/* El número lo pone el contador: numerar aquí sí dice algo —es el orden del
   índice— y así no hay que escribirlo ni corregirlo al añadir proyectos. */
.prexenz-indice__fila::before {
	content: counter(prexenz-plano, decimal-leading-zero);
	grid-column: 1;
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums slashed-zero;
	color: var(--prexenz-luz);
}

.prexenz-indice__titulo {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	text-wrap: balance;
	transition:
		translate var(--prexenz-t-panel) var(--prexenz-curva-camara),
		color var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-indice__titulo a { color: inherit; text-decoration: none; }

/* La fila entera es clicable estirando el enlace del título. */
.prexenz-indice__titulo a::after { content: ''; position: absolute; inset: 0; }

.prexenz-indice__meta {
	grid-column: 3;
	justify-self: end;
	min-width: 0;
	margin: 0;
	text-align: end;
	text-wrap: nowrap;
	color: var(--prexenz-texto-suave);
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--small);
	transition: color var(--prexenz-t-control) var(--prexenz-curva-corte);
}

.prexenz-indice__fila:is(:hover, :focus-within) { translate: .35rem 0; }

/* Al iluminarse una fila, las demás retroceden. */
.prexenz-indice:has(.prexenz-indice__fila:is(:hover, :focus-within))
	.prexenz-indice__fila:not(:hover, :focus-within)
	:is(.prexenz-indice__titulo, .prexenz-indice__meta) {
	color: var(--prexenz-texto-atenuado);
}

/* ── El visor ──────────────────────────────────────────────────────────
   Los renders van apilados en la misma celda con grid-area, no con
   position:absolute: así el visor conserva su altura y puede quedarse
   pegado al desplazamiento. */
.prexenz-indice__visor { position: sticky; top: calc(var(--prexenz-cabecera-alto) + 2rem); }

.prexenz-indice__pila {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El relevo entre renders es un fundido cruzado, y ahí hay una trampa: si el
   que entra y el que sale comparten duración, a mitad de camino los dos
   están al 50% y el fondo oscuro asoma entre ellos. Se ve como un parpadeo.

   La solución es asimétrica: aquí, en reposo, está el apagado —largo, 900ms,
   el que sale se queda—; y en las reglas de emparejamiento, más abajo, el
   encendido —corto, 380ms—. Cuando el de abajo aún se está yendo, el de
   arriba ya lleva rato opaco, así que nunca se abre el hueco.

   El recorrido de escala sube de 1.015 a 1.04 y se estira a 1400ms: a un
   render grande, un 1,5% en 720ms se percibe como un salto seco. */
.prexenz-indice__pila > * {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	scale: 1.04;
	transition:
		opacity 900ms var(--prexenz-curva-corte),
		scale  1400ms var(--prexenz-curva-servo);
}

.prexenz-indice__lienzo,
.prexenz-indice__lienzo img {
	display: block;
	width: 100%;
	margin: 0;
}

/* Emparejamiento fila ↔ render. Se escribe una regla por posición porque CSS
   no sabe relacionar «la fila n» con «la imagen n» de otro contenedor. Doce,
   que es el tope de la consulta; sobran las que no tengan proyecto. */
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(1):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(1) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(2):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(2) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(3):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(3) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(4):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(4) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(5):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(5) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(6):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(6) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(7):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(7) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(8):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(8) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(9):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(9) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(10):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(10) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(11):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(11) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}
.prexenz-indice:has(.prexenz-indice__lista > :nth-child(12):is(:hover, :focus-within))
	.prexenz-indice__pila > :nth-child(12) {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}

/* Sin nada recorrido manda el primero, para que el visor nunca salga vacío. */
.prexenz-indice:not(:has(.prexenz-indice__lista > :is(:hover, :focus-within)))
	.prexenz-indice__pila > :first-child {
	opacity: 1;
	scale: 1;
	transition-duration: 380ms, 1400ms;
}

/* La miniatura es solo de móvil: en escritorio manda el visor. */
.prexenz-indice__miniatura { display: none; }

/* Por debajo de 64rem no hay dos columnas: el visor se retira —no tiene
   sentido un panel que responde a un puntero que no existe— y cada fila
   enseña su propio render debajo del título. */
@media (max-width: 63.999rem) {
	.prexenz-indice__visor { display: none; }
	.prexenz-indice__fila { grid-template-columns: 4ch minmax(0, 1fr); }
	.prexenz-indice__meta { grid-column: 2; justify-self: start; text-align: start; }
	.prexenz-indice__miniatura {
		display: block;
		grid-column: 2;
		margin-block-start: var(--wp--preset--spacing--20);
		/* El enlace del título se estira sobre la fila con un ::after, pero la
		   imagen se pinta por encima y se comía el toque: en móvil el 60%
		   inferior de la fila —el render, que es lo que invita a tocar— no
		   respondía. Sin eventos de puntero, el toque atraviesa hasta el
		   enlace. Medido con elementFromPoint en cinco puntos de la fila. */
		pointer-events: none;
	}
	.prexenz-indice__miniatura img { display: block; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.prexenz-indice__fila,
	.prexenz-indice__pila > * { transition: none; }
	.prexenz-indice__fila:is(:hover, :focus-within) { translate: none; }
	.prexenz-indice__pila > * { scale: 1; }
}