/* ==========================================================================
   SSI COURSE DETAIL SYSTEM
   ========================================================================== */

.ssi-course-detail {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	color: #0b1f3a;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.ssi-course-detail__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 700px;

	display: flex;
	align-items: center;

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#fbfdff 42%,
			#f2f7ff 100%
		);
}

.ssi-course-detail__hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}

.ssi-course-detail__hero-bg::before {
	content: "";

	position: absolute;
	inset: -30%;

	background:
		radial-gradient(
			ellipse 45% 60% at 8% 40%,
			rgba(245,190,74,0.18),
			transparent 70%
		),
		radial-gradient(
			ellipse 62% 70% at 78% 30%,
			rgba(59,130,246,0.24),
			transparent 70%
		),
		radial-gradient(
			ellipse 50% 48% at 65% 80%,
			rgba(96,105,214,0.13),
			transparent 72%
		);

	animation:
		ssiCourseAurora
		20s
		ease-in-out
		infinite alternate;
}

.ssi-course-detail__hero-bg::after {
	content: "";

	position: absolute;

	width: 850px;
	height: 850px;

	left: 72%;
	top: 50%;

	transform:
		translate(-50%,-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(255,255,255,0.95) 0%,
			rgba(221,235,255,0.58) 32%,
			rgba(179,208,255,0.18) 56%,
			transparent 74%
		);

	filter: blur(18px);

	animation:
		ssiCourseGlow
		9s
		ease-in-out
		infinite alternate;
}

.ssi-course-detail__grid {
	position: absolute;
	inset: 0;

	opacity: 0.24;

	background-image:
		linear-gradient(
			rgba(15,23,42,0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(15,23,42,0.035) 1px,
			transparent 1px
		);

	background-size: 48px 48px;

	mask-image:
		linear-gradient(
			to bottom,
			black,
			transparent 92%
		);
}

.ssi-course-detail__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(24px);
	pointer-events: none;
}

.ssi-course-detail__glow--one {
	width: 480px;
	height: 480px;

	left: -220px;
	bottom: -250px;

	background:
		radial-gradient(
			circle,
			rgba(245,190,74,0.16),
			transparent 72%
		);

	animation:
		ssiCourseGoldFloat
		12s
		ease-in-out
		infinite alternate;
}

.ssi-course-detail__glow--two {
	width: 520px;
	height: 520px;

	right: -260px;
	top: -250px;

	background:
		radial-gradient(
			circle,
			rgba(59,130,246,0.16),
			transparent 72%
		);

	animation:
		ssiCourseBlueFloat
		14s
		ease-in-out
		infinite alternate;
}

.ssi-course-detail__hero-container {
	position: relative;

	width: min(
		100%,
		1200px
	);

	margin: 0 auto;

	padding:
		95px
		24px
		100px;

	display:
		grid;

	grid-template-columns:
		minmax(0,1fr)
		minmax(420px,0.9fr);

	gap: 55px;

	align-items: center;
}

.ssi-course-detail__hero-content {
	max-width: 720px;
}

.ssi-course-detail__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 22px;

	color: #2457d6;

	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ssi-course-detail__eyebrow > span {
	width: 30px;
	height: 30px;

	display: grid;
	place-items: center;

	border-radius: 10px;

	background: #0b1f3a;
	color: #f4c766;

	font-size: 0.57rem;
}

.ssi-course-detail__hero-content h1 {
	margin: 0 0 24px;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		clamp(
			3.3rem,
			6vw,
			5.7rem
		);

	font-weight: 800;
	line-height: 0.99;
	letter-spacing: -0.068em;

	color: #0b1f3a;
}

.ssi-course-detail__hero-content p {
	max-width: 690px;

	margin: 0 0 24px;

	color: #6f8097;

	font-size: 0.92rem;
	line-height: 1.85;
}

.ssi-course-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	margin-bottom: 28px;
}

