/* ════════════════════════════════════════════════════════════════
   OVERRIDE · wrapper de WC Memberships con background brand
   ────────────────────────────────────────────────────────────────
   Divi child theme tiene una regla:
     .woocommerce-message, .woocommerce-error, .woocommerce-info {
       background: #014dfd !important;
     }
   WC Memberships envuelve el restricted_message en .woocommerce-info
   → el paywall queda "encuadrado" en azul brand plano. Aplastamos esa
   regla con mayor especificidad cuando el wrapper contiene un
   .ux-paywall (o body con access-restricted). Jefferson 2026-05-20.
   ════════════════════════════════════════════════════════════════ */
body .woocommerce-info.memberships-restriction-message,
body .memberships-restriction-message,
body.access-restricted .woocommerce-info,
body.access-restricted .woocommerce-message,
body.access-restricted .woocommerce-error {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
}
body .woocommerce-info.memberships-restriction-message::before,
body .memberships-restriction-message::before,
body.access-restricted .woocommerce-info::before,
body.access-restricted .woocommerce-message::before {
	display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   UXDivi · Paywall (extracto sin scope · 2026-05-20 v2)
   ────────────────────────────────────────────────────────────────
   Extraído de rediseno/_implementados/paywall-v1.html v1.3 que es la
   fuente de verdad del diseño. El HTML pegado en
   wc_memberships_messages[*_content_restricted_message] usa estas
   mismas clases. Este archivo se enqueua global en frontend desde
   mu-plugins/uxdivi-paywall.php para que las reglas apliquen donde
   sea que WC Memberships inyecte el paywall.
   ════════════════════════════════════════════════════════════════ */

.ux-paywall {
	position: relative;
	max-width: 760px;
	margin: 32px auto;
	padding: 44px 40px 36px;
	background:
		radial-gradient(80% 60% at 50% 0%, rgba(1,77,253,0.22), transparent 60%),
		radial-gradient(60% 40% at 0% 100%, rgba(98,229,255,0.08), transparent 60%),
		#0A0F1E;
	border: 1px solid rgba(98,229,255,0.25);
	border-radius: 24px;
	color: #C6D2E8;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	box-shadow: 0 40px 100px -30px rgba(1,77,253,0.5);
	overflow: hidden;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}
.ux-paywall::before {
	content: '';
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg,  rgba(98,229,255,0.03) 0 1px, transparent 1px 56px),
		repeating-linear-gradient(90deg, rgba(98,229,255,0.03) 0 1px, transparent 1px 56px);
	mask-image: radial-gradient(700px 400px at 50% 50%, #000 30%, transparent 80%);
	pointer-events: none;
}
.ux-paywall > * { position: relative; }
.ux-paywall * { box-sizing: border-box; }

/* Lock icon */
.ux-paywall__lock {
	width: 64px; height: 64px;
	margin: 0 auto 20px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(1,77,253,0.2), rgba(98,229,255,0.12));
	border: 1px solid rgba(98,229,255,0.35);
	display: flex; align-items: center; justify-content: center;
	color: #62E5FF !important;
	box-shadow: 0 10px 40px -8px rgba(98,229,255,0.4);
	position: relative;
}
/* Asegurar que el SVG inline del lock sea visible cuando Divi o BB
   sobrescriben fill/stroke/display de svg children con !important. */
.ux-paywall__lock svg,
.ux-paywall .ux-paywall__lock svg {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 28px !important;
	height: 28px !important;
	stroke: #62E5FF !important;
	fill: none !important;
	overflow: visible !important;
}
.ux-paywall__lock svg rect,
.ux-paywall__lock svg path,
.ux-paywall .ux-paywall__lock svg rect,
.ux-paywall .ux-paywall__lock svg path {
	stroke: #62E5FF !important;
	fill: none !important;
	stroke-width: 2 !important;
	display: inline !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.ux-paywall__lock::after {
	content: ''; position: absolute; inset: -10px;
	border: 1px dashed rgba(98,229,255,0.2);
	border-radius: 26px;
	animation: ux-pw-ring 3s ease-in-out infinite;
}
@keyframes ux-pw-ring { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.1; transform: scale(1.06); } }

