/**
 * PIX — Efectos de interfaz de PrimixIA (2.1.0)
 *
 * Acompaña a assets/js/pix-efectos.js. Port del sistema de IA Master Tech
 * (alexanderwebcenter/app/imt.css) con la paleta de la casa: cian sobre negro
 * neural, ámbar solo para Última hora, cero morado. Las mezclas usan
 * color-mix sobre tokens de pia-brand-tokens.css (nunca hexadecimales).
 *
 * Todo lo que esconde algo cuelga de html.pix-js (lo pone el JS): sin JS el
 * sitio se ve completo y quieto. Lo demás (anillo, foco, cursor) solo existe
 * si el JS creó o marcó el elemento.
 */

:root {
	--pix-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--pix-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--pix-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@property --pix-angulo {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes pix-girar {
	to { --pix-angulo: 360deg; }
}

/* =====================================================================
 * 1. Tarjetas: inclinación 3D, borde con brillo giratorio y foco de luz
 * ================================================================== */

.pix-tarjeta {
	position: relative;
	isolation: isolate;
	transform-style: preserve-3d;
}

@media (hover: hover) and (pointer: fine) {
	.pix-tarjeta {
		will-change: transform;
	}
}

/* Una vez que entró, la tarjeta vuelve suave a su sitio tras la inclinación. */
.pix-tarjeta.pix-listo {
	transition:
		transform 700ms var(--pix-ease-out),
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

/* Borde con brillo: un anillo cónico que gira, recortado con máscara para que
 * funcione sobre tarjetas translúcidas (el original usaba padding-box opaco). */
.pix-tarjeta::before {
	content: '';
	position: absolute;
	inset: -1px;
	z-index: 1;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: conic-gradient(
		from var(--pix-angulo),
		transparent 0deg,
		var(--pia-cian-oscuro) 50deg,
		var(--pia-cian) 90deg,
		transparent 150deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	transition: opacity 0.4s var(--pix-ease-out);
}

.pix-tarjeta:is(:hover, :focus-within)::before {
	opacity: 1;
	animation: pix-girar 4.5s linear infinite;
}

/* Foco de luz que sigue al puntero (--mx/--my los pone el JS). */
[data-spotlight] {
	position: relative;
	isolation: isolate;
}

[data-spotlight]::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease-out;
	background: radial-gradient(
		420px circle at var(--mx, 50%) var(--my, 50%),
		color-mix(in srgb, var(--pia-cian) 14%, transparent),
		transparent 60%
	);
}

[data-spotlight]:hover::after {
	opacity: 1;
}

/* Los espacios publicitarios llevan el foco por encima de la pieza. */
:is(.pia-espacio-publicitario, .pia-franja-publicitaria)[data-spotlight]::after {
	z-index: 3;
}

/* El anuncio de casa de la cabecera ya tiene position y fondo: el foco va encima. */
.pia-casa[data-spotlight]::after {
	z-index: 0;
}

/* =====================================================================
 * 2. Botones magnéticos con barrido de luz
 * ================================================================== */

.pix-btn {
	transition:
		transform 420ms var(--pix-ease-out),
		scale 160ms var(--pix-ease-out),
		background-color 180ms ease-out,
		border-color 180ms ease-out,
		color 180ms ease-out,
		box-shadow 320ms var(--pix-ease-out);
}

.pix-btn:active {
	scale: 0.97;
}

:is(.more-link.button, .pia-casa__cta, .wp-block-button__link).pix-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

:is(.more-link.button, .pia-casa__cta, .wp-block-button__link).pix-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateX(-120%) skewX(-20deg);
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pia-blanco) 55%, transparent), transparent);
	transition: transform 800ms var(--pix-ease-out);
}

:is(.more-link.button, .pia-casa__cta, .wp-block-button__link).pix-btn:hover::after,
.pia-casa:hover .pia-casa__cta.pix-btn::after {
	transform: translateX(120%) skewX(-20deg);
}

/* =====================================================================
 * 3. Aparición al hacer scroll
 * ================================================================== */

html.pix-js [data-reveal]:not(.pix-listo) {
	opacity: 0;
	transform: translateY(36px) scale(0.985);
	filter: blur(6px);
	transition:
		opacity 800ms var(--pix-ease-expo),
		transform 900ms var(--pix-ease-expo),
		filter 700ms ease;
	transition-delay: var(--reveal-delay, 0ms);
}

