/*
Theme Name: Twenty Child fArtifacts
Theme URI: https://www.ufopolis.com/
Description: Tema hijo audiovisual para Ufópolis sobre Twenty Twenty-Five, con capa de efectos propia: ficha sobre el póster, revelado al entrar en pantalla, vídeo en capa, transiciones de página y titulares vivos.
Author: fDisk
Author URI: https://fdisk.es/
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.4
Version: 0.14.10
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ufopolis-twenty-child
*/

/* The parent remains untouched; this file only contains Ufópolis presentation. */

:root {
	--uf-border: rgba(13, 31, 47, 0.16);
	/* v0.7: el foco era navy, heredado de cuando el lienzo era marfil. Sobre el
	 * fondo oscuro no se veía. Pasa a oro, que es el color de estado del sitio. */
	--uf-focus: #b79854;

	/* v0.14.10: gramática de los estados al pasar el cursor.
	 *
	 * Hasta aquí cada rollover se resolvía por su cuenta: el enlace saltaba a
	 * oro sin transición, la pastilla invertía de golpe y las tarjetas se
	 * desplazaban dos píxeles. Tres gestos distintos, ninguno con tiempo, y el
	 * conjunto se leía barato. Lo que hace elegante a un rollover no es el
	 * efecto: es que todos los del sitio conjuguen el mismo verbo.
	 *
	 * El verbo es uno: **algo se dibuja desde el inicio de línea**. Un filete
	 * bajo el rótulo, un relleno que barre la pastilla, un anillo que se cierra
	 * sobre el icono. Y al salir no se deshace hacía atrás: sigue de largo y se
	 * retira por el final. Por eso ningun estado parpadea -la línea nunca
	 * aparece ni desaparece, siempre viaja- y por eso entrar y salir se sienten
	 * como un solo movimiento y no como dos sacudidas.
	 *
	 * La curva es una salida exponencial: casi todo el recorrido ocurre en el
	 * primer tercio y el resto frena largo. Es lo que separa un gesto decidido
	 * de una barra de progreso.
	 *
	 * Tres tiempos, no más. La tinta cambia antes que el trazo y el trazo antes
	 * que el movimiento: el color confirma el objetivo enseguida, el dibujo
	 * llega detras y nada se siente lento. */
	--uf-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--uf-t-ink: 200ms;
	--uf-t-draw: 420ms;
	--uf-t-move: 560ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	/* v0.7: theme.json ya declara el lienzo oscuro; aquí solo se evita que el
	 * marfil asome por debajo del main en páginas cortas. */
	background: var(--wp--preset--color--surface-deep);
	overflow-wrap: anywhere;
}

/* Elementor legal pages: keep all long-form copy readable on the dark canvas. */
body.page-id-3 .elementor-widget-text-editor,
body.page-id-3 .elementor-widget-text-editor :where(p, strong, li, h2, h3, h4, td, th),
body.page-id-723 .elementor-widget-text-editor,
body.page-id-723 .elementor-widget-text-editor :where(p, strong, li, h2, h3, h4, td, th) {
	color: #ffffff !important;
}

body.page-id-3 .elementor-widget-text-editor a,
body.page-id-723 .elementor-widget-text-editor a {
	color: var(--wp--preset--color--gold) !important;
}

body.page-id-3 .elementor-widget-heading .elementor-heading-title,
body.page-id-723 .elementor-widget-heading .elementor-heading-title {
	color: #ffffff !important;
}

img,
iframe,
video,
embed,
object {
	height: auto;
	max-width: 100%;
}

table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

a {
	text-underline-offset: 0.18em;
}

/* v0.14.10: el filete que se dibuja. Idioma común de los rótulos enlazados:
 * navegación de servicio, navegación principal, pie y enlaces de sección.
 *
 * Va en `background-image` y no en un `::after` por una razón concreta: estos
 * rótulos envuelven a dos líneas en móvil y en el menú a pantalla completa. Un
 * pseudoelemento subraya solo el último fragmento; el fondo subraya todos.
 *
 * El truco del sentido esta en no transicionar `background-position`. Al
 * entrar, el ancla salta a la izquierda -invisible, porque el trazo mide cero-
 * y la línea crece hacía la derecha. Al salir, el ancla salta a la derecha
 * -invisible también, porque el trazo mide el ancho completo y ambos anclajes
 * coinciden- y la línea se retira por ese lado. Un solo trazo, dos sentidos.
 *
 * `background-origin: content-box` deja el filete a 3 px del texto y no al
 * fondo del relleno del enlace, que en la navegación principal son 9 px y
 * dejaria la línea flotando lejos de su palabra. */
.uf-utility-nav .wp-block-navigation-item__content,
.uf-main-nav-menu .wp-block-navigation-item__content,
.uf-footer .wp-block-navigation-item__content,
.uf-section-link a,
.uf-card-meta a {
	background-image: linear-gradient(currentColor, currentColor);
	background-origin: content-box;
	background-position: 100% calc(100% + 4px);
	background-repeat: no-repeat;
	background-size: 0 1px;
	text-decoration: none;
	transition: background-size var(--uf-t-draw) var(--uf-ease),
		color var(--uf-t-ink) var(--uf-ease);
}

.uf-utility-nav .wp-block-navigation-item__content:hover,
.uf-utility-nav .wp-block-navigation-item__content:focus-visible,
.uf-main-nav-menu .wp-block-navigation-item__content:hover,
.uf-main-nav-menu .wp-block-navigation-item__content:focus-visible,
.uf-footer .wp-block-navigation-item__content:hover,
.uf-footer .wp-block-navigation-item__content:focus-visible,
.uf-section-link a:hover,
.uf-section-link a:focus-visible,
.uf-card-meta a:hover,
.uf-card-meta a:focus-visible {
	background-position: 0 calc(100% + 4px);
	background-size: 100% 1px;
}

/* Estos dos no tienen relleno propio, y el recorte del fondo es la caja de
 * borde: sin estos 5 px el filete cae fuera y no se pinta. En un elemento en
 * línea el relleno vertical no mueve la maqueta.
 *
 * El rótulo de categoría de las fichas llevaba además el subrayado permanente
 * que theme.json pone a todo enlace. Sobre una versalita de 0,58 rem eso no es
 * un enlace elegante, es un enlace sin estilar: subraya en reposo, no dice nada
 * al pasar por encima y compite con el filete del titular justo al lado. Ahora
 * calla en reposo y responde como el resto. */
.uf-section-link a,
.uf-card-meta a {
	padding-block-end: 0.3rem;
}

/* v0.14.10: el relleno que barre. El mismo mecanismo que el filete -un fondo que
 * crece desde la izquierda y se retira por la derecha- aplicado a la superficie
 * entera del botón, en lugar de invertir el color de golpe.
 *
 * El relleno va delante de la tinta a propósito: con la curva exponencial cubre
 * cuatro quintas partes del botón en los primeros 100 ms, mientras el texto
 * todavia esta a medio camino entre el oro y el azul. Así la letra nunca se
 * queda oscura sobre el fondo oscuro esperando a que llegue el oro.
 *
 * Cada botón pone su color en `--uf-fill`; el resto del mecanismo es común. */
.uf-header-cta a,
.uf-video-hero-excerpt .wp-block-post-excerpt__more-link,
.uf-video-card-excerpt .wp-block-post-excerpt__more-link,
.uf-case-form button,
.uf-empty-state .wp-block-search__button,
.uf-podcast-showcase .wp-block-button__link {
	background-image: linear-gradient(
		var(--uf-fill, var(--wp--preset--color--gold)),
		var(--uf-fill, var(--wp--preset--color--gold))
	);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: 0 100%;
	transition: background-size var(--uf-t-draw) var(--uf-ease),
		border-color var(--uf-t-ink) var(--uf-ease),
		color var(--uf-t-ink) var(--uf-ease);
}

.uf-header-cta a:hover,
.uf-header-cta a:focus-visible,
.uf-video-hero-excerpt .wp-block-post-excerpt__more-link:hover,
.uf-video-hero-excerpt .wp-block-post-excerpt__more-link:focus-visible,
.uf-video-card-excerpt .wp-block-post-excerpt__more-link:hover,
.uf-video-card-excerpt .wp-block-post-excerpt__more-link:focus-visible,
.uf-case-form button:hover,
.uf-case-form button:focus-visible,
.uf-empty-state .wp-block-search__button:hover,
.uf-empty-state .wp-block-search__button:focus-visible,
.uf-podcast-showcase .wp-block-button__link:hover,
.uf-podcast-showcase .wp-block-button__link:focus-visible {
	background-position: 0 50%;
	background-size: 100% 100%;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--uf-focus);
	outline-offset: 3px;
}

.uf-header :where(a, button, input, select, textarea):focus-visible,
.uf-footer :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Header con efecto Parallax */
.uf-header {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-deep);
	color: var(--wp--preset--color--white);
}

/* El fondo del parallax va detrás de todo el contenido, no en el mismo plano.
 *
 * Estaba en z-index 0 y el contenido se levantaba con `.uf-header > *`, pero en
 * la portada —y en móvil también en las interiores— esos tres hijos directos
 * son `display: contents`: no generan caja, así que la regla no levantaba nada
 * y quien pintaba encima era el fondo. Se tragaba justo lo único de la marca
 * que no tiene contexto de apilamiento propio: UFOPOLIS. El logo lo tiene por
 * su `filter` y el eslogan por su `opacity`, y por eso los dos se veían y el
 * nombre del sitio no.
 *
 * Con `isolation: isolate` en la cabecera, el z-index negativo se queda dentro
 * de ella y no cae por detrás del fondo de la página, y encima pinta todo el
 * contenido, tenga o no posición. La animación no cambia. */
.uf-header {
	isolation: isolate;
}

/* El menú móvil tiene que quedar por encima de la página, no solo de la cabecera.
 *
 * WordPress abre el modal con `position: fixed` y `z-index: 100000`, pero un
 * z-index solo compite dentro de su contexto de apilamiento, y `.uf-header`
 * crea uno por partida doble: el `isolation: isolate` de aquí arriba y el
 * `view-transition-name` de uf-fx.css. Cualquiera de los dos basta. Encerrado
 * ahí, el modal valía lo que la cabecera —`z-index: auto`— y todo lo
 * posicionado que viene detrás en el documento pintaba encima por puro orden:
 * la tarjeta del vídeo destacado en la portada, el `<main>` entero en las
 * interiores. Del menú solo asomaba lo que caía sobre la propia cabecera: la
 * primera entrada y la X.
 *
 * Las dos propiedades se quedan, porque cada una sostiene algo —el fondo del
 * parallax, la cabecera quieta al navegar—. Lo que sube es la cabecera, y solo
 * mientras su menú está abierto, con el mismo 100000 que WordPress da al modal:
 * así compite en el contexto raíz, que es donde WordPress lo había previsto. */
.uf-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	z-index: 100000;
}

/* El sangrado superior sale del recorrido del parallax, no de un número suelto.
 *
 * La capa viaja hacia abajo, así que el borde que puede quedar al aire es el de
 * arriba: si viaja 84 px, tiene que empezar 84 px por encima de la cabecera o
 * asoma el color plano del fondo. Estaba escrito a mano como -50px contra un
 * recorrido de 48 px, y por eso subir el recorrido rompía la contención en vez
 * de acompañarla. Los 12 px de más son el margen para el redimensionado de las
 * barras del navegador en móvil. */
.uf-header::before {
	--uf-header-parallax-travel: 84px;
	--uf-header-parallax-range: 240px;
	content: "";
	position: absolute;
	inset: calc(-1 * (var(--uf-header-parallax-travel) + 12px)) 0 -50px 0;
	background:
		radial-gradient(circle at 82% 15%, rgba(0, 169, 211, 0.20), transparent 36%),
		radial-gradient(circle at 18% 70%, rgba(183, 152, 84, 0.12), transparent 32%),
		linear-gradient(180deg, var(--wp--preset--color--surface-deep) 0%, var(--wp--preset--color--navy) 100%);
	pointer-events: none;
	z-index: -1;
	will-change: transform;
	transform: translate3d(0, var(--uf-header-bg-y, 0px), 0);
}

.uf-header > * {
	position: relative;
	z-index: 1;
}

body:not(.home) .uf-masthead {
	will-change: transform, opacity;
	transform: translate3d(0, var(--uf-masthead-y, 0px), 0);
	opacity: var(--uf-masthead-opacity, 1);
}

