/* =========================================================
   ACERCA DE MÍ
   Blanca Sosa World Lawyer
========================================================= */

.bs-about {

	position:
		relative;

	padding:
		96px 0;

	background:
		var(--bs-cream-light);

	overflow:
		hidden;
}


/* =========================================================
   GRID
========================================================= */

.bs-about__grid {

	display:
		grid;

	grid-template-columns:
		minmax(360px, 0.85fr)
		minmax(0, 1.15fr);

	gap:
		84px;

	align-items:
		center;
}


/* =========================================================
   VISUAL
========================================================= */

.bs-about__visual {

	position:
		relative;
}


.bs-about__image {

	position:
		relative;

	min-height:
		560px;

	border-radius:
		22px;

	overflow:
		hidden;

	background:
		var(--bs-navy);

	box-shadow:
		var(--bs-shadow-lg);
}


.bs-about__image::after {

	content:
		'';

	position:
		absolute;

	inset:
		0;

	background:
		linear-gradient(
			180deg,
			transparent 55%,
			rgba(13, 39, 72, 0.32)
		);

	pointer-events:
		none;
}


.bs-about__image img {

	width:
		100%;

	height:
		100%;

	min-height:
		560px;

	object-fit:
		cover;

	object-position:
		center;
}


/* =========================================================
   BADGE
========================================================= */

.bs-about__badge {

	position:
		absolute;

	right:
		-32px;

	bottom:
		38px;

	min-width:
		220px;

	padding:
		24px 26px;

	background:
		var(--bs-navy);

	border-radius:
		14px;

	box-shadow:
		0 20px 45px rgba(13, 39, 72, 0.22);
}


.bs-about__badge-main {

	display:
		block;

	margin-bottom:
		5px;

	color:
		var(--bs-gold);

	font-family:
		var(--bs-font-title);

	font-size:
		1.45rem;

	font-weight:
		700;
}


.bs-about__badge-small {

	display:
		block;

	color:
		rgba(255, 255, 255, 0.78);

	font-size:
		0.76rem;

	line-height:
		1.4;
}


/* =========================================================
   CONTENT
========================================================= */

.bs-about__content {

	max-width:
		660px;
}


.bs-about__eyebrow {

	display:
		inline-block;

	margin-bottom:
		12px;

	color:
		var(--bs-gold);

	font-size:
		0.78rem;

	font-weight:
		800;

	text-transform:
		uppercase;

	letter-spacing:
		0.18em;
}


.bs-about__title {

	margin:
		0 0 28px;

	color:
		var(--bs-navy);

	font-family:
		var(--bs-font-title);

	font-size:
		clamp(2.7rem, 4.6vw, 4.5rem);

	line-height:
		0.98;

	letter-spacing:
		-0.035em;
}


/* =========================================================
   LEAD
========================================================= */

.bs-about__lead {

	max-width:
		620px;

	margin:
		0 0 24px;

	color:
		var(--bs-navy);

	font-size:
		1.18rem;

	font-weight:
		600;

	line-height:
		1.55;
}


/* =========================================================
   TEXT
========================================================= */

.bs-about__text {

	max-width:
		620px;

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

	font-size:
		0.98rem;

	line-height:
		1.75;
}


.bs-about__text p {

	margin:
		0 0 16px;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.bs-about__highlights {

	display:
		grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:
		16px;

	margin-top:
		34px;

	margin-bottom:
		34px;
}


.bs-about-highlight {

	padding:
		18px 16px;

	border-top:
		1px solid rgba(25, 55, 95, 0.18);
}


.bs-about-highlight__number {

	display:
		block;

	margin-bottom:
		7px;

	color:
		var(--bs-gold);

	font-family:
		var(--bs-font-title);

	font-size:
		1.45rem;

	font-weight:
		700;
}


.bs-about-highlight__text {

	display:
		block;

	color:
		var(--bs-navy);

	font-size:
		0.82rem;

	font-weight:
		800;

	line-height:
		1.35;

	text-transform:
		uppercase;

	letter-spacing:
		0.025em;
}


/* =========================================================
   BUTTON
========================================================= */

.bs-about__button {

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		10px;

	min-height:
		48px;

	padding:
		0 24px;

	border-radius:
		8px;

	background:
		var(--bs-navy);

	color:
		var(--bs-white);

	font-size:
		0.88rem;

	font-weight:
		800;

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


.bs-about__button:hover {

	background:
		var(--bs-gold);

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

	transform:
		translateY(-2px);
}