/* ------------------------------------------------------------- HOME ACTIONS */

.satse-home-actions {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 32px;
	box-sizing: border-box;
}

.satse-home-actions__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/* ------------------------------------------------------------- CARD */

.satse-home-card {
	--card-rgb: 0, 141, 115;

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	min-height: 280px;
	padding: 30px;
	overflow: hidden;

	color: #10211d;
	text-decoration: none !important;

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

	border: 1px solid rgba(var(--card-rgb), 0.32);
	border-radius: 22px;

	box-shadow:
		0 14px 40px rgba(13, 35, 29, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);

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

	transition:
		transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}

.satse-home-card::before {
	content: '';
	position: absolute;
	inset: 0;

	background: linear-gradient(
		135deg,
		rgba(var(--card-rgb), 0.35) 0%,
		rgba(var(--card-rgb), 0.1) 55%,
		transparent 100%
	);

	opacity: 0.9;

	transition: opacity 0.35s ease;

	pointer-events: none;
}

.satse-home-card::after {
	content: '';
	position: absolute;
	right: -70px;
	bottom: -90px;

	width: 210px;
	height: 210px;

	border: 1px solid rgba(var(--card-rgb), 0.3);
	border-radius: 50%;

	transform: scale(0.8);

	transition:
		transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
		opacity 0.35s ease;

	pointer-events: none;
}

/* ------------------------------------------------------------- GLOW */

.satse-home-card__glow {
	position: absolute;
	top: -80px;
	right: -80px;

	width: 220px;
	height: 220px;

	background: rgb(var(--card-rgb));
	border-radius: 50%;
	filter: blur(80px);

	opacity: 0.14;

	transition:
		opacity 0.4s ease,
		transform 0.5s ease;

	pointer-events: none;
}

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

.satse-home-card__top,
.satse-home-card__content {
	position: relative;
	z-index: 2;
}

.satse-home-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.satse-home-card__number {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;

	color: rgba(var(--card-rgb), 0.95);
}

.satse-home-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 54px;
	height: 54px;

	color: rgb(var(--card-rgb));

	background: rgba(var(--card-rgb), 0.14);
	border: 1px solid rgba(var(--card-rgb), 0.25);
	border-radius: 50%;

	transition:
		transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		background-color 0.35s ease,
		color 0.35s ease;
}

.satse-home-card__icon svg {
	width: 25px;
	height: 25px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.satse-home-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;

	margin-top: 55px;
}

.satse-home-card__title {
	max-width: 280px;

	font-size: clamp(22px, 1.6vw, 30px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.035em;

	color: inherit;
}

.satse-home-card__action {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;

	color: rgb(var(--card-rgb));
}

.satse-home-card__action svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform 0.3s ease;
}

/* ------------------------------------------------------------- COLORS */

.satse-home-card--questionnaire {
	--card-rgb: 0, 128, 2; /* #008002 */
}

.satse-home-card--posters {
	--card-rgb: 0, 105, 35; /* verde bosque */
}

.satse-home-card--videos {
	--card-rgb: 78, 139, 63; /* verde hoja */
}

.satse-home-card--satse {
	--card-rgb: 0, 87, 71; /* verde petróleo */
}

.satse-home-card--final {
	--card-rgb: 38, 122, 42; /* verde medio */
}

.satse-home-card--reflection {
	--card-rgb: 164, 148, 58; /* oliva complementario */
}

.satse-home-card--forums {
	--card-rgb: 52, 92, 78; /* verde grisáceo */
}

/* ------------------------------------------------------------- FORUM COLORS */

.satse-home-card--forum-general {
	--card-rgb: 0, 128, 2;
}

.satse-home-card--forum-videos {
	--card-rgb: 0, 87, 71;
}

.satse-home-card--forum-research {
	--card-rgb: 164, 148, 58;
}

/* ------------------------------------------------------------- FORUM GRID */

.satse-home-actions--forums .satse-home-card,
.satse-home-actions--forums .satse-home-card:first-child {
	grid-column: auto;
}

.satse-home-actions--forums
	.satse-home-card:first-child
	.satse-home-card__title {
	max-width: 280px;
	font-size: clamp(22px, 1.6vw, 30px);
}

/* ------------------------------------------------------------- BENTO */

.satse-home-card:first-child {
	grid-column: span 2;
}

.satse-home-card:first-child .satse-home-card__title {
	max-width: 520px;
	font-size: clamp(30px, 3vw, 46px);
}

/* ------------------------------------------------------------- HOVER */

@media (hover: hover) {
	.satse-home-card:hover {
		transform: translateY(-8px);
		color: rgba(var(--card-rgb), 1);

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

		border-color: rgba(var(--card-rgb), 0.6);

		box-shadow:
			0 28px 60px rgba(18, 40, 36, 0.16),
			0 8px 20px rgba(var(--card-rgb), 0.14);
	}

	.satse-home-card:hover::before {
		opacity: 1;
	}

	.satse-home-card:hover::after {
		transform: scale(1.15);
	}

	.satse-home-card:hover .satse-home-card__glow {
		opacity: 0.3;
		transform: scale(1.2);
	}

	.satse-home-card:hover .satse-home-card__icon {
		color: #fff;
		background: rgb(var(--card-rgb));
		transform: rotate(-5deg) scale(1.07);
	}

	.satse-home-card:hover .satse-home-card__action svg {
		transform: translateX(5px);
	}
}

/* ------------------------------------------------------------- ACCESSIBILITY */

.satse-home-card:focus-visible {
	outline: 3px solid rgba(var(--card-rgb), 0.4);
	outline-offset: 4px;
}

/* ------------------------------------------------------------- TABLET */

@media (max-width: 1024px) {
	.satse-home-actions {
		padding: 24px;
	}

	.satse-home-actions__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.satse-home-card {
		min-height: 245px;
		padding: 24px;
	}

	.satse-home-card:first-child {
		grid-column: span 2;
	}

	.satse-home-actions--forums .satse-home-card:first-child {
		grid-column: auto;
	}

	.satse-home-card__content {
		margin-top: 42px;
	}
}

/* ------------------------------------------------------------- MOBILE */

@media (max-width: 767px) {
	.satse-home-actions {
		padding: 14px;
	}

	.satse-home-actions__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.satse-home-card,
	.satse-home-card:first-child {
		grid-column: auto;

		min-height: 190px;
		padding: 20px;

		border-radius: 18px;
	}

	.satse-home-card__icon {
		width: 46px;
		height: 46px;
	}

	.satse-home-card__icon svg {
		width: 22px;
		height: 22px;
	}

	.satse-home-card__content {
		gap: 16px;
		margin-top: 34px;
	}

	.satse-home-card__title,
	.satse-home-card:first-child .satse-home-card__title {
		max-width: none;

		font-size: 24px;
		line-height: 1.1;
	}

	.satse-home-card__action {
		font-size: 11px;
	}
}

/* ------------------------------------------------------------- REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
	.satse-home-card,
	.satse-home-card::before,
	.satse-home-card::after,
	.satse-home-card__icon,
	.satse-home-card__glow,
	.satse-home-card__action svg {
		transition: none;
	}
}