/* Animaciones nativas en GPU mediante CSS Scroll-Driven Animations */
@supports (animation-timeline: scroll()) {
	/* 84 px de recorrido en un rango de 240 px son 35 px por cada 100 px de
	 * scroll: el 35 % que promete docs/parallax-header.md. Antes eran 48 px en
	 * 360 px, un 13 %, y por eso el fondo parecía quieto.
	 *
	 * El rango baja de 360 px a 240 px porque el ritmo es recorrido/rango y no
	 * cambia con él, mientras que el recorrido sí manda sobre el sangrado. A
	 * los 240 px la cabecera ya se ha ido de la pantalla —mide 215 px en las
	 * interiores y 87 px en la portada—, así que los 120 px que sobraban no se
	 * veían y solo obligaban a sangrar más. */
	@keyframes uf-header-bg-parallax {
		from {
			transform: translate3d(0, 0, 0);
		}
		to {
			transform: translate3d(0, var(--uf-header-parallax-travel), 0);
		}
	}

	@keyframes uf-masthead-parallax {
		from {
			transform: translate3d(0, 0, 0);
			opacity: 1;
		}
		to {
			transform: translate3d(0, 18px, 0);
			opacity: 0.72;
		}
	}

	.uf-header::before {
		animation: uf-header-bg-parallax linear both;
		animation-timeline: scroll(root);
		animation-range: 0px var(--uf-header-parallax-range);
	}

	body:not(.home) .uf-masthead {
		animation: uf-masthead-parallax linear both;
		animation-timeline: scroll(root);
		animation-range: 0px 240px;
	}
}

/* Accesibilidad: desactivar todo movimiento si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.uf-header::before,
	body:not(.home) .uf-masthead {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

.uf-topbar p {
	margin: 0;
}

.uf-utility-nav {
	flex: 0 1 auto;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	min-width: 0;
	text-transform: uppercase;
}

.uf-utility-nav .wp-block-navigation-item__content:hover,
.uf-utility-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--gold);
}

.uf-social-links {
	flex: 0 0 auto;
	margin-left: auto;
}

.uf-social-links ul {
	display: flex;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.uf-social-links a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	display: inline-flex;
	height: 1.65rem;
	justify-content: center;
	text-decoration: none;
	width: 1.65rem;
	/* v0.14.10: en un circulo no cabe un barrido de izquierda a derecha sin que se
	 * vea el corte recto contra el borde curvo. La traduccion circular del mismo
	 * verbo es una sombra interior que crece: el anillo de oro se cierra sobre
	 * el glifo desde todo el perimetro a la vez. Respeta el redondeo sin recorte
	 * ni pseudoelemento, porque `box-shadow` ya sigue el `border-radius`. */
	box-shadow: inset 0 0 0 0 var(--wp--preset--color--gold);
	transition: box-shadow var(--uf-t-draw) var(--uf-ease),
		border-color var(--uf-t-ink) var(--uf-ease),
		color var(--uf-t-ink) var(--uf-ease);
}

