/* =========================================================
   CONTACTO
   Blanca Sosa World Lawyer
========================================================= */

.bs-contact {

	position:
		relative;

	min-height:
		680px;

	display:
		flex;

	align-items:
		center;

	padding:
		90px 0;

	overflow:
		hidden;

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


/* =========================================================
   BACKGROUND
========================================================= */

.bs-contact__background {

	position:
		absolute;

	inset:
		0;

	z-index:
		1;
}


.bs-contact__background img {

	width:
		100%;

	height:
		100%;

	object-fit:
		cover;

	object-position:
		center;
}


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

.bs-contact__overlay {

	position:
		absolute;

	inset:
		0;

	z-index:
		2;

	background:
		linear-gradient(
			90deg,
			rgba(9, 33, 63, 0.94) 0%,
			rgba(16, 47, 86, 0.88) 43%,
			rgba(20, 55, 96, 0.56) 72%,
			rgba(20, 55, 96, 0.38) 100%
		);
}


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

.bs-contact .bs-container {

	position:
		relative;

	z-index:
		3;
}


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

.bs-contact__grid {

	display:
		grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(420px, 0.72fr);

	gap:
		80px;

	align-items:
		center;
}


/* =========================================================
   INTRO
========================================================= */

.bs-contact__intro {

	max-width:
		610px;

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


.bs-contact__eyebrow {

	display:
		inline-block;

	margin-bottom:
		12px;

	color:
		var(--bs-gold);

	font-size:
		0.78rem;

	font-weight:
		700;

	text-transform:
		uppercase;

	letter-spacing:
		0.18em;
}


.bs-contact__title {

	margin:
		0 0 24px;

	color:
		var(--bs-white);

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

	font-size:
		clamp(3rem, 5vw, 5rem);

	line-height:
		0.95;

	letter-spacing:
		-0.03em;
}


.bs-contact__description {

	max-width:
		560px;

	margin:
		0 0 40px;

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

	font-size:
		1.05rem;

	line-height:
		1.7;
}


/* =========================================================
   DETAILS
========================================================= */

.bs-contact__details {

	display:
		flex;

	gap:
		54px;

	flex-wrap:
		wrap;
}


.bs-contact-detail {

	display:
		flex;

	flex-direction:
		column;

	gap:
		5px;
}


.bs-contact-detail__label {

	color:
		var(--bs-gold);

	font-size:
		0.72rem;

	font-weight:
		800;

	text-transform:
		uppercase;

	letter-spacing:
		0.12em;
}


.bs-contact-detail__value {

	color:
		var(--bs-white);

	font-size:
		0.94rem;

	font-weight:
		600;
}


a.bs-contact-detail__value:hover {

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


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

.bs-contact__card {

	position:
		relative;

	padding:
		42px 40px;

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

	border-radius:
		22px;

	box-shadow:
		0 30px 70px rgba(0, 0, 0, 0.22);
}


/* detalle dorado
========================================================= */

.bs-contact__card::before {

	content:
		'';

	position:
		absolute;

	top:
		0;

	left:
		40px;

	width:
		72px;

	height:
		4px;

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


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

.bs-contact__card-header {

	margin-bottom:
		28px;
}


.bs-contact__card-eyebrow {

	display:
		block;

	margin-bottom:
		6px;

	color:
		var(--bs-gold);

	font-size:
		0.72rem;

	font-weight:
		800;

	text-transform:
		uppercase;

	letter-spacing:
		0.14em;
}


.bs-contact__card-title {

	margin:
		0;

	color:
		var(--bs-navy);

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

	font-size:
		2rem;

	line-height:
		1.05;
}


/* =========================================================
   FORM
========================================================= */

.bs-contact-form {

	display:
		grid;

	gap:
		18px;
}


.bs-contact-form__field {

	display:
		flex;

	flex-direction:
		column;

	gap:
		7px;
}


.bs-contact-form__field label {

	color:
		var(--bs-navy);

	font-size:
		0.78rem;

	font-weight:
		800;

	letter-spacing:
		0.02em;
}


.bs-contact-form__field input,
.bs-contact-form__field textarea {

	width:
		100%;

	padding:
		13px 14px;

	border:
		1px solid rgba(25, 55, 95, 0.17);

	border-radius:
		8px;

	background:
		var(--bs-white);

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

	font-family:
		inherit;

	font-size:
		0.92rem;

	outline:
		none;

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


.bs-contact-form__field textarea {

	resize:
		vertical;

	min-height:
		125px;
}


.bs-contact-form__field input:focus,
.bs-contact-form__field textarea:focus {

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

	box-shadow:
		0 0 0 3px rgba(217, 180, 103, 0.14);
}


.bs-contact-form__field input::placeholder,
.bs-contact-form__field textarea::placeholder {

	color:
		#9ba2ad;
}


/* =========================================================
   SUBMIT
========================================================= */

.bs-contact-form__submit {

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		10px;

	min-height:
		50px;

	margin-top:
		4px;

	padding:
		0 24px;

	border:
		0;

	border-radius:
		8px;

	background:
		var(--bs-navy);

	color:
		var(--bs-white);

	font-family:
		inherit;

	font-size:
		0.88rem;

	font-weight:
		800;

	cursor:
		pointer;

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


.bs-contact-form__submit:hover {

	background:
		var(--bs-gold);

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

	transform:
		translateY(-2px);

	box-shadow:
		0 12px 28px rgba(13, 39, 72, 0.16);
}


.bs-contact-form__notice {
	padding: 12px 14px;
	margin-bottom: 18px;
	border-radius: 8px;
	font-size: 0.86rem;
	font-weight: 700;
}

.bs-contact-form__notice--success {
	background: #e8f5eb;
	color: #256b35;
}

.bs-contact-form__notice--error {
	background: #fbeaea;
	color: #9d2d2d;
}