/* -----------------------------------------
   Soulmix - Sección Contacto (formulario sobre fondo de monstera)
   ----------------------------------------- */

.contact {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* `margin-top`, no `padding`: el fondo cubre toda la sección (padding
	   incluido), así que un padding sólo mueve la card por dentro del verde y
	   no separa esta sección de la anterior. */
	margin-top: clamp(120px, calc(120 / 1920 * 100vw), 168px);
	padding: clamp(80px, calc(80 / 1920 * 100vw), 112px) 0;
	background-image: url('../img/contact/green-monstera.jpg');
	background-size: cover;
	background-position: center;
}

/* Velo #1F1E1D al 30% sobre la foto. */
.contact::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(31, 30, 29, 0.3);
	pointer-events: none;
}

.contact__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: clamp(520px, calc(520 / 1920 * 100vw), 728px);
	padding: clamp(56px, calc(56 / 1920 * 100vw), 78px) clamp(64px, calc(64 / 1920 * 100vw), 90px);
	background-color: #FAF9F2;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	color: var(--color-bg);
	text-align: center;
}

.contact__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(36px, calc(36 / 1920 * 100vw), 50px);
	line-height: 1.05;
	text-transform: uppercase;
}

.contact__text {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: normal;
	letter-spacing: -0.02em;
	/* Centrado y más estrecho que la card. */
	max-width: clamp(340px, calc(340 / 1920 * 100vw), 476px);
	margin: clamp(24px, calc(24 / 1920 * 100vw), 34px) auto 0;
}

.contact__form {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, calc(12 / 1920 * 100vw), 17px);
	margin-top: clamp(40px, calc(40 / 1920 * 100vw), 56px);
	text-align: left;
}

.contact__field {
	width: 100%;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	letter-spacing: -0.02em;
	color: var(--color-bg);
	background-color: #F3F1E6;
	border: 0;
	border-radius: 100px;
	padding: clamp(10px, calc(10 / 1920 * 100vw), 14px) clamp(24px, calc(24 / 1920 * 100vw), 34px);
	text-align: center;
}

.contact__field::placeholder {
	color: var(--color-bg);
	opacity: 1;
}

.contact__field:focus {
	outline: 2px solid var(--color-btn-primary);
	outline-offset: 2px;
}

/* El mensaje mantiene el mismo radio redondeado pero con alto fijo de ~3
   filas; `resize: none` para que no rompa el layout de la card. */
.contact__field--message {
	height: clamp(92px, calc(92 / 1920 * 100vw), 129px);
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	resize: none;
}

/* Casilla de privacidad: se oculta el control nativo y se dibuja una caja
   redondeada propia con `::before` en la etiqueta. */
.contact__consent {
	display: flex;
	align-items: center;
	gap: clamp(12px, calc(12 / 1920 * 100vw), 17px);
	margin-top: clamp(8px, calc(8 / 1920 * 100vw), 11px);
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(13px, calc(13 / 1920 * 100vw), 18px);
	line-height: normal;
	letter-spacing: -0.02em;
	cursor: pointer;
}

.contact__consent input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.contact__consent-box {
	flex-shrink: 0;
	width: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	height: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	border: 1px solid var(--color-btn-primary);
	border-radius: clamp(6px, calc(6 / 1920 * 100vw), 8px);
	background-color: transparent;
	transition: background-color 0.2s ease;
	position: relative;
}

/* La marca de verificación se dibuja con dos bordes rotados: así no hace
   falta ningún icono externo. */
.contact__consent-box::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 45%;
	width: clamp(5px, calc(5 / 1920 * 100vw), 7px);
	height: clamp(9px, calc(9 / 1920 * 100vw), 13px);
	border: solid #FAF9F2;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.contact__consent input:checked + .contact__consent-box {
	background-color: var(--color-btn-primary);
}

.contact__consent input:checked + .contact__consent-box::after {
	opacity: 1;
}

.contact__consent input:focus-visible + .contact__consent-box {
	outline: 2px solid var(--color-btn-primary);
	outline-offset: 2px;
}

.contact__consent a {
	color: inherit;
	text-decoration: underline;
}

.contact__submit {
	width: 100%;
	margin-top: clamp(16px, calc(16 / 1920 * 100vw), 22px);
	border: 0;
	cursor: pointer;
	text-align: center;
}