/* Starforms — experiencia pública one-question */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap');

:root {
	--sf-c1: #0b3c5d;
	--sf-c2: #1d6fe8;
	--sf-cyan: #22d3ee;
	--sf-sky: #7dd3fc;
	--sf-bg0: #020812;
	--sf-bg1: #0a1220;
	--sf-card: rgba(15, 23, 42, 0.78);
	--sf-line: rgba(56, 189, 248, 0.18);
	--sf-text: #e8eef7;
	--sf-muted: #94a3b8;
	--sf-angle: 0deg;
}

@property --sf-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	min-height: 100%;
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	color: var(--sf-text);
	background: var(--sf-bg0, #020812);
}

/* —— Fondo estilo countdown Starnet —— */
.sf-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background: linear-gradient(165deg, var(--sf-bg0) 0%, color-mix(in srgb, var(--sf-bg0) 78%, var(--sf-c2)) 55%, var(--sf-bg0) 100%);
}

.sf-bg__aurora {
	position: absolute;
	inset: -20% -10% auto;
	height: 70%;
	background:
		radial-gradient(ellipse 55% 50% at 50% 0%, color-mix(in srgb, var(--sf-c2) 38%, transparent), transparent 70%),
		radial-gradient(ellipse 40% 45% at 18% 30%, rgba(34, 211, 238, 0.16), transparent 65%),
		radial-gradient(ellipse 35% 40% at 82% 25%, rgba(56, 189, 248, 0.14), transparent 60%);
	animation: sfAurora 12s ease-in-out infinite alternate;
}

.sf-bg__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(56, 189, 248, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(56, 189, 248, 0.06) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
	animation: sfGridDrift 28s linear infinite;
}

.sf-bg__scan {
	position: absolute;
	left: 0;
	right: 0;
	height: 28%;
	background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.07), transparent);
	animation: sfScan 7.5s ease-in-out infinite;
	opacity: 0.65;
}

/* Red de estrellas/vectores vive dentro del card del formulario */
.sf-card__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}

.sf-card > *:not(.sf-card__net) {
	position: relative;
	z-index: 1;
}

.sf-bg #sf-network { display: none; }

@keyframes sfAurora {
	from { transform: translateY(0) scale(1); }
	to { transform: translateY(3%) scale(1.04); }
}
@keyframes sfGridDrift {
	from { transform: translateY(0); }
	to { transform: translateY(48px); }
}
@keyframes sfScan {
	0% { top: -30%; opacity: 0; }
	15% { opacity: 0.7; }
	50% { opacity: 0.45; }
	100% { top: 110%; opacity: 0; }
}

.sf-shell {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 2rem);
}

/* Split Typeform-like: imagen | cuestionario */
.sf-shell--split {
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 100vh;
	place-items: stretch;
}

.sf-media-pane {
	position: relative;
	min-height: 42vh;
	overflow: hidden;
	background: #020812;
}

.sf-media-pane img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	min-height: 100%;
}

.sf-media-pane::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 55%, rgba(2, 8, 18, 0.35));
	pointer-events: none;
}

.sf-shell--split .sf-card {
	width: 100%;
	max-width: none;
	min-height: 100vh;
	border-radius: 0;
	border: 0;
	border-left: 1px solid var(--sf-line);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--sf-bg0) 55%, transparent);
}

.sf-card {
	width: min(640px, 100%);
	position: relative;
	z-index: 1;
	background: var(--sf-card);
	border: 1px solid var(--sf-line);
	border-radius: 28px;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	backdrop-filter: blur(18px);
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.sf-hero-banner {
	display: none; /* en split va en sf-media-pane */
}

.sf-q__media {
	display: none; /* en split se muestra en panel izquierdo */
}

.sf-shell:not(.sf-shell--split) .sf-q__media {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--sf-line);
	margin-bottom: 0.35rem;
	max-height: 220px;
}

.sf-shell:not(.sf-shell--split) .sf-q__media img {
	width: 100%;
	height: 100%;
	max-height: 220px;
	object-fit: cover;
	display: block;
}

.sf-shell:not(.sf-shell--split) .sf-hero-banner {
	display: block;
	margin: calc(-1 * clamp(1.4rem, 3vw, 2.2rem)) calc(-1 * clamp(1.4rem, 3vw, 2.2rem)) 1.15rem;
	height: clamp(140px, 28vw, 220px);
	overflow: hidden;
	border-bottom: 1px solid var(--sf-line);
}

.sf-shell:not(.sf-shell--split) .sf-hero-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sf-key {
	display: inline-grid;
	place-items: center;
	min-width: 1.55rem;
	height: 1.55rem;
	padding: 0 0.3rem;
	border-radius: 8px;
	border: 1px solid var(--sf-line);
	background: rgba(15, 23, 42, 0.85);
	font-family: Sora, system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--sf-sky);
	flex: 0 0 auto;
}

