/**
 * Componente: Hero Split (portada 2 columnas)
 * Composición media: círculo → banda vertical → vídeo (como el slider original).
 */

.bc-hero-split {
	--bc-hero-split-bg: #ffffff;
	--bc-hero-split-text: #111111;
	--bc-hero-split-muted: #5c5c5c;
	--bc-hero-split-ring: #c8c8c8;
	--bc-hero-split-font: "Oswald", "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--bc-hero-split-body-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--bc-hero-split-max: 1440px;
	--bc-hero-split-padding-x: clamp(1.25rem, 4vw, 3.5rem);

	background: var(--bc-hero-split-bg);
	color: var(--bc-hero-split-text);
	font-family: var(--bc-hero-split-body-font);
	overflow: visible;
	width: 100%;
}

.bc-hero-split__inner {
	margin: 0 auto;
	max-width: var(--bc-hero-split-max);
	overflow: visible;
	padding: clamp(2.5rem, 6vw, 5rem) var(--bc-hero-split-padding-x) clamp(3rem, 7vw, 5.5rem);
}

.bc-hero-split__layout {
	align-items: center;
	display: grid;
	gap: clamp(1.5rem, 3.5vw, 3rem);
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.bc-hero-split__content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	min-width: 0;
	position: relative;
	z-index: 2;
}

.bc-hero-split__title {
	animation: bc-hero-split-fade-up 0.7s ease both;
	font-family: var(--bc-hero-split-font);
	font-size: var(--bc-title-size, clamp(2.4rem, 5.5vw, 4.75rem));
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 0;
	max-width: 12ch;
	text-transform: uppercase;
}

.bc-hero-split__subtitle {
	animation: bc-hero-split-fade-up 0.7s ease 0.08s both;
	color: var(--bc-hero-split-muted);
	font-size: clamp(0.95rem, 1.4vw, 1.125rem);
	line-height: 1.45;
	margin: 0;
	max-width: 34ch;
}

.bc-hero-split__button {
	animation: bc-hero-split-fade-up 0.7s ease 0.16s both;
	background: var(--bc-hero-split-text);
	color: #ffffff;
	display: inline-flex;
	font-family: var(--bc-hero-split-body-font);
	font-size: clamp(0.75rem, 1vw, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 1rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bc-hero-split__button:hover,
.bc-hero-split__button:focus {
	opacity: 0.85;
	transform: translateY(-1px);
}

.bc-hero-split__button:focus-visible {
	outline: 2px solid var(--bc-hero-split-text);
	outline-offset: 3px;
}

/* Escenario de capas: círculo / banda / vídeo */
.bc-hero-split__media {
	animation: bc-hero-split-fade-in 0.8s ease 0.1s both;
	aspect-ratio: 1 / 1;
	isolation: isolate;
	margin-inline: auto;
	max-width: min(100%, 760px);
	min-width: 0;
	position: relative;
	width: 100%;
}

/* 1) Círculo (capa inferior, línea gris clara) */
.bc-hero-split__ring {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--bc-hero-split-ring);
	border-radius: 50%;
	box-sizing: border-box;
	height: auto;
	inset: 0;
	margin: auto;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 1;
}

/* 2) Banda vertical oscura: casi de borde a borde del círculo */
.bc-hero-split__band {
	height: 94%;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(130px, 38%, 280px);
	z-index: 2;
}

.bc-hero-split__band-img {
	display: block;
	filter: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* 3) Vídeo encima, más grande, desplazado a la izquierda */
.bc-hero-split__player {
	background: #0f0f0f;
	left: 2%;
	line-height: 0;
	margin: 0;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 86%;
	z-index: 3;
}

.bc-hero-split__video {
	aspect-ratio: 16 / 9;
	background: #0f0f0f;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.bc-hero-split__placeholder {
	align-items: center;
	aspect-ratio: 16 / 9;
	background: #ececec;
	color: var(--bc-hero-split-muted);
	display: flex;
	font-size: 1rem;
	font-weight: 700;
	justify-content: center;
	left: 2%;
	letter-spacing: 0.08em;
	margin: 0;
	position: absolute;
	text-transform: uppercase;
	top: 50%;
	transform: translateY(-50%);
	width: 86%;
	z-index: 3;
}

@keyframes bc-hero-split-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bc-hero-split-fade-in {
	from {
		opacity: 0;
		transform: translateX(16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (max-width: 900px) {
	.bc-hero-split__layout {
		grid-template-columns: 1fr;
	}

	.bc-hero-split__title {
		font-size: var(--bc-title-size-mobile, var(--bc-title-size, clamp(2.1rem, 10vw, 3.25rem)));
		max-width: none;
	}

	.bc-hero-split__content {
		order: 1;
	}

	.bc-hero-split__media {
		max-width: min(100%, 620px);
		order: 2;
	}

	.bc-hero-split__band {
		height: 92%;
		right: 3%;
		width: clamp(110px, 36%, 220px);
	}

	.bc-hero-split__player,
	.bc-hero-split__placeholder {
		left: 1%;
		width: 88%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bc-hero-split__title,
	.bc-hero-split__subtitle,
	.bc-hero-split__button,
	.bc-hero-split__media {
		animation: none;
	}
}