/**
 * Clases compartidas por los bloques de Legacy Custom.
 * Se encola una sola vez. Dentro de un bloque, preferir estas clases
 * antes que repetir tipografía, botones o anchos.
 */

.lc-container {
	width: 100%;
	max-width: var(--lc-container-max);
	margin-inline: auto;
	padding-inline: var(--lc-container-padding);
}

.lc-container--narrow {
	max-width: 720px;
}

.lc-bg-dark {
	background: var(--lc-gradient-brand);
	color: var(--lc-color-text-on-dark);
}

.lc-bg-alt {
	background-color: var(--lc-color-bg-alt);
}

.lc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--lc-font-heading);
	font-size: var(--lc-font-size-eyebrow);
	font-weight: 600;
	letter-spacing: var(--lc-letter-spacing-eyebrow);
	line-height: 1;
	text-transform: uppercase;
	color: var(--lc-color-accent);
}

.lc-bg-dark .lc-eyebrow {
	color: var(--lc-mist);
}

.lc-eyebrow::before {
	content: "";
	width: 10px;
	height: 10px;
	background: linear-gradient(
		118deg,
		transparent 42%,
		currentColor 42%,
		currentColor 58%,
		transparent 58%
	);
}

.lc-heading {
	margin: 0;
	font-family: var(--lc-font-heading);
	font-weight: 500;
	letter-spacing: var(--lc-letter-spacing-heading);
	line-height: var(--lc-line-height-heading);
	text-transform: uppercase;
	color: var(--lc-color-ink);
}

.lc-heading--on-dark {
	color: var(--lc-color-text-on-dark);
}

.lc-lead {
	margin: 0;
	max-width: 62ch;
	font-size: var(--lc-font-size-lg);
	line-height: var(--lc-line-height-body);
	color: var(--lc-color-text-muted);
}

.lc-bg-dark .lc-lead {
	color: var(--lc-color-text-on-dark-muted);
}

.lc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 20px;
	font-family: var(--lc-font-body);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--lc-radius-sm);
	cursor: pointer;
	transition: background-color var(--lc-transition), color var(--lc-transition), border-color var(--lc-transition);
}

.lc-btn--solid {
	background: var(--lc-color-primary);
	color: var(--lc-color-text-on-dark);
}

.lc-btn--solid:hover,
.lc-btn--solid:focus-visible {
	background: var(--lc-color-primary-hover);
	color: var(--lc-color-text-on-dark);
}

.lc-btn--steel {
	background: var(--lc-color-accent);
	color: var(--lc-color-text-on-dark);
}

.lc-btn--steel:hover,
.lc-btn--steel:focus-visible {
	background: var(--lc-color-ink);
	color: var(--lc-color-text-on-dark);
}

.lc-btn--ghost {
	background: transparent;
	color: var(--lc-color-primary);
	border-color: var(--lc-color-primary);
}

.lc-btn--ghost:hover,
.lc-btn--ghost:focus-visible {
	background: var(--lc-color-primary);
	color: var(--lc-color-text-on-dark);
}

.lc-btn--inverse {
	background: var(--lc-color-white);
	color: var(--lc-color-ink);
}

.lc-btn--inverse:hover,
.lc-btn--inverse:focus-visible {
	background: var(--lc-mist);
	color: var(--lc-color-ink);
}

.lc-rule {
	width: 64px;
	height: 2px;
	margin: 0;
	border: 0;
	background: var(--lc-color-primary);
}

.lc-media {
	margin: 0;
	overflow: hidden;
	background: var(--lc-color-bg-alt);
	border: 1px solid var(--lc-color-border);
	border-radius: var(--lc-radius-sm);
}

.lc-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}