.sf-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin-bottom: 1.1rem;
}

.sf-brand img {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
}

.sf-brand span {
	font-family: Sora, system-ui, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sf-muted);
	font-weight: 600;
}

.sf-card h1 {
	font-family: Sora, system-ui, sans-serif;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	letter-spacing: -0.03em;
	text-align: center;
	margin: 0 0 0.55rem;
	line-height: 1.2;
}

.sf-lead {
	text-align: center;
	color: var(--sf-muted);
	line-height: 1.55;
	margin: 0 0 1.25rem;
	font-size: 0.98rem;
}

.sf-yt {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 16px;
	margin: 0 0 1.1rem;
	border: 1px solid var(--sf-line);
}

.sf-yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sf-progress {
	height: 4px;
	background: rgba(148, 163, 184, 0.15);
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 1.4rem;
}

.sf-progress > i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--sf-c1), var(--sf-c2), var(--sf-cyan));
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-steps { position: relative; min-height: 220px; z-index: 3; }

#sf-form { position: relative; z-index: 3; }

.sf-step {
	display: none;
	opacity: 0;
	transform: translateY(14px);
}

.sf-step.is-on {
	display: block;
	animation: sfIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sf-step:focus { outline: none; }

@keyframes sfIn {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.sf-q { display: grid; gap: 0.85rem; }

.sf-q__label {
	font-family: Sora, system-ui, sans-serif;
	font-size: clamp(1.15rem, 2.6vw, 1.45rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
}

.sf-q__hint {
	color: var(--sf-muted);
	font-size: 0.92rem;
	margin: 0;
	line-height: 1.45;
}

.sf-q__hint kbd,
.sf-continue kbd,
.sf-btn kbd {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.12rem 0.45rem;
	border-radius: 7px;
	border: 1px solid rgba(56, 189, 248, 0.35);
	background: rgba(15, 23, 42, 0.85);
	font-family: Sora, system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--sf-sky);
	letter-spacing: 0.02em;
}

.sf-continue {
	margin: 0.85rem 0 0;
	text-align: center;
	color: #cbd5e1;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

.sf-q input[type="text"],
.sf-q input[type="email"],
.sf-q input[type="tel"],
.sf-q input[type="number"],
.sf-q input[type="date"],
.sf-q input[type="time"],
.sf-q textarea,
.sf-q select {
	width: 100%;
	padding: 0.95rem 1rem;
	border-radius: 14px;
	border: 1px solid var(--sf-line);
	background: rgba(7, 11, 20, 0.65);
	color: var(--sf-text);
	font: inherit;
	font-size: 1.05rem;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	color-scheme: dark;
}

.sf-q input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.sf-q input[type="number"]::-webkit-outer-spin-button,
.sf-q input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sf-suggest { position: relative; z-index: 6; }
.sf-suggest__list {
	position: absolute;
	left: 0; right: 0;
	top: calc(100% + 6px);
	z-index: 40;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	border-radius: 12px;
	border: 1px solid var(--sf-line);
	background: color-mix(in srgb, var(--sf-bg0) 92%, #000);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	max-height: 220px;
	overflow: auto;
	display: none;
}
.sf-suggest__list.is-open { display: block; }
.sf-suggest__list[hidden] { display: none !important; }
.sf-suggest__list button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.65rem 0.75rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--sf-text);
	font: inherit;
	cursor: pointer;
}
.sf-suggest__list button:hover,
.sf-suggest__list button.is-active {
	background: color-mix(in srgb, var(--sf-c2) 28%, transparent);
}
.sf-skip { margin-top: 0.35rem; }

.sf-q input:focus,
.sf-q textarea:focus {
	border-color: color-mix(in srgb, var(--sf-c2) 70%, white);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-c2) 25%, transparent);
}

.sf-opts { display: grid; gap: 0.55rem; }

.sf-opt {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1rem;
	border-radius: 14px;
	border: 1px solid var(--sf-line);
	background: color-mix(in srgb, var(--sf-bg0) 35%, transparent);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
	font-weight: 500;
	position: relative;
}

.sf-opt:hover {
	border-color: color-mix(in srgb, var(--sf-c2) 55%, transparent);
	transform: translateY(-1px);
}

.sf-opt input[type="radio"],
.sf-opt input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
	clip: rect(0 0 0 0);
}

.sf-opt.is-on {
	border-color: #34d399;
	background: rgba(16, 185, 129, 0.18);
	box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 8px 24px rgba(16, 185, 129, 0.12);
}

.sf-opt.is-on .sf-key {
	background: #10b981;
	border-color: #6ee7b7;
	color: #022c22;
}

.sf-nav {
	display: flex;
	gap: 0.55rem;
	margin-top: 1.15rem;
	align-items: stretch;
}