.ssi-course-detail__tags span {
	display: inline-flex;
	align-items: center;

	min-height: 30px;

	padding: 0 11px;

	border: 1px solid #dbe4ef;
	border-radius: 999px;

	background: rgba(255,255,255,0.72);

	color: #6f7f93;

	font-size: 0.56rem;
	font-weight: 800;
}

.ssi-course-detail__actions,
.ssi-course-detail__cta-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.ssi-course-detail__primary,
.ssi-course-detail__whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 52px;

	padding: 0 22px;

	border-radius: 999px;

	background: #f0b83f;
	color: #0b1f3a;

	font-size: 0.72rem;
	font-weight: 800;

	box-shadow:
		0 12px 30px
		rgba(220,162,56,0.18);

	transition:
		transform 250ms ease,
		background-color 250ms ease,
		box-shadow 250ms ease;
}

.ssi-course-detail__primary:hover,
.ssi-course-detail__whatsapp:hover {
	transform: translateY(-2px);

	background: #f6c95f;

	box-shadow:
		0 16px 34px
		rgba(220,162,56,0.24);
}

.ssi-course-detail__secondary {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	color: #0b1f3a;

	font-size: 0.72rem;
	font-weight: 800;

	transition:
		transform 220ms ease,
		color 220ms ease;
}

.ssi-course-detail__secondary:hover {
	transform: translateX(4px);
	color: #2457d6;
}


/* ==========================================================================
   HERO VISUAL
   ========================================================================== */

.ssi-course-detail__visual {
	position: relative;

	min-height: 500px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.ssi-course-detail__orbit {
	position: relative;

	width: min(
		100%,
		500px
	);

	aspect-ratio: 1;

	display: flex;
	align-items: center;
	justify-content: center;
}

.ssi-course-detail__orbit::before {
	content: "";

	position: absolute;
	inset: 10%;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(255,255,255,0.94),
			rgba(220,234,255,0.35),
			transparent 72%
		);

	filter: blur(8px);
}

.ssi-course-detail__orbit-ring {
	position: absolute;

	border:
		1px solid
		rgba(59,130,246,0.17);

	border-radius: 50%;

	animation:
		ssiCourseOrbit
		22s
		linear
		infinite;
}

.ssi-course-detail__orbit-ring--one {
	inset: 4%;
}

.ssi-course-detail__orbit-ring--two {
	inset: 15%;

	border-color:
		rgba(220,162,56,0.15);

	animation-direction: reverse;
	animation-duration: 18s;
}

.ssi-course-detail__orbit-ring--three {
	inset: 26%;

	border-color:
		rgba(59,130,246,0.12);

	animation-duration: 14s;
}

.ssi-course-detail__core {
	position: relative;
	z-index: 4;

	width: 190px;
	height: 190px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#edf3fc
		);

	box-shadow:
		0 25px 55px
		rgba(15,23,42,0.10),
		0 0 0 11px
		rgba(255,255,255,0.55);

	animation:
		ssiCourseCoreFloat
		6s
		ease-in-out
		infinite alternate;
}

.ssi-course-detail__core-icon {
	width: 72px;
	height: 72px;

	display: grid;
	place-items: center;

	margin-bottom: 10px;

	border: 1px solid #dbe5f1;
	border-radius: 18px;

	background: #f2f6fc;

	color: #2457d6;

	font-family:
		"Manrope",
		sans-serif;

	font-size: 1.35rem;
	font-weight: 800;
}

.ssi-course-detail__core strong {
	color: #0b1f3a;

	font-family:
		"Manrope",
		sans-serif;

	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.07em;
}

.ssi-course-detail__core > span {
	margin-top: 5px;

	color: #8492a6;

	font-size: 0.5rem;
	font-weight: 700;

	text-align: center;
}

.ssi-course-detail__point {
	position: absolute;
	z-index: 6;

	display: flex;
	align-items: center;
	gap: 9px;

	min-width: 180px;

	padding: 13px 14px;

	border:
		1px solid
		rgba(255,255,255,0.76);

	border-radius: 16px;

	background:
		rgba(255,255,255,0.87);

	box-shadow:
		0 16px 35px
		rgba(15,23,42,0.08);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	animation:
		ssiCoursePointFloat
		5.8s
		ease-in-out
		infinite alternate;
}

