.contact-page {
	flex: 1;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 60px 24px 80px;
}

.contact-head { text-align: center; margin-bottom: 50px; }
.contact-head h1 { font-size: 64px; font-weight: 900; }
.contact-head p { font-size: 22px; font-weight: 200; margin-top: 10px; }

.contact-layout {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 50px;
	align-items: start;
}

/* ===================== FORMULARIO ===================== */
.contact-form {
	background: var(--gray-light);
	border-radius: 20px;
	padding: 40px;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.field { display: flex; flex-direction: column; }
.field label { font-size: 16px; font-weight: 600; margin-bottom: 8px; }

.field input,
.field textarea {
	font-family: var(--font);
	font-size: 17px;
	padding: 12px 14px;
	border: 2px solid #cfcfcf;
	border-radius: 10px;
	background: var(--white);
	outline: none;
	transition: border-color 0.2s ease;
	resize: vertical;
}

.field input:focus,
.field textarea:focus { border-color: var(--cyan); }

.contact-form .pill-btn { align-self: flex-start; }

/* mensaje de estado del envío */
.form-status {
	font-size: 16px;
	font-weight: 600;
	margin-top: 4px;
	min-height: 22px;
}

.form-status.success { color: #1a8f5e; }
.form-status.error   { color: #c0392b; }

/* ===================== INFO ===================== */
.contact-info-box {
	background: var(--gray-light);
	border-radius: 20px;
	padding: 40px;
	box-shadow: var(--shadow);
}

.contact-info-box h2 { font-size: 26px; font-weight: 800; margin-bottom: 18px; }
.contact-email { font-size: 19px; font-weight: 400; user-select: text; }
.contact-note { font-size: 16px; font-weight: 200; margin: 14px 0 24px; }

.contact-socials { display: flex; gap: 20px; }
.contact-socials img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	transition: transform 0.2s ease;
}
.contact-socials img:hover { transform: scale(1.15); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
	.contact-head h1 { font-size: 44px; }
	.contact-layout { grid-template-columns: 1fr; gap: 30px; }
	.contact-form, .contact-info-box { padding: 28px; }
}