/* =========================================================
   WOMENIZE LATAM
   CONTACTO
   ========================================================= */


:root {

	--wm-contact-pink: #f7e3ee;
	--wm-contact-soft: #fcf4f8;

	--wm-contact-dark: #3d0711;
	--wm-contact-text: #252025;
	--wm-contact-muted: #786d72;

	--wm-contact-white: #ffffff;

	--wm-contact-border:
		rgba(37, 32, 37, 0.15);

}


/* =========================================================
   BASE
   ========================================================= */

.wm-contact {
	background: #fff;
	color: var(--wm-contact-text);
}

.wm-contact-container {
	width: min(
		1180px,
		calc(100% - 48px)
	);

	margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.wm-contact-hero {
	background:
		var(--wm-contact-pink);

	padding:
		clamp(145px, 14vw, 205px)
		0
		85px;

	text-align: center;
}

.wm-contact-eyebrow {
	margin: 0 0 14px;

	font-family:
		var(--wm-font-body, serif);

	font-size: 0.76rem;

	font-weight: 600;

	letter-spacing: 0.18em;

	text-transform: uppercase;
}

.wm-contact-title {
	margin: 0;

	font-family:
		var(--wm-font-title, serif);

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

	font-weight: 400;

	line-height: 0.92;
}

.wm-contact-intro {
	max-width: 720px;

	margin:
		28px
		auto
		0;

	font-family:
		var(--wm-font-body, serif);

	font-size:
		clamp(
			1.05rem,
			1.7vw,
			1.3rem
		);

	line-height: 1.75;
}


/* =========================================================
   SECCIÓN
   ========================================================= */

.wm-contact-section {
	padding:
		clamp(75px, 9vw, 130px)
		0
		clamp(90px, 10vw, 140px);
}


/* =========================================================
   LAYOUT
   ========================================================= */

.wm-contact-layout {
	display: grid;

	grid-template-columns:
		minmax(0, 0.75fr)
		minmax(0, 1.25fr);

	gap:
		clamp(
			55px,
			9vw,
			130px
		);

	align-items: start;
}


/* =========================================================
   TEXTO IZQUIERDO
   ========================================================= */

.wm-contact-copy {
	position: sticky;
	top: 130px;
}

.wm-contact-copy h2 {
	max-width: 470px;

	margin: 0;

	font-family:
		var(--wm-font-title, serif);

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

	font-weight: 400;

	line-height: 0.98;
}

.wm-contact-copy > p:not(
	.wm-contact-eyebrow
) {
	max-width: 480px;

	margin:
		26px
		0
		0;

	color:
		var(--wm-contact-muted);

	font-family:
		var(--wm-font-body, serif);

	font-size: 1rem;

	line-height: 1.8;
}

.wm-contact-line {
	width: 100%;
	max-width: 340px;

	height: 1px;

	margin-top: 38px;

	background:
		var(--wm-contact-dark);
}


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

.wm-contact-form {
	display: grid;

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

	column-gap: 30px;
	row-gap: 30px;
}


/* =========================================================
   CAMPO
   ========================================================= */

.wm-contact-field {
	min-width: 0;
}

.wm-contact-field--full {
	grid-column: 1 / -1;
}

.wm-contact-field label {
	display: block;

	margin-bottom: 9px;

	font-family:
		var(--wm-font-body, serif);

	font-size: 0.78rem;

	font-weight: 600;

	letter-spacing: 0.06em;

	text-transform: uppercase;
}

.wm-contact-field label span {
	color:
		var(--wm-contact-dark);
}


/* =========================================================
   INPUTS
   ========================================================= */

.wm-contact-field input,
.wm-contact-field textarea {
	width: 100%;

	box-sizing: border-box;

	border: 0;

	border-bottom:
		1px solid
		var(--wm-contact-border);

	border-radius: 0;

	background:
		transparent;

	color:
		var(--wm-contact-text);

	padding:
		12px
		2px
		14px;

	font-family:
		var(--wm-font-body, serif);

	font-size: 1rem;

	outline: none;

	transition:
		border-color 0.2s ease;
}

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

.wm-contact-field textarea {
	min-height: 170px;

	resize: vertical;

	line-height: 1.7;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.wm-contact-actions {
	margin-top: 5px;
}

.wm-contact-submit {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 12px;

	border:
		1px solid
		var(--wm-contact-dark);

	border-radius: 999px;

	background:
		var(--wm-contact-dark);

	color:
		#fff;

	padding:
		14px
		24px;

	font-family:
		var(--wm-font-body, serif);

	font-size: 0.9rem;

	font-weight: 600;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.wm-contact-submit:hover {
	background:
		transparent;

	color:
		var(--wm-contact-dark);

	transform:
		translateY(-2px);
}

.wm-contact-submit span {
	transition:
		transform 0.2s ease;
}

.wm-contact-submit:hover span {
	transform:
		translateX(3px);
}


/* =========================================================
   MENSAJES
   ========================================================= */

.wm-contact-message {
	margin-bottom: 35px;

	padding:
		20px
		22px;

	border-radius: 18px;

	font-family:
		var(--wm-font-body, serif);
}

.wm-contact-message strong {
	display: block;

	margin-bottom: 5px;
}

.wm-contact-message p {
	margin: 0;

	font-size: 0.9rem;
}

.wm-contact-message--success {
	background:
		var(--wm-contact-pink);
}

.wm-contact-message--error {
	background:
		#fff2f2;
}


/* =========================================================
   ANTISPAM
   ========================================================= */

.wm-contact-honeypot {
	position: absolute;

	left: -99999px;

	width: 1px;
	height: 1px;

	overflow: hidden;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.wm-contact-layout {
		grid-template-columns:
			minmax(0, 0.85fr)
			minmax(0, 1.15fr);

		gap: 55px;
	}

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

	.wm-contact-container {
		width:
			min(
				100% - 30px,
				1180px
			);
	}

	.wm-contact-hero {
		padding:
			125px
			0
			65px;
	}

	.wm-contact-layout {
		grid-template-columns:
			1fr;

		gap: 55px;
	}

	.wm-contact-copy {
		position: static;
	}

	.wm-contact-form {
		grid-template-columns:
			1fr;
	}

	.wm-contact-field--full {
		grid-column: auto;
	}

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

	.wm-contact-title {
		font-size:
			clamp(
				3.5rem,
				18vw,
				5rem
			);
	}

	.wm-contact-section {
		padding:
			65px
			0
			85px;
	}

}