/* Botón con luz perimetral */
.sf-btn {
	position: relative;
	isolation: isolate;
	flex: 1;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 1rem;
	border: 0;
	border-radius: 14px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	color: #fff;
	background: transparent;
	transition: transform 0.15s, filter 0.15s;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
}

.sf-btn::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: conic-gradient(
		from var(--sf-angle),
		transparent 0%,
		transparent 55%,
		var(--sf-cyan) 62%,
		#fff 68%,
		var(--sf-c2) 74%,
		transparent 82%
	);
	animation: sfPerimeter var(--sf-spin-dur, 2.8s) linear infinite;
	animation-delay: var(--sf-spin-delay, 0s);
	z-index: -2;
}

.sf-btn::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 12px;
	background: linear-gradient(120deg, var(--sf-c1), var(--sf-c2));
	z-index: -1;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.sf-btn-solid .sf-btn::after {
	background: var(--sf-c1);
}
body.sf-btn-solid .sf-btn--ghost::after {
	background: rgba(30, 41, 59, 0.95);
}

.sf-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sf-btn:disabled::before { animation: none; opacity: 0.35; }

@keyframes sfPerimeter {
	to { --sf-angle: 360deg; }
}

.sf-btn--ghost {
	color: var(--sf-text);
}
.sf-btn--ghost::before {
	opacity: 0.45;
	background: conic-gradient(
		from var(--sf-angle),
		transparent 0%,
		transparent 60%,
		rgba(148, 163, 184, 0.7) 70%,
		transparent 85%
	);
}
.sf-btn--ghost::after {
	background: rgba(30, 41, 59, 0.95);
	border: 1px solid var(--sf-line);
}

.sf-ok, .sf-err {
	padding: 1rem 1.1rem;
	border-radius: 14px;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.sf-ok {
	background: rgba(6, 78, 59, 0.45);
	border: 1px solid rgba(52, 211, 153, 0.35);
	color: #a7f3d0;
}

.sf-err {
	background: rgba(127, 29, 29, 0.4);
	border: 1px solid rgba(248, 113, 113, 0.35);
	color: #fecaca;
}

.sf-confirm-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	margin: 0.35rem 0 0.5rem;
	width: 100%;
}
.sf-wa,
.sf-cta2 {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	width: min(100%, 320px);
	margin: 0 auto;
	text-decoration: none;
	background: transparent !important;
}
.sf-wa::after { background: #16a34a !important; }
.sf-cta2::after {
	background: linear-gradient(120deg, var(--sf-c1), var(--sf-c2)) !important;
}
.sf-wa__icon,
.sf-cta2__icon {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
	display: block;
}

.sf-footer {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: var(--sf-muted);
	opacity: 0.85;
	position: relative;
	z-index: 0;
}

.sf-footer a {
	color: color-mix(in srgb, var(--sf-c2) 55%, #94a3b8);
	text-decoration: none;
	transition: color 0.15s, opacity 0.15s;
}

.sf-footer a:hover {
	color: #e2e8f0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sf-link {
	display: block;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	padding: 0.95rem 1rem;
	border-radius: 14px;
	margin: 0.5rem 0;
	text-align: center;
	font-weight: 700;
	background: transparent;
}
button.sf-link {
	width: 100%;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}
.sf-link__more {
	display: inline-block;
	margin-left: 0.35rem;
	opacity: 0.85;
	font-weight: 800;
}
.sf-lh-title {
	margin: 0.35rem 0 0.75rem;
	text-align: center;
	font-weight: 700;
	color: #e2e8f0;
}
.sf-lh-level[hidden] { display: none !important; }
.sf-link--back {
	font-weight: 600;
	opacity: 0.92;
}
.sf-link::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: conic-gradient(from var(--sf-angle), transparent 55%, var(--sf-cyan), #fff, var(--sf-c2), transparent 82%);
	animation: sfPerimeter var(--sf-spin-dur, 2.8s) linear infinite;
	animation-delay: var(--sf-spin-delay, 0s);
	z-index: -2;
}
.sf-link::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 12px;
	background: linear-gradient(120deg, var(--sf-c1), var(--sf-c2));
	z-index: -1;
}

.sf-slots { display: grid; gap: 0.75rem; }
.sf-days {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: thin;
}
.sf-day {
	flex: 0 0 auto;
	min-width: 72px;
	padding: 0.65rem 0.55rem;
	border-radius: 12px;
	border: 1px solid var(--sf-line);
	background: rgba(7, 11, 20, 0.5);
	color: var(--sf-text);
	cursor: pointer;
	text-align: center;
	font: inherit;
	font-size: 0.8rem;
	line-height: 1.25;
}
.sf-day strong { display: block; font-size: 1rem; font-family: Sora, sans-serif; }
.sf-day.is-on {
	border-color: #34d399;
	background: rgba(16, 185, 129, 0.14);
}
.sf-times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.45rem;
}
.sf-time {
	padding: 0.7rem 0.55rem;
	border-radius: 12px;
	border: 1px solid var(--sf-line);
	background: rgba(7, 11, 20, 0.5);
	color: var(--sf-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	text-align: center;
}
.sf-time small { display: block; color: var(--sf-muted); font-size: 0.72rem; margin-top: 0.15rem; }
.sf-time.is-on {
	border-color: #34d399;
	background: rgba(16, 185, 129, 0.18);
	box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35);
	font-weight: 700;
}
.sf-slots__empty { color: var(--sf-muted); font-size: 0.92rem; padding: 0.5rem 0; }

