/**
 * UXDivi · AI Button — efecto borde animado conic-gradient
 * Versión: 1.0.0
 *
 * Dos vehículos de uso:
 *  1. Clase explícita `.uxdivi-glow-btn` para botones nuevos del rediseño.
 *  2. Selector compuesto para los CTAs primarios ya maquetados en templates
 *     del mu-plugin `uxdivi-frontend` (sin tocar el template).
 *
 * Respeta `prefers-reduced-motion`. Degrada elegante en navegadores sin
 * soporte de `@property` (Safari < 15.4) — el botón queda funcional sin
 * animación.
 */

/* ═══ Custom property animable ═══ */
@property --uxdivi-btn-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes uxdivi-glow-rotate {
	to { --uxdivi-btn-angle: 360deg; }
}

/* ═══ Clase explícita `.uxdivi-glow-btn` ═══ */
.uxdivi-glow-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	background: linear-gradient(135deg, #014DFD 0%, #4A7EFF 100%);
	color: #FFFFFF;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 14px 34px -10px rgba(1, 77, 253, 0.55);
	transition: box-shadow 0.3s ease, transform 0.2s ease;
	border: 0;
}
.uxdivi-glow-btn::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--uxdivi-btn-angle),
		transparent 0%,
		transparent 15%,
		#62E5FF 25%,
		#8CEEFF 30%,
		#4A7EFF 35%,
		transparent 50%,
		transparent 100%
	);
	z-index: -1;
	animation: uxdivi-glow-rotate 4s linear infinite;
}
.uxdivi-glow-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, #014DFD 0%, #4A7EFF 100%);
	z-index: -1;
}
.uxdivi-glow-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 40px -10px rgba(1, 77, 253, 0.7);
}
.uxdivi-glow-btn:hover::before {
	animation-duration: 2s;
}

/* ═══ Integración con templates del frontend · réplica 1:1 del HTML referencia ═══
 * Los CTAs primarios de los templates ya inyectados traen su propio
 * padding/radius/background del DS de cada page. Acá pisamos los estilos
 * para que adopten el look exacto del `.uxdivi-glow-btn` del HTML referencia
 * `rediseno/Planes UXDivi.html`: **pill** (border-radius 999px) con padding
 * 16x28, font 15px peso 600, box-shadow específica + DOS capas (`::before`
 * anillo + `::after` overlay).
 *
 * Mapeo de selectores por slug · usar selectores agrupados (multiple)
 * para mantener una sola fuente de verdad de los estilos:
 *   sobre           → .btn.btn-primary.btn-lg
 *   rutas           → .uxr-btn.uxr-btn--primary  (dentro de .uxr-public)
 *   ruta-individual → .uxr-btn.uxr-btn--primary  (dentro de .uxr-ind-public)
 *
 * Cada bloque del frontend NO afecta a otros botones (ghost/secundarios) ni
 * a otras pages que no estén explícitamente listadas en SLUGS_ENABLED del
 * mu-plugin loader.
 */
body.uxdivi-frontend--sobre .ux-sobre .btn.btn-primary.btn-lg,
body.uxdivi-frontend--rutas .uxr-public .uxr-btn.uxr-btn--primary,
body.uxdivi-frontend--ruta-individual .uxr-ind-public .uxr-btn.uxr-btn--primary {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	background: linear-gradient(135deg, #014DFD 0%, #4A7EFF 100%);
	color: #FFFFFF;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 14px 34px -10px rgba(1, 77, 253, 0.55);
	transition: box-shadow 0.3s ease, transform 0.2s ease;
	border: 0;
}
/* Capa 1 · anillo conic rotando */
body.uxdivi-frontend--sobre .ux-sobre .btn.btn-primary.btn-lg::before,
body.uxdivi-frontend--rutas .uxr-public .uxr-btn.uxr-btn--primary::before,
body.uxdivi-frontend--ruta-individual .uxr-ind-public .uxr-btn.uxr-btn--primary::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--uxdivi-btn-angle),
		transparent 0%,
		transparent 15%,
		#62E5FF 25%,
		#8CEEFF 30%,
		#4A7EFF 35%,
		transparent 50%,
		transparent 100%
	);
	z-index: -1;
	animation: uxdivi-glow-rotate 4s linear infinite;
	pointer-events: none;
}
/* Capa 2 · overlay gradient brand que tapa el centro para que solo se vea el borde */
body.uxdivi-frontend--sobre .ux-sobre .btn.btn-primary.btn-lg::after,
body.uxdivi-frontend--rutas .uxr-public .uxr-btn.uxr-btn--primary::after,
body.uxdivi-frontend--ruta-individual .uxr-ind-public .uxr-btn.uxr-btn--primary::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, #014DFD 0%, #4A7EFF 100%);
	z-index: -1;
	pointer-events: none;
}
body.uxdivi-frontend--sobre .ux-sobre .btn.btn-primary.btn-lg:hover,
body.uxdivi-frontend--rutas .uxr-public .uxr-btn.uxr-btn--primary:hover,
body.uxdivi-frontend--ruta-individual .uxr-ind-public .uxr-btn.uxr-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 40px -10px rgba(1, 77, 253, 0.7);
}
body.uxdivi-frontend--sobre .ux-sobre .btn.btn-primary.btn-lg:hover::before,
body.uxdivi-frontend--rutas .uxr-public .uxr-btn.uxr-btn--primary:hover::before,
body.uxdivi-frontend--ruta-individual .uxr-ind-public .uxr-btn.uxr-btn--primary:hover::before {
	animation-duration: 2s;
}

/* ═══ Accesibilidad ═══ */
@media (prefers-reduced-motion: reduce) {
	.uxdivi-glow-btn::before,
	body.uxdivi-frontend--sobre .ux-sobre .btn.btn-primary.btn-lg::before,
	body.uxdivi-frontend--rutas .uxr-public .uxr-btn.uxr-btn--primary::before,
	body.uxdivi-frontend--ruta-individual .uxr-ind-public .uxr-btn.uxr-btn--primary::before {
		animation: none;
	}
}

/* ═══ Fallback Safari < 15.4 (sin `@property`) ═══
 * En navegadores que no soportan `@property`, el ángulo no se anima · el
 * conic-gradient queda estático. Ocultamos el `::before` para que el botón
 * quede limpio en vez de mostrar un anillo congelado raro.
 */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
	.uxdivi-glow-btn::before,
	body.uxdivi-frontend--sobre .ux-sobre .btn.btn-primary.btn-lg::before,
	body.uxdivi-frontend--rutas .uxr-public .uxr-btn.uxr-btn--primary::before,
	body.uxdivi-frontend--ruta-individual .uxr-ind-public .uxr-btn.uxr-btn--primary::before {
		display: none;
	}
}