/**
 * Pulsoweb Button — CTA reutilizable.
 *
 * Pill sólido con texto a la izquierda y círculo (pill) con flecha diagonal que
 * hace swap en hover. Todos los colores llegan como CSS custom properties desde
 * los controles de Elementor: --pwbtn-bg / --pwbtn-bg-hover / --pwbtn-text /
 * --pwbtn-text-hover / --pwbtn-pill / --pwbtn-arrow. La flecha hereda el color
 * de fondo del botón por defecto.
 */

.pwbtn-wrap {
	display: flex;
	justify-content: var(--pwbtn-justify, flex-start);
}

.pwbtn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 8px 8px 8px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	background-color: var(--pwbtn-bg, #ff4f18);
	color: var(--pwbtn-text, #ffffff);
	/* Sin borde por defecto (grosor 0); el switch "Mostrar borde" emite las vars.
	   Sin color elegido, el borde usa el color del texto. */
	border: var(--pwbtn-border-width, 0px) solid var(--pwbtn-border, currentColor);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease;
}

.pwbtn:hover,
.pwbtn:focus {
	background-color: var(--pwbtn-bg-hover, var(--pwbtn-bg, #ff4f18));
	border-color: var(--pwbtn-border-hover, var(--pwbtn-border, currentColor));
	color: var(--pwbtn-text-hover, var(--pwbtn-text, #ffffff));
}

.pwbtn__label {
	line-height: 1;
}

/* Círculo (pill): recorta las flechas al entrar/salir. */
.pwbtn__circle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pwbtn-circle-size, 44px);
	height: var(--pwbtn-circle-size, 44px);
	border-radius: 50%;
	background-color: var(--pwbtn-pill, #ffffff);
	overflow: hidden;
}

/* Wrapper rotado -45deg: una flecha "a la derecha" se ve arriba-derecha y un
   translateX se convierte en desplazamiento por el eje diagonal. */
.pwbtn__arrows {
	position: relative;
	width: 20px;
	height: 20px;
	transform: rotate(-45deg);
}

.pwbtn__arrow {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	fill: var(--pwbtn-arrow, var(--pwbtn-bg, #ff4f18));
	transition: transform 0.38s ease;
}

/* Flecha 2 en espera, fuera del pill (abajo-izquierda). 200% para que no asome. */
.pwbtn__arrow:nth-child(2) {
	transform: translateX(-200%);
}

.pwbtn:hover .pwbtn__arrow:nth-child(1),
.pwbtn:focus .pwbtn__arrow:nth-child(1) {
	transform: translateX(200%);
}

.pwbtn:hover .pwbtn__arrow:nth-child(2),
.pwbtn:focus .pwbtn__arrow:nth-child(2) {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.pwbtn__arrow {
		transition: none;
	}
	.pwbtn:hover .pwbtn__arrow:nth-child(1),
	.pwbtn:focus .pwbtn__arrow:nth-child(1) {
		transform: none;
	}
	.pwbtn:hover .pwbtn__arrow:nth-child(2),
	.pwbtn:focus .pwbtn__arrow:nth-child(2) {
		transform: translateX(-200%);
	}
}