html.pix-js [data-reveal][data-revealed='true']:not(.pix-listo) {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Teléfono: sin desenfoque (caro de componer) y menos recorrido. */
@media (max-width: 767px), (pointer: coarse) {
	html.pix-js [data-reveal]:not(.pix-listo) {
		transform: translateY(24px);
		filter: none;
		transition:
			opacity 700ms var(--pix-ease-expo),
			transform 800ms var(--pix-ease-expo);
		transition-delay: var(--reveal-delay, 0ms);
	}
}

/* =====================================================================
 * 4. Imágenes que se descubren con un barrido
 * ================================================================== */

html.pix-js .pix-revela-img[data-reveal]:not(.pix-listo) {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(10% 10% 10% 10% round var(--pia-radio-borde));
	transition: clip-path 1100ms var(--pix-ease-expo);
	transition-delay: var(--reveal-delay, 0ms);
}

html.pix-js .pix-revela-img[data-reveal]:not(.pix-listo) img {
	transform: scale(1.14);
	filter: blur(14px) saturate(0.6);
	transition:
		transform 1400ms var(--pix-ease-expo),
		filter 900ms ease;
}

html.pix-js .pix-revela-img[data-revealed='true']:not(.pix-listo) {
	clip-path: inset(0 0 0 0 round var(--pia-radio-borde));
}

html.pix-js .pix-revela-img[data-revealed='true'] img {
	transform: none;
	filter: none;
}

/* =====================================================================
 * 5. Cursor propio (escritorio con ratón)
 * El contenedor solo se mueve (translate3d desde el JS); la forma interior es
 * la que escala. Escalar el contenedor escalaría también su desplazamiento.
 * ================================================================== */

.pix-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2147483000;
	width: 0;
	height: 0;
	pointer-events: none;
	transform: translate3d(-100px, -100px, 0);
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

html.pix-cursor-visible .pix-cursor {
	opacity: 1;
}

.pix-cursor__forma {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	border-radius: 999px;
	transform: translate(-50%, -50%);
}

.pix-cursor--punto .pix-cursor__forma {
	width: 6px;
	height: 6px;
	background: var(--pia-cian);
	box-shadow: 0 0 10px var(--pia-cian);
	transition: scale 320ms var(--pix-ease-out);
}

.pix-cursor--aro .pix-cursor__forma {
	width: 38px;
	height: 38px;
	border: 1.5px solid color-mix(in srgb, var(--pia-cian) 70%, transparent);
	transition:
		scale 320ms var(--pix-ease-out),
		background-color 320ms ease-out,
		border-color 320ms ease-out;
}

.pix-cursor--aro[data-sobre='si'] .pix-cursor__forma {
	scale: 1.7;
	border-color: color-mix(in srgb, var(--pia-cian) 90%, transparent);
	background-color: color-mix(in srgb, var(--pia-cian) 10%, transparent);
}

/* Sobre campos de texto el aro se encoge para no tapar el cursor de escritura. */
.pix-cursor--aro[data-sobre='texto'] .pix-cursor__forma {
	scale: 0.5;
	border-color: color-mix(in srgb, var(--pia-cian) 35%, transparent);
}

.pix-cursor--aro[data-sobre='texto'] ~ .pix-cursor--punto .pix-cursor__forma {
	scale: 0;
}

.pix-cursor--aro[data-presionado='true'] .pix-cursor__forma {
	scale: 0.8;
}

.pix-cursor--aro[data-sobre='si'][data-presionado='true'] .pix-cursor__forma {
	scale: 1.45;
}

/* =====================================================================
 * 6. Barra de progreso de lectura (CSS con scroll-timeline)
 * ================================================================== */

.pix-progreso {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.pix-progreso {
		display: block;
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 2147482000;
		height: 2px;
		transform-origin: 0 50%;
		background: var(--pia-cian);
		box-shadow: 0 0 10px var(--pia-cian);
		pointer-events: none;
		animation: pix-crecer linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes pix-crecer {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* =====================================================================
 * 7. Transición entre páginas
 * Escritorio: una raya cian cruza y un panel oscuro con filo cian entra
 * detrás; en la página nueva el panel sigue de largo y la descubre.
 * Móvil: onda circular desde el toque (transform: scale, en GPU).
 * ================================================================== */

.pix-nav {
	position: fixed;
	inset: 0;
	z-index: 2147482500;
	pointer-events: none;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.pix-nav__panel {
	position: absolute;
	inset: 0;
	background: var(--pia-negro);
	border-right: 3px solid var(--pia-cian);
	box-shadow: 12px 0 60px -10px color-mix(in srgb, var(--pia-cian) 55%, transparent);
	transform: translateX(-102%);
	animation: pix-panel-entra 380ms cubic-bezier(0.7, 0, 0.3, 1) 40ms forwards; /* termina a los 420 ms */
}

.pix-nav__raya {
	position: absolute;
	left: 0;
	top: calc(50% - 3px);
	width: 42vw;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--pia-cian) 70%, var(--pia-blanco));
	box-shadow: 0 0 24px var(--pia-cian);
	transform: translateX(-45vw);
	animation: pix-raya 440ms cubic-bezier(0.55, 0, 0.2, 1) forwards;
}

.pix-nav__raya--fina {
	top: calc(50% + 40px);
	width: 24vw;
	height: 2px;
	opacity: 0.7;
	animation-duration: 380ms;
	animation-delay: 60ms; /* también termina a los 440 ms */
}

.pix-nav__onda,
.pix-nav__velo {
	position: absolute;
	left: calc(var(--nav-x) - var(--nav-r));
	top: calc(var(--nav-y) - var(--nav-r));
	width: calc(var(--nav-r) * 2);
	height: calc(var(--nav-r) * 2);
	border-radius: 999px;
	transform: scale(0);
	animation: pix-onda 360ms var(--pix-ease-out) forwards;
}

.pix-nav__onda { background: var(--pia-cian); }
.pix-nav__velo { background: var(--pia-negro); animation-delay: 60ms; } /* termina a los 420 ms */

/* El wordmark aparece en el centro mientras carga la página siguiente.
 * 2.1.4: es el SVG de trazos (logo-primicia-ia-negativo.svg) incrustado aquí,
 * no texto: con texto, si Space Grotesk tardaba en cargar en la página nueva,
 * el logo cambiaba de fuente a mitad de la transición y "brincaba".
 * Termina de entrar a los 400 ms, antes de navegar (440 ms): la página nueva
 * arranca con el logo EXACTAMENTE en el mismo estado. */
.pix-nav__marca {
	position: relative;
	display: block;
	width: clamp(200px, 26vw, 340px);
	aspect-ratio: 6.028 / 1;  /* wordmark */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='492 631 1702 282' width='434' height='72' role='img' aria-label='PrimixIA'%3E%3Ctitle%3EPrimixIA%3C/title%3E%3Cpath fill='%2300C2D8' fill-rule='evenodd' d='M 1995.2 644.2 C 2026.7 644.7 2059.8 644.2 2091.4 644.2 C 2105.4 680.3 2118.8 719.7 2131.9 756.3 L 2185.7 904.7 C 2158.1 904.8 2130.4 904.6 2102.8 904.4 C 2098.2 890.7 2092.5 871.2 2089.1 857.3 C 2083.3 856.5 2062 856.9 2055.7 856.9 C 2035.2 857 2014.7 857 1994.2 856.8 C 1989.6 872.8 1984.8 888.8 1979.7 904.6 L 1900.9 904.8 C 1906.4 888.2 1914 869.3 1920 852.6 L 1954.8 756.2 L 1979.9 686.5 C 1984.6 673.3 1989.8 657 1995.2 644.2 z M 2042 694.5 C 2044.3 698.7 2050.8 719.8 2052.5 725.2 L 2075.7 798.8 L 2043.7 798.7 L 2009.1 798.7 C 2016.6 770.7 2031.8 721.6 2042 694.5 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 808.7 643.9 C 828.9 644.2 849.3 643.7 869.5 643.8 C 903.1 643.9 932.7 640.9 963.8 657.1 C 997.2 674.4 1008.8 717.7 991.6 750.6 C 981.7 769.4 961.4 776.3 941.6 781.7 C 1017.9 798 985.5 854.7 998.5 904.9 C 975.7 905.1 953 905 930.2 904.9 C 923.7 881.8 928.7 840.6 918.3 828.3 C 908.7 817 850.1 819.9 832.3 819.8 C 832.2 835.9 832.3 852.2 832.3 868.2 L 832.3 904.7 C 809 905.1 784.4 904.7 761 904.6 L 761 709.5 C 784.8 711.1 808.5 713 832.3 715.1 L 832.3 760.9 C 851 761.5 869.8 760.9 888.5 761.3 C 908.1 761.9 925.3 757.5 928.2 735.2 C 929.9 722.4 922.3 705.1 908.7 703.4 C 884.4 700.5 857.9 702.9 833.4 701.9 C 807.4 700.9 781.5 699.1 755.6 697.4 C 760.1 692.3 768.2 684.9 773.4 679.7 L 808.7 643.9 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 551.7 643.9 C 579.4 643.2 607.6 644.3 635.3 643.7 C 649.5 643.5 664 643.8 677.8 647.3 C 692.4 651 705.8 658.4 716.7 668.8 C 751.7 702.2 753.2 761.4 719.2 795.9 C 691.7 823.7 657.7 822.8 622.1 822.8 L 573.3 822.7 C 572.9 849.8 573.3 877.6 573.3 904.7 L 502 904.7 L 501.9 874.5 L 502 709.1 L 573.4 714.9 L 573.5 763.9 C 596.1 763.7 621 765.4 643.4 763.5 C 677.2 760.5 679.2 706.6 643.5 702.9 C 621.3 700.6 598.6 702.7 576.3 702.2 C 551.1 701 524.4 699.4 499.5 697 C 517.1 679.5 534.5 661.8 551.7 643.9 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1154.3 644.2 L 1224.2 644 C 1241.3 701.7 1261 758.3 1278.6 815.5 C 1283.9 797 1290.7 777.1 1296.4 758.6 L 1331.8 644 L 1414.5 644.1 C 1402.8 663.5 1389.8 683.4 1378.9 703.1 C 1370.6 718.6 1360.2 727.7 1360.5 745.9 C 1360.5 748.6 1358.2 754.4 1357.2 757.1 C 1339.3 806.5 1320.8 855.6 1302 904.6 C 1284.2 904.9 1265.8 904.7 1247.9 904.7 L 1198.3 763.7 C 1196.7 758.9 1194 752.1 1193 747.2 C 1188 724 1177.3 703.4 1168.9 681.5 C 1164.6 670.3 1157 655.4 1154.3 644.2 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1544.5 644 L 1624.3 644.1 C 1653.3 688 1681.7 732.5 1709.2 777.4 C 1700.4 790.8 1625.1 900.6 1620.1 904.5 C 1593.1 904.7 1566.1 904.8 1539.1 904.7 C 1568.5 860.9 1600.3 818.2 1630 774.6 C 1601.8 731.3 1573.5 686.7 1544.5 644 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1527.5 638.7 L 1530.3 639.5 C 1532.2 646.1 1530.9 695 1530.9 706.5 L 1530.8 904.6 C 1508.1 904.9 1484.7 904.6 1462 904.5 C 1460 904.5 1461 904.7 1459.3 903.4 C 1458.5 880.7 1459 855.1 1459 832.1 L 1459.3 707.4 C 1482.3 684.9 1504.6 661.4 1527.5 638.7 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1085.9 639.6 L 1087.7 639.8 C 1090 643.3 1089 717.5 1089 729 L 1089.1 904.7 L 1020 904.7 L 1018.3 904.4 C 1016.3 901.7 1017.4 723.5 1017.4 708.1 L 1085.9 639.6 z'/%3E%3Cpath fill='%2300C2D8' fill-rule='evenodd' d='M 1887.5 639.7 L 1889.3 640 C 1892 643.4 1890.7 656.1 1890.7 661.2 C 1890.6 682.4 1890.7 703.7 1890.7 724.9 L 1890.8 904.7 L 1822.8 904.7 C 1820.9 904.6 1821.8 904.8 1820.2 903.4 C 1819.5 899.6 1819.7 857.8 1819.7 851.2 L 1819.7 707.6 C 1825.5 700.8 1836.8 690.2 1843.3 683.6 C 1857.9 668.8 1872.6 654.2 1887.5 639.7 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1426.2 643.5 C 1427.9 644 1428.7 644.3 1430.4 644.9 C 1432 649.2 1431.1 709 1431 717.1 L 1430.9 904.8 C 1408.9 904.8 1386.8 904.7 1364.8 904.4 L 1361 904 C 1359.6 901.5 1363.6 760.9 1364 746.2 C 1384.3 711.8 1405.1 677.5 1426.2 643.5 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1146.8 655.6 C 1150.8 658.2 1183.4 741.9 1186.6 752.1 C 1188.3 757.2 1188 793.3 1188 801.8 L 1187.9 904.7 L 1164.2 904.8 L 1119.8 904.7 L 1119.8 695.8 C 1129 682.5 1138 669.1 1146.8 655.6 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1723.5 781.5 C 1727.8 784 1800.7 892.1 1809 904.8 L 1769.3 904.7 C 1755.6 904.7 1741.9 904.6 1728.2 904.4 C 1714.7 887 1696.7 857.3 1683.8 838 C 1696.9 820.3 1711 799.6 1723.5 781.5 z'/%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M 1729.2 644 C 1753.9 643.5 1780.6 643.9 1805.5 643.9 C 1781.9 676.6 1758.5 709.4 1735.4 742.4 C 1729.4 750.4 1723.7 758.6 1718.3 766.9 C 1706.5 747.6 1694.5 728.8 1682.8 709.4 C 1697.4 690.7 1715.2 663.9 1729.2 644 z'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 0 18px color-mix(in srgb, var(--pia-cian) 55%, transparent));
	opacity: 0;
	transform: scale(0.92);
	animation: pix-marca 280ms var(--pix-ease-out) 120ms forwards;
}

/* Llegada: el <head> pone data-pix-nav="cubriendo" (functions.php) y la página
 * se queda tapada desde el primer cuadro; el JS monta la cortina ya cerrada y
 * la abre ("revelando"). Así no se ve la página un instante antes de taparla. */
html[data-pix-nav='cubriendo'] #tie-wrapper {
	opacity: 0;
}

html[data-pix-nav] .pix-nav .pix-nav__panel {
	transform: translateX(0);
	animation: none;
}

html[data-pix-nav] .pix-nav__raya { display: none; }

html[data-pix-nav] .pix-nav__onda,
html[data-pix-nav] .pix-nav__velo {
	transform: scale(1);
	animation: none;
}

html[data-pix-nav] .pix-nav__marca {
	opacity: 1;
	transform: none;
	animation: none;
}

html[data-pix-nav] .pix-nav[data-fase='revelando'] .pix-nav__panel {
	animation: pix-panel-sale 520ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

html[data-pix-nav] .pix-nav[data-fase='revelando'] :is(.pix-nav__onda, .pix-nav__velo, .pix-nav__marca) {
	transition: opacity 500ms var(--pix-ease-out), transform 500ms var(--pix-ease-out);
	opacity: 0;
}

html[data-pix-nav] .pix-nav[data-fase='revelando'] .pix-nav__marca {
	transform: scale(1.2);
}

/* La página nueva entra escalonada detrás de la cortina. */
html[data-pix-nav='revelando'] #content {
	animation: pix-pagina-entra 700ms var(--pix-ease-out) 160ms both;
}

@keyframes pix-panel-entra { to { transform: translateX(0); } }
@keyframes pix-panel-sale { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes pix-raya { to { transform: translateX(110vw); } }
@keyframes pix-onda { to { transform: scale(1); } }
@keyframes pix-marca { to { opacity: 1; transform: none; } }
@keyframes pix-parpadeo { 50% { opacity: 0; } }
@keyframes pix-pagina-entra { from { opacity: 0; transform: translateX(-56px); } }

/* =====================================================================
 * 8. Publicidad que se nota (2.1.0)
 * El inventario tiene que verse premium para venderse: el hueco flota más
 * alto, lo rodea un filo de luz cian que gira siempre y un destello cruza la
 * pieza cada 7 s.
 * Selectores con `html body …[class]`: tienen que ganarle a
 * `.pia-espacio-publicitario:has(.pia-casa)` (pia-bloques) y a la capa señal. El destello va POR ENCIMA del arte pero es casi
 * transparente y fino: lo hace brillar sin tapar el mensaje del anunciante.
 * ================================================================== */

html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class] {
	overflow: visible; /* el filo y el halo salen del borde; la pieza se recorta en .sic-ads */
	animation: pix-flotar-pro 6s ease-in-out infinite;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pia-cian) 35%, transparent),
		0 0 28px -6px color-mix(in srgb, var(--pia-cian) 45%, transparent),
		0 40px 70px -30px color-mix(in srgb, var(--pia-cian) 60%, transparent),
		0 22px 40px -18px var(--pia-negro);
}