/* Pill */
.ux-paywall__pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px;
	background: rgba(98,229,255,0.1);
	border: 1px solid rgba(98,229,255,0.35);
	border-radius: 999px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px; font-weight: 500;
	color: #62E5FF;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.ux-paywall__pill-dot { width: 5px; height: 5px; border-radius: 50%; background: #62E5FF; box-shadow: 0 0 8px #62E5FF; }

/* Title */
.ux-paywall__title {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 30px);
	color: #F5F8FF;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0 0 12px;
	max-width: 560px;
	margin-left: auto; margin-right: auto;
}
.ux-paywall__title em {
	font-style: normal;
	background: linear-gradient(120deg, #F5F8FF 0%, #62E5FF 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

/* Sub */
.ux-paywall__sub {
	font-size: 14.5px;
	color: #C6D2E8;
	line-height: 1.6;
	max-width: 560px;
	margin: 0 auto 28px;
}
.ux-paywall__sub strong { color: #F5F8FF; font-weight: 600; }

/* Plans grid */
.ux-paywall__plans {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto 22px;
	text-align: left;
}
.ux-paywall__plan {
	position: relative;
	background: rgba(10,15,30,0.7);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px;
	padding: 18px 18px 16px;
	display: flex; flex-direction: column; gap: 10px;
	transition: transform 250ms cubic-bezier(0.2,0.7,0.2,1), border-color 250ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 250ms cubic-bezier(0.2,0.7,0.2,1);
}
.ux-paywall__plan:hover { transform: translateY(-2px); border-color: rgba(98,229,255,0.35); }

/* Plan featured */
.ux-paywall__plan--featured {
	background:
		radial-gradient(100% 60% at 50% 0%, rgba(1,77,253,0.22), transparent 60%),
		rgba(10,15,30,0.85);
	border-color: rgba(98,229,255,0.45);
	box-shadow: 0 14px 36px -12px rgba(1,77,253,0.5);
}
.ux-paywall__plan--featured:hover {
	border-color: #62E5FF;
	box-shadow: 0 20px 48px -12px rgba(1,77,253,0.65);
}

/* Badge */
.ux-paywall__plan-badge {
	position: absolute;
	top: -9px;
	left: 50%; transform: translateX(-50%);
	background: linear-gradient(135deg, #014DFD, #4A7EFF);
	color: #fff;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 18px -4px rgba(1,77,253,0.6);
}

.ux-paywall__plan-name {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 500;
	color: #62E5FF;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ux-paywall__plan-price {
	display: flex; align-items: baseline; gap: 6px;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	color: #F5F8FF;
}
.ux-paywall__plan-price-currency { font-size: 18px; font-weight: 600; color: #C6D2E8; }
.ux-paywall__plan-price-amount { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ux-paywall__plan-price-period { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: #8894B3; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 2px; }

/* Meta */
.ux-paywall__plan-meta {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 10px;
	background: rgba(34,211,154,0.08);
	border: 1px solid rgba(34,211,154,0.25);
	border-radius: 8px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	color: #22D39A;
	letter-spacing: 0.06em;
}
.ux-paywall__plan-meta--neutral {
	background: rgba(255,255,255,0.03);
	border-color: rgba(255,255,255,0.08);
	color: #8894B3;
}
.ux-paywall__plan-meta svg { flex-shrink: 0; }
.ux-paywall__plan-meta-strike { color: #566080; text-decoration: line-through; margin-left: auto; }

/* CTA */
.ux-paywall__plan-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	padding: 11px 14px;
	border-radius: 10px;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: -0.005em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	margin-top: auto;
	transition: all 250ms cubic-bezier(0.2,0.7,0.2,1);
}
.ux-paywall__plan-cta--primary,
.ux-paywall a.ux-paywall__plan-cta--primary {
	background: linear-gradient(135deg, #014DFD 0%, #4A7EFF 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 24px -6px rgba(1,77,253,0.55);
}
.ux-paywall__plan-cta--primary:hover,
.ux-paywall a.ux-paywall__plan-cta--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -6px rgba(1,77,253,0.7); color: #ffffff !important; }
.ux-paywall__plan-cta--primary svg { stroke: #ffffff !important; fill: none !important; }

.ux-paywall__plan-cta--ghost,
.ux-paywall a.ux-paywall__plan-cta--ghost {
	background: rgba(98,229,255,0.08) !important;
	color: #F5F8FF !important;
	border: 1px solid rgba(98,229,255,0.3) !important;
}
.ux-paywall__plan-cta--ghost:hover,
.ux-paywall a.ux-paywall__plan-cta--ghost:hover { background: rgba(98,229,255,0.15) !important; border-color: #62E5FF !important; color: #F5F8FF !important; }
.ux-paywall__plan-cta--ghost svg { stroke: #F5F8FF !important; fill: none !important; }

/* Compare link */
.ux-paywall__compare {
	margin-top: 8px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 18px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(98,229,255,0.2);
	border-radius: 999px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #C6D2E8;
	text-decoration: none;
	transition: all 250ms cubic-bezier(0.2,0.7,0.2,1);
}
.ux-paywall__compare:hover {
	background: rgba(98,229,255,0.08);
	border-color: rgba(98,229,255,0.45);
	color: #F5F8FF;
	transform: translateY(-1px);
}
.ux-paywall__compare svg { color: #62E5FF; transition: transform 250ms cubic-bezier(0.2,0.7,0.2,1); }
.ux-paywall__compare:hover svg { transform: translateX(3px); }

/* Login link */
.ux-paywall__login { margin-top: 14px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: #8894B3; }
.ux-paywall__login a { color: #62E5FF; font-weight: 500; text-decoration: none; }
.ux-paywall__login a:hover { color: #8CEEFF; }

/* Escape link · 10px más de separación del compare button (Jefferson 2026-05-20). */
.ux-paywall__escape { margin: 22px 0 0; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: #566080; text-align: center; }
.ux-paywall__escape a { display: inline-flex; align-items: center; gap: 5px; color: #8894B3; text-decoration: none; transition: color 250ms cubic-bezier(0.2,0.7,0.2,1); }
.ux-paywall__escape a:hover { color: #62E5FF; }
.ux-paywall__escape a svg { transition: transform 250ms cubic-bezier(0.2,0.7,0.2,1); }
.ux-paywall__escape a:hover svg { transform: translateX(-3px); }

/* Trust */
.ux-paywall__trust {
	display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
	padding: 10px 18px;
	margin-top: 20px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 999px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	color: #8894B3;
	letter-spacing: 0.08em;
}
.ux-paywall__trust-item { display: inline-flex; align-items: center; gap: 6px; }
.ux-paywall__trust-item svg { color: #22D39A; }

/* Modifier --wide: paywall del DSG embebido en page del dashboard que ya
   tiene su propio ancho contenido (no compite por ancho con un wrapper
   de tema). Permite que título y subtítulo usen todo el ancho disponible
   en lugar de los 560px nativos. Jefferson 2026-05-20. */
.ux-paywall--wide .ux-paywall__title,
.ux-paywall--wide .ux-paywall__sub {
	max-width: 100%;
}

/* Responsive */
@media (max-width: 560px) {
	.ux-paywall { padding: 36px 22px 30px; margin: 20px auto; border-radius: 20px; }
	.ux-paywall__lock { width: 56px; height: 56px; border-radius: 16px; }
	.ux-paywall__plans { grid-template-columns: 1fr; gap: 10px; }
	.ux-paywall__plan { padding: 18px 18px 16px; }
	.ux-paywall__plan-badge { font-size: 9px; padding: 3px 10px; }
	.ux-paywall__trust { font-size: 9.5px; gap: 12px; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ux-paywall *, .ux-paywall *::before, .ux-paywall *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}