/**
 * ECN — Publicidad que se nota (2026-10-06)
 *
 * Port a ECN de lo que PrimixIA estrenó en su tema 2.1.0 (decisión 117 de
 * primicia-ia-web): el inventario tiene que verse premium para venderse. Antes
 * el hueco era una caja con borde punteado y un rótulo gris; ahora es una
 * pieza que flota sobre la página, con un filo de luz rojo neón que gira, un
 * destello que la cruza cada 7 s y la etiqueta «Publicidad» convertida en
 * sello.
 *
 * ---- Qué se hizo distinto a PrimixIA, y por qué ----
 *
 * 1. EL EFECTO VIVE EN `.sic-ads`, NO EN EL CONTENEDOR DEL TEMA.
 *    PrimixIA estira el hueco a todo el ancho de la columna y deja que la
 *    pieza lo llene. Aquí no: una pieza de 728x90 en una columna de 782 px se
 *    ampliaría un 7 % y saldría blanda. `.sic-ads` ya trae el ancho exacto de
 *    cada formato (`--sic-ads--*`, del plugin) y va centrado, así que el filo
 *    y el halo lo abrazan sin deformar nada y sin tocar la reserva de altura
 *    que evita el CLS.
 *
 * 2. EL SELLO CUELGA DEL FILO, NO TAPA LA PIEZA.
 *    En PrimixIA el rótulo se posa sobre la esquina del arte. Eso no sirve en
 *    un 320x50 de cabecera, donde media pieza quedaría debajo. Aquí el sello
 *    monta sobre el borde superior: se lee igual de claro, es obligación
 *    editorial (el lector distingue lo pagado) y el arte del anunciante queda
 *    entero. Por eso `.sic-ads` NO recorta (`overflow` visible): recortan la
 *    pieza y el anuncio de casa, cada uno con su radio.
 *
 * 3. EL FLOTADO NO ENTRA EN LA CABECERA.
 *    `.ecn-cabecera-anuncio` se centra con `transform: translateY(-50%)` y va
 *    sobre la barra de navegación. Allí solo hay filo y destello: sin
 *    movimiento vertical y con una sombra corta que no baje sobre el menú.
 *
 * 4. LA INTENSIDAD DEPENDE DEL LIENZO.
 *    ECN es «portada oscura, artículo claro». Sobre negro el rojo es luz y se
 *    nota entero; sobre la hoja blanca de una nota el mismo halo se vería
 *    rosado y sucio. `--ecn-pub-halo*` baja a la mitad fuera de los lienzos
 *    oscuros (los mismos que declara ecn-neon.css).
 *
 * Todo es CSS: sin JavaScript no se pierde nada y el plugin sic-ads (fuente
 * compartida con Orgullosamente Paisa) no se edita. Carga después de
 * ecn-neon: quitar su línea en functions.php devuelve el estado anterior.
 */

/* =====================================================================
 * 0. Piezas de animación
 * ================================================================== */

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

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

@keyframes ecn-pub-flotar {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(var(--ecn-pub-vuelo)); }
}

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

body {
	/* Fuera de los lienzos oscuros (nota, archivo claro) el halo es la mitad. */
	--ecn-pub-halo: 24%;
	--ecn-pub-halo-lejos: 30%;
	--ecn-pub-vuelo: -8px;
}

body:is(.home, .category-32, .single-ecn_indicador, .ecn-landing) {
	--ecn-pub-halo: 45%;
	--ecn-pub-halo-lejos: 60%;
}

/* =====================================================================
 * 1. El contenedor del tema deja de ser una caja
 * Sin borde punteado, sin fondo y sin recorte: el filo y el halo salen del
 * hueco. Gana a ecn-components (0,1,0), a `:has(.ecn-casa)` de ecn-bloques
 * (0,2,0) y a la regla de ecn-neon (0,2,1) por especificidad y por orden.
 * ================================================================== */