.uf-social-links a:hover,
.uf-social-links a:focus-visible {
	/* El circulo mide 1,65 rem: con 1 rem de expansion desde cada borde el
	 * anillo se cierra del todo y no queda un ojo oscuro en el centro. */
	box-shadow: inset 0 0 0 1rem var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

.uf-social-icon {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	text-transform: lowercase;
}

/* v0.7: el plugin escribe la abreviatura de cada red como texto —"ig", "f",
 * "tt", "x"— dentro de un círculo. En una cabecera eso se lee como un
 * marcador de posición, no como un icono, y el cliente pidió expresamente
 * "iconos que conectaran con esas redes sociales".
 *
 * Se resuelve en CSS, sin tocar el plugin: el texto se oculta y en su lugar se
 * enmascara el trazo real de la marca, tomado de Simple Icons (CC0). La máscara
 * pinta con currentColor, así que el icono hereda el color del enlace y con él
 * el estado :hover y :focus-visible, sin duplicar reglas ni colores.
 *
 * Se selecciona por el dominio del enlace y no por una clase, porque el plugin
 * usa la misma clase para todas las redes. Así, el día que se rellenen
 * Facebook, TikTok o X en Ajustes → Redes de Ufópolis, aparecen con su icono
 * correcto sin tocar nada más.
 *
 * El sitio carga hoy un solo enlace (Instagram): es el único confirmado. No se
 * inventan los demás. */
.uf-social-links .uf-social-icon {
	-webkit-mask: var(--uf-social-glyph) center / 0.95rem 0.95rem no-repeat;
	background-color: currentColor;
	block-size: 0.95rem;
	font-size: 0;
	inline-size: 0.95rem;
	mask: var(--uf-social-glyph) center / 0.95rem 0.95rem no-repeat;
}

.uf-social-links a[href*="instagram.com"] .uf-social-icon {
	--uf-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E");
}

.uf-social-links a[href*="facebook.com"] .uf-social-icon {
	--uf-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
}

.uf-social-links a[href*="tiktok.com"] .uf-social-icon {
	--uf-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

.uf-social-links a[href*="twitter.com"] .uf-social-icon {
	--uf-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
}

.uf-social-links a[href*="x.com"] .uf-social-icon {
	--uf-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
}

.uf-social-links a[href*="youtube.com"] .uf-social-icon {
	--uf-social-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

/* Bloque de marca.
 *
 * El logo, UFOPOLIS y el eslogan forman una sola pieza y salen todos de una
 * variable, --uf-lockup, que es el cuerpo de UFOPOLIS. El alto del logo, la
 * separación y el cuerpo del eslogan se derivan de ella, así que la proporción
 * es la misma en cualquier ancho y una capa que quiera el bloque más pequeño
 * solo tiene que cambiar esa variable. Antes había ocho sitios distintos
 * fijando a mano el tamaño del logo, el del logotipo y el del eslogan, y de ahí
 * venían las combinaciones descompensadas: logo de 42 px contra un logotipo de
 * 40 px de cuerpo y un eslogan de 7,7 px. */
.uf-brand {
	align-items: center;
	display: flex;
	gap: 0.85rem;
	min-width: 0;
}

.uf-brand .wp-block-site-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.uf-brand .wp-block-site-logo a {
	align-items: center;
	display: inline-flex;
	line-height: 0;
}

.uf-brand .wp-block-site-logo img {
	aspect-ratio: 1 / 1;
	filter: drop-shadow(0 0 12px rgba(0, 190, 230, 0.36));
	height: auto;
	max-height: 56px;
	max-width: 56px;
	object-fit: contain;
	width: 52px;
}

.uf-brand .wp-block-site-title {
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
	letter-spacing: 0.08em;
	line-height: 1;
}

.uf-brand > .wp-block-group {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	justify-content: center;
	min-width: 0;
}

/* El cuerpo del logotipo es la medida de la que cuelga el eslogan, así que se
 * declara una vez como variable. Sube de 2,05rem a 2,6rem por una razón
 * concreta: para que el eslogan mida lo mismo que UFOPOLIS sin bajar de su
 * tamaño de lectura. Con el logotipo a 32,8 px, cuadrarlo exigía un eslogan de
 * 7,3 px, que no se lee; a 41,6 px cuadra con 10,2 px. */
.uf-brand {
	--uf-wordmark: clamp(2.35rem, 1.7rem + 1vw, 2.6rem);
}

.uf-brand .uf-wordmark {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: var(--uf-wordmark);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	/* El interletraje deja hueco sobrante detrás de la S: sin descontarlo, la
	 * caja mide más que las letras y el eslogan no llega a cuadrar. */
	margin: 0 -0.12em 0 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.uf-brand .uf-wordmark a {
	color: inherit;
	text-decoration: none;
}

/* El eslogan mide lo que UFOPOLIS, por construcción. Medido sobre la web real
 * con la tipografía que se publica —sans 700 con 0,12em para el logotipo, sans
 * 400 con 0,08em para el eslogan—, «UFOPOLIS» ocupa 5,755 em ópticos y «La web
 * del Canal de Vicente Fuentes» 23,54 em: 5,755 / 23,54 = 0,2445.
 *
 * El interletraje del eslogan baja de 0,15em a 0,08em porque es la otra palanca
 * del mismo cálculo: con 0,15em el eslogan mide 26 em y cuadrarlo obligaba a
 * dejarlo en 7,3 px.
 *
 * min-width: 100% lo estira hasta el ancho de la columna —que fija el
 * logotipo— y text-align-last remata la línea contra su borde derecho, de modo
 * que cuadre igual en un sistema cuya tipografía de interfaz no sea la medida.
 * Si el eslogan sale más ancho, es él quien fija la columna: el bloque crece,
 * que es preferible a que el rótulo se salga de su caja.
 *
 * El suelo de 0,58rem es de lectura. */
.uf-brand .wp-block-site-tagline {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: max(0.58rem, calc(var(--uf-wordmark) * 0.2445));
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin: 0 -0.08em 0 0;
	min-width: 100%;
	opacity: 0.88;
	text-align: justify;
	text-align-last: justify;
	text-transform: uppercase;
	white-space: nowrap;
	width: max-content;
}
.uf-nav-row {
	align-items: center;
	gap: 0.65rem 1.1rem;
	min-width: 0;
	padding-block: 0.42rem;
}

/* Home hero: primary feature, horizontal secondary cards and latest/newsletter aside. */
.uf-home-hero {
	background-image:
		radial-gradient(circle at 8% 0%, rgba(0, 169, 211, 0.07), transparent 32%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 36%);
	border-bottom: 1px solid var(--uf-border);
	padding-block: clamp(2rem, 5vw, 4rem);
}

.uf-article-card {
	height: 100%;
	min-width: 0;
}

.uf-article-card .wp-block-post-featured-image img {
	object-fit: cover;
	width: 100%;
}

/* v0.14.10: el titular lleva el mismo filete que la navegación, y lo dibuja la
 * tarjeta entera, no solo el título. Apuntar a una tarjeta y que solo responda
 * el renglón que hay debajo del puntero es lo que hace que un mosaico parezca
 * una lista de enlaces sueltos en vez de una rejilla de fichas.
 *
 * El filete es de oro y el titular conserva su color. Teñirlo entero de oro
 * -lo que hacía la v0.10.2- obligaba a comprobar el contraste del titular
 * contra cada póster del cliente, y además no valía igual en todas partes: el
 * archivo de vídeo ya fija `color: #ffffff` sobre sus titulares con la misma
 * especificidad y más abajo, así que alli el oro no llegaba a aplicarse y la
 * misma tarjeta respondía distinto segun la página. Un trazo de oro bajo un
 * titular blanco dice lo mismo sin tocar el texto. */
.uf-article-card .wp-block-post-title a,
.uf-video-card .wp-block-post-title a {
	background-image: linear-gradient(
		var(--wp--preset--color--gold),
		var(--wp--preset--color--gold)
	);
	background-position: 100% 100%;
	/* De bloque, y no en línea, por el filete. Un titular de dos líneas es una
	 * caja en línea partida en dos fragmentos: el fondo se posiciona sobre la
	 * caja entera sin partir y luego se reparte, así que el trazo aparecía bajo
	 * la última línea con el ancho que habría tenido el titular de haber cabido
	 * en una sola. Un ancho distinto en cada tarjeta, sin que nadie lo decida.
	 * De bloque, el 100 % es el de la columna: el mismo filete siempre, y de
	 * paso todo el renglón del titular pasa a ser zona pulsable. */
	display: block;
	background-repeat: no-repeat;
	background-size: 0 1px;
	text-decoration: none;
	transition: background-size var(--uf-t-draw) var(--uf-ease),
		color var(--uf-t-ink) var(--uf-ease);
}

.uf-article-card:hover .wp-block-post-title a,
.uf-article-card:focus-within .wp-block-post-title a,
.uf-video-card:hover .wp-block-post-title a,
.uf-video-card:focus-within .wp-block-post-title a {
	background-position: 0 100%;
	background-size: 100% 1px;
}

.uf-kicker,
.uf-card-meta,
.uf-section-kicker {
	/* v0.7: era gold-ink (#6b501a), que theme.json reserva para fondos claros.
	 * Sobre el lienzo oscuro daba 2,49:1 y los rótulos no se leían. Sobre oscuro
	 * el token correcto es gold (#b79854), que da 6,7:1. */
	color: var(--wp--preset--color--gold);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.uf-card-meta a {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	white-space: normal;
}

.uf-podcast-showcase {
	background: var(--wp--preset--color--navy);
	background-image:
		radial-gradient(circle at 90% 10%, rgba(0, 169, 211, 0.2), transparent 34%),
		linear-gradient(135deg, #0b1c2b 0%, #10283b 100%);
	color: var(--wp--preset--color--white);
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.uf-podcast-showcase h2,
.uf-podcast-showcase a {
	color: var(--wp--preset--color--white);
}

.uf-podcast-showcase .uf-section-kicker {
	color: var(--wp--preset--color--gold);
}

.uf-podcast-showcase__inner {
	max-width: 760px;
}

.uf-podcast-showcase .wp-block-button__link {
	--uf-fill: var(--wp--preset--color--white);
}

.uf-podcast-showcase .wp-block-button__link:hover,
.uf-podcast-showcase .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--navy);
}

.uf-case-page__inner,
.uf-single__inner {
	max-width: 880px;
}

.uf-case-page__intro {
	font-size: 1.15rem;
	max-width: 58ch;
}

.uf-case-form {
	margin-top: 2.25rem;
	max-width: 720px;
}

.uf-case-form p {
	margin-block: 0 1.2rem;
}

.uf-case-form label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.uf-case-form input:not([type="checkbox"]),
.uf-case-form textarea {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--uf-border);
	color: var(--wp--preset--color--ink);
	display: block;
	font: inherit;
	max-width: 100%;
	padding: 0.75rem 0.85rem;
	width: 100%;
}

.uf-case-form textarea {
	min-height: 12rem;
	resize: vertical;
}

.uf-case-form__consent label {
	font-size: 0.92rem;
	font-weight: 400;
}

.uf-case-form__consent input {
	margin-right: 0.45rem;
}

.uf-case-form__trap {
	left: -9999px;
	position: absolute;
}

.uf-case-form button {
	background-color: var(--wp--preset--color--gold);
	--uf-fill: var(--wp--preset--color--gold-ink);
	border: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.85rem 1.2rem;
	text-transform: uppercase;
}

.uf-case-form button:hover,
.uf-case-form button:focus-visible {
	color: var(--wp--preset--color--white);
}

.uf-form-notice {
	border-left: 4px solid var(--wp--preset--color--gold);
	margin-block: 1.5rem;
	padding: 0.85rem 1rem;
}

.uf-episode-links {
	border-top: 1px solid var(--uf-border);
	margin-top: 2rem;
	padding-top: 1.25rem;
}

.uf-episode-links__title {
	font-weight: 700;
	margin: 0 0 0.6rem;
}

.uf-episode-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Article lists and footer */
.uf-section-heading {
	align-items: baseline;
	border-bottom: 2px solid var(--wp--preset--color--gold);
	gap: 1rem;
	padding-bottom: 0.8rem;
}

.uf-latest {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.uf-latest-query > .wp-block-post-template > * {
	min-width: 0;
}

.uf-article-card {
	border-top: 1px solid var(--uf-border);
	padding-top: 1rem;
}

.uf-article-card .wp-block-post-featured-image {
	margin-bottom: 1rem;
}

.uf-article-card .wp-block-post-title {
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	line-height: 1.18;
	margin-block: 0.4rem;
}

.uf-post-header {
	padding-block: clamp(2.5rem, 7vw, 6rem) 2rem;
}

/* v0.7: los titulares de página, archivo y artículo iban a 83 px en escritorio
 * (clamp 2.25-5rem). Un titular largo en español se comía la pantalla entera
 * antes de llegar al contenido. Bajan a un tamaño de display editorial, siguen
 * en mayúsculas cuando el título lo está y ganan equilibrio de líneas. */
.uf-post-header .wp-block-post-title {
	font-size: clamp(2rem, 3.8vw, 3.5rem);
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin-block: 0.5rem 0.8rem;
	text-wrap: balance;
}

.uf-post-content {
	font-size: 1.08rem;
}

.uf-post-content .wp-block-post-content {
	min-width: 0;
}

.uf-post-content .wp-block-post-content > :where(p, ul, ol, blockquote, h2, h3, h4),
.uf-post-content .wp-block-post-content > .wp-block-image,
.uf-post-content .wp-block-post-content > .wp-block-gallery {
	margin-inline: auto;
	max-width: 760px;
}

.uf-post-content blockquote {
	border-left: 4px solid var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--editorial-serif);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-style: italic;
	padding-left: 1.5rem;
}

.uf-post-content figcaption {
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * v0.7: contenido heredado del WordPress antiguo.
 *
 * De los 2.592 artículos publicados, 678 (el 26 %) conservan colores en línea
 * que se escribieron cuando el sitio era claro. En total son 20.799 elementos
 * con color oscuro y sin fondo propio, casi todos #000000, sobre el lienzo
 * #06131d: quedan a 1,12:1 de contraste, es decir, invisibles. No es un
 * problema del tema, es la mudanza de un tema claro a uno oscuro sin tocar el
 * contenido, y afecta a una cuarta parte del archivo.
 *
 * Se neutralizan a heredar el color de lectura, que es lo que devuelve el
 * texto a la pantalla. Dos matices deliberados:
 *
 *   - Solo los valores que suspenden el mínimo de 3:1 sobre el fondo oscuro.
 *     Los que sí se leen (#888888, #cc0000, #ff4b33, #41a62a, blanco, #fafafa)
 *     se respetan, porque son énfasis reales del autor.
 *   - :not([style*="background"]) deja fuera los 158 elementos que sí traen su
 *     propio fondo claro en línea. Esos ya se leen (texto oscuro sobre caja
 *     clara) y neutralizarlos los rompería al revés: texto claro sobre caja
 *     clara. Son las cajas de cita del archivo de 2014.
 *
 * Es una corrección de presentación, reversible y sin tocar la base de datos.
 * La corrección definitiva es limpiar los colores en línea del contenido, y
 * eso es una decisión sobre el archivo del cliente, no del tema.
 * ------------------------------------------------------------------------ */
.uf-post-content [style*="#000000"]:not([style*="background"]),
.uf-post-content [style*="#000"]:not([style*="background"]),
.uf-post-content [style*="#333"]:not([style*="background"]),
.uf-post-content [style*="#333333"]:not([style*="background"]),
.uf-post-content [style*="#555555"]:not([style*="background"]),
.uf-post-content [style*="#252525"]:not([style*="background"]),
.uf-post-content [style*="#005580"]:not([style*="background"]),
.uf-post-content [style*="#1155cc"]:not([style*="background"]),
.uf-post-content [style*="#0000ff"]:not([style*="background"]),
.uf-post-content [style*="#475870"]:not([style*="background"]),
.uf-post-content [style*="#800080"]:not([style*="background"]),
.uf-post-content [style*="#0000ee"]:not([style*="background"]),
.uf-post-content [style*="#3b5998"]:not([style*="background"]),
.uf-post-content [style*="#003399"]:not([style*="background"]),
.uf-post-content [style*="#0b0080"]:not([style*="background"]),
.uf-post-content [style*="rgb(0, 0, 0)"]:not([style*="background"]),
.uf-post-content [style*="rgb(5, 5, 5)"]:not([style*="background"]),
.uf-post-content [style*="rgb(26, 115, 232)"]:not([style*="background"]) {
	color: inherit !important;
}

/* ---------------------------------------------------------------------------
 * v0.7: imágenes del archivo perdido en la migración.
 *
 * 650 de los 2.592 artículos publicados (el 25 %, 3.755 direcciones distintas)
 * llevan imágenes y enlaces que apuntan a `ufopolis.com-content/...`, un
 * dominio que no existe: la migración convirtió
 * `ufopolis.com/wp-content/...` en `ufopolis.com-content/...` y se comió el
 * `/wp`. El dominio da NXDOMAIN, así que el navegador no puede resolverlo y
 * cada imagen sale como un icono roto con el texto alternativo al lado.
 *
 * Se comprobó si el material seguía en el servidor antes de dar esto por
 * perdido: de 90 direcciones distintas muestreadas entre todos los años, 0
 * existen en /wp-content/, 0 en /wp/wp-content/ y 0 en /blog/wp-content/. El
 * material no se migró nunca; la revisión de medios del informe de fasmigración
 * hablaba de 149 archivos y esta parte del archivo no estaba entre ellos.
 *
 * Reescribir la dirección no arregla nada: cambiaría un dominio inexistente por
 * un 404 en el nuestro y metería ruido de 404 en el servidor. Lo que sí se
 * puede hacer desde el tema es no enseñar el hueco: la imagen se oculta y, si
 * es la destacada, se oculta también el marco entero para que no quede una caja
 * vacía de 16:9.
 *
 * Es presentación, no toca la base de datos y se revierte borrando este bloque.
 * La reparación de verdad —recuperar los medios o limpiar las referencias del
 * contenido— es una decisión sobre el archivo del cliente.
 * ------------------------------------------------------------------------ */
.uf-post-content img[src*="ufopolis.com-content"] {
	display: none;
}

.uf-post-content :is(figure, .wp-block-image, a):has(img[src*="ufopolis.com-content"]) {
	display: none;
}

.wp-block-post-featured-image:has(img[src*="ufopolis.com-content"]) {
	display: none;
}

/* Booster Extension pinta sus bloques de compartir y de autor para un tema
 * claro: caja blanca y, al heredar, texto claro encima. Sobre el lienzo oscuro
 * daba 1,17:1. La regla que lo causa es
 * `.be-author-details .be-author-wrapper { background: #fff }`, de dos clases,
 * y su hoja se carga después de esta; por eso aquí hay que nombrar las tres
 * clases para ganarla. */
.uf-post-content .booster-block,
.uf-post-content .be-author-details,
.uf-post-content .be-author-details .be-author-wrapper,
.uf-post-content .twp-social-share {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #e8eef1;
}

.uf-post-content .be-author-description,
.uf-post-content .be-author-meta,
.uf-post-content .be-author-name,
.uf-post-content .be-author-details h2,
.uf-post-content .twp-plugin-title h2 {
	color: #ffffff;
}

/* Las etiquetas de compartir llevan el azul de Facebook, el rojo de Pinterest
 * y el azul de LinkedIn, pensados para fondo blanco; sobre oscuro suspenden
 * (2,7:1 y 3,5:1). El icono conserva su color de marca, que es lo que
 * identifica la red; la etiqueta pasa al color de lectura.
 *
 * El selector del plugin `.twp-social-icons.twp-social-<red> .twp-share-label`
 * tiene tres clases; por eso aquí se nombran cuatro, para ganarlo sin recurrir
 * a !important. */
.uf-post-content .twp-social-share .twp-social-icons .twp-share-label,
.uf-post-content .twp-social-share .twp-social-icons .twp-label-title {
	color: #e8eef1;
}

.uf-post-content .twp-social-share .twp-share-title h2 {
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.uf-comments {
	margin-block: clamp(2.5rem, 6vw, 5rem);
}

.uf-comments h2 {
	border-bottom: 2px solid var(--wp--preset--color--gold);
	padding-bottom: 0.7rem;
}

.uf-comment {
	border-bottom: 1px solid var(--uf-border);
	gap: 1rem;
	margin-block: 0 1.5rem;
	padding-bottom: 1.5rem;
}

.uf-comment-body {
	min-width: 0;
}

.uf-comment-actions {
	gap: 0.75rem;
	margin-top: 0.6rem;
}

.uf-footer {
	background-color: var(--wp--preset--color--navy);
	background-image:
		radial-gradient(circle at 12% 0%, rgba(0, 169, 211, 0.1), transparent 32%),
		linear-gradient(180deg, #10283b 0%, #0b1c2b 100%);
	color: var(--wp--preset--color--white);
	margin-top: 4rem;
}

.uf-footer a,
.uf-footer .wp-block-site-tagline {
	color: var(--wp--preset--color--white);
}

.uf-footer .wp-block-navigation-item__content:hover,
.uf-footer .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--gold);
}

/* v0.7: el pie tenía cuatro hijos sueltos en una sola fila con
 * space-between —marca, lista vertical de navegación, iconos y cita— y al
 * envolver se rompía por donde cayera. Ahora son dos filas declaradas: arriba
 * marca y cita, abajo navegación e iconos. La composición deja de depender de
 * dónde parta el wrap. */
.uf-footer-main {
	gap: clamp(1.75rem, 4vw, 2.75rem);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.uf-footer-main > * {
	min-width: 0;
}

.uf-footer-top,
.uf-footer-bottom {
	gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
}

.uf-footer-top > *,
.uf-footer-bottom > * {
	min-width: 0;
}

/* v0.7: uf-footer-nav y uf-legal-nav no tenían ni una regla. El pie se veía
 * como lo que era: una lista vertical por defecto con huecos de bloque, el
 * icono social suelto en medio y mucho aire muerto. Se pasa la navegación a
 * fila, que es como la dibuja el mockup aprobado, y se le da el mismo trato de
 * rótulo que a las secciones de la portada. */
.uf-footer-nav,
.uf-legal-nav {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.55rem clamp(1.1rem, 2.4vw, 2.2rem);
}

.uf-footer-nav .wp-block-navigation__container,
.uf-legal-nav .wp-block-navigation__container {
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: inherit;
}

.uf-footer-nav .wp-block-navigation-item__content,
.uf-legal-nav .wp-block-navigation-item__content {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
}

.uf-footer-nav .wp-block-navigation-item__content {
	color: #ffffff;
	font-weight: 600;
}

.uf-legal-nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.72);
}

.uf-footer-meta {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.76rem;
	gap: 0.75rem 1.5rem;
	opacity: 0.74;
	padding-block: 1rem;
}

.uf-footer .uf-quote {
	max-width: 18rem;
}

.uf-footer-meta {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.76rem;
	opacity: 0.74;
	padding-block: 1rem;
}

.uf-footer-meta p {
	margin: 0;
}

@media (max-width: 781px) {
	.uf-topbar {
		align-items: flex-start;
		gap: 0.5rem;
		padding-block: 0.65rem;
	}

	.uf-utility-nav,
	.uf-quote {
		display: none;
	}

	.uf-social-links {
		margin-left: 0;
	}

	.uf-brand .wp-block-site-title {
		font-size: clamp(1.55rem, 8vw, 2.3rem);
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.uf-nav-row {
		align-items: stretch;
	}

	.uf-main-nav-menu,
	.uf-header-search {
		flex-basis: 100%;
	}

	.uf-header-search {
		max-width: none;
	}

	.uf-main-nav-menu .wp-block-navigation-item__content {
		padding-block: 0.65rem;
	}

	.uf-home-hero,	.uf-latest {
		padding-block: 2rem;
	}

	.uf-footer-main {
		gap: 2rem;
	}

	.uf-footer-main > .wp-block-navigation,
	.uf-footer-main > .uf-brand {
		flex: 1 1 100%;
	}
}

/* Video-first home: the editorial pages keep their paper background; only the
 * front page adopts the cinematic treatment from the approved mockup. */
body.home {
	background: #06131d;
	color: #e8eef1;
}

body.home .uf-site-main h1,
body.home .uf-site-main h2,
body.home .uf-site-main h3,
body.home .uf-site-main a {
	color: var(--wp--preset--color--white);
}

body.home .uf-home-hero {
	background: #06131d;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 0 clamp(2rem, 3vw, 3.5rem);
}

body.home .uf-video-hero-query,
body.home .uf-video-hero-query > .wp-block-post-template {
	margin: 0;
	max-width: none;
	width: 100%;
}

.uf-video-hero-card {
	aspect-ratio: 2.7 / 1;
	box-sizing: border-box;
	isolation: isolate;
	margin-inline: auto;
	max-width: 1440px;
	width: min(1440px, calc(100% - clamp(2rem, 8vw, 9rem)));
	overflow: hidden;
	position: relative;
}

.uf-video-hero-card::after {
	background:
		linear-gradient(90deg, rgba(3, 12, 20, 0.94) 0%, rgba(3, 12, 20, 0.72) 35%, rgba(3, 12, 20, 0.08) 78%),
		linear-gradient(180deg, rgba(3, 12, 20, 0.72) 0%, rgba(3, 12, 20, 0.08) 54%, rgba(3, 12, 20, 0.66) 100%),
		radial-gradient(circle at 74% 28%, rgba(0, 169, 211, 0.22), transparent 30%);
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.uf-video-hero-card > .wp-block-post-featured-image {
	background:
		radial-gradient(circle at 70% 35%, rgba(0, 169, 211, 0.3), transparent 26%),
		linear-gradient(145deg, #10283b, #06131d);
	inset: 0;
	margin: 0;
	position: absolute;
	z-index: -2;
}

.uf-video-hero-card > .wp-block-post-featured-image,
.uf-video-hero-card > .wp-block-post-featured-image a,
.uf-video-hero-card > .wp-block-post-featured-image img {
	height: 100%;
	width: 100%;
}

.uf-video-hero-card > .wp-block-post-featured-image img {
	filter: saturate(0.88) contrast(1.04);
	object-fit: cover;
}

.uf-video-hero-copy {
	align-items: flex-start;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-inline: auto;
	min-height: 100%;
	margin-block-start: 0 !important;
	padding: clamp(1.25rem, 3.2vw, 4.5rem) clamp(1.5rem, 5vw, 5rem) clamp(0.75rem, 1.65vw, 4rem);
	position: relative;
	width: min(1320px, 100%);
}

body.home .uf-video-hero-copy > * {
	margin-inline: 0 !important;
	max-width: none !important;
}

.uf-video-hero-copy .uf-card-meta,
body.home .uf-video-hero-copy .uf-card-meta a {
	color: var(--wp--preset--color--gold);
}

.uf-video-hero-copy .uf-card-meta {
	margin-bottom: 0.85rem;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.home .uf-video-hero-copy > .wp-block-post-title {
	max-width: 13ch !important;
}

body.home .uf-video-hero-copy > .uf-video-hero-excerpt {
	max-width: 48ch !important;
	width: 100%;
}

.uf-video-hero-excerpt {
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(0.95rem, 1.4vw, 1.2rem);
	line-height: 1.35;
	margin: 0;
	max-width: 54ch;
}

body.home .uf-video-hero-excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.uf-video-hero-excerpt .wp-block-post-excerpt__more-text {
	display: block;
	margin-top: 0;
}

.uf-video-hero-excerpt .wp-block-post-excerpt__more-link,
.uf-video-card-excerpt .wp-block-post-excerpt__more-link {
	align-items: center;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: 0.75rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.1em;
	margin-top: 1.25rem;
	min-height: 2.75rem;
	padding: 0.7rem 1.15rem;
	text-decoration: none;
	text-transform: uppercase;
}

.uf-video-hero-excerpt .wp-block-post-excerpt__more-link:hover,
.uf-video-hero-excerpt .wp-block-post-excerpt__more-link:focus-visible,
.uf-video-card-excerpt .wp-block-post-excerpt__more-link:hover,
.uf-video-card-excerpt .wp-block-post-excerpt__more-link:focus-visible {
	color: var(--wp--preset--color--navy);
}

body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link:hover,
body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link:focus-visible {
	color: var(--wp--preset--color--navy);
}

body.home .uf-section-link {
	color: var(--wp--preset--color--gold);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.uf-video-query > .wp-block-post-template {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.uf-video-card {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	overflow: hidden;
	transition: border-color var(--uf-t-ink) var(--uf-ease),
		box-shadow var(--uf-t-move) var(--uf-ease),
		translate var(--uf-t-move) var(--uf-ease);
}

/* v0.14.10: dos píxeles no son un alzado, son un tic: el ojo registra que algo se
 * ha movido pero no de qué. Con cinco y una sombra que se abre debajo, la
 * tarjeta se despega del lienzo y el gesto se entiende.
 *
 * Y va en `translate`, no en `transform`, porque en `transform` no se movía.
 * La tarjeta es objetivo del revelado por scroll de la capa de efectos, cuya
 * animación termina en `transform: none` con relleno `both`; un valor animado
 * gana a una declaración normal en la cascada, así que ese `none` se quedaba
 * puesto para siempre y anulaba cualquier `transform` de rollover. El alzado
 * de las fichas y el de las baldosas llevaban así desde que existe el
 * revelado: se declaraban, se transicionaban y no ocurrían. `translate` es
 * una propiedad independiente, no la toca la animación, y compone con ella. */
.uf-video-card:hover,
.uf-video-card:focus-within {
	border-color: rgba(183, 152, 84, 0.9);
	box-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.9);
	translate: 0 -5px;
}

.uf-video-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(circle at 70% 35%, rgba(0, 169, 211, 0.3), transparent 25%),
		linear-gradient(145deg, #15364b, #06131d);
	margin: 0;
	position: relative;
}

.uf-video-card .wp-block-post-featured-image a,
.uf-video-card .wp-block-post-featured-image img {
	display: block;
	height: 100%;
	width: 100%;
}

.uf-video-card .wp-block-post-featured-image img {
	object-fit: cover;
}

.uf-video-card .wp-block-post-featured-image::after {
	align-items: center;
	background: rgba(3, 12, 20, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	color: #ffffff;
	content: '▶';
	display: flex;
	font-size: 0.85rem;
	height: 2.85rem;
	justify-content: center;
	left: 50%;
	padding-left: 0.15rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2.85rem;
}

.uf-video-card-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem 1rem 1.15rem;
}

.uf-video-card-copy .uf-card-meta,
body.home .uf-video-card-copy .uf-card-meta a {
	color: var(--wp--preset--color--gold);
}

.uf-video-card-copy .uf-card-meta,
.uf-article-card .uf-card-meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* v0.7: las tarjetas pasaron de una etiqueta fija ("Videoprograma", repetida
 * doce veces y por tanto sin información) a la categoría real de cada vídeo,
 * que es como la rotula el mockup aprobado. Pero wp:post-terms pinta TODAS las
 * categorías de la entrada y estas llevan cuatro o cinco: la tarjeta se iba a
 * tres líneas de rótulos y la rejilla dejaba de leerse en fila.
 *
 * Se queda la primera, que es la principal, en una sola línea y con recorte por
 * puntos suspensivos. Es CSS y no PHP porque no hay nada que decidir en el
 * servidor: la información está entera en el HTML, solo se recorta al pintar. */
.uf-video-card-copy .uf-card-meta a:not(:first-of-type),
.uf-video-card-copy .uf-card-meta .wp-block-post-terms__separator,
.uf-article-card .uf-card-meta a:not(:first-of-type),
.uf-article-card .uf-card-meta .wp-block-post-terms__separator {
	display: none;
}

.uf-video-card-copy .uf-card-meta a,
.uf-article-card .uf-card-meta a {
	display: inline;
	overflow-wrap: normal;
	white-space: nowrap;
}

/* v0.7: el tamaño del titular de tarjeta vivía SOLO bajo body.home. En los
 * archivos de categoría el <h2> del título heredaba entonces el tamaño de h2
 * que declara Twenty Twenty-Five en su theme.json
 * (--wp--preset--font-size--x-large) y salía a 51 px dentro de una rejilla de
 * cuatro columnas: cabían tres palabras por tarjeta y el archivo de 857 vídeos
 * era ilegible. La causa de fondo es que el hijo declara los titulares
 * agrupados en elements.heading y el padre los declara uno a uno por elemento,
 * así que el padre ganaba el tamaño.
 *
 * La tarjeta se declara ahora como componente, sin depender de body.home. La
 * regla de la portada que va justo debajo tiene más especificidad y sigue
 * mandando donde ya mandaba, así que la portada no se mueve. */
.uf-video-card-copy .wp-block-post-title,
.uf-video-card-copy .wp-block-post-title a {
	color: #ffffff;
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: clamp(1.1rem, 1.45vw, 1.45rem);
	font-weight: 700;
	line-height: 1.2;
	margin-block: 0.45rem 0.35rem;
	text-wrap: balance;
}

.uf-video-card-excerpt {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.88rem;
	line-height: 1.45;
	margin: 0;
}

.uf-video-card-excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.uf-video-card-excerpt .wp-block-post-excerpt__more-link {
	font-size: 0.68rem;
	margin-top: auto;
	padding: 0.55rem 0.8rem;
}

body.home .uf-latest .uf-section-kicker {
	color: rgba(255, 255, 255, 0.64);
}

body.home .uf-latest .uf-article-card .wp-block-post-featured-image:empty::after {
	align-items: center;
	background:
		radial-gradient(circle at 70% 30%, rgba(0, 169, 211, 0.24), transparent 25%),
		linear-gradient(145deg, #15364b, #06131d);
	color: rgba(255, 255, 255, 0.62);
	content: 'UFÓPOLIS';
	display: flex;
	font-family: var(--wp--preset--font-family--editorial-serif);
	font-size: clamp(1rem, 2.2vw, 1.55rem);
	height: 100%;
	justify-content: center;
	letter-spacing: 0.12em;
	position: absolute;
	inset: 0;
}

body.home .uf-latest .uf-article-card:not(:has(.wp-block-post-featured-image))::before {
	align-items: center;
	background:
		radial-gradient(circle at 70% 30%, rgba(0, 169, 211, 0.24), transparent 25%),
		linear-gradient(145deg, #15364b, #06131d);
	color: rgba(255, 255, 255, 0.62);
	content: 'UFÓPOLIS';
	display: flex;
	font-family: var(--wp--preset--font-family--editorial-serif);
	font-size: clamp(1rem, 2.2vw, 1.55rem);
	justify-content: center;
	letter-spacing: 0.12em;
	margin-bottom: 1rem;
	min-height: clamp(7rem, 14vw, 11rem);
}

body.home .uf-latest .uf-article-card .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

body.home .uf-latest .uf-article-card > :where(.wp-block-post-title, .wp-block-post-terms, .wp-block-post-date) {
	margin-inline: 1rem;
}

body.home .uf-latest .uf-article-card .uf-card-meta,
body.home .uf-latest .uf-article-card .uf-card-meta a {
	color: var(--wp--preset--color--gold);
}

body.home .uf-latest .uf-article-card .wp-block-post-date {
	color: rgba(255, 255, 255, 0.6);
}

body.home .uf-latest .wp-block-query-pagination a,
body.home .uf-latest .wp-block-query-pagination span {
	color: #ffffff;
}

@media (max-width: 1100px) {
	.uf-video-query > .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.uf-video-hero-card {
		aspect-ratio: auto;
		max-width: none;
		width: calc(100% - 2rem);
	}

	.uf-video-hero-card::after {
		display: none;
	}

	.uf-video-hero-card > .wp-block-post-featured-image {
		aspect-ratio: 16 / 9;
		inset: auto;
		position: relative;
	}

	.uf-video-hero-copy {
		background: var(--wp--preset--color--navy);
		min-height: 0;
		padding-block: 2rem 2.5rem;
	}

	.uf-video-query > .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .uf-latest-query > .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	body.home .uf-video-featured .uf-section-heading,
	body.home .uf-latest .uf-section-heading {
		align-items: flex-start;
		gap: 0.6rem;
	}
}

/* Ufópolis v0.4: the approved direction is a dark, video-led channel.
 *
 * v0.7: faltaban body.page y body.error404, así que las páginas normales y el
 * 404 enseñaban el marfil de theme.json en cuanto el <main> no cubría todo el
 * alto. El 404 era lo peor: cabecera navy, contenido marfil y pie navy.
 *
 * El selector body.page-template-page-manda-tu-caso que había aquí no casaba
 * nunca: WordPress no añade esa clase para las plantillas de bloque, porque
 * get_page_template_slug() lee el meta _wp_page_template, que en un tema de
 * bloques va vacío. La resolución de page-manda-tu-caso.html es por jerarquía
 * de plantillas, no por ese meta. body.page lo cubre de verdad y de paso
 * alcanza cualquier página nueva. */
body.home,
body.archive,
body.search,
body.single-post,
body.post-type-archive-uf_episode,
body.single-uf_episode,
body.page,
body.error404 {
	background: #06131d;
	color: #e8eef1;
}


.uf-topbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	min-height: 2rem;
	padding-block: 0.38rem;
	text-transform: uppercase;
}

.uf-topbar .uf-kicker {
	color: var(--wp--preset--color--gold);
	font-size: 0.62rem;
	letter-spacing: 0.19em;
}

.uf-utility-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	padding-block: 0.25rem;
}

.uf-masthead {
	align-items: center;
	gap: 2rem;
	min-width: 0;
	padding-block: 0.38rem 0.5rem;
}


/* El pie lleva el mismo bloque, un punto más pequeño que el de la cabecera. */
.uf-footer .uf-brand {
	gap: 0.75rem;
}

.uf-footer .uf-brand .wp-block-site-logo img {
	height: 44px;
	max-height: 48px;
	max-width: 48px;
	width: 44px;
}

/* El pie cuadra por la misma razón, así que su logotipo no puede quedarse por
 * debajo del cuerpo con el que el eslogan toca su suelo de lectura: por debajo
 * de 2,35rem el eslogan volvería a sobresalir. */
.uf-footer .uf-brand {
	--uf-wordmark: clamp(2.35rem, 3vw, 2.8rem);
}

.uf-footer .uf-wordmark {
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: var(--uf-wordmark);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	margin: 0 -0.12em 0 0;
	text-transform: uppercase;
}

.uf-footer .uf-wordmark a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.uf-quote {
	font-family: var(--wp--preset--font-family--editorial-serif);
	font-size: clamp(0.85rem, 1.2vw, 1.05rem);
	font-style: italic;
	max-width: 17rem;
	text-align: right;
}

.uf-main-nav {
	background: rgba(3, 12, 20, 0.72);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--white);
}

.uf-main-nav-menu {
	flex: 1 1 auto;
	min-width: 0;
}

.uf-main-nav-menu .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	padding-block: 0.55rem;
	text-transform: uppercase;
}

.uf-main-nav-menu .wp-block-navigation-item__content:hover,
.uf-main-nav-menu .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--gold);
}

/* The responsive navigation overlay must keep the Ufópolis dark treatment on
 * phones instead of falling back to Twenty Twenty-Five's white modal. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #06131d !important;
	color: #ffffff !important;
	padding: 2.5rem 1.75rem 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	padding-top: 2.5rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	align-items: flex-start !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.35rem !important;
	width: 100% !important;
}

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

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	/* v0.14.10: en el menú desplegado las entradas son de bloque, así que el
	 * filete de la navegación cubriría el ancho entero de la columna en vez de
	 * la palabra. Aquí el estado lo dan el oro, el desplazamiento y el atenuado
	 * de las hermanas; el filete sobra. */
	background-image: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	display: block !important;
	font-family: var(--wp--preset--font-family--editorial-sans) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	padding: 0.85rem 0.35rem !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: color var(--uf-t-ink) var(--uf-ease),
		opacity var(--uf-t-ink) var(--uf-ease),
		transform var(--uf-t-move) var(--uf-ease) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--gold) !important;
	transform: translateX(6px) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--gold) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	align-items: center !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	cursor: pointer !important;
	display: flex !important;
	height: 42px !important;
	justify-content: center !important;
	position: absolute !important;
	right: 1.5rem !important;
	top: 1.5rem !important;
	width: 42px !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close:focus-visible {
	background: rgba(183, 152, 84, 0.15) !important;
	border-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--gold) !important;
}

.uf-header-search {
	flex: 0 0 180px;
	margin-block: 0;
	min-width: 9rem;
	width: 180px;
}

.uf-header-search .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	display: flex;
	min-width: 0;
	padding: 0.12rem 0.2rem 0.12rem 0.8rem;
}

.uf-header-search .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--white);
	font-size: 0.78rem;
	flex: 1 1 auto;
	height: 2.3rem;
	min-width: 0;
	padding-block: 0.3rem;
	width: auto;
}

