/**
 * Simó Lorenzo Kit — Decoración de sección (CSS común a todas las decoraciones).
 *
 * Reglas base dentro de :where() (especificidad 0): cualquier ajuste del panel
 * o del tema las sobrescribe sin pelear.
 */

/*
 * La sección que recibe una capa tiene que ser el bloque de referencia del
 * position: absolute. Los contenedores de Elementor ya son position: relative;
 * esto solo actúa si no lo fueran. Con especificidad 0, si la sección tiene su
 * propia posición (sticky, absolute...), manda la suya.
 */
:where(.elementor-element:has(> .slk-deco)) {
	position: relative;
}

/*
 * La capa: primer hijo de la sección, cubre todo su ancho y alto (inset: 0),
 * recorta lo que sobresale (overflow: hidden → nunca scroll horizontal, sin 100vw),
 * no captura clics y no altera el layout (absolute = fuera del flujo, sin hueco de gap).
 * z-index: 0 + ser el primer hijo = se pinta detrás del contenido, que viene después
 * en el HTML, sin tocar el z-index del contenido.
 */
:where(.slk-deco) {
	--slk-deco-opacity: 1;
	--slk-deco-scale: 1;
	--slk-deco-x: 0%;
	--slk-deco-y: 0%;
	--slk-deco-speed: 3;
	--slk-deco-duration: calc(60s / var(--slk-deco-speed));

	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
	opacity: var(--slk-deco-opacity);
	user-select: none;
}

:where(.slk-deco) .slk-deco__art {
	position: absolute;
	inset: 0;
	transform: translate(var(--slk-deco-x), var(--slk-deco-y)) scale(var(--slk-deco-scale));
	transform-origin: 50% 50%;
}

:where(.slk-deco) svg {
	display: block;
	width: 100%;
	height: 100%;
	/* Deja ver los trazos que salen del lienzo al reducir la escala (la capa sigue recortando). */
	overflow: visible;
}

/* Accesibilidad: sin movimiento si la persona lo ha pedido en su sistema. */
@media (prefers-reduced-motion: reduce) {
	.slk-deco,
	.slk-deco * {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Solo editor ---------- */

/*
 * En el editor el widget se ve como una etiqueta pequeña para poder seleccionarlo.
 * Va en posición absoluta en la esquina de su contenedor: no empuja el contenido.
 */
.elementor-editor-active .elementor-widget-simo-lorenzo-kit-section-decoration {
	position: absolute !important;
	inset-block-start: 6px;
	inset-inline-start: 6px;
	width: auto !important;
	max-width: calc(100% - 12px);
	margin: 0 !important;
	z-index: 3;
}

.slk-deco-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px dashed rgba(0, 0, 0, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	color: #1f2124;
	font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
}

.slk-deco-source {
	display: none;
}