.sf-pair-note {
	margin: 0;
	padding: 0.7rem 0.85rem;
	border-radius: 12px;
	border: 1px solid rgba(251, 191, 36, 0.45);
	background: rgba(120, 53, 15, 0.35);
	color: #fde68a;
	font-size: 0.92rem;
	line-height: 1.45;
}

body.sf-light .sf-pair-note {
	background: rgba(254, 243, 199, 0.9);
	border-color: rgba(217, 119, 6, 0.4);
	color: #92400e;
}

body.sf-light {
	color: var(--sf-text);
}

body.sf-light .sf-q__label,
body.sf-light .sf-card h1,
body.sf-light .sf-brand span {
	color: var(--sf-text);
}

body.sf-light .sf-opt {
	background: rgba(255, 255, 255, 0.78);
	color: var(--sf-text);
}

body.sf-light .sf-footer a:hover {
	color: var(--sf-c1);
}

body.sf-light .sf-q input[type="text"],
body.sf-light .sf-q input[type="email"],
body.sf-light .sf-q input[type="tel"],
body.sf-light .sf-q input[type="number"],
body.sf-light .sf-q input[type="date"],
body.sf-light .sf-q input[type="time"],
body.sf-light .sf-q textarea,
body.sf-light .sf-q select {
	background: rgba(255, 255, 255, 0.88);
	color: var(--sf-text);
	color-scheme: light;
}

body.sf-light .sf-key,
body.sf-light .sf-q__hint kbd,
body.sf-light .sf-continue kbd,
body.sf-light .sf-btn kbd {
	background: rgba(255, 255, 255, 0.9);
	color: var(--sf-c1);
}

body.sf-light .sf-continue { color: var(--sf-muted); }

body.sf-light .sf-btn--ghost::after {
	background: rgba(255, 255, 255, 0.92);
}

body.sf-light .sf-ok {
	background: rgba(209, 250, 229, 0.85);
	color: #065f46;
}

body.sf-light .sf-err {
	background: rgba(254, 226, 226, 0.9);
	color: #991b1b;
}

body.sf-light .sf-footer a:hover { color: var(--sf-c1); }

body.sf-light .sf-suggest__list {
	background: rgba(255, 255, 255, 0.96);
}

.sf-habeas { display: grid; gap: 0.75rem; }
.sf-habeas__box {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	border: 1px solid var(--sf-line);
	background: color-mix(in srgb, var(--sf-bg0) 40%, transparent);
	font-size: 0.88rem;
	line-height: 1.5;
	max-height: 180px;
	overflow: auto;
}
.sf-habeas__accept {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.92rem;
	font-weight: 600;
}
.sf-habeas__accept input { margin-top: 0.2rem; accent-color: var(--sf-c1); }
.sf-sig-pad {
	width: 100%;
	height: 180px;
	border-radius: 12px;
	border: 1px dashed var(--sf-line);
	background: rgba(255,255,255,0.06);
	touch-action: none;
	cursor: crosshair;
}
body.sf-light .sf-habeas__box { background: rgba(255,255,255,0.86); }
body.sf-light .sf-sig-pad { background: #fff; border-color: rgba(15,23,42,0.2); }

@media (max-width: 900px) {
	.sf-shell--split {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(180px, 32vh) auto;
	}
	.sf-media-pane { min-height: 180px; max-height: 32vh; }
	.sf-media-pane::after {
		background: linear-gradient(180deg, transparent 40%, rgba(2, 8, 18, 0.55));
	}
	.sf-shell--split .sf-card {
		min-height: auto;
		border-left: 0;
		border-radius: 24px 24px 0 0;
		margin-top: -1rem;
		padding-bottom: 2rem;
	}
}

@media (max-width: 520px) {
	.sf-nav { flex-direction: column-reverse; }
	.sf-times { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-bg__aurora,
	.sf-bg__grid,
	.sf-bg__scan,
	.sf-btn::before,
	.sf-link::before { animation: none; }
	.sf-step.is-on { animation: none; opacity: 1; transform: none; }
}