.ssi-course-detail__point > span {
	width: 32px;
	height: 32px;

	display: grid;
	place-items: center;

	border-radius: 10px;

	background: #edf3ff;
	color: #2457d6;

	font-size: 0.56rem;
	font-weight: 800;
}

.ssi-course-detail__point strong {
	color: #0b1f3a;

	font-size: 0.62rem;
	font-weight: 800;
}

.ssi-course-detail__point--one {
	top: 10%;
	right: -2%;
}

.ssi-course-detail__point--two {
	right: -4%;
	bottom: 25%;

	animation-delay: -1.7s;
}

.ssi-course-detail__point--three {
	left: -2%;
	bottom: 14%;

	animation-delay: -3.4s;
}


/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */

.ssi-course-detail__details,
.ssi-course-detail__focus,
.ssi-course-detail__targets {
	padding: 120px 0;
}

.ssi-course-detail__details {
	background: #ffffff;
}

.ssi-course-detail__focus {
	background: #f7f9fc;
}

.ssi-course-detail__section-heading {
	display: grid;

	grid-template-columns:
		minmax(0,1fr)
		minmax(300px,0.66fr);

	gap: 70px;

	align-items: end;

	margin-bottom: 55px;
}

.ssi-course-detail__section-heading h2,
.ssi-course-detail__targets h2,
.ssi-course-detail__cta-content h2 {
	margin:
		12px
		0
		0;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		clamp(
			2.5rem,
			4vw,
			4rem
		);

	font-weight: 800;
	line-height: 1.03;

	letter-spacing: -0.055em;

	color: #0b1f3a;
}