html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class] .sic-ads {
	overflow: hidden;
	border-radius: inherit;
}

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

/* Filo de luz que gira alrededor de la pieza, siempre encendido. */
html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class]::before {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: 4;
	padding: 2px;
	border-radius: calc(var(--pia-radio-borde) + 2px);
	pointer-events: none;
	background: conic-gradient(
		from var(--pix-angulo),
		transparent 0deg,
		var(--pia-cian-oscuro) 40deg,
		var(--pia-cian) 80deg,
		var(--pia-blanco) 92deg,
		var(--pia-cian) 104deg,
		transparent 160deg,
		transparent 200deg,
		var(--pia-cian-oscuro) 240deg,
		var(--pia-cian) 270deg,
		transparent 320deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	filter: drop-shadow(0 0 6px var(--pia-cian));
	animation: pix-girar 6s linear infinite;
}

/* Destello diagonal que cruza la pieza cada 7 s. */
html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class] .sic-ads::after {
	content: '';
	position: absolute;
	inset: -20% auto -20% 0;
	z-index: 2;
	width: 28%;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent,
		color-mix(in srgb, var(--pia-blanco) 16%, transparent) 45%,
		color-mix(in srgb, var(--pia-cian) 22%, transparent) 55%,
		transparent
	);
	transform: translateX(-140%) skewX(-18deg);
	animation: pix-destello 7s var(--pix-ease-in-out) infinite;
}

