/**
 * PIX — Capa inmersiva de PrimixIA (2.0.0, 2026-10-01)
 *
 * Acompaña a assets/js/pix-fondo.js: el lienzo vivo "ruido → señal" (port del
 * fondo de IA Master Tech) va fijo detrás de TODO el sitio, y esta capa vuelve
 * translúcidas las piezas que antes lo tapaban (cabecera, navegación, tarjetas,
 * pie) para que se vea a través de ellas.
 *
 * Reglas que se mantienen (CLAUDE.md, docs/01-sistema-visual.md):
 * - El cuerpo de la nota sigue en claro: la caja del artículo es opaca y
 *   blanca. El lienzo vive alrededor, nunca debajo del texto largo.
 * - Un solo acento (cian). Ámbar solo para Última hora. Cero morado.
 * - Cero hexadecimales: solo tokens de pia-brand-tokens.css (las mezclas
 *   translúcidas usan color-mix sobre los tokens).
 *
 * Todo cuelga de html.pix-fondo-activo, que pone el JS solo si el canvas
 * arrancó. Sin JS o sin Canvas 2D el sitio queda exactamente como la 1.1.x.
 * Quitar su línea en functions.php la apaga entera.
 */

/* =====================================================================
 * 1. El lienzo
 * ================================================================== */

canvas.pix-fondo {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	/* Bordes que se desvanecen: el lienzo no termina en un corte. */
	-webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 45%, transparent 100%);
	mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 45%, transparent 100%);
}

/* Sin Canvas 2D: un halo estático hace las veces de galaxia. */
canvas.pix-fondo[data-fallback='true'] {
	background: radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--pia-cian) 10%, transparent), transparent 70%);
}

/* El lienzo reemplaza la retícula y el halo pintados en CSS: el body queda en
 * negro liso en TODAS las páginas (también nota, categoría, búsqueda y 404). */
html.pix-fondo-activo body {
	background-color: var(--pia-negro);
	background-image: none;
}

/* Grano de película muy suave sobre el lienzo, debajo del contenido. */
html.pix-fondo-activo body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Todo el sitio por encima del lienzo. */
html.pix-fondo-activo #tie-wrapper {
	position: relative;
	z-index: 2;
	background: transparent;
}

/* =====================================================================
 * 2. Cabecera y navegación de vidrio
 * ================================================================== */

/* 2.1.1: vidrio esmerilado de verdad. Una sola capa desenfoca (la cabecera
 * entera); el menú y la barra superior van transparentes encima para no
 * apilar dos velos. El velo baja de 62 % a 34 % de negro y el desenfoque sube
 * a 18 px: se ve el lienzo vivo detrás, difuminado, y el texto sigue legible. */
/* 2.1.2: una sola banda de ancho completo. En Safari, los hijos con filtro o
 * animación (brillo del logo, anuncio flotante) dentro de un elemento con
 * backdrop-filter se pintaban como un rectángulo aparte del ancho del
 * contenedor (1200 px). Ahora el velo es más parejo y lo bastante denso para
 * que la banda se lea de lado a lado, sin cajas. */
html.pix-fondo-activo #theme-header {
	background-color: color-mix(in srgb, var(--pia-negro) 58%, transparent);
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--pia-negro) 35%, transparent),
		transparent 100%
	);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
}

html.pix-fondo-activo :is(#theme-header #main-nav, #main-nav, #top-nav) {
	background-color: transparent;
	background-image: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Las cajas internas de Jannah (contenedor de 1200 px, fila y columna del
 * logo, fondo del menú) estaban pintadas de negro sólido y formaban un
 * rectángulo negro encima del vidrio. */
html.pix-fondo-activo #theme-header :is(
	.header-container,
	.logo-row,
	.logo-container,
	.main-menu-wrapper,
	.main-menu,
	.topbar-wrapper,
	#menu-components-wrap
) {
	background: transparent;
}