.ssi-course-detail__section-heading h2 span,
.ssi-course-detail__targets h2 span,
.ssi-course-detail__cta-content h2 span {
	background:
		linear-gradient(
			135deg,
			#2457d6,
			#a38c78,
			#dca238
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.ssi-course-detail__section-heading > p,
.ssi-course-detail__targets p {
	margin: 0;

	max-width: 500px;

	color: #75849a;

	font-size: 0.84rem;
	line-height: 1.82;
}


/* ==========================================================================
   BENEFIT CARDS
   ========================================================================== */

.ssi-course-detail__benefits {
	display: grid;

	grid-template-columns:
		repeat(
			4,
			minmax(0,1fr)
		);

	gap: 12px;
}

.ssi-course-detail__benefit-card {
	position: relative;
	overflow: hidden;

	min-height: 325px;

	padding: 25px;

	border:
		1px solid
		#dfe7f0;

	border-radius: 23px;

	background: #ffffff;

	box-shadow:
		0 12px 30px
		rgba(15,23,42,0.025);

	color: #0b1f3a;

	transition:
		transform 350ms ease,
		box-shadow 350ms ease,
		border-color 350ms ease,
		background-color 350ms ease;
}

.ssi-course-detail__benefit-card::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	height: 4px;

	background:
		linear-gradient(
			90deg,
			#2457d6,
			#dca238
		);

	transform:
		scaleX(0);

	transform-origin:
		left center;

	transition:
		transform 350ms ease;
}

.ssi-course-detail__benefit-card:hover {
	transform:
		translateY(-8px);

	border-color:
		transparent;

	background:
		linear-gradient(
			145deg,
			#0b1f3a,
			#163c68
		);

	box-shadow:
		0 26px 55px
		rgba(11,31,58,0.18);

	color: #ffffff;
}

.ssi-course-detail__benefit-card:hover::after {
	transform: scaleX(1);
}

.ssi-course-detail__benefit-card > span {
	color: #a1adbb;

	font-size: 0.59rem;
	font-weight: 800;

	transition:
		color 300ms ease;
}

.ssi-course-detail__benefit-card:hover > span {
	color:
		rgba(255,255,255,0.42);
}

.ssi-course-detail__benefit-icon {
	width: 48px;
	height: 48px;

	display: grid;
	place-items: center;

	margin:
		35px 0 20px;

	border:
		1px solid
		#d8e3f2;

	border-radius: 13px;

	background: #eef4ff;

	color: #2457d6;

	font-size: 0.72rem;
	font-weight: 800;

	transition:
		background-color 300ms ease,
		border-color 300ms ease,
		color 300ms ease,
		transform 300ms ease;
}

.ssi-course-detail__benefit-card:hover
.ssi-course-detail__benefit-icon {
	border-color:
		rgba(244,199,102,0.16);

	background:
		rgba(255,255,255,0.08);

	color: #f4c766;

	transform:
		translateY(-2px);
}

.ssi-course-detail__benefit-card h3 {
	margin: 0 0 11px;

	color: #0b1f3a;

	font-family:
		"Manrope",
		sans-serif;

	font-size: 0.95rem;
	font-weight: 800;

	transition:
		color 300ms ease;
}

.ssi-course-detail__benefit-card:hover h3 {
	color: #ffffff;
}

.ssi-course-detail__benefit-card p {
	margin: 0;

	color: #7a889b;

	font-size: 0.65rem;
	line-height: 1.75;

	transition:
		color 300ms ease;
}

.ssi-course-detail__benefit-card:hover p {
	color:
		rgba(255,255,255,0.60);
}


/* ==========================================================================
   SUBJECT / FOCUS CARDS — IMAGE FIRST
   ========================================================================== */

.ssi-course-detail__focus-grid {
	display: grid;

	grid-template-columns:
		repeat(
			4,
			minmax(0,1fr)
		);

	gap: 14px;
}

.ssi-course-detail__focus-card {
	position: relative;
	overflow: hidden;

	min-height: 355px;

	display: flex;
	flex-direction: column;

	border:
		1px solid
		#dfe7f0;

	border-radius: 24px;

	background: #ffffff;

	box-shadow:
		0 10px 28px
		rgba(15,23,42,0.025);

	transition:
		transform 380ms cubic-bezier(.22,.61,.36,1),
		box-shadow 380ms ease,
		border-color 380ms ease;
}

.ssi-course-detail__focus-card:hover {
	transform:
		translateY(-9px);

	border-color:
		transparent;

	box-shadow:
		0 28px 55px
		rgba(11,31,58,0.16);
}


/* --------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */

.ssi-course-detail__focus-media {
	position: relative;

	height: 210px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			#edf3ff,
			#f7f9fc
		);
}

.ssi-course-detail__focus-media img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform:
		scale(1);

	transition:
		transform 700ms cubic-bezier(.22,.61,.36,1),
		filter 500ms ease;
}

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-media img {
	transform:
		scale(1.09);

	filter:
		saturate(1.08)
		contrast(1.03);
}


/* --------------------------------------------------------------------------
   OVERLAY
   -------------------------------------------------------------------------- */

.ssi-course-detail__focus-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(5,18,35,0.78) 0%,
			rgba(5,18,35,0.22) 44%,
			rgba(5,18,35,0.00) 100%
		);

	opacity: 0;

	transition:
		opacity 450ms ease;
}

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-overlay {
	opacity: 1;
}


/* --------------------------------------------------------------------------
   FALLBACK ICON
   -------------------------------------------------------------------------- */

.ssi-course-detail__focus-fallback {
	width: 100%;
	height: 100%;

	display: grid;
	place-items: center;

	background:
		radial-gradient(
			circle at 50% 40%,
			rgba(59,130,246,0.15),
			transparent 58%
		),
		linear-gradient(
			145deg,
			#eef4ff,
			#f9fbff
		);
}

