/* Botón Uniguajira — estilo animado (basado en Uiverse.io / marcelodolza). */

.ug-btn-anim-block,
.wp-block-uniguajira-boton-uniguajira {
	--ug-btn-primary: #cc5e50;
	--ug-btn-neutral-1: #f7f8f7;
	--ug-btn-neutral-2: #e7e7e7;
	--ug-btn-radius: 14px;
	display: block;
	width: 100%;
	max-width: 100%;
	float: none !important;
	clear: both;
	margin-block: 0.5rem 1.25rem;
	box-sizing: border-box;
}

.ug-btn-anim-block.alignleft,
.ug-btn-anim-block.alignright,
.ug-btn-anim-block.aligncenter,
.wp-block-uniguajira-boton-uniguajira.alignleft,
.wp-block-uniguajira-boton-uniguajira.alignright,
.wp-block-uniguajira-boton-uniguajira.aligncenter {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ug-btn-anim-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	position: relative;
	padding-block: 1.25rem; /* respiro para sombra hover */
	overflow: visible;
	isolation: isolate;
}

.ug-btn-anim__sr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ug-btn-anim-block.alignleft .ug-btn-anim-wrap,
.wp-block-uniguajira-boton-uniguajira.alignleft .ug-btn-anim-wrap {
	justify-content: flex-start;
}

.ug-btn-anim-block.aligncenter .ug-btn-anim-wrap,
.wp-block-uniguajira-boton-uniguajira.aligncenter .ug-btn-anim-wrap {
	justify-content: center;
}

.ug-btn-anim-block.alignwide .ug-btn-anim-wrap,
.ug-btn-anim-block.alignfull .ug-btn-anim-wrap,
.wp-block-uniguajira-boton-uniguajira.alignwide .ug-btn-anim-wrap,
.wp-block-uniguajira-boton-uniguajira.alignfull .ug-btn-anim-wrap {
	justify-content: center;
}

.ug-btn-anim-block.alignright .ug-btn-anim-wrap,
.wp-block-uniguajira-boton-uniguajira.alignright .ug-btn-anim-wrap {
	justify-content: flex-end;
}

.ug-btn-anim {
	--primary: var(--ug-btn-primary, #cc5e50);
	--neutral-1: var(--ug-btn-neutral-1, #f7f8f7);
	--neutral-2: var(--ug-btn-neutral-2, #e7e7e7);
	--radius: var(--ug-btn-radius, 14px);

	cursor: pointer;
	border-radius: var(--radius);
	border: none;
	box-shadow:
		0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
		0 10px 20px rgba(0, 0, 0, 0.2),
		0 4px 5px 0 rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.3s ease;
	min-width: max(var(--ug-btn-min-width, 200px), var(--ug-btn-locked-width, 0px));
	width: var(--ug-btn-locked-width, auto);
	box-sizing: border-box;
	padding: 20px;
	height: 68px;
	font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
	font-style: normal;
	font-size: 18px;
	font-weight: 600;
	color: #03090f;
	text-shadow: none;
	text-decoration: none;
	background: transparent;
}

.ug-btn-anim,
.ug-btn-anim:hover,
.ug-btn-anim:focus-visible,
.ug-btn-anim:active {
	color: #03090f;
	text-shadow: none;
}

a.ug-btn-anim,
a.ug-btn-anim:hover,
a.ug-btn-anim:focus-visible,
a.ug-btn-anim:active {
	text-decoration: none;
}

.ug-btn-anim:hover {
	transform: scale(1.02);
	box-shadow:
		0 0 1px 2px rgba(255, 255, 255, 0.3),
		0 15px 30px rgba(0, 0, 0, 0.3),
		0 10px 3px -3px rgba(0, 0, 0, 0.04);
}

.ug-btn-anim:hover .ug-btn-anim__state--default .ug-btn-anim__letter,
.ug-btn-anim:hover .ug-btn-anim__state--default .ug-btn-anim__icon {
	color: #03090f;
}

.ug-btn-anim:active {
	transform: scale(1);
	box-shadow:
		0 0 1px 2px rgba(255, 255, 255, 0.3),
		0 10px 3px -3px rgba(0, 0, 0, 0.2);
}

.ug-btn-anim::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	border: 2.5px solid transparent;
	background:
		linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
		linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
	z-index: 0;
	transition: all 0.4s ease;
}

.ug-btn-anim:hover::after {
	transform: scale(1.05, 1.1);
	box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}

.ug-btn-anim::before {
	content: "";
	inset: 7px 6px 6px;
	position: absolute;
	background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
	border-radius: 30px;
	filter: blur(0.5px);
	z-index: 2;
}

.ug-btn-anim__state .ug-btn-anim__label {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.ug-btn-anim__icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transform: scale(1.25);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ug-btn-anim__icon svg {
	overflow: visible;
}

.ug-btn-anim__outline {
	position: absolute;
	border-radius: inherit;
	overflow: hidden;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.4s ease;
	inset: -2px -3.5px;
}

.ug-btn-anim__outline::before {
	content: "";
	position: absolute;
	inset: -100%;
	background: conic-gradient(from 180deg, transparent 60%, #fff 80%, transparent 100%);
	animation: ug-btn-spin 2s linear infinite;
	animation-play-state: paused;
}

@keyframes ug-btn-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.ug-btn-anim:hover .ug-btn-anim__outline {
	opacity: 1;
}

.ug-btn-anim:hover .ug-btn-anim__outline::before {
	animation-play-state: running;
}

.ug-btn-anim__state .ug-btn-anim__label span.ug-btn-anim__letter {
	display: inline-block;
	flex: 0 0 auto;
	opacity: 0;
	animation: ug-btn-slide-down 0.8s ease forwards calc(var(--i, 0) * 0.03s);
}

.ug-btn-anim__state .ug-btn-anim__label span.ug-btn-anim__space {
	display: inline-block;
	flex: 0 0 auto;
	width: 0.35em;
}

.ug-btn-anim:hover .ug-btn-anim__state--default .ug-btn-anim__label span.ug-btn-anim__letter {
	opacity: 1;
	animation: ug-btn-wave 0.5s ease forwards calc(var(--i, 0) * 0.02s);
}

.ug-btn-anim.is-sent .ug-btn-anim__state--default .ug-btn-anim__label span.ug-btn-anim__letter {
	opacity: 1;
	animation: ug-btn-disappear 0.6s ease forwards calc(var(--i, 0) * 0.03s);
}

@keyframes ug-btn-wave {
	30% {
		opacity: 1;
		transform: translateY(4px) translateX(0) rotate(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-3px) translateX(0) rotate(0);
		color: var(--primary);
	}
	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) rotate(0);
		color: #03090f;
	}
}

@keyframes ug-btn-slide-down {
	0% {
		opacity: 0;
		transform: translateY(-20px) translateX(5px) rotate(-90deg);
		color: var(--primary);
		filter: blur(5px);
	}
	30% {
		opacity: 1;
		transform: translateY(4px) translateX(0) rotate(0);
		filter: blur(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-3px) translateX(0) rotate(0);
	}
	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) rotate(0);
	}
}

