/* =========================================================
   ÁREAS DE PRÁCTICA
   Blanca Sosa World Lawyer
========================================================= */

.bs-practice {

	position:
		relative;

	padding:
		88px 0 96px;

	background:
		#5f687d;

	overflow:
		hidden;
}


/* =========================================================
   FONDO FOTOGRÁFICO
========================================================= */

.bs-practice::before {

	content:
		'';

	position:
		absolute;

	inset:
		0;

	z-index:
		1;

	background-image:
		url("../images/practice-bg.jpg");

	background-size:
		cover;

	background-position:
		center;

	background-repeat:
		no-repeat;

	filter:
		grayscale(25%) brightness(0.58) contrast(0.92);

	transform:
		scale(1.02);
}


/* =========================================================
   OVERLAY
========================================================= */

.bs-practice::after {

	content:
		'';

	position:
		absolute;

	inset:
		0;

	z-index:
		2;

	background:
		rgba(67, 78, 101, 0.69);

	pointer-events:
		none;
}


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

.bs-practice .bs-container {

	position:
		relative;

	z-index:
		3;
}


/* =========================================================
   HEADING
========================================================= */

.bs-practice__heading {

	max-width:
		700px;

	margin-bottom:
		46px;
}


.bs-practice__eyebrow {

	display:
		inline-block;

	margin-bottom:
		10px;

	color:
		var(--bs-gold);

	font-size:
		0.76rem;

	font-weight:
		700;

	text-transform:
		uppercase;

	letter-spacing:
		0.18em;
}


.bs-practice__title {

	margin:
		0;

	color:
		var(--bs-white);

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

	font-size:
		clamp(2.4rem, 4vw, 4rem);

	font-weight:
		700;

	line-height:
		1;

	letter-spacing:
		-0.025em;
}


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

.bs-practice__grid {

	display:
		grid;

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

	gap:
		22px;

	align-items:
		stretch;
}


/* =========================================================
   CARD
========================================================= */

.bs-practice-card {

	position:
		relative;

	min-height:
		250px;

	display:
		flex;

	flex-direction:
		column;

	align-items:
		center;

	justify-content:
		center;

	padding:
		30px 24px;

	background:
		#ffffff;

	border-radius:
		24px;

	box-shadow:
		0 16px 36px rgba(11, 28, 52, 0.16);

	text-align:
		center;

	overflow:
		hidden;

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


/* =========================================================
   HOVER
========================================================= */

.bs-practice-card:hover {

	transform:
		translateY(-5px);

	box-shadow:
		0 24px 52px rgba(11, 28, 52, 0.24);
}


/* =========================================================
   ÚLTIMA CARD CENTRADA
========================================================= */

.bs-practice-card:last-child {

	grid-column:
		2;
}

/* =========================================================
   ICONOS ÁREAS
========================================================= */

.bs-practice-card__icon {

	width:
		120px;

	height:
		120px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	margin-bottom:
		20px;
}


.bs-practice-card__icon-image {

	display:
		block;

	width:
		100%;

	height:
		100%;

	object-fit:
		contain;
}

opacity: 0.50;

/* Placeholder temporal
========================================================= */

.bs-practice-card__icon-placeholder {

	width:
		82px;

	height:
		82px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	border:
		2px solid var(--bs-navy);

	border-radius:
		50%;

	color:
		var(--bs-navy);

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

	font-size:
		1.75rem;

	font-weight:
		700;
}


/* =========================================================
   TITLE
========================================================= */

.bs-practice-card__title {

	max-width:
		300px;

	margin:
		0;

	color:
		var(--bs-navy);

	font-size:
		clamp(1.12rem, 1.45vw, 1.38rem);

	font-weight:
		800;

	line-height:
		1.02;

	text-transform:
		uppercase;

	letter-spacing:
		-0.01em;
}

/* =========================================================
   ICONOS MÁS SUAVES / OPACOS
========================================================= */

.bs-practice-card__icon-image,
.bs-practice-card__icon img {

	opacity:
		0.55 !important;

	filter:
		saturate(0.75)
		contrast(0.85);

	transition:
		opacity var(--bs-transition),
		filter var(--bs-transition);
}


/* Hover: recupera intensidad */

.bs-practice-card:hover .bs-practice-card__icon-image,
.bs-practice-card:hover .bs-practice-card__icon img {

	opacity:
		0.85 !important;

	filter:
		saturate(0.95)
		contrast(0.95);
}