.ssi-course-detail__focus-fallback span {
	width: 78px;
	height: 78px;

	display: grid;
	place-items: center;

	border:
		1px solid
		#dbe6f5;

	border-radius: 22px;

	background:
		rgba(255,255,255,0.78);

	color:
		#2457d6;

	font-family:
		"Manrope",
		sans-serif;

	font-size: 1.35rem;
	font-weight: 800;

	box-shadow:
		0 16px 35px
		rgba(36,87,214,0.08);

	transition:
		transform 450ms ease,
		background-color 450ms ease,
		color 450ms ease;
}

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-fallback span {
	transform:
		scale(1.08)
		rotate(3deg);

	background:
		#0b1f3a;

	color:
		#f4c766;
}


/* --------------------------------------------------------------------------
   CONTENT
   -------------------------------------------------------------------------- */

.ssi-course-detail__focus-content {
	position: relative;

	flex: 1;

	padding:
		18px
		20px
		21px;
}

.ssi-course-detail__focus-number {
	display: block;

	margin-bottom:
		8px;

	color:
		#a2afbd;

	font-size:
		0.56rem;

	font-weight:
		800;

	transition:
		color 300ms ease;
}

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-number {
	color:
		#f4c766;
}

.ssi-course-detail__focus-content h3 {
	margin:
		0 0 8px;

	color:
		#0b1f3a;

	font-family:
		"Manrope",
		sans-serif;

	font-size:
		1.02rem;

	font-weight:
		800;

	letter-spacing:
		-0.028em;

	transition:
		color 300ms ease;
}

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-content h3 {
	color:
		#ffffff;
}

.ssi-course-detail__focus-content p {
	max-width: 95%;

	margin: 0;

	color:
		#75849a;

	font-size:
		0.62rem;

	line-height:
		1.65;

	transition:
		color 300ms ease;
}

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-content p {
	color:
		rgba(255,255,255,0.62);
}


/* --------------------------------------------------------------------------
   ARROW
   -------------------------------------------------------------------------- */

.ssi-course-detail__focus-arrow {
	position: absolute;

	right: 18px;
	bottom: 17px;

	width: 36px;
	height: 36px;

	display: grid;
	place-items: center;

	border:
		1px solid
		#dbe5ef;

	border-radius:
		50%;

	background:
		#ffffff;

	color:
		#2457d6;

	font-size:
		0.68rem;

	transition:
		transform 350ms ease,
		background-color 350ms ease,
		border-color 350ms ease,
		color 350ms ease;
}

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-arrow {
	transform:
		translate(2px,-2px)
		rotate(7deg);

	border-color:
		#f0b83f;

	background:
		#f0b83f;

	color:
		#0b1f3a;
}


/* ==========================================================================
   TARGETS
   ========================================================================== */

.ssi-course-detail__targets {
	background:
		#ffffff;
}

.ssi-course-detail__targets-layout {
	display: grid;

	grid-template-columns:
		minmax(0,1fr)
		minmax(320px,0.72fr);

	gap:
		75px;

	align-items:
		center;
}

.ssi-course-detail__targets-list {
	display:
		grid;

	gap:
		10px;
}

.ssi-course-detail__targets-list > div {
	position: relative;
	overflow: hidden;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	min-height:
		68px;

	padding:
		0 18px;

	border:
		1px solid
		#dfe7f0;

	border-radius:
		15px;

	background:
		#fbfdff;

	transition:
		transform 300ms ease,
		background-color 300ms ease,
		border-color 300ms ease,
		box-shadow 300ms ease,
		color 300ms ease;
}

.ssi-course-detail__targets-list > div::after {
	content:
		"";

	position:
		absolute;

	left: 0;
	top: 0;
	bottom: 0;

	width: 3px;

	background:
		linear-gradient(
			to bottom,
			#2457d6,
			#dca238
		);

	transform:
		scaleY(0);

	transform-origin:
		center;

	transition:
		transform 300ms ease;
}

.ssi-course-detail__targets-list > div:hover {
	transform:
		translateX(6px);

	border-color:
		transparent;

	background:
		linear-gradient(
			145deg,
			#0b1f3a,
			#163c68
		);

	box-shadow:
		0 18px 35px
		rgba(11,31,58,0.14);
}

