:root {
	--border-animation-color: #FA780973; /* NARANJA DE MARCA */
	--border-animation-speed: 7s;
	--border-animation-width: 1px;
}

@property --border-animation-angle {
	syntax: "<angle>";
	initial-value: 0turn;
	inherits: false;
}

@keyframes borderRotate {
	to {
		--border-animation-angle: 1turn;
	}
}

.ct-border-animation::after {
	pointer-events: none;
	content: "";
	position: absolute;
	inset: calc(var(--border-animation-width) * -1);
	border-radius: inherit;
	border: solid transparent;
	border-width: var(--border-animation-width);
	animation: borderRotate var(--border-animation-speed) linear infinite;
	background: conic-gradient(
		from var(--border-animation-angle),
		transparent 88%,
		var(--border-animation-color),
		var(--border-animation-color) 100%,
		transparent
	) border-box;
	background-clip: border-box;
	background-origin: border-box;
	mask: radial-gradient(
		farthest-side,
		rgba(0, 0, 0, 0) calc(97% - var(--border-animation-width)),
		rgba(0, 0, 0, 0)
	) content-box,
	radial-gradient(
		farthest-side,
		rgba(0, 0, 0, 0) calc(2% - var(--border-animation-width)),
		#000
	) border-box;
	-webkit-mask-composite: destination-in;
	mask-composite: intersect;
}
