/* =====================================================
   SECCIÓN: BASE
===================================================== */

*{
	box-sizing:border-box;
}

html,
body{
	margin:0;
	padding:0;
	width:100%;
}



/* =====================================================
   CONTACTO
===================================================== */

.contact{
	width:100%;
	padding:100px 0;
	background:var(--light);
}

/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */

.contact > .container{
	width:80%;
	max-width:1400px;
	margin:0 auto;
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:80px;
}

/* =====================================================
   ENCABEZADO DE CONTACTO
===================================================== */

.contact-heading{
	width:100%;
	max-width:650px;
	margin:0 auto;
	text-align:center;
}

.contact-heading .hero-logo{
	margin-bottom:25px;
}

/* Logo circular */
.contact-heading .hero-logo img{
	display:block;
	width:180px;
	height:180px;
	margin:0 auto;
	object-fit:cover;
	border-radius:50%;
	border:5px solid #D4AF37;
}

/* Etiqueta */
.contact-heading .tag{
	display:inline-block;
	margin-bottom:15px;
	color:#D4AF37;
	font-size:20px;
	font-weight:700;
	letter-spacing:3px;
}

/* Título */
.contact-heading h1{
	margin:15px 0;
	color:#0F172A;
	font-size:45px;
	font-family:"Montserrat",sans-serif;
	font-weight:700;
	line-height:1.2;
}

/* Descripción */
.contact-heading p{
	margin:0;
	color:#64748B;
	font-size:18px;
	line-height:1.5;
}

/* =====================================================
   FORMULARIO
===================================================== */

.contact-form{
	width:100%;
	max-width:650px;
	margin:0 auto;
	padding:35px;
	background:#FFFFFF;
	border:1px solid rgba(212,175,55,.35);
	border-radius:15px;
	box-shadow:0 20px 50px rgba(0,0,0,.12);
}

/* =====================================================
   CAMPOS DEL FORMULARIO
===================================================== */

.form-group{
	margin-bottom:25px;
}

.form-group label{
	display:block;
	margin-bottom:8px;
	color:#0F172A;
	font-size:15px;
	font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea{
	display:block;
	width:100%;
	height:48px;
	box-sizing:border-box;
	padding:14px 16px;
	border:1px solid var(--tertiary);
	border-radius:10px;
	background:#FFFFFF;
	color:#0F172A;
	font-family:inherit;
	font-size:15px;
	outline:none;
	transition:.3s;
	box-shadow:0 0 0 3px rgba(212,175,55,.08);
}

/* =====================================================
   CAMPOS AL HACER FOCUS
===================================================== */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
	border-color:#D4AF37;
	box-shadow:0 0 0 3px rgba(212,175,55,.12);
}

/* =====================================================
   MENSAJE
===================================================== */

.form-group textarea{
	resize:vertical;
	min-height:150px;
}

/* =====================================================
   BOTON ENVIAR
===================================================== */

.contact-form button{
	display:block;
	width:100%;
	padding:15px 25px;
	border:1px solid #D4AF37;
	border-radius:10px;
	background:#D4AF37;
	color:#FFFFFF;
	font-family:inherit;
	font-size:15px;
	font-weight:600;
	cursor:pointer;
	transition:.3s;
}

.contact-form button:hover{
	background:#1E3A8A;
	border-color:#1E3A8A;
}

/* =====================================================
   MODAL — MENSAJE ENVIADO
   Ventana que aparece después de enviar el formulario
===================================================== */

.modal-mensaje{
	display:none;
	position:fixed;
	inset:0;
	z-index:9999;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.65);
	padding:20px;
}

/* =====================================================
   MODAL — ESTADO ACTIVO
   JavaScript agrega esta clase para mostrar la ventana
===================================================== */

.modal-mensaje.activo{
	display:flex;
}

/* =====================================================
   MODAL — CONTENIDO
   Caja blanca que contiene mensaje y botón
===================================================== */

.modal-contenido{
	width:100%;
	max-width:420px;
	background:#FFFFFF;
	padding:40px 30px;
	border-radius:18px;
	text-align:center;
	box-shadow:0 20px 60px rgba(0,0,0,.25);
}

/* =====================================================
   MODAL — TITULO
===================================================== */

.modal-contenido h3{
	margin:0 0 12px;
	color:#0F172A;
}

/* =====================================================
   MODAL — MENSAJE
===================================================== */

.modal-contenido p{
	margin:0 0 25px;
	color:#64748B;
}

/* =====================================================
   MODAL — BOTON OK
===================================================== */

.modal-contenido button{
	border:0;
	padding:12px 30px;
	border-radius:8px;
	background:#D4AF37;
	color:#FFFFFF;
	cursor:pointer;
}

/* =====================================================
   PROPIEDAD DE INTERÉS
===================================================== */

.propiedad-interes{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	width:100%;
	min-height:150px;
	margin-bottom:25px;
	padding:20px;
	box-sizing:border-box;
	border:1px solid var(--tertiary);
	border-radius:8px;
	background:#F8FAFC;
	text-align:center;
}

.propiedad-interes span{
	font-size:12px;
	font-weight:700;
	letter-spacing:1px;
	color:#D4AF37;
}

.propiedad-interes strong{
	font-size:20px;
	font-weight:700;
	color:#0F172A;
}

.propiedad-interes small{
	font-size:14px;
	font-weight:600;
	color:#64748B;
}