/* ════════════════════════════════════════════════════════════════
 * MAS · Connect — collaboration form
 * Same layout as mas/newsletter. Irma Torres / 2026-08-17.
 * ════════════════════════════════════════════════════════════════ */

.mas-connect {
	background: var(--color-bg-alt, #F4F6F9);
	padding: var(--space-32, 128px) 0;
	position: relative;
	overflow: hidden;
	color: var(--color-text, #1A1A1A);
}

/* @ glyph decorativo */
.mas-connect__glyph {
	position: absolute;
	top: -40px;
	right: -40px;
	font-family: var(--font-display, 'EB Garamond');
	font-weight: 400;
	font-size: 480px;
	line-height: 0.8;
	color: var(--color-blue, #0A3161);
	opacity: 0.05;
	pointer-events: none;
	user-select: none;
}

.mas-connect__inner {
	max-width: var(--content-max, 1280px);
	margin: 0 auto;
	padding: 0 var(--grid-margin, 64px);
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--space-16, 64px);
	align-items: center;
	position: relative;
	z-index: 1;
}

/* ─── columna izquierda ─── */
.mas-connect__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-6, 24px);
}

.mas-connect__kicker {
	font-family: var(--font-sans);
	font-size: var(--fs-xs, 11px);
	color: var(--color-accent-strong, #8E1530);
	letter-spacing: var(--tr-wider, 0.15em);
	text-transform: uppercase;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--space-3, 12px);
	margin: 0;
}
.mas-connect__kicker::before {
	content: '';
	width: 32px;
	height: 0.5px;
	background: var(--color-accent, #B31942);
}

.mas-connect__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--fs-5xl, 64px);
	line-height: var(--lh-tight, 1);
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--color-blue, #0A3161);
}
.mas-connect__title em {
	font-style: italic;
	color: var(--color-blue, #0A3161);
}

.mas-connect__desc {
	font-family: var(--font-serif);
	font-size: var(--fs-lg, 18px);
	line-height: var(--lh-relaxed, 1.55);
	color: var(--color-text-secondary, #555);
	margin: 0;
	max-width: 480px;
}

/* ─── stats ─── */
.mas-connect__stats {
	display: flex;
	gap: var(--space-8, 32px);
	padding-top: var(--space-5, 20px);
	border-top: 0.5px solid var(--color-border, #E3E6EA);
	margin-top: var(--space-3, 12px);
	flex-wrap: wrap;
}
.mas-connect__stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1, 4px);
}
.mas-connect__stat-num {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--fs-2xl, 28px);
	line-height: var(--lh-tight, 1);
	letter-spacing: -0.025em;
	color: var(--color-text, #1A1A1A);
	font-variant-numeric: tabular-nums;
}
.mas-connect__stat-num strong {
	color: var(--color-accent, #B31942);
	font-weight: 500;
}
.mas-connect__stat-lbl {
	font-family: var(--font-sans);
	font-size: var(--fs-2xs, 10px);
	color: var(--color-text-muted, #6B6B6B);
	letter-spacing: var(--tr-wider, 0.15em);
	text-transform: uppercase;
	font-weight: 600;
}

/* ─── columna derecha · card ─── */
.mas-connect__form-wrap {
	background: var(--color-bg, #FFFFFF);
	padding: var(--space-10, 40px);
	border: 1px solid var(--color-border, #E3E6EA);
	position: relative;
}

.mas-connect__form-title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-style: italic;
	font-size: var(--fs-xl, 22px);
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-2, 8px);
	color: var(--color-text, #1A1A1A);
}
.mas-connect__form-title em {
	color: var(--color-blue, #0A3161);
}

.mas-connect__form-sub {
	font-family: var(--font-sans);
	font-size: var(--fs-xs, 11px);
	color: var(--color-text-muted, #6B6B6B);
	letter-spacing: var(--tr-wide, 0.05em);
	margin: var(--space-1, 4px) 0 var(--space-6, 24px);
}

/* ─── feedback states ─── */
.mas-connect__feedback {
	font-family: var(--font-sans);
	font-size: var(--fs-sm, 14px);
	padding: 12px var(--space-4, 16px);
	border-left: 2px solid currentColor;
}
.mas-connect__feedback--ok  { color: #2a7a4b; }
.mas-connect__feedback--err { color: #B31942; }

/* ─── form ─── */
.mas-connect__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}

.mas-connect__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
}

.mas-connect__field-label {
	font-family: var(--font-sans);
	font-size: var(--fs-2xs, 10px);
	color: var(--color-text-secondary, #555);
	letter-spacing: var(--tr-wider, 0.15em);
	text-transform: uppercase;
	font-weight: 600;
}

.mas-connect__input {
	font-family: var(--font-sans);
	font-size: var(--fs-base, 16px);
	color: var(--color-text, #1A1A1A);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-text, #1A1A1A);
	padding: var(--space-3, 12px) 0;
	outline: none;
	width: 100%;
	transition: border-color var(--t-fast, 150ms), border-bottom-width var(--t-fast, 150ms);
	min-height: 44px;
}
.mas-connect__input::placeholder { color: var(--color-text-muted, #6B6B6B); }
.mas-connect__input:focus {
	border-bottom-width: 2px;
	border-bottom-color: var(--color-accent, #B31942);
}

/* ─── botón ─── */
.mas-connect__cta {
	font-family: var(--font-sans);
	font-size: var(--fs-sm, 13px);
	font-weight: 600;
	letter-spacing: var(--tr-wide, 0.05em);
	text-transform: uppercase;
	padding: var(--space-4, 16px) var(--space-6, 24px);
	background: var(--color-text, #1A1A1A);
	color: #FAFBFC;
	border: 1px solid var(--color-text, #1A1A1A);
	cursor: pointer;
	margin-top: var(--space-5, 20px);
	transition: background var(--t-fast, 150ms), border-color var(--t-fast, 150ms);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 8px);
	width: 100%;
	min-height: 48px;
}
.mas-connect__cta:hover {
	background: var(--color-accent, #B31942);
	border-color: var(--color-accent, #B31942);
}
.mas-connect__cta:focus-visible {
	outline: 2px solid var(--color-accent, #B31942);
	outline-offset: 2px;
}
.mas-connect__cta-arr {
	transition: transform var(--t-fast, 150ms);
}
.mas-connect__cta:hover .mas-connect__cta-arr {
	transform: translateX(3px);
}

/* ─── honeypot ─── */
.mas-connect__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─── responsive ─── */
@media (max-width: 1023px) {
	.mas-connect {
		padding: var(--space-24, 96px) 0;
	}
	.mas-connect__inner {
		grid-template-columns: 1fr;
		gap: var(--space-10, 40px);
		padding: 0 var(--space-8, 32px);
	}
	.mas-connect__title { font-size: var(--fs-4xl, 48px); }
	.mas-connect__glyph { font-size: 320px; top: -20px; right: -30px; }
}

@media (max-width: 767px) {
	.mas-connect {
		padding: var(--space-16, 64px) 0;
	}
	.mas-connect__inner {
		padding: 0 var(--space-5, 20px);
		gap: var(--space-8, 32px);
	}
	.mas-connect__title { font-size: var(--fs-3xl, 36px); }
	.mas-connect__desc  { font-size: var(--fs-base, 16px); }
	.mas-connect__glyph { font-size: 240px; top: -10px; right: -20px; }
	.mas-connect__form-wrap { padding: var(--space-6, 24px); }
}

@media (prefers-reduced-motion: reduce) {
	.mas-connect__input,
	.mas-connect__cta,
	.mas-connect__cta-arr { transition: none; }
}