.ssi-course-detail__targets-list > div:hover::after {
	transform:
		scaleY(1);
}

.ssi-course-detail__targets-list span {
	position: relative;
	z-index: 2;

	color:
		#2457d6;

	font-size:
		0.57rem;

	font-weight:
		800;

	transition:
		color 300ms ease;
}

.ssi-course-detail__targets-list strong {
	position: relative;
	z-index: 2;

	color:
		#32435a;

	font-size:
		0.65rem;

	font-weight:
		700;

	transition:
		color 300ms ease;
}

.ssi-course-detail__targets-list > div:hover span {
	color:
		#f4c766;
}

.ssi-course-detail__targets-list > div:hover strong {
	color:
		#ffffff;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.ssi-course-detail__cta {
	position:
		relative;

	overflow:
		hidden;

	padding:
		110px 0;

	background:
		linear-gradient(
			145deg,
			#07172b,
			#103152
		);

	color:
		#ffffff;
}

.ssi-course-detail__cta-bg {
	position:
		absolute;

	inset:
		0;

	pointer-events:
		none;
}

.ssi-course-detail__cta-bg::before {
	content:
		"";

	position:
		absolute;

	inset:
		0;

	background-image:
		linear-gradient(
			rgba(255,255,255,0.032) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255,255,255,0.032) 1px,
			transparent 1px
		);

	background-size:
		50px 50px;
}

.ssi-course-detail__cta-orb {
	position:
		absolute;

	width:
		620px;

	height:
		620px;

	right:
		-250px;

	top:
		-280px;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(59,130,246,0.19),
			transparent 72%
		);

	filter:
		blur(22px);
}

.ssi-course-detail__cta-content {
	position:
		relative;

	z-index:
		2;

	max-width:
		850px;

	margin:
		0 auto;

	text-align:
		center;
}

.ssi-course-detail__cta-content .ssi-eyebrow {
	color:
		#f4c766;
}

.ssi-course-detail__cta-content h2 {
	color:
		#ffffff;
}

.ssi-course-detail__cta-content p {
	max-width:
		650px;

	margin:
		20px auto 30px;

	color:
		rgba(255,255,255,0.57);

	font-size:
		0.82rem;

	line-height:
		1.8;
}

.ssi-course-detail__cta-actions {
	justify-content:
		center;
}

.ssi-course-detail__whatsapp {
	background:
		rgba(255,255,255,0.07);

	border:
		1px solid
		rgba(255,255,255,0.16);

	color:
		#ffffff;

	box-shadow:
		none;
}

.ssi-course-detail__whatsapp:hover {
	background:
		rgba(255,255,255,0.11);

	color:
		#ffffff;
}


/* ==========================================================================
   ERROR
   ========================================================================== */

.ssi-course-detail-error {
	min-height:
		60vh;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	text-align:
		center;
}

.ssi-course-detail-error h1 {
	margin:
		0 0 10px;

	font-family:
		"Manrope",
		sans-serif;
}

.ssi-course-detail-error p {
	margin:
		0 0 20px;

	color:
		#75849a;
}