@keyframes ug-btn-disappear {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: translateX(5px) translateY(20px);
		color: var(--primary);
		filter: blur(5px);
	}
}

.ug-btn-anim__state--default .ug-btn-anim__icon svg {
	animation: ug-btn-land 0.6s ease forwards;
}

.ug-btn-anim:hover .ug-btn-anim__state--default .ug-btn-anim__icon {
	transform: rotate(45deg) scale(1.25);
}

.ug-btn-anim.is-sent .ug-btn-anim__state--default svg {
	animation: ug-btn-take-off 0.8s linear forwards;
}

.ug-btn-anim.is-sent .ug-btn-anim__state--default .ug-btn-anim__icon {
	transform: rotate(0) scale(1.25);
}

@keyframes ug-btn-take-off {
	0% {
		opacity: 1;
	}
	60% {
		opacity: 1;
		transform: translateX(70px) rotate(45deg) scale(2);
	}
	100% {
		opacity: 0;
		transform: translateX(160px) rotate(45deg) scale(0);
	}
}

@keyframes ug-btn-land {
	0% {
		transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
		opacity: 0;
		filter: blur(3px);
	}
	100% {
		transform: translateX(0) translateY(0) rotate(0);
		opacity: 1;
		filter: blur(0);
	}
}

.ug-btn-anim__state--default .ug-btn-anim__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	height: 2px;
	width: 0;
	left: -5px;
	background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}

.ug-btn-anim.is-sent .ug-btn-anim__state--default .ug-btn-anim__icon::before {
	animation: ug-btn-contrail 0.8s linear forwards;
}

@keyframes ug-btn-contrail {
	0% {
		width: 0;
		opacity: 1;
	}
	8% {
		width: 15px;
	}
	60% {
		opacity: 0.7;
		width: 80px;
	}
	100% {
		opacity: 0;
		width: 160px;
	}
}

.ug-btn-anim__state {
	padding-left: 36px;
	z-index: 3;
	display: flex;
	position: relative;
}

.ug-btn-anim__state--default span.ug-btn-anim__letter:nth-child(4) {
	margin-right: 0;
}

.ug-btn-anim__state--sent {
	display: none;
}

.ug-btn-anim__state--sent svg {
	transform: scale(1.25);
	margin-right: 8px;
}

.ug-btn-anim.is-sent {
	width: var(--ug-btn-locked-width, auto);
	min-width: var(--ug-btn-locked-width, var(--ug-btn-min-width, 200px));
}

.ug-btn-anim.is-sent .ug-btn-anim__state--default {
	position: absolute;
	inset: 0;
	pointer-events: none;
	visibility: hidden;
}

.ug-btn-anim.is-sent .ug-btn-anim__state--sent {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-left: 36px; /* mismo hueco del icono que el estado default */
}

.ug-btn-anim.is-sent .ug-btn-anim__state--sent .ug-btn-anim__label span.ug-btn-anim__letter {
	opacity: 0;
	animation: ug-btn-slide-down 0.75s ease forwards calc(0.6s + var(--i, 0) * 0.07s);
}

.ug-btn-anim.is-sent .ug-btn-anim__state--sent .ug-btn-anim__icon svg {
	opacity: 0;
	animation: ug-btn-appear 1s ease forwards 1.1s;
}

@keyframes ug-btn-appear {
	0% {
		opacity: 0;
		transform: scale(4) rotate(-40deg);
		color: var(--primary);
		filter: blur(4px);
	}
	30% {
		opacity: 1;
		transform: scale(0.6);
		filter: blur(1px);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.ug-btn-anim:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ug-btn-anim,
	.ug-btn-anim::after,
	.ug-btn-anim__icon,
	.ug-btn-anim__outline::before,
	.ug-btn-anim__state .ug-btn-anim__label span.ug-btn-anim__letter,
	.ug-btn-anim__state--default .ug-btn-anim__icon svg {
		animation: none !important;
		transition: none !important;
	}

	.ug-btn-anim:hover {
		transform: none;
	}

	.ug-btn-anim__state .ug-btn-anim__label span.ug-btn-anim__letter {
		opacity: 1;
	}
}