/* Menú fijo al bajar (Jannah lo saca de la cabecera): su propio vidrio. */
html.pix-fondo-activo #main-nav.fixed-nav {
	background-color: color-mix(in srgb, var(--pia-negro) 45%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 1px solid color-mix(in srgb, var(--pia-cian) 22%, transparent);
}

/* La barra superior se separa con un filo, no con un bloque de color. */
html.pix-fondo-activo #top-nav {
	border-bottom: 1px solid color-mix(in srgb, var(--pia-cian) 12%, transparent);
}

html.pix-fondo-activo #theme-header {
	border-bottom: 1px solid color-mix(in srgb, var(--pia-cian) 22%, transparent);
}

/* 2.1.2: sin filter en el logo. Un filtro dentro de la cabecera con
 * backdrop-filter hacía que Safari pintara la fila del logo como una caja. */

/* =====================================================================
 * 3. Tarjetas de vidrio (portada, archivos, búsqueda, widgets)
 * ================================================================== */

html.pix-fondo-activo body:not(.single-post, .page) #content :is(
	.posts-items > li.post-item,
	.wp-block-post-template > li.wp-block-post
),
html.pix-fondo-activo #content .container-wrapper.widget {
	background-color: color-mix(in srgb, var(--pia-superficie) 70%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, var(--pia-cian) 16%, transparent);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

html.pix-fondo-activo body:not(.single-post, .page) #content :is(
	.posts-items > li.post-item,
	.wp-block-post-template > li.wp-block-post
):is(:hover, :focus-within) {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--pia-cian) 55%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pia-cian) 25%, transparent),
		0 18px 40px -18px color-mix(in srgb, var(--pia-cian) 45%, transparent);
}

/* ---- Listados: categoría, etiqueta, autor, búsqueda, 404 (2.1.3) ----
 * Jannah envuelve la lista en un <div class="container-wrapper"> blanco: con
 * las tarjetas de vidrio encima se veían grises y con franjas blancas entre
 * ellas. El contenedor queda transparente y cada nota es su propia tarjeta. */
html.pix-fondo-activo body:is(.archive, .search, .error404) #content .container-wrapper:not(.widget):not(.archive-title):not(#category-title-section) {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-inline: 0;
}

html.pix-fondo-activo body:is(.archive, .search) #content .posts-items > li.post-item + li.post-item {
	margin-top: var(--pia-sp-4);
}

/* Cabecera del listado: tarjeta de vidrio con filo cian, kicker y título con
 * brillo. Es la portada de la sección, así que pesa más que una tarjeta. */
html.pix-fondo-activo body:is(.archive, .search, .error404) #content :is(#category-title-section, .archive-title, .entry-header-outer.container-wrapper) {
	position: relative;
	overflow: hidden;
	padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px);
	background-color: color-mix(in srgb, var(--pia-superficie) 72%, transparent);
	background-image:
		radial-gradient(ellipse 55% 140% at 0% 0%, color-mix(in srgb, var(--pia-cian) 18%, transparent), transparent 70%),
		var(--pia-reticula);
	background-size: auto, var(--pia-reticula-tam);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid color-mix(in srgb, var(--pia-cian) 22%, transparent);
	border-left: var(--pia-ancho-linea-dato) solid var(--pia-cian);
	border-radius: var(--pia-radio-borde);
	box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--pia-cian) 55%, transparent);
}

html.pix-fondo-activo body:is(.archive, .search, .error404) #content :is(#category-title-section, .archive-title) :is(h1, .page-title) {
	color: var(--pia-blanco);
	text-shadow: 0 0 30px color-mix(in srgb, var(--pia-cian) 40%, transparent);
}

/* "Sección" en cian sobre el título: el kicker de la casa. */
html.pix-fondo-activo body.category #content #category-title-section :is(h1, .page-title)::before {
	content: 'Sección';
	display: block;
	margin-bottom: 6px;
	font-family: var(--pia-font-cuerpo);
	font-size: var(--pia-fs-xs);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pia-cian);
	text-shadow: none;
}