@keyframes pix-destello {
	0%, 62%  { transform: translateX(-140%) skewX(-18deg); }
	100%     { transform: translateX(480%) skewX(-18deg); }
}

/* Al pasar el mouse la pieza "despega": sube, crece apenas y el halo se enciende. */
html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class]:is(:hover, :focus-within) {
	animation-play-state: paused;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pia-cian) 70%, transparent),
		0 0 40px -4px color-mix(in srgb, var(--pia-cian) 65%, transparent),
		0 50px 90px -30px color-mix(in srgb, var(--pia-cian) 75%, transparent),
		0 22px 40px -18px var(--pia-negro);
}

html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class]:is(:hover, :focus-within)::before {
	animation-duration: 2.5s;
}

/* Etiqueta «Publicidad» con punto cian: se lee como sello, no como aviso. */
html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class] .sic-ads::before {
	border: 1px solid color-mix(in srgb, var(--pia-cian) 30%, transparent);
	color: var(--pia-blanco);
	font-weight: 600;
	padding-left: 18px;
	background:
		radial-gradient(circle at 9px 50%, var(--pia-cian) 0 3px, transparent 3.5px),
		color-mix(in srgb, var(--pia-negro) 75%, transparent);
}

/* Anuncio de casa: más contraste y brillo para que se lea como oferta premium. */
html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class] .pia-casa {
	background-color: var(--pia-negro);
	background-image:
		radial-gradient(ellipse 60% 120% at 50% 0%, color-mix(in srgb, var(--pia-cian) 16%, transparent), transparent 70%),
		var(--pia-reticula);
	background-size: auto, var(--pia-reticula-tam);
}