.uf-header-search .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.62);
}

.uf-header-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--gold);
	flex: 0 0 2.3rem;
	font-size: 0;
	height: 2.3rem;
	min-height: 2.3rem;
	min-width: 2.3rem;
	padding: 0;
}

.uf-header-cta {
	flex: 0 0 auto;
	margin: 0;
}

.uf-header-cta a {
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 999px;
	color: var(--wp--preset--color--gold);
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	padding: 0.62rem 0.9rem;
	text-decoration: none;
	text-transform: uppercase;
}

.uf-header-cta a:hover,
.uf-header-cta a:focus-visible {
	color: var(--wp--preset--color--navy);
}

body.home .uf-video-hero-copy .wp-block-post-title,
body.home .uf-video-hero-copy .wp-block-post-title a {
	color: #ffffff;
	font-size: clamp(2.15rem, 4.8vw, 5.4rem);
	line-height: 0.95;
	margin-block: 0 0.75rem;
	max-width: 13ch;
	text-shadow: 0 3px 24px rgba(0, 0, 0, 0.38);
}

body.home .uf-video-featured {
	background: var(--wp--preset--color--navy);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.home .uf-video-featured .uf-section-heading,
body.home .uf-latest .uf-section-heading {
	border-bottom-color: rgba(183, 152, 84, 0.9);
}

body.home .uf-video-featured .uf-section-heading h2,
body.home .uf-latest .uf-section-heading h2 {
	color: #ffffff;
	margin: 0;
}

body.home .uf-latest {
	background: #06131d;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #e8eef1;
}

body.home .uf-video-library {
	background: #06131d;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: clamp(2.75rem, 6vw, 5.5rem);
}

body.home .uf-video-library .uf-section-heading {
	border-bottom-color: rgba(183, 152, 84, 0.9);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

body.home .uf-video-library .uf-section-heading h2 {
	color: #ffffff;
	font-size: clamp(1.8rem, 3.4vw, 3rem);
	margin: 0;
}

.uf-podcast-showcase__layout {
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4.5rem);
}

.uf-podcast-showcase__mark {
	align-items: center;
	border: 1px solid rgba(0, 169, 211, 0.58);
	border-radius: 50%;
	color: var(--wp--preset--color--cyan);
	display: flex;
	flex: 0 0 5.5rem;
	font-size: 2.5rem;
	height: 5.5rem;
	justify-content: center;
	line-height: 1;
	margin: 0;
	text-shadow: 0 0 1.5rem rgba(0, 169, 211, 0.85);
	width: 5.5rem;
}

.uf-podcast-showcase__copy {
	max-width: 42rem;
}

.uf-podcast-showcase__copy h2 {
	font-size: clamp(2.3rem, 6vw, 4.8rem);
	letter-spacing: 0.03em;
	margin-block: 0.35rem 0.85rem;
	text-transform: uppercase;
}

.uf-podcast-showcase__copy > p:last-child {
	color: rgba(255, 255, 255, 0.76);
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	max-width: 48ch;
}

.uf-category-explorer {
	background: #06131d;
	color: #e8eef1;
	padding-block: clamp(2.75rem, 6vw, 5.5rem);
}

.uf-category-explorer .uf-section-heading {
	border-bottom-color: rgba(183, 152, 84, 0.9);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.uf-category-explorer .uf-section-heading h2 {
	color: #ffffff;
	font-size: clamp(1.8rem, 3.4vw, 3rem);
	margin: 0;
}

.uf-category-explorer .uf-section-kicker {
	color: rgba(255, 255, 255, 0.58);
}

.uf-category-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* v0.7: los accesos de categoría recuperan la fotografía del mockup aprobado.
 *
 * La foto la trae un Query Loop de una entrada por acceso, así que aquí hay que
 * colocar esa capa, oscurecerla lo justo para que el rótulo se lea sobre
 * cualquier imagen y estirar el enlace por toda la tarjeta, que es lo que
 * mantiene el acceso entero pulsable sin anidar un <a> dentro de otro.
 *
 * Los tres colores de un solo uso que había para distinguir los accesos
 * (#283b45, #1b3045, #29213a) desaparecen: existían justamente porque no había
 * imagen, y no pertenecían a ninguna rampa de la paleta. Quedan como respaldo
 * para la categoría que todavía no tenga imagen destacada, como el podcast. */
.uf-category-tile {
	background:
		linear-gradient(145deg, rgba(0, 169, 211, 0.3), transparent 48%),
		linear-gradient(160deg, var(--wp--preset--color--hairline), var(--wp--preset--color--surface-deep));
	background-position: center;
	background-size: cover;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 12rem;
	overflow: hidden;
	padding: 1.15rem;
	position: relative;
	/* La tarjeta entera es el enlace, así que el subrayado de los enlaces del
	 * tema caía sobre el rótulo y la llamada. */
	text-decoration: none;
	transition: border-color var(--uf-t-ink) var(--uf-ease),
		box-shadow var(--uf-t-move) var(--uf-ease);
}

.uf-category-tile--science {
	background:
		linear-gradient(145deg, rgba(183, 152, 84, 0.3), transparent 48%),
		linear-gradient(160deg, var(--wp--preset--color--surface-raised), var(--wp--preset--color--surface-deep));
}

.uf-category-tile--crop {
	background:
		linear-gradient(145deg, rgba(65, 166, 42, 0.28), transparent 48%),
		linear-gradient(160deg, var(--wp--preset--color--hairline), var(--wp--preset--color--surface-deep));
}

.uf-category-tile--podcast {
	background:
		linear-gradient(145deg, rgba(112, 68, 144, 0.4), transparent 48%),
		linear-gradient(160deg, var(--wp--preset--color--navy), var(--wp--preset--color--surface-deep));
}

/* El velo va en el pseudo-elemento y no en el degradado del fondo, porque el
 * fondo lo trae el atributo style del patrón y lo pisaría. */
.uf-category-tile--photo::before {
	background:
		radial-gradient(circle at 78% 18%, rgba(0, 169, 211, 0.22), transparent 46%),
		linear-gradient(180deg, rgba(3, 12, 20, 0.22) 0%, rgba(3, 12, 20, 0.86) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

/* Los hijos tienen que quedar por encima del velo. */
.uf-category-tile > * {
	position: relative;
	z-index: 1;
}

/* v0.14.10: la baldosa ya no da el saltito de dos píxeles. Lo que ocurre al
 * acercarse es que la imagen se hunde bajo un velo más denso y el rótulo sube:
 * el texto gana contraste justo cuando se va a leer, que es lo que un salto no
 * aporta.
 *
 * Velo y filete comparten un único `::after` con dos capas de fondo, porque un
 * elemento no tiene más pseudoelementos que gastar y `--photo` ya usa el
 * `::before` para su velo de base. El velo se atenúa con `opacity`; el filete
 * crece con `background-size`, con el mismo salto de ancla que la navegación,
 * así que entra por la izquierda y se retira por la derecha. */
.uf-category-tile::after {
	background-image:
		linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)),
		linear-gradient(0deg, rgba(6, 19, 29, 0.72), rgba(6, 19, 29, 0) 68%);
	background-position: 100% 100%, 0 0;
	background-repeat: no-repeat;
	background-size: 0 2px, 100% 100%;
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity var(--uf-t-draw) var(--uf-ease),
		background-size var(--uf-t-draw) var(--uf-ease);
	/* Los hijos van en z-index 1; el universal no alcanza a los
	 * pseudoelementos, así que este declara el suyo para quedar debajo. */
	z-index: 0;
}

.uf-category-tile:hover::after,
.uf-category-tile:focus-visible::after,
.uf-category-tile:focus-within::after {
	background-position: 0 100%, 0 0;
	background-size: 100% 2px, 100% 100%;
	opacity: 1;
}

.uf-category-tile:hover,
.uf-category-tile:focus-visible,
.uf-category-tile:focus-within {
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 22px 48px -26px rgba(0, 0, 0, 0.95);
	color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
	.uf-category-tile__label,
	.uf-category-tile__link {
		transition: translate var(--uf-t-move) var(--uf-ease);
	}

	.uf-category-tile:hover .uf-category-tile__label,
	.uf-category-tile:focus-within .uf-category-tile__label,
	.uf-category-tile:hover .uf-category-tile__link,
	.uf-category-tile:focus-within .uf-category-tile__link {
		translate: 0 -4px;
	}
}

.uf-category-tile__label {
	color: #ffffff;
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin: 0;
	text-transform: uppercase;
}

.uf-category-tile__link {
	color: var(--wp--preset--color--gold);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0.75rem 0 0;
	text-transform: uppercase;
}

/* El enlace cubre la tarjeta entera. El texto que se lee es el suyo. */
.uf-category-tile__link a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

body.archive .uf-archive,
body.search .uf-archive,
body.post-type-archive-uf_episode .uf-archive,
body.single-uf_episode .uf-single,
body.single-post .uf-single-main {
	background: #06131d;
	color: #e8eef1;
	padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.uf-archive .uf-post-header,
.uf-single-main .uf-post-header,
.uf-single .uf-single__inner {
	padding-block: 0 2rem;
}

.uf-archive .uf-post-header h1,
.uf-single-main .uf-post-header .wp-block-post-title,
.uf-single .wp-block-post-title {
	color: #ffffff;
	font-size: clamp(2rem, 3.8vw, 3.5rem);
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin-block: 0.35rem 0.8rem;
	text-wrap: balance;
}

.uf-archive .uf-post-header > p,
.uf-single-main .uf-single-excerpt,
.uf-single .wp-block-post-excerpt {
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	max-width: 65ch;
}

body.archive .uf-article-card,
body.search .uf-article-card {
	background: var(--wp--preset--color--navy);
	border: 1px solid rgba(255, 255, 255, 0.13);
	padding: 0 0 1rem;
}

body.archive .uf-article-card .wp-block-post-featured-image,
body.search .uf-article-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	background: #10283b;
	margin: 0 0 1rem;
	min-height: 0;
	/* `clip` y no `hidden`: `hidden` convierte la caja en contenedor de scroll y
	 * el revelado por scroll de la capa de efectos se ancla al contenedor más
	 * cercano, con lo que se quedaría congelado. Es la misma lección que ya
	 * costó un Ken Burns clavado, anotada en uf-fx.css. */
	overflow: clip;
}

/* v0.14.10: en el archivo, la ficha no se alza. Aquí no es una tarjeta suelta
 * sobre el lienzo sino una fila separada de la anterior por un filete, y
 * levantarla despega ese filete de su fila y deja un escalón. Lo que responde
 * es lo que se mira: el póster se acerca y el titular gana su trazo de oro. */
@media (prefers-reduced-motion: no-preference) {
	body.archive .uf-article-card .wp-block-post-featured-image img,
	body.search .uf-article-card .wp-block-post-featured-image img {
		transition: transform var(--uf-t-move) var(--uf-ease);
	}

	body.archive .uf-article-card:hover .wp-block-post-featured-image img,
	body.archive .uf-article-card:focus-within .wp-block-post-featured-image img,
	body.search .uf-article-card:hover .wp-block-post-featured-image img,
	body.search .uf-article-card:focus-within .wp-block-post-featured-image img {
		transform: scale(1.05);
	}
}

body.archive .uf-article-card .wp-block-post-featured-image img,
body.search .uf-article-card .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

body.archive .uf-article-card > :where(.wp-block-post-title, .wp-block-post-terms, .wp-block-post-date, .wp-block-post-excerpt),
body.search .uf-article-card > :where(.wp-block-post-title, .wp-block-post-terms, .wp-block-post-date, .wp-block-post-excerpt) {
	margin-inline: 1rem;
}

body.archive .uf-article-card .wp-block-post-title,
body.archive .uf-article-card .wp-block-post-title a,
body.search .uf-article-card .wp-block-post-title,
body.search .uf-article-card .wp-block-post-title a {
	color: #ffffff;
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

body.archive .uf-article-card .wp-block-post-date,
body.search .uf-article-card .wp-block-post-date {
	color: rgba(255, 255, 255, 0.58);
}

.uf-archive .wp-block-query-pagination a,
.uf-archive .wp-block-query-pagination span,
.uf-search-archive .wp-block-query-pagination a,
.uf-search-archive .wp-block-query-pagination span {
	color: #ffffff;
}

.uf-archive .wp-block-post-excerpt,
.uf-archive .wp-block-post-excerpt a,
.uf-search-archive .wp-block-post-excerpt,
.uf-search-archive .wp-block-post-excerpt a {
	color: rgba(255, 255, 255, 0.72);
}

.uf-editorial-page {
	background: #06131d;
	color: #e8eef1;
	padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.uf-editorial-page .uf-post-header {
	padding-block: 0 2rem;
}

.uf-editorial-page .wp-block-post-title {
	color: #ffffff;
	font-size: clamp(2.3rem, 6vw, 5.2rem);
}

.uf-editorial-page .uf-post-content {
	color: #e8eef1;
}

/* Legal pages use the same dark canvas as the editorial site; all legal copy
 * stays white with gold links for a clear, consistent reading experience. */
body.page-id-3,
body.page-id-723 {
	background: #06131d;
	color: #ffffff;
}

body.page-id-3 .uf-editorial-page,
body.page-id-723 .uf-editorial-page {
	background: #06131d;
	color: #ffffff;
}

body.page-id-3 .uf-editorial-page .wp-block-post-title,
body.page-id-723 .uf-editorial-page .wp-block-post-title {
	color: #ffffff;
}

body.page-id-3 .uf-editorial-page .uf-section-kicker,
body.page-id-723 .uf-editorial-page .uf-section-kicker {
	color: var(--wp--preset--color--gold);
}

/* v0.7: aquí vivían cuatro reglas con prefijo body.page-template-page-manda-tu-caso
 * que repetían literalmente lo que ya hacen las reglas .uf-case-page de abajo, y
 * que además nunca llegaban a aplicarse por el motivo explicado arriba. */
.uf-case-page {
	padding-block: clamp(2.5rem, 7vw, 6rem);
	background: #06131d;
	color: #e8eef1;
}

.uf-case-page h1 {
	color: #ffffff;
	font-size: clamp(2.5rem, 7vw, 5rem);
	margin-block: 0 1rem;
}

.uf-case-page label {
	color: #ffffff;
}

.uf-case-page .uf-case-page__intro {
	color: rgba(255, 255, 255, 0.75);
}

.uf-video-archive .uf-video-card .wp-block-post-title,
.uf-video-archive .uf-video-card .wp-block-post-title a,
.uf-video-archive .uf-video-card .uf-video-card-excerpt {
	color: #ffffff;
}

.uf-video-archive .uf-video-card .uf-video-card-excerpt {
	color: rgba(255, 255, 255, 0.7);
}

.uf-video-archive .uf-video-card .uf-video-card-copy {
	padding: 1rem 1rem 1.15rem;
}

.uf-video-archive .uf-video-card .uf-card-meta {
	color: var(--wp--preset--color--gold);
}

.uf-single-main .uf-post-content,
.uf-single .uf-single__inner {
	color: #e8eef1;
}

.uf-single-main .uf-post-header .uf-card-meta,
.uf-single .uf-section-kicker {
	color: var(--wp--preset--color--gold);
}

/* v0.14.0: la cabecera del articulo pintaba TODAS las categorias de la
 * entrada. No es un caso de borde: 445 de las 2699 entradas llevan cuatro o
 * mas y una llega a veintitres, herencia de un archivo clasificado por
 * acumulacion durante anos. En "The Shadow Project" son catorce, y en un movil
 * de 375 px ese rotulo medía 171 px de alto contra los 35 px del <h1>: cinco
 * veces el titular, con el titulo del articulo empujado a 416 px, por debajo
 * de la mitad de la pantalla. La entrada se presentaba con su lista de
 * archivo, no con su nombre.
 *
 * Se pintan las tres primeras -en 782 px y en 1440 px caben en una linea- y el
 * resto se recorta al pintar. Los catorce enlaces siguen en el HTML: es CSS y
 * no PHP por la misma razon que en las tarjetas de v0.7, que resolvieron esto
 * mismo cuando eran cuatro o cinco categorias. */
.uf-single-main .uf-post-header .uf-card-meta a:nth-of-type(n + 4),
.uf-single-main .uf-post-header .uf-card-meta .wp-block-post-terms__separator:nth-of-type(n + 3) {
	display: none;
}

/* En el movil los nombres son largos -"Avistamientos de extraterrestres" ya
 * ocupa una linea entera de 375 px- y tres categorias son tres lineas. Dos, y
 * el titular sube a 283 px. */
@media (max-width: 560px) {
	.uf-single-main .uf-post-header .uf-card-meta a:nth-of-type(n + 3),
	.uf-single-main .uf-post-header .uf-card-meta .wp-block-post-terms__separator:nth-of-type(n + 2) {
		display: none;
	}
}

.uf-single-main .uf-post-content .wp-block-post-content,
.uf-single .wp-block-post-content {
	font-size: 1.08rem;
}

.uf-single-main .uf-post-content .wp-block-post-content > :where(p, ul, ol, blockquote, h2, h3, h4),
.uf-single-main .uf-post-content .wp-block-post-content > .wp-block-image,
.uf-single-main .uf-post-content .wp-block-post-content > .wp-block-gallery,
.uf-single .wp-block-post-content > :where(p, ul, ol, blockquote, h2, h3, h4),
.uf-single .wp-block-post-content > .wp-block-image,
.uf-single .wp-block-post-content > .wp-block-gallery {
	max-width: 760px;
}

.uf-single-main .wp-block-post-featured-image,
.uf-single .wp-block-post-featured-image {
	margin-bottom: 2rem;
}

.uf-single-main .wp-block-embed-youtube,
.uf-single .wp-block-embed-youtube {
	margin-inline: auto;
	max-width: 960px;
}

.uf-single-main .wp-block-embed__wrapper,
.uf-single .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

.uf-single-main .wp-block-embed__wrapper iframe,
.uf-single .wp-block-embed__wrapper iframe {
	height: 100%;
	width: 100%;
}

/* Estado vacío. Vive en tres sitios: el 404, los archivos sin resultados y la
 * búsqueda sin coincidencias.
 *
 * v0.7: hasta ahora no tenía lienzo propio, así que dependía de quién lo
 * contuviera. En el 404 lo pintaba directamente sobre el marfil del body y el
 * H1 caía en el navy de theme.json sobre fondo claro: fuera del sistema, con
 * tipografía serif cuando el resto del sitio ya iba en sans. Se le da fondo
 * propio para que el estado vacío se vea igual en los tres sitios, y se cubre
 * el H1 además del H2 porque el 404 usa nivel 1 y los archivos nivel 2. */
.uf-empty-state {
	background: #06131d;
	border: 1px solid rgba(183, 152, 84, 0.55);
	color: #e8eef1;
	margin-top: 1rem;
	padding: clamp(2rem, 5vw, 4rem);
}

.uf-empty-state h2 {
	color: #ffffff;
	font-size: clamp(2rem, 5vw, 4rem);
	margin-block: 0.4rem 0.75rem;
}

.uf-empty-state h1 {
	color: #ffffff;
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin-block: 0.4rem 0.75rem;
}

.uf-empty-state p:last-child {
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	max-width: 52ch;
}

/* El buscador del estado vacío no es el de la cabecera, así que heredaba los
 * estilos por defecto del bloque sobre fondo oscuro: campo claro, botón claro.
 * Se iguala al del masthead para que no parezca de otra web. */
.uf-empty-state .wp-block-search {
	margin-top: 1.6rem;
	max-width: 34rem;
}

.uf-empty-state .wp-block-search__label {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	margin-block-end: 0.5rem;
	text-transform: uppercase;
}

.uf-empty-state .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	overflow: hidden;
	padding: 0.15rem;
}

.uf-empty-state .wp-block-search__input {
	background: transparent;
	border: 0;
	color: #ffffff;
	flex: 1 1 auto;
	font-size: 0.9rem;
	min-width: 0;
	padding-block: 0.55rem;
}

.uf-empty-state .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.uf-empty-state .wp-block-search__button {
	background-color: transparent;
	--uf-fill: rgba(183, 152, 84, 0.16);
	border: 0;
	color: var(--wp--preset--color--gold);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding-inline: 1.1rem;
	text-transform: uppercase;
}

.uf-empty-state .wp-block-search__button:hover,
.uf-empty-state .wp-block-search__button:focus-visible {
	color: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	/* Va detras de la regla base de .uf-masthead, no delante: las dos tienen la
	 * misma especificidad y aqui manda el orden. El padding-block que habia
	 * en esta regla nunca llego a aplicarse por eso mismo. */
	.uf-masthead {
		align-items: flex-start;
	}

	/* Cabecera unificada y compacta en móvil (portada e interiores) */
	.uf-header {
		align-items: center !important;
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		padding-block: 0.6rem 0.7rem !important;
		padding-inline: clamp(1rem, 4vw, 1.5rem) !important;
		row-gap: 0.5rem !important;
	}

	/* Colapsar envolturas intermedias para alinear marca, menú y buscador en una sola composición */
	.uf-header > .uf-topbar,
	.uf-header > .uf-masthead,
	.uf-header > .uf-main-nav,
	.uf-header > .uf-main-nav > .uf-nav-row {
		display: contents !important;
	}

	body:not(.home) .uf-masthead {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	/* Ocultar elementos de ruido en la cabecera móvil */
	.uf-header .uf-kicker,
	.uf-header .uf-utility-nav,
	.uf-header .uf-quote,
	.uf-header .uf-social-links,
	.uf-header .uf-header-cta {
		display: none !important;
	}

	/* Fila 1 izquierda: la marca completa, logo + UFOPOLIS + eslogan, con las
	 * mismas proporciones que en escritorio: el cuerpo del logotipo es la medida
	 * y de ella salen el alto del logo y el cuerpo del eslogan. El tope de
	 * 2,45rem lo fija el ancho disponible: con el botón de menú a la derecha, el
	 * bloque no puede pasar de unos 280 px. */
	.uf-header .uf-brand {
		--uf-wordmark: clamp(2.25rem, 9.6vw, 2.45rem);
		align-items: center !important;
		align-self: center !important;
		display: flex !important;
		gap: 0.6rem !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		margin: 0 !important;
	}

	.uf-header .uf-brand .wp-block-site-logo img {
		height: calc(var(--uf-wordmark) * 1.25) !important;
		max-height: none !important;
		max-width: none !important;
		width: auto !important;
	}

	/* Fila 1 derecha: Botón de menú hamburguesa */
	.uf-header .uf-main-nav-menu {
		align-self: center !important;
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: end !important;
		margin: 0 !important;
		width: auto !important;
	}

	.uf-main-nav-menu .wp-block-navigation__responsive-container-open {
		align-items: center !important;
		background: transparent !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
		border-radius: 8px !important;
		color: #ffffff !important;
		cursor: pointer !important;
		display: flex !important;
		height: 40px !important;
		justify-content: center !important;
		padding: 0.4rem !important;
		transition: border-color 0.2s ease, background-color 0.2s ease !important;
		width: 40px !important;
	}

	.uf-main-nav-menu .wp-block-navigation__responsive-container-open:hover,
	.uf-main-nav-menu .wp-block-navigation__responsive-container-open:focus-visible {
		background: rgba(183, 152, 84, 0.15) !important;
		border-color: var(--wp--preset--color--gold) !important;
		color: var(--wp--preset--color--gold) !important;
		outline: 2px solid var(--wp--preset--color--gold) !important;
		outline-offset: 2px !important;
	}

	.uf-main-nav-menu .wp-block-navigation__responsive-container-open svg {
		fill: currentColor !important;
		height: 22px !important;
		width: 22px !important;
	}

	/* Asegurar que la lista de enlaces solo se muestre dentro del modal */
	.uf-main-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Fila 2: Buscador completo y accesible */
	.uf-header .uf-header-search {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		margin: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	.uf-header-search .wp-block-search__inside-wrapper {
		background: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
		border-radius: 999px !important;
		height: 2.25rem !important;
		padding: 0.1rem 0.25rem 0.1rem 0.85rem !important;
	}

	.uf-header-search .wp-block-search__input {
		color: #ffffff !important;
		font-size: 0.82rem !important;
		height: 100% !important;
		padding: 0 !important;
	}

	.uf-header-search .wp-block-search__button {
		background: transparent !important;
		border-radius: 50% !important;
		color: #ffffff !important;
		height: 1.85rem !important;
		min-height: 1.85rem !important;
		min-width: 1.85rem !important;
		padding: 0 !important;
		width: 1.85rem !important;
	}

	.uf-podcast-showcase__layout {
		align-items: flex-start;
		flex-wrap: wrap !important;
		gap: 1.25rem;
	}

	.uf-category-grid {
		gap: 0.65rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Por debajo de 360 px el eslogan no entra: a su cuerpo de lectura mide 218 px y,
 * con el logo y el botón de menú, el bloque se saldría de la pantalla —a 320 px
 * hay 254 px para la marca y harían falta 273—. Se oculta, que es como estaba, y
 * el logotipo baja a un cuerpo que sí cabe. */
@media (max-width: 360px) {
	.uf-header .uf-brand {
		--uf-wordmark: clamp(1.6rem, 8vw, 2rem);
	}

	.uf-header .uf-brand .wp-block-site-tagline {
		display: none !important;
	}
}


@media (max-width: 560px) {
	.uf-category-grid {
		grid-template-columns: 1fr;
	}

	.uf-category-tile {
		min-height: 8rem;
	}
}

/* Homepage shell: keep the masthead and the editorial sections on one wide
 * alignment line while leaving the video hero presentation untouched. */
body.home .uf-header > *,
body.home .uf-video-featured > *,
body.home .uf-podcast-showcase > *,
body.home .uf-latest > *,
body.home .uf-category-explorer > *,
body.home .uf-footer > * {
	margin-block-start: 0;
}

body.home .uf-header > .alignwide,
body.home .uf-main-nav > .alignwide,
body.home .uf-video-featured > .alignwide,
body.home .uf-latest > .alignwide,
body.home .uf-category-explorer > .alignwide,
body.home .uf-footer > .alignwide,
body.home .uf-podcast-showcase__inner {
	margin-inline: auto;
	max-width: 1320px;
	width: min(1320px, calc(100% - clamp(2rem, 8vw, 9rem)));
}

body.home .uf-topbar {
	min-height: 1.7rem;
	padding-block: 0.22rem;
}

body.home .uf-topbar .uf-kicker,
body.home .uf-utility-nav,
body.home .uf-utility-nav .wp-block-navigation-item__content {
	line-height: 1.2;
}

body.home .uf-topbar .uf-kicker {
	font-size: 0.58rem;
}

body.home .uf-social-links a {
	height: 1.4rem;
	width: 1.4rem;
}

body.home .uf-masthead {
	gap: 1.25rem;
	padding-block: 0.35rem 0.45rem;
}


body.home .uf-quote {
	font-size: clamp(0.76rem, 1.1vw, 1rem);
	line-height: 1.3;
	margin: 0;
	max-width: 15rem;
}

body.home .uf-nav-row {
	gap: 0.45rem 0.85rem;
	padding-block: 0.14rem;
}

body.home .uf-main-nav-menu .wp-block-navigation-item__content {
	font-size: 0.64rem;
	padding-block: 0.3rem;
}

body.home .uf-header-search {
	flex-basis: 170px;
	min-width: 8rem;
	width: 170px;
}

body.home .uf-header-search .wp-block-search__input,
body.home .uf-header-search .wp-block-search__button {
	height: 1.9rem;
	min-height: 1.9rem;
}

body.home .uf-header-cta a {
	padding: 0.45rem 0.7rem;
}

body.home .uf-video-featured,
body.home .uf-video-library,
body.home .uf-latest,
body.home .uf-category-explorer {
	padding-block: clamp(2rem, 3.5vw, 3.25rem);
}

body.home .uf-video-featured .uf-section-heading,
body.home .uf-video-library .uf-section-heading,
body.home .uf-latest .uf-section-heading,
body.home .uf-category-explorer .uf-section-heading {
	margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
	padding-bottom: 0.55rem;
}

body.home .uf-video-query > .wp-block-post-template,
body.home .uf-latest-query > .wp-block-post-template {
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

body.home .uf-video-card-copy {
	padding: 0.8rem 0.85rem 0.95rem;
}

body.home .uf-latest .uf-article-card {
	height: 100%;
	padding: 0 0 1rem;
	padding-bottom: 0.75rem;
}

body.home .uf-latest .uf-article-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	background: #10283b;
	display: block;
	margin: 0 0 1rem;
	min-height: clamp(7rem, 14vw, 11rem);
	position: relative;
	margin-bottom: 0.75rem;
}

body.home .uf-podcast-showcase {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

body.home .uf-podcast-showcase__layout {
	gap: clamp(1.25rem, 3vw, 3rem);
}

body.home .uf-podcast-showcase__copy > p:last-child {
	margin-bottom: 0;
}

body.home .uf-category-grid {
	gap: clamp(0.65rem, 1.5vw, 1rem);
}

body.home .uf-category-tile {
	/* v0.7: 7,5 rem daba una tarjeta de 2,6:1, un formato de bandera que
	 * desperdicia la fotografía. Con imagen dentro, 10,5 rem deja el acceso en
	 * algo menos de 2:1, que es el formato del mockup. */
	min-height: 10.5rem;
	padding: 0.9rem;
}

body.home .uf-footer {
	margin-top: 0;
}

body.home .uf-footer-main {
	gap: 1.5rem 2rem;
	padding-block: clamp(2rem, 3.5vw, 3.25rem);
}

body.home .uf-footer-meta {
	padding-block: 0.7rem;
}

@media (max-width: 781px) {
	body.home .uf-header > .alignwide,
	body.home .uf-main-nav > .alignwide,
	body.home .uf-video-featured > .alignwide,
	body.home .uf-latest > .alignwide,
	body.home .uf-category-explorer > .alignwide,
	body.home .uf-footer > .alignwide,
	body.home .uf-podcast-showcase__inner {
		width: calc(100% - 2rem);
	}

	/* Hero de portada en móvil: proporciones armonizadas con tipografía legible */
	body.home .uf-video-hero-card {
		aspect-ratio: auto;
		max-width: none;
		width: calc(100% - 2rem);
	}

	body.home .uf-video-hero-copy {
		background: var(--wp--preset--color--navy);
		min-height: 0;
		padding: 1.5rem 1.25rem 1.8rem;
	}

	body.home .uf-video-hero-copy .wp-block-post-title,
	body.home .uf-video-hero-copy > .wp-block-post-title {
		font-size: clamp(1.55rem, 6.5vw, 2.25rem) !important;
		line-height: 1.18;
		max-width: none !important;
	}

	body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link {
		font-size: 0.76rem;
		padding: 0.5rem 1.25rem 0.5rem 0.5rem;
	}
}

@media (max-width: 560px) {
	.uf-category-grid {
		grid-template-columns: 1fr;
	}

	.uf-category-tile {
		min-height: 8rem;
	}

	.uf-video-query > .wp-block-post-template,
	body.home .uf-latest-query > .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	body.home .uf-video-featured,
	body.home .uf-video-library,
	body.home .uf-latest,
	body.home .uf-category-explorer {
		padding-block: 2rem;
	}

	.uf-video-card-copy {
		padding: 0.75rem 0.85rem 0.95rem;
	}
}

/* At tablet and desktop widths the homepage shell is one compact row. The
 * existing topbar and masthead remain in the markup for content and editor
 * compatibility, while their optional utility copy stays out of the row. */
body.home .uf-site-main {
	background: #06131d;
	color: #e8eef1;
	margin-block-start: 0;
}

@media (min-width: 782px) {
	body.home .uf-header {
		align-items: center;
		column-gap: clamp(0.6rem, 1.4vw, 1.4rem);
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) 10.75rem auto;
		min-height: 4.5rem;
		padding-block: clamp(0.65rem, 1.2vw, 1.1rem);
		padding-inline: clamp(1rem, 4vw, 4rem);
	}

	body.home .uf-header > .uf-topbar,
	body.home .uf-header > .uf-masthead,
	body.home .uf-header > .uf-main-nav,
	body.home .uf-header > .uf-main-nav > .uf-nav-row {
		display: contents;
	}

	body.home .uf-header .uf-kicker,
	body.home .uf-header .uf-utility-nav,
	body.home .uf-header .uf-social-links,
	body.home .uf-header .uf-quote {
		display: none;
	}

	body.home .uf-header .uf-brand {
		align-items: center;
		display: flex;
		gap: clamp(0.65rem, 1vw, 0.95rem);
		grid-column: 1;
		min-width: 0;
		width: auto;
	}

	body.home .uf-header .uf-brand .wp-block-site-logo img {
		aspect-ratio: 1 / 1;
		height: clamp(44px, 3.8vw, 56px);
		max-height: 56px;
		max-width: 56px;
		object-fit: contain;
		width: clamp(44px, 3.8vw, 56px);
	}

	/* Todo en la misma fila. Sin esto, los iconos de redes —que en el marcado van
	 * antes que la marca y piden la última columna— empujaban el resto a una
	 * segunda fila: el icono quedaba solo arriba a la derecha y la cabecera de la
	 * portada medía 112,6 px a 1440 px contra 77 px a 1200 px, con el mismo
	 * contenido. */
	body.home .uf-header .uf-brand,
	body.home .uf-header .uf-social-links,
	body.home .uf-main-nav-menu,
	body.home .uf-header-search,
	body.home .uf-header-cta {
		grid-row: 1;
	}

	body.home .uf-main-nav-menu {
		grid-column: 2;
		min-width: 0;
		width: 100%;
	}

	body.home .uf-main-nav-menu .wp-block-navigation__container {
		column-gap: clamp(0.35rem, 1vw, 0.9rem);
		min-width: 0;
		width: 100%;
	}

	body.home .uf-header-search {
		grid-column: 3;
		width: 100%;
	}

	body.home .uf-header-cta {
		grid-column: 4;
		margin: 0;
	}
}

/* A partir de 901 px la fila compacta tiene holgura de sobra —el menú ocupa
 * unos 430 px en una columna de 490 o más—, así que la marca se separa del menú
 * en proporción a su propio tamaño y deja de rozarlo. Por debajo de ese ancho
 * la fila va justa y ese aire haría caer "Podcast" a una segunda línea. */
@media (min-width: 901px) {
	body.home .uf-header .uf-brand {
		margin-right: 1.15rem;
	}
}

/* v0.7: el cliente pidió por escrito los iconos de sus redes "arriba", y la
 * capa de la v0.6 los escondía justo en la portada de escritorio, que es donde
 * entra casi todo el tráfico: los enseñaba en móvil y en las páginas
 * interiores, pero no en la portada. Era lo más incoherente de todo el brief.
 *
 * Se recuperan como una columna más de la fila compacta, y solo a partir de
 * 1280 px. El corte no es arbitrario: con cinco entradas de navegación, por
 * debajo de ese ancho la fila se queda sin holgura y "Podcast" cae a una
 * segunda línea, que es peor que no tener los iconos. Entre 782 y 1279 px manda
 * el diseño aprobado y los iconos siguen en el pie.
 *
 * El mockup aprobado no dibuja iconos en la cabecera; esto es una adición
 * pedida en la carta, no una lectura del mockup, y conviene confirmarla. */
@media (min-width: 1280px) {
	body.home .uf-header {
		grid-template-columns: auto minmax(0, 1fr) 10.75rem auto auto;
	}

	body.home .uf-header .uf-social-links {
		display: flex;
		grid-column: 5;
		margin-left: 0;
	}
}

/* Entre 782 y 1279 px la fila compacta no tiene holgura para el eslogan: a su
 * cuerpo legible ocupa tanto como el propio logotipo y empujaría al menú. El
 * bloque se queda en logo y logotipo, que es lo que identifica al sitio; el
 * eslogan sigue en el pie. */
@media (min-width: 782px) and (max-width: 1279px) {
	body.home .uf-header .uf-brand .wp-block-site-tagline {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 900px) {
	body.home .uf-header {
		column-gap: 0.45rem;
		grid-template-columns: auto minmax(0, 1fr) 7.5rem auto;
		padding-inline: 1rem;
	}

	body.home .uf-main-nav-menu .wp-block-navigation-item__content {
		font-size: 0.56rem;
		letter-spacing: 0.07em;
		padding-block: 0.22rem;
	}

	body.home .uf-header-search {
		flex-basis: auto;
	}

	body.home .uf-header-search .wp-block-search__input,
	body.home .uf-header-search .wp-block-search__button {
		height: 1.8rem;
		min-height: 1.8rem;
	}

	body.home .uf-header-cta a {
		font-size: 0.58rem;
		padding: 0.4rem 0.5rem;
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	body.home .uf-header {
		column-gap: 0.55rem;
		grid-template-columns: auto minmax(0, 1fr) 9rem auto;
		padding-inline: 1.25rem;
	}

	body.home .uf-main-nav-menu .wp-block-navigation-item__content {
		font-size: 0.6rem;
		letter-spacing: 0.08em;
		padding-block: 0.24rem;
	}

	body.home .uf-header-search {
		flex-basis: auto;
	}

	body.home .uf-header-search .wp-block-search__input,
	body.home .uf-header-search .wp-block-search__button {
		height: 1.85rem;
		min-height: 1.85rem;
	}

	body.home .uf-header-cta a {
		font-size: 0.6rem;
		padding: 0.45rem 0.55rem;
	}
}

/* Homepage editorial typography: the brand remains serif, while the content
 * hierarchy follows the approved sans-serif, uppercase treatment. */
body.home .uf-video-hero-copy .wp-block-post-title,
body.home .uf-video-hero-copy .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-weight: 800;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

body.home .uf-video-featured .uf-section-heading h2,
body.home .uf-video-library .uf-section-heading h2,
body.home .uf-latest .uf-section-heading h2,
body.home .uf-category-explorer .uf-section-heading h2 {
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: clamp(1.55rem, 2.8vw, 2.5rem);
	font-weight: 800;
	letter-spacing: 0.055em;
	line-height: 1.05;
	text-transform: uppercase;
}

body.home .uf-video-card-copy .wp-block-post-title,
body.home .uf-video-card-copy .wp-block-post-title a {
	color: #ffffff;
	font-size: clamp(1.1rem, 1.45vw, 1.45rem);
	line-height: 1.16;
	margin-block: 0.45rem 0.35rem;
}

body.home .uf-latest .uf-article-card .wp-block-post-title,
body.home .uf-latest .uf-article-card .wp-block-post-title a {
	color: #ffffff;
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	line-height: 1.2;
}

body.home .uf-video-card-copy .wp-block-post-title,
body.home .uf-video-card-copy .wp-block-post-title a,
body.home .uf-latest .uf-article-card .wp-block-post-title,
body.home .uf-latest .uf-article-card .wp-block-post-title a,
body.home .uf-category-tile__label {
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-weight: 800;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

body.home .uf-podcast-showcase__copy h2 {
	font-family: var(--wp--preset--font-family--editorial-sans);
	font-size: clamp(1.8rem, 4.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
}

/* Ufópolis v0.6: ajuste al mockup aprobado por el cliente. Solo presentación;
 * el contenido, los textos y la estructura de patrones se mantienen. Los
 * rótulos de sección pasan de titular grande con filete a etiqueta corta con
 * guion dorado, las tarjetas pierden la caja y el hero llega a sangre. */
body.home .uf-section-heading {
	align-items: center;
	border-bottom: 0;
	margin-block-end: clamp(1rem, 2vw, 1.6rem);
	padding-bottom: 0;
}

body.home .uf-video-featured .uf-section-heading h2,
body.home .uf-video-library .uf-section-heading h2,
body.home .uf-latest .uf-section-heading h2,
body.home .uf-category-explorer .uf-section-heading h2,
body.home .uf-podcast-showcase .uf-section-heading h2 {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: clamp(0.66rem, 0.95vw, 0.76rem);
	font-weight: 700;
	gap: 0.9rem;
	letter-spacing: 0.24em;
	line-height: 1.2;
}

body.home .uf-section-heading h2::after {
	background: var(--wp--preset--color--gold);
	content: "";
	display: block;
	flex: 0 0 auto;
	height: 1px;
	width: clamp(1.6rem, 3vw, 2.9rem);
}

body.home .uf-section-link a {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
}

body.home .uf-section-link a {
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-decoration: none;
}

/* Tarjetas: el mockup las apoya directamente sobre el lienzo, sin caja. */
body.home .uf-video-card,
body.home .uf-latest .uf-article-card {
	background: transparent;
	border: 0;
}

/* v0.14.10: aquí había también un `transform: none`, y por especificidad ganaba a
 * `.uf-fx-cards .uf-video-card:hover`. Resultado: en la portada -la única
 * página donde las tarjetas van sin caja- el zoom del póster y el disco de
 * reproducción sí aparecían, pero el alzado y la sombra de la capa de efectos
 * estaban desactivados sin que nadie lo hubiera decidido. La tarjeta se
 * quedaba a medio gesto. Solo hace falta neutralizar el borde, que en portada
 * no existe. */
body.home .uf-video-card:hover,
body.home .uf-video-card:focus-within,
body.home .uf-latest .uf-article-card:hover,
body.home .uf-latest .uf-article-card:focus-within {
	border-color: transparent;
}

body.home .uf-video-card .wp-block-post-featured-image,
body.home .uf-latest .uf-article-card .wp-block-post-featured-image {
	border-radius: 10px;
	overflow: hidden;
}

/* Las fichas de la videoteca ya acercan su póster y se alzan desde la capa de
 * efectos. Las de "lo último" comparten rejilla, recorte y redondeo con ellas,
 * así que sin esto dos tarjetas idénticas respondian distinto una al lado de la
 * otra: la de la izquierda se alzaba y la de la derecha no. En portada estas
 * fichas van sin caja y sin filete de separación, así que aquí el alzado no
 * despega ninguna línea. */
body.home .uf-latest .uf-article-card {
	transition: box-shadow var(--uf-t-move) var(--uf-ease),
		translate var(--uf-t-move) var(--uf-ease);
}

body.home .uf-latest .uf-article-card:hover,
body.home .uf-latest .uf-article-card:focus-within {
	box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.85);
	translate: 0 -6px;
}

@media (prefers-reduced-motion: no-preference) {
	body.home .uf-latest .uf-article-card .wp-block-post-featured-image img {
		transition: transform var(--uf-t-move) var(--uf-ease);
	}

	body.home .uf-latest .uf-article-card:hover .wp-block-post-featured-image img,
	body.home .uf-latest .uf-article-card:focus-within .wp-block-post-featured-image img {
		transform: scale(1.05);
	}
}

body.home .uf-video-card-copy {
	padding-block-end: 0;
	padding-inline: 0;
}

/* La miniatura y el titular ya enlazan a la ficha: el mockup no repite un
 * tercer enlace por tarjeta. */
body.home .uf-video-card .wp-block-post-excerpt__more-link,
body.home .uf-latest .uf-article-card .wp-block-post-excerpt__more-link {
	display: none;
}

body.home .uf-video-card .uf-card-meta {
	font-size: 0.58rem;
	letter-spacing: 0.2em;
	margin-block-end: 0.5rem;
}

body.home .uf-video-card .wp-block-post-title,
body.home .uf-video-card .wp-block-post-title a {
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
	letter-spacing: 0.01em;
	line-height: 1.25;
}

body.home .uf-video-card-excerpt {
	font-size: 0.8rem;
	line-height: 1.5;
}

/* Hero a sangre desde tableta: en móvil se conserva el recuadro con margen
 * que ya estaba verificado. */
@media (min-width: 782px) {
	body.home .uf-home-hero .uf-video-hero-card {
		margin-inline: 0;
		max-width: none;
		width: 100%;
	}

	body.home .uf-home-hero .uf-video-hero-copy {
		padding-inline: clamp(1.25rem, 4vw, 4rem);
	}
}

/* CTA del hero: pastilla con disco de reproducción, como en el mockup. */
body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link {
	align-items: center;
	/* `background-color` y no el atajo: el atajo reinicia `background-image`, y
	 * ahi vive el degradado que barre la pastilla al pasar el cursor. */
	background-color: transparent;
	border-radius: 999px;
	color: var(--wp--preset--color--gold);
	display: inline-flex;
	gap: 0.7rem;
	margin-top: 0.85rem;
	min-height: 2.5rem;
	padding: 0.6rem 1.5rem 0.6rem 0.6rem;
}

body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link::before {
	background: var(--wp--preset--color--gold)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1 1l10 6-10 6z' fill='%230b1c2b'/%3E%3C/svg%3E")
		no-repeat center / 0.6rem 0.7rem;
	block-size: 1.9rem;
	border-radius: 50%;
	content: "";
	flex: 0 0 auto;
	inline-size: 1.9rem;
}

/* v0.14.10: el disco es oro con el triángulo en azul, y al pasar el cursor la
 * pastilla entera se llenaba de oro. El disco desaparecía dentro del relleno y
 * quedaba un triángulo suelto flotando. Se invierte con la pastilla: disco
 * azul, triángulo oro. El cambio es seco a propósito -el barrido ya aporta el
 * movimiento- y solo el empujón de dos píxeles se anima, como el arranque de
 * una reproducción. */
body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link:hover::before,
body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link:focus-visible::before {
	background-color: var(--wp--preset--color--navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1 1l10 6-10 6z' fill='%23b79854'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
	body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link::before {
		transition: transform var(--uf-t-draw) var(--uf-ease);
	}

	body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link:hover::before,
	body.home .uf-video-hero-excerpt .wp-block-post-excerpt__more-link:focus-visible::before {
		transform: translateX(2px);
	}
}

/* Movimiento reducido: las tarjetas y los botones se desplazan y atenúan al
   pasar el cursor. Quien haya pedido menos movimiento en su sistema recibe el
   mismo diseño sin desplazamientos ni transiciones; el foco y el color siguen
   siendo visibles, que es lo que comunica el estado. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.uf-video-card:hover,
	.uf-video-card:focus-within,
	.uf-article-card:hover,
	.uf-article-card:focus-within,
	body.home .uf-latest .uf-article-card:hover,
	body.home .uf-latest .uf-article-card:focus-within,
	.uf-category-tile:hover .uf-category-tile__label,
	.uf-category-tile:hover .uf-category-tile__link {
		transform: none;
		translate: none;
	}
}

/* --- Añadido para protección contra desbordamiento y responsive --- */
@media (max-width: 320px) {
	.uf-header,
	.uf-main-nav,
	.uf-video-featured,
	.uf-latest,
	.uf-category-explorer,
	.uf-footer,
	.uf-podcast-showcase__inner {
		padding-inline: 0.5rem !important;
	}

	body.home .uf-header > .alignwide,
	body.home .uf-main-nav > .alignwide,
	body.home .uf-video-featured > .alignwide,
	body.home .uf-latest > .alignwide,
	body.home .uf-category-explorer > .alignwide,
	body.home .uf-footer > .alignwide,
	body.home .uf-podcast-showcase__inner {
		width: calc(100% - 1rem);
	}

	.uf-header > .alignwide,
	.uf-footer > .alignwide,
	.entry-content,
	.wp-block-post-content {
		max-width: 100%;
	}
}