html.pix-fondo-activo body:is(.archive, .search, .error404) #content :is(#category-title-section, .archive-title) :is(#breadcrumb, #breadcrumb a, .taxonomy-description, .archive-description, p) {
	color: var(--pia-tech-texto-suave);
}

html.pix-fondo-activo body:is(.archive, .search, .error404) #content :is(#category-title-section, .archive-title) #breadcrumb a:hover {
	color: var(--pia-cian);
}

/* Titulares de la portada con un hilo de luz. */
html.pix-fondo-activo body.home #content :is(.post-title, .wp-block-post-title) a {
	text-shadow: 0 0 22px color-mix(in srgb, var(--pia-cian) 28%, transparent);
}

/* =====================================================================
 * 4. Páginas de lectura: la caja del artículo sigue opaca y clara
 * ================================================================== */

html.pix-fondo-activo body:is(.single-post, .page) #content article.container-wrapper {
	position: relative;
	/* Sobre claro el borde de la caja no se veía y el texto podía ir a ras;
	 * sobre el lienzo la caja se lee como hoja: necesita margen interior. */
	padding: clamp(20px, 4vw, 44px);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pia-cian) 30%, transparent),
		0 30px 80px -30px color-mix(in srgb, var(--pia-cian) 40%, transparent);
}

/* Breadcrumbs y textos sueltos sobre el lienzo: legibles en negro. */
html.pix-fondo-activo body:is(.single-post, .page, .archive, .search, .error404) #content > .container > :is(.entry-header-outer, nav, .breadcrumb) {
	color: var(--pia-blanco);
}

/* Widgets de vidrio en todas las páginas: texto claro y respiro interior. */
html.pix-fondo-activo #content .container-wrapper.widget {
	padding: 20px 22px;
	color: var(--pia-blanco);
}

html.pix-fondo-activo #content .container-wrapper.widget :is(.widget-title, .the-subtitle, h2, h3, h4, a, li) {
	color: var(--pia-blanco);
}

html.pix-fondo-activo #content .container-wrapper.widget a:is(:hover, :focus-visible) {
	color: var(--pia-cian);
}

/* =====================================================================
 * 5. Pie translúcido
 * ================================================================== */

html.pix-fondo-activo :is(#footer, .site-footer) {
	background-color: color-mix(in srgb, var(--pia-negro) 78%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-top: 1px solid color-mix(in srgb, var(--pia-cian) 18%, transparent);
}

/* =====================================================================
 * 6. HUD ruido → señal (escritorio)
 * ================================================================== */

.pix-hud {
	display: none;
}

html.pix-fondo-activo .pix-hud {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	border: 1px solid color-mix(in srgb, var(--pia-cian) 22%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--pia-negro) 78%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--pia-tech-texto-suave);
	font-family: var(--pia-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

.pix-hud__marca {
	color: var(--pia-cian);
}

.pix-hud__barra {
	position: relative;
	width: 80px;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pia-cian) 18%, transparent);
}

.pix-hud__relleno {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--pia-cian);
	transform-origin: left;
	transform: scaleX(0.04);
	box-shadow: 0 0 10px var(--pia-cian);
}

/* En móvil el HUD tapa contenido y el botón de cookies: fuera. */
@media (max-width: 767px) {
	html.pix-fondo-activo .pix-hud {
		display: none;
	}
}

/* =====================================================================
 * 7. Espacios publicitarios flotantes (2.0.1)
 *
 * Antes: un borde punteado y, dentro, la caja de sic-ads con ancho fijo
 * por formato (970/728/300 px), márgenes de 20 px y el rótulo
 * «Publicidad» encima ocupando alto. La pieza quedaba como una isla dentro
 * del hueco. Ahora el hueco ES la pieza: una tarjeta que flota sobre el
 * lienzo y la creatividad (o el anuncio de casa) la llena de borde a borde.
 *
 * - La imagen real ocupa todo el ancho con SU proporción (height:auto): no
 *   se recorta el arte del anunciante. Los atributos width/height del <img>
 *   reservan el alto antes de cargar, así que no hay salto de maquetado.
 * - El rótulo «Publicidad» es obligación editorial: no se quita, pasa a
 *   ser una etiqueta pequeña encima de la pieza, en la esquina.
 * - sic-ads es un plugin compartido (fuente: ecn-web): no se edita, se
 *   sobreescribe aquí con más especificidad.
 * ================================================================== */

