.boton-algodoneros {
	--btn-bg: var(--e-global-color-primary);
	--btn-color: var(--e-global-color-secondary);
	--btn-hover-bg: var(--e-global-color-secondary);
	--btn-hover-color: var(--e-global-color-primary);
	height: 48px;
	display: inline-flex !important;
	text-decoration: none;
	transform: translateX(0);
	transition: transform .25s ease;
}

.boton-algodoneros:hover {
	transform: translateX(3px);
}

.boton-algodoneros .texto {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 15px;
	background-color: var(--btn-bg);
	color: var(--btn-color);
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	transition: background .3s ease, color .2s ease;
}

.boton-algodoneros .flecha {
	height: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--btn-bg);
	color: var(--btn-color);
	transform: translateX(10px);
	animation: arrowBounce 1.4s infinite;
	transition: transform .3s ease, background .3s ease, color .2s ease;
	will-change: transform;
}

.boton-algodoneros .flecha svg {
	width: 16px;
	height: 16px;
}

.boton-algodoneros:hover .texto {
	border-right: 0 !important;
	background-color: var(--btn-hover-bg);
	color: var(--btn-hover-color);
}

.boton-algodoneros:hover .flecha {
	border-left: 0 !important;
	background-color: var(--btn-hover-bg);
	color: var(--btn-hover-color);
	animation: none;
	transform: translateX(0);
}

.boton-algodoneros:focus-visible .texto,
.boton-algodoneros:focus-visible .flecha {
	outline: 2px solid var(--btn-border);
	outline-offset: 2px;
}

@keyframes arrowBounce {
	0%, 100% {
		transform: translateX(10px);
	}

	50% {
		transform: translateX(0);
	}
}