/* Fragmento embebible en home (sin tocar html/body del sitio).
   En JOIN no se pinta la banda legal: el footer del sitio basta. */

.lp.lp--embed {
	--lp-ink: #141418;
	--lp-text: #e8e6f0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	margin: 0;
	padding: 2.25rem 1.5rem 1.5rem;
	box-sizing: border-box;
	border: 1px solid rgba(139, 123, 255, 0.14);
	border-radius: 22px;
	color: var(--lp-text);
	font-family: "Open Sans", Oxygen, Arial, sans-serif;
	background:
		radial-gradient(ellipse 50% 60% at 15% 20%, rgba(124, 58, 237, 0.16), transparent 60%),
		radial-gradient(ellipse 45% 50% at 90% 10%, rgba(254, 151, 28, 0.1), transparent 55%),
		linear-gradient(160deg, #1a1a22, #101014 70%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.lp.lp--embed .lp__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
}

.lp.lp--embed .logo {
	flex: 1 1 42%;
	width: auto;
	max-width: 28rem;
	aspect-ratio: 5 / 2;
	background: url(../images/furrylatino.png) no-repeat left center;
	background-size: contain;
}

.lp.lp--embed .invitation {
	flex: 1 1 50%;
	max-width: 34rem;
}

.lp.lp--embed .invitation hr {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 1.1rem 0;
}

.lp.lp--embed .invitation h2 {
	margin: 0;
	font-size: clamp(1.85rem, 3.2vw, 3.4rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.lp.lp--embed .invitation h3 {
	margin: 0.45rem 0 0;
	font-size: clamp(1.1rem, 1.8vw, 1.7rem);
	text-align: right;
	color: #fe971c;
}

.lp.lp--embed .invitation .floors {
	padding: 1.4rem 0 0;
}

.lp.lp--embed .invitation .floor {
	padding: 0.45rem 0;
}

.lp.lp--embed .invitation .floor.center {
	text-align: center;
}

.lp.lp--embed .invitation .floor a {
	text-decoration: none;
}

.lp.lp--embed .invitation .floor .button-selection {
	display: inline-block;
	width: 100%;
	max-width: 22rem;
	padding: 0.85rem 1rem;
	border-radius: 999px;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.18s ease;
}

.lp.lp--embed .invitation .floor .button-selection.signup {
	color: #f5f3ff;
	background: #4d4d98;
}

.lp.lp--embed .invitation .floor .button-selection.signup:hover {
	background: #6764a1;
	transform: translateY(-1px);
}

.lp.lp--embed .invitation .floor .button-selection.signin {
	color: #f5f3ff;
	background: #7c3aed;
}

.lp.lp--embed .invitation .floor .button-selection.signin:hover {
	background: #8b5cf6;
	transform: translateY(-1px);
}

@media (max-width: 900px) {
	.lp.lp--embed {
		padding: 1.6rem 1rem 1.15rem;
	}

	.lp.lp--embed .lp__main {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.lp.lp--embed .logo {
		width: 78%;
		max-width: 22rem;
		background-position: center center;
	}

	.lp.lp--embed .invitation {
		width: 100%;
		max-width: 28rem;
	}

	.lp.lp--embed .invitation h3 {
		text-align: center;
	}

	.lp.lp--embed .invitation .floor .button-selection {
		max-width: none;
	}
}