/* =========================================================
   HERO
   Blanca Sosa
========================================================= */

.bs-hero {
	position: relative;
	padding: 0;
	background: var(--bs-navy);
	overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.bs-hero > .bs-container {
	position: relative;
	z-index: 1;
}


/* =========================================================
   SHELL
========================================================= */

.bs-hero__shell {
	display: grid;

	grid-template-columns:
		1.08fr
		0.92fr;

	background: var(--bs-navy);
	overflow: hidden;
}


/* =========================================================
   COLUMNA IZQUIERDA
========================================================= */

.bs-hero__left {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 470px;

	padding: 18px 14px;

	background: var(--bs-navy);

	overflow: hidden;
}


/* =========================================================
   PANEL INTERNO
========================================================= */

.bs-hero__panel {
	position: relative;
	z-index: 2;

	width: 100%;

	padding: 18px;

	background: var(--bs-navy);

	border:
		3px solid rgba(255, 255, 255, 0.92);

	border-radius: 16px;
}


.bs-hero__panel-inner {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	min-height: 390px;

	background: transparent;

	text-align: center;
}


/* =========================================================
   LOGO
========================================================= */

.bs-hero__logo-wrap {
	margin-bottom: 15px;
}


.bs-hero__logo .custom-logo-link {
	display: block;
}


.bs-hero__logo .custom-logo {
	display: block;

	width: auto;

	max-width: 180px;
	max-height: 175px;

	object-fit: contain;

	filter: none;
}


/* =========================================================
   WEBSITE
========================================================= */

.bs-hero__website {
	margin:
		0 0 16px;

	color: var(--bs-white);

	font-size:
		clamp(1.1rem, 1.7vw, 1.65rem);

	font-weight: 700;

	line-height: 1.2;
}


/* =========================================================
   REDES SOCIALES
========================================================= */

.bs-hero__social {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	margin-bottom: 22px;
}


.bs-hero__social-link {
	width: 38px;
	height: 38px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	border:
		1px solid rgba(255, 255, 255, 0.38);

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.04);

	color: var(--bs-white);

	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1;

	transition:
		background var(--bs-transition),
		color var(--bs-transition),
		border-color var(--bs-transition),
		transform var(--bs-transition);
}


.bs-hero__social-link:hover {
	background: var(--bs-gold);

	color: var(--bs-navy-dark);

	border-color: var(--bs-gold);

	transform: translateY(-2px);
}


/* =========================================================
   BOTONES
========================================================= */

.bs-hero__actions {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 16px;
}


.bs-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	min-height: 52px;

	padding:
		0 25px;

	border:
		1px solid transparent;

	border-radius: 6px;

	font-size: 0.93rem;
	font-weight: 700;

	transition:
		transform var(--bs-transition),
		background var(--bs-transition),
		color var(--bs-transition),
		border-color var(--bs-transition),
		box-shadow var(--bs-transition);
}


.bs-button:hover {
	transform: translateY(-2px);
}


/* Primary */

.bs-button--primary {
	background: #a59d8e;

	color: var(--bs-white);

	box-shadow:
		0 10px 24px rgba(0, 0, 0, 0.14);
}


.bs-button--primary:hover {
	background: var(--bs-gold-light);

	color: var(--bs-navy-dark);
}


/* Outline */

.bs-button--outline {
	background:
		rgba(8, 25, 57, 0.18);

	color: var(--bs-white);

	border-color: var(--bs-gold);
}


.bs-button--outline:hover {
	background:
		rgba(255, 255, 255, 0.10);

	color: var(--bs-white);
}


/* =========================================================
   COLUMNA DERECHA
========================================================= */

.bs-hero__right {
	position: relative;

	min-height: 470px;

	display: flex;

	align-items: stretch;
	justify-content: stretch;

	background: var(--bs-navy);

	overflow: hidden;
}


/* =========================================================
   IMAGEN JUSTICIA
========================================================= */

.bs-hero__statue {
	width: 100%;
	height: 100%;

	background: var(--bs-navy);
}


.bs-hero__statue img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center;
}