/**
 * Cabecera de portada.
 *
 * @package ElEscorpion\Theme
 */

.esc-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 10vw, 6rem);
	background: var(--esc-background);
}

/* Diagonal sutil que da profundidad sin recurrir a degradados pesados. */
.esc-hero::before {
	content: "";
	position: absolute;
	inset: 40% -10% -30% -10%;
	background: var(--esc-surface);
	transform: rotate(-4deg);
	z-index: 0;
}

/* Filete rojo superior, marca de la casa. */
.esc-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 3px;
	background: var(--esc-primary);
	z-index: 1;
}

.esc-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--esc-space-sm);
	justify-items: start;
}

.esc-hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 11vw, 5.5rem);
	line-height: 0.98;
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.esc-hero__subtitle {
	margin: 0;
	max-width: 46ch;
	color: var(--esc-muted);
	font-size: clamp(1rem, 2.6vw, 1.375rem);
}

.esc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: var(--esc-space-sm);
}

/* En pantallas muy estrechas los botones ocupan todo el ancho. */
@media (max-width: 24rem) {

	.esc-hero__actions {
		width: 100%;
	}

	.esc-hero__actions .esc-button {
		flex: 1 1 100%;
	}
}