/**
 * Hero — full-bleed background, centered type, two CTAs.
 * Brand: Noche field, Mar primary CTA, Arena type.
 */

.loscabos-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36rem;
	min-height: 85svh;
	padding: 5rem 1.25rem;
	overflow: hidden;
	color: var(--loscabos-arena);
	text-align: center;
	background: var(--loscabos-noche);
}

.loscabos-hero__media,
.loscabos-hero__overlay,
.loscabos-hero__image {
	position: absolute;
	inset: 0;
}

.loscabos-hero__media {
	z-index: 0;
}

.loscabos-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loscabos-hero__overlay {
	z-index: 1;
	background: rgba(15, 15, 18, 0.58);
}

.loscabos-hero--placeholder .loscabos-hero__overlay {
	background:
		linear-gradient(180deg, rgba(15, 15, 18, 0.35), rgba(15, 15, 18, 0.78)),
		radial-gradient(120% 80% at 50% 30%, #2a2550 0%, var(--loscabos-noche) 72%);
}

/* Subtle frequency/wave gesture — low opacity, non-literal */
.loscabos-hero--placeholder .loscabos-hero__overlay::after {
	content: "";
	position: absolute;
	inset: auto 0 18% 0;
	height: 4.5rem;
	opacity: 0.18;
	background:
		radial-gradient(ellipse 40% 70% at 20% 50%, var(--loscabos-armonia) 0%, transparent 70%),
		radial-gradient(ellipse 35% 80% at 55% 50%, var(--loscabos-aprendizaje) 0%, transparent 70%),
		radial-gradient(ellipse 30% 60% at 85% 50%, var(--loscabos-mar) 0%, transparent 70%);
	pointer-events: none;
}

.loscabos-hero__inner {
	position: relative;
	z-index: 2;
	width: min(100%, 46rem);
}

.loscabos-hero__title {
	margin: 0 0 1.1rem;
	font-family: var(--suonum-font-display);
	font-size: clamp(2.15rem, 9vw, 3.35rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.loscabos-hero__accent {
	color: var(--loscabos-aprendizaje);
}

.loscabos-hero__text {
	margin: 0 0 1.75rem;
	font-family: var(--suonum-font-sans);
	font-size: clamp(0.95rem, 2.6vw, 1.15rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(247, 240, 222, 0.88);
}

.loscabos-hero__text-divider,
.loscabos-hero__text-en,
.loscabos-hero__btn-en {
	display: none;
}

.loscabos-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.loscabos-hero__btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 13.5rem;
	padding: 0.85rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--suonum-radius);
	font-family: var(--suonum-font-sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
}

.loscabos-hero__btn-en {
	margin-top: 0.15rem;
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	opacity: 0.9;
}

.loscabos-hero__btn--primary {
	background: var(--loscabos-mar);
	color: var(--loscabos-arena);
}

.loscabos-hero__btn--primary:hover,
.loscabos-hero__btn--primary:focus-visible {
	background: #4338d9;
	color: var(--loscabos-arena);
}

.loscabos-hero__btn--secondary {
	background: transparent;
	border-color: var(--loscabos-arena);
	color: var(--loscabos-arena);
}

.loscabos-hero__btn--secondary:hover,
.loscabos-hero__btn--secondary:focus-visible {
	background: rgba(247, 240, 222, 0.1);
	color: var(--loscabos-arena);
}

.loscabos-hero :focus-visible {
	outline: 3px solid var(--loscabos-aprendizaje);
	outline-offset: 3px;
}

@media (min-width: 48rem) {
	.loscabos-hero {
		min-height: 40rem;
		min-height: 88svh;
		padding: 6rem 2rem;
	}

	.loscabos-hero__inner {
		width: min(100%, 54rem);
	}

	.loscabos-hero__title {
		font-size: clamp(3rem, 5.4vw, 4.5rem);
	}

	.loscabos-hero__text-divider,
	.loscabos-hero__text-en,
	.loscabos-hero__btn-en {
		display: inline;
	}

	.loscabos-hero__btn-en {
		display: block;
	}

	.loscabos-hero__actions {
		flex-direction: row;
		justify-content: center;
		gap: 1rem;
	}

	.loscabos-hero__btn {
		min-width: 11.5rem;
		padding: 0.9rem 1.6rem;
	}
}