html body :is(.ecn-espacio-publicitario, .ecn-franja-publicitaria)[class] {
	display: block;
	min-height: 0;
	margin-block: var(--ecn-sp-6);
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

/* El placeholder «PUBLICIDAD» solo hace falta si dentro NO hay plugin (código
 * pegado a mano): con sic-ads el rótulo es el sello. */
html body :is(.ecn-espacio-publicitario, .ecn-franja-publicitaria)[class]:has(.sic-ads)::before {
	content: none;
}

/* La columna lateral (300 px) no pierde su tope. */
html body .ecn-espacio-publicitario--caja[class] {
	min-height: 0;
}

/* =====================================================================
 * 2. La pieza flota
 * ================================================================== */

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads {
	--ecn-pub-radio: var(--ecn-radio-borde);
	/* El rótulo ya no ocupa una línea encima de la pieza: es un sello. Sin
	 * esto el plugin reserva 18 px de más y la pieza queda con un hueco abajo. */
	--sic-ads-rotulo-alto: 0px;

	position: relative;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin-block: 0;
	border-radius: var(--ecn-pub-radio);
	background: var(--ecn-negro-profundo);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--ecn-neon) 35%, transparent),
		0 0 28px -6px color-mix(in srgb, var(--ecn-neon) var(--ecn-pub-halo), transparent),
		0 40px 70px -30px color-mix(in srgb, var(--ecn-neon) var(--ecn-pub-halo-lejos), transparent),
		0 22px 40px -18px var(--ecn-negro-profundo);
	transition: box-shadow 0.35s ease;
}

/* El flotado, fuera de la cabecera (ver nota 3). */
:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria) .sic-ads {
	animation: ecn-pub-flotar 6s ease-in-out infinite;
}

/* La cabecera: halo corto, sin bajar sobre el menú. */
.ecn-cabecera-anuncio .sic-ads {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--ecn-neon) 40%, transparent),
		0 0 24px -6px color-mix(in srgb, var(--ecn-neon) 55%, transparent),
		0 12px 24px -16px color-mix(in srgb, var(--ecn-neon) 60%, transparent);
}

/* Al acercarse la pieza «despega»: se detiene, el halo se enciende y el filo
 * acelera. Solo con puntero real; en táctil un :hover pegado no aporta. */
@media (hover: hover) {
	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads:is(:hover, :focus-within) {
		animation-play-state: paused;
		box-shadow:
			0 0 0 1px color-mix(in srgb, var(--ecn-neon) 70%, transparent),
			0 0 40px -4px color-mix(in srgb, var(--ecn-neon) 65%, transparent),
			0 50px 90px -30px color-mix(in srgb, var(--ecn-neon) 75%, transparent),
			0 22px 40px -18px var(--ecn-negro-profundo);
	}

	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads:is(:hover, :focus-within)::after {
		animation-duration: 2.5s;
	}
}

/* =====================================================================
 * 3. Filo de luz que gira alrededor de la pieza, siempre encendido
 * Anillo de 2 px FUERA del borde (inset negativo): no cambia ninguna medida
 * y no recorta nada. Un degradado cónico con la máscara «contenido XOR
 * borde» deja solo el aro visible.
 * ================================================================== */

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads::after {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: 4;
	padding: 2px;
	border-radius: calc(var(--ecn-pub-radio) + 2px);
	pointer-events: none;
	background: conic-gradient(
		from var(--ecn-angulo),
		transparent 0deg,
		var(--ecn-rojo) 40deg,
		var(--ecn-neon) 80deg,
		var(--ecn-blanco) 92deg,
		var(--ecn-neon) 104deg,
		transparent 160deg,
		transparent 200deg,
		var(--ecn-rojo) 240deg,
		var(--ecn-neon) 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(--ecn-neon));
	animation: ecn-pub-girar 6s linear infinite;
}

/* =====================================================================
 * 4. Sello «Publicidad»
 * Cuelga del borde superior: se lee como sello y no tapa el arte. Fondo
 * opaco para que aguante igual sobre el lienzo negro y sobre la nota blanca.
 * ================================================================== */

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads::before {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 5;
	margin: 0;
	padding: 3px 10px 3px 20px;
	border: 1px solid color-mix(in srgb, var(--ecn-neon) 45%, transparent);
	border-radius: var(--ecn-radio-pildora);
	background:
		radial-gradient(circle at 10px 50%, var(--ecn-neon) 0 3px, transparent 3.5px),
		var(--ecn-negro-profundo);
	color: var(--ecn-blanco);
	font-weight: 600;
	pointer-events: none;
}

/* En la cabecera la pieza es de 50-90 px de alto: ahí el sello cuelga del borde
 * para no tapar el arte. */
.ecn-cabecera-anuncio .sic-ads::before {
	top: -9px;
	left: 16px;
}