.ssi-course-detail-error a {
	color:
		#2457d6;

	font-weight:
		800;
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes ssiCourseAurora {

	from {
		transform:
			translate3d(
				-1%,
				-0.5%,
				0
			)
			scale(1.015);
	}

	to {
		transform:
			translate3d(
				1.2%,
				1.4%,
				0
			)
			scale(1.045);
	}
}

@keyframes ssiCourseGlow {

	from {
		transform:
			translate(-50%,-50%)
			scale(0.94);

		opacity: 0.68;
	}

	to {
		transform:
			translate(-50%,-50%)
			scale(1.07);

		opacity: 0.98;
	}
}

@keyframes ssiCourseGoldFloat {

	from {
		transform:
			translate3d(
				0,
				0,
				0
			)
			scale(0.95);
	}

	to {
		transform:
			translate3d(
				45px,
				-28px,
				0
			)
			scale(1.08);
	}
}

@keyframes ssiCourseBlueFloat {

	from {
		transform:
			translate3d(
				0,
				0,
				0
			)
			scale(0.95);
	}

	to {
		transform:
			translate3d(
				-45px,
				34px,
				0
			)
			scale(1.08);
	}
}

@keyframes ssiCourseOrbit {

	from {
		transform:
			rotate(0deg);
	}

	to {
		transform:
			rotate(360deg);
	}
}

@keyframes ssiCourseCoreFloat {

	from {
		transform:
			translateY(-4px);
	}

	to {
		transform:
			translateY(5px);
	}
}

@keyframes ssiCoursePointFloat {

	from {
		transform:
			translateY(-3px);
	}

	to {
		transform:
			translateY(5px);
	}
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1050px) {

	.ssi-course-detail__hero-container {
		grid-template-columns:
			1fr
			0.9fr;
	}

	.ssi-course-detail__benefits,
	.ssi-course-detail__focus-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0,1fr)
			);
	}
}


@media (max-width: 850px) {

	.ssi-course-detail__hero-container {
		grid-template-columns:
			1fr;

		padding:
			78px
			24px
			92px;
	}

	.ssi-course-detail__visual {
		min-height:
			450px;
	}

	.ssi-course-detail__section-heading {
		grid-template-columns:
			1fr;

		gap:
			24px;
	}

	.ssi-course-detail__targets-layout {
		grid-template-columns:
			1fr;

		gap:
			40px;
	}
}


@media (max-width: 600px) {

	.ssi-course-detail__hero-container {
		padding:
			58px
			18px
			70px;
	}

	.ssi-course-detail__hero-content h1 {
		font-size:
			clamp(
				2.75rem,
				12.5vw,
				4rem
			);
	}

	.ssi-course-detail__hero-content p {
		font-size:
			0.81rem;
	}

	.ssi-course-detail__visual {
		min-height:
			385px;
	}

	.ssi-course-detail__orbit {
		max-width:
			390px;
	}

	.ssi-course-detail__core {
		width:
			145px;

		height:
			145px;
	}

	.ssi-course-detail__core-icon {
		width:
			54px;

		height:
			54px;

		font-size:
			1rem;
	}

	.ssi-course-detail__core strong {
		font-size:
			0.85rem;
	}

	.ssi-course-detail__core > span {
		font-size:
			0.44rem;
	}

	.ssi-course-detail__point {
		min-width:
			130px;

		padding:
			9px;
	}

	.ssi-course-detail__point > span {
		width:
			28px;

		height:
			28px;
	}

	.ssi-course-detail__point strong {
		font-size:
			0.53rem;
	}

	.ssi-course-detail__point--one {
		right:
			-3%;
	}

	.ssi-course-detail__point--two {
		right:
			-2%;
	}

	.ssi-course-detail__point--three {
		left:
			-3%;
	}

	.ssi-course-detail__details,
	.ssi-course-detail__focus,
	.ssi-course-detail__targets {
		padding:
			82px
			0;
	}

	.ssi-course-detail__section-heading h2,
	.ssi-course-detail__targets h2,
	.ssi-course-detail__cta-content h2 {
		font-size:
			2.4rem;
	}

	.ssi-course-detail__benefits,
	.ssi-course-detail__focus-grid {
		grid-template-columns:
			1fr;
	}

	.ssi-course-detail__benefit-card {
		min-height:
			285px;
	}

	.ssi-course-detail__focus-card {
		min-height:
			320px;
	}

	.ssi-course-detail__focus-media {
		height:
			190px;
	}

	.ssi-course-detail__cta {
		padding:
			82px
			0;
	}
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ssi-course-detail__hero-bg::before,
	.ssi-course-detail__hero-bg::after,
	.ssi-course-detail__glow,
	.ssi-course-detail__orbit-ring,
	.ssi-course-detail__core,
	.ssi-course-detail__point,
	.ssi-course-detail__focus-card,
	.ssi-course-detail__targets-list > div {
		animation:
			none !important;
	}
}