html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class] .pia-casa__titular {
	text-shadow: 0 0 24px color-mix(in srgb, var(--pia-cian) 55%, transparent);
}

/* El anuncio de la cabecera recibe el mismo tratamiento, a menor escala. */
.pia-cabecera-anuncio .pia-casa {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pia-cian) 40%, transparent),
		0 0 24px -6px color-mix(in srgb, var(--pia-cian) 55%, transparent),
		0 24px 40px -22px color-mix(in srgb, var(--pia-cian) 60%, transparent);
	/* Sin flotado aquí: una animación de transform dentro de la cabecera con
	 * backdrop-filter hace que Safari pinte la fila del logo como una caja. */
}

/* =====================================================================
 * 9. Movimiento reducido: se queda el foco y la aparición por opacidad;
 * se va todo lo que se mueve.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-tilt] {
		transform: none !important; /* gana al estilo en línea del JS si quedó alguno */
	}

	.pix-tarjeta:is(:hover, :focus-within)::before {
		animation: none;
		--pix-angulo: 120deg;
	}

	html.pix-js [data-reveal]:not(.pix-listo) {
		transform: none;
		filter: none;
		transition: opacity 600ms ease;
		transition-delay: var(--reveal-delay, 0ms);
	}

	html.pix-js .pix-revela-img[data-reveal]:not(.pix-listo),
	html.pix-js .pix-revela-img[data-reveal] img {
		clip-path: none;
		transform: none;
		filter: none;
		transition: none;
	}

	.pix-progreso,
	.pix-nav {
		display: none;
	}

	html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class],
	html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class]::before,
	html body :is(.pia-espacio-publicitario, .pia-franja-publicitaria)[class] .sic-ads::after,
	.pia-cabecera-anuncio .pia-casa {
		animation: none;
	}

	.pix-btn::after {
		transition: none;
	}
}