:is(.pia-espacio-publicitario, .pia-franja-publicitaria),
:is(.pia-espacio-publicitario, .pia-franja-publicitaria):has(.pia-casa) {
	display: block;
	min-height: 0;
	margin-block: var(--pia-sp-5);
	padding: 0;
	/* Sin borde (ocuparía 1 px alrededor de la pieza): el filo es un anillo de sombra. */
	border: 0;
	border-radius: var(--pia-radio-borde);
	background: var(--pia-negro);
	overflow: hidden;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pia-cian) 26%, transparent),
		0 28px 60px -28px color-mix(in srgb, var(--pia-cian) 55%, transparent),
		0 12px 30px -12px color-mix(in srgb, var(--pia-negro) 90%, transparent);
	animation: pix-flotar 7s ease-in-out infinite;
	transition: box-shadow 0.35s ease;
}

:is(.pia-espacio-publicitario, .pia-franja-publicitaria):is(:hover, :focus-within) {
	animation-play-state: paused;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pia-cian) 60%, transparent),
		0 34px 70px -26px color-mix(in srgb, var(--pia-cian) 70%, transparent);
}

/* La etiqueta "PUBLICIDAD" del contenedor vacío ya la da sic-ads. */
:is(.pia-espacio-publicitario, .pia-franja-publicitaria)::before {
	content: none;
}

@keyframes pix-flotar {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* La caja de sic-ads llena el hueco: sin tope de ancho ni márgenes. */
:is(.pia-espacio-publicitario, .pia-franja-publicitaria) > .wp-block-group__inner-container,
:is(.pia-espacio-publicitario, .pia-franja-publicitaria) .sic-ads {
	width: 100%;
	max-width: none;
	margin: 0;
}

:is(.pia-espacio-publicitario, .pia-franja-publicitaria) .sic-ads {
	position: relative;
	display: block;
	min-height: 0;
}

/* Rótulo «Publicidad» como etiqueta sobre la pieza. */
:is(.pia-espacio-publicitario, .pia-franja-publicitaria) .sic-ads::before {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 3px 8px;
	border-radius: var(--pia-radio-pildora);
	background: color-mix(in srgb, var(--pia-negro) 72%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--pia-tech-texto-suave);
	pointer-events: none;
}

/* Creatividad real: de borde a borde, con su proporción. */
:is(.pia-espacio-publicitario, .pia-franja-publicitaria) .sic-ads__pieza {
	width: 100%;
	max-width: none;
}

:is(.pia-espacio-publicitario, .pia-franja-publicitaria) .sic-ads__img,
:is(.pia-espacio-publicitario, .pia-franja-publicitaria) .sic-ads noscript img {
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
}

/* Anuncio de casa: llena la tarjeta; el brillo y el borde los pone ella. */
:is(.pia-espacio-publicitario, .pia-franja-publicitaria) .pia-casa {
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	padding-top: calc(var(--pia-sp-4) + 18px); /* deja sitio a la etiqueta */
}

/* =====================================================================
 * 8. Movimiento reducido: sin saltos de tarjetas
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	:is(.pia-espacio-publicitario, .pia-franja-publicitaria) {
		animation: none;
	}

	html.pix-fondo-activo #content :is(.posts-items > li.post-item, .wp-block-post-template > li.wp-block-post) {
		transition: none;
	}

	html.pix-fondo-activo #content :is(.posts-items > li.post-item, .wp-block-post-template > li.wp-block-post):is(:hover, :focus-within) {
		transform: none;
	}
}