.contact-page {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
	width: clamp(300px, 90%, 1200px);
	padding: clamp(1rem, 2vw, 2rem);

	.contact-info {
		display: flex;
		flex-direction: column;
		gap: clamp(0.5rem, 1vw, 1rem);
		padding: clamp(1rem, 2vw, 2rem);
		margin-top: clamp(1rem, 2vw, 2rem);

		p {
			font-size: clamp(0.9rem, 1.5vw, 1rem);
			line-height: 1.4;
			text-align: justify;
		}

		.info-block {
			margin-bottom: clamp(0.5rem, 1vw, 1rem);

			h3 {
				font-size: clamp(1rem, 2vw, 1.25rem);
				color: #ffa200;
				margin-bottom: 0.25rem;
			}

			p {
				font-size: clamp(0.9rem, 1.5vw, 1rem);
				line-height: 1.4;
			}
		}
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: clamp(1rem, 1.5vw, 2rem);
		padding: clamp(1rem, 2vw, 2rem);
		margin-top: clamp(1rem, 2vw, 2rem);
		background-color: #eae9e9;

		.mensaje {
			padding: 1rem;
			background-color: #e0f7fa; /* color suave para éxito; ajusta si es error */
			border: 1px solid #4dd0e1;
			color: #00796b;
			margin-bottom: 1rem;
			text-align: center;
			border-radius: 4px;
		}

		h1 {
			font-size: clamp(2rem, 6vw, 3rem);
			color: #333;
			text-align: center;
			/* margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem); */
		}

		.subtitle {
			font-size: clamp(0.9rem, 2vw, 1.1rem);
			color: #333;
			font-weight: bold;
			text-align: center;
		}

		form {
			display: flex;
			flex-direction: column;
			gap: clamp(0.5rem, 1vw, 1rem);

			label {
				font-weight: bold;
				font-size: clamp(0.9rem, 1.5vw, 1rem);
				margin-bottom: 0.25rem;
			}

			input,
			select,
			textarea {
				padding: clamp(0.4rem, 1vw, 0.8rem);
				border: 1px solid #ccc;
				border-radius: clamp(0.25rem, 0.5vw, 0.5rem);
				font-size: clamp(0.9rem, 1.5vw, 1rem);
				border-bottom: 1px solid orange;
				/* color: #ff6816; */
			}

			textarea {
				resize: none;
				max-height: clamp(100px, 20vw, 200px);
			}

			.btn-enviar {
				align-self: flex-start;
				background-color: #ffa500;
				color: #fff;
				border: none;
				border-radius: clamp(0.25rem, 0.5vw, 0.5rem);
				padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
				font-size: clamp(0.9rem, 1.5vw, 1rem);
				cursor: pointer;
				transition: background-color 0.3s ease;
				margin: auto;

				&:hover {
					background-color: #ff8f00;
				}
			}
		}
	}
}