/* =====================================================================
 * 5. Creatividad real: recorte propio y destello
 * El recorte lo hace la pieza (no `.sic-ads`, que tiene que dejar colgar el
 * sello). El destello va POR ENCIMA del arte, pero fino y casi transparente:
 * lo hace brillar sin tapar el mensaje del anunciante.
 * ================================================================== */

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads__pieza {
	position: relative;
	overflow: hidden;
	border-radius: var(--ecn-pub-radio);
}

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) :is(.sic-ads__pieza, .ecn-casa)::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(--ecn-blanco) 16%, transparent) 45%,
		color-mix(in srgb, var(--ecn-neon) 22%, transparent) 55%,
		transparent
	);
	transform: translateX(-140%) skewX(-18deg);
	animation: ecn-pub-destello 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* La imagen llena el marco de borde a borde con su proporción (como PrimixIA).
 * Los width/height del <img> reservan el alto antes de cargar. */
:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads__pieza {
	display: block;
	width: 100%;
	max-width: none;
}

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

/* =====================================================================
 * 6. Anuncio de casa («Publica aquí»)
 * Es el inventario sin vender: tiene que verse como oferta premium, no como
 * hueco vacío. Dentro del marco ya no necesita su propio filete ni su sombra.
 * ================================================================== */

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads .ecn-casa {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: var(--ecn-pub-radio);
	box-shadow: none;
	background-color: var(--ecn-negro-profundo);
	background-image:
		radial-gradient(ellipse 60% 120% at 50% 0%, color-mix(in srgb, var(--ecn-neon) 18%, transparent), transparent 70%),
		var(--ecn-tech-reticula);
	background-size: auto, var(--ecn-tech-reticula-tam);
	/* Mismo alto que reserva el plugin para este hueco, escritorio y móvil. */
	min-height: var(--sic-ads-alto, 90px);
}

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads .ecn-casa__titular {
	text-shadow: 0 0 24px color-mix(in srgb, var(--ecn-neon) 55%, transparent);
}

/* CTA lleno: era un contorno blanco que solo se rellenaba al pasar el mouse. */
:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads .ecn-casa__cta {
	background: var(--ecn-rojo);
	border-color: var(--ecn-neon);
	box-shadow: 0 0 14px -2px var(--ecn-neon-suave);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads .ecn-casa__cta::after {
	content: '\2192'; /* → */
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.25s ease;
}

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads .ecn-casa:is(:hover, :focus-visible) .ecn-casa__cta {
	box-shadow: 0 0 22px 0 var(--ecn-neon-suave);
	transform: translateY(-1px);
}

:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads .ecn-casa:is(:hover, :focus-visible) .ecn-casa__cta::after {
	transform: translateX(4px);
}

/* =====================================================================
 * 7. Móvil
 * Menos vuelo (la pieza va casi a ras de columna) y márgenes más cortos.
 * ================================================================== */

@media (max-width: 767px) {
	body {
		--ecn-pub-vuelo: -5px;
	}

	html body :is(.ecn-espacio-publicitario, .ecn-franja-publicitaria)[class] {
		margin-block: var(--ecn-sp-5);
	}
}

/* La cabecera de móvil tiene el alto fijo, y antes lo llenaban el rótulo
 * (18 px) y los márgenes del plugin (20 + 20). Sin ellos quedaban ~58 px
 * vacíos bajo la pieza. Se devuelve la misma geometría: la pieza cae donde
 * caía, y el sello cuelga en el aire que dejaba el rótulo. En escritorio no
 * hace falta: el anuncio va centrado con el logo y queda justo en el medio. */
@media (max-width: 991px) {
	.ecn-cabecera-anuncio .sic-ads {
		margin-block: 38px 20px;
	}
}

/* El sello en una pieza de 320 px de ancho no puede pasar de ahí. */
@media (max-width: 380px) {
	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads::before {
		left: 10px;
	}
}

/* =====================================================================
 * 8. Movimiento reducido: la pieza se queda quieta, con su filo fijo
 * en el ángulo donde mejor se ve, y sin destello.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads,
	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads::after,
	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) :is(.sic-ads__pieza, .ecn-casa)::after {
		animation: none;
	}

	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) .sic-ads::after {
		--ecn-angulo: 120deg;
	}

	:is(.ecn-espacio-publicitario, .ecn-franja-publicitaria, .ecn-cabecera-anuncio) :is(.sic-ads__pieza, .ecn-casa)::after {
		display: none;
	}
}