/* Sistema de banners: horizontal, rectangular y sidebar. Misma base visual
   con proporciones distintas para no introducir "ruido" publicitario. */
.banner {
	margin-block: var(--space-8);
}

.banner__link {
	position: relative;
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-alt);
}

.banner__media img {
	width: 100%;
	object-fit: cover;
}

.banner__label {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: rgba(32, 37, 34, 0.55);
	color: #fff;
	padding: 2px 8px;
	border-radius: 999px;
}

.banner--horizontal .banner__media img {
	aspect-ratio: 16 / 3;
}

.banner--horizontal .banner__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2);
	padding-inline: var(--space-8);
	color: #fff;
	background: linear-gradient(90deg, rgba(32,37,34,0.55) 0%, rgba(32,37,34,0) 60%);
}

.banner--rectangular .banner__media img {
	aspect-ratio: 3 / 2;
}

.banner--rectangular .banner__content,
.banner--sidebar .banner__content {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.banner--sidebar .banner__media img {
	aspect-ratio: 2 / 3;
}

.banner__title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
}

.banner__text {
	font-size: var(--fs-sm);
	opacity: 0.9;
}

.banner__cta {
	align-self: flex-start;
	margin-top: var(--space-2);
}