:root {
	--color-primary-bg: #c0b29b;
	--color-secondary-bg: #fafafa;
	--color-primary-accent: #c0b29b;
	--color-text-heading: #303030;
	--color-text-body: #666;
	--color-text-subtle: #999;
	--color-text-selection: var(--color-secondary-bg);
	--color-selection-bg: var(--color-primary-bg);
	--color-link: #007bff;
	--color-button-bg: #9b907e;
	--color-button-text: white;
	--color-button-bg-hover: var(--color-primary-accent);
	--color-social-icon: var(--color-button-bg);
	--color-social-icon-hover: var(--color-primary-accent);
	--color-border: #ccc;
	--color-overlay-dark: rgba(0, 0, 0, 0.2);
	--color-overlay-darker: rgba(0, 0, 0, 0.7);
	--color-info-section-bg-mobile: rgba(255, 255, 255, 0.85);

	--font-primary: 'Open Sans', sans-serif;
	--font-weight-normal: 400;
	--font-weight-light: 300;
	--font-weight-bold: 700;

	--font-size-base: 1rem;
	--font-size-h1: 2rem;
	--font-size-h1-mobile: 1.6rem;
	--font-size-h1-small-mobile: 1.4rem;
	--font-size-icon: 1.5rem;
	--font-size-input: 0.65rem;
	--font-size-text: 0.85rem;
	--font-size-button: 1rem;
	--font-size-footer: 0.6rem;
	--font-size-footer-small-mobile: 0.5rem;

	--line-height-heading: 1.3;
	--line-height-body: 1.6;

	--spacing-xs: 0.4rem;
	--spacing-s: 0.6rem;
	--spacing-m: 1rem;
	--spacing-l: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;
	--spacing-xxxl: 6rem;

	--border-radius-small: 4px;
	--border-thin: 1px solid var(--color-border);
	--transition-duration: 0.2s;
	--transition-timing-function: ease;

	--max-width-form: 460px;
	--input-textarea-height: 80px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	min-height: 100%;
	font-family: var(--font-primary);
	background-color: var(--color-primary-bg);
	color: var(--color-text-body);
	line-height: var(--line-height-body);
	overflow: hidden;
}

::selection {
	color: var(--color-text-selection);
	background: var(--color-selection-bg);
}

.container {
	display: flex;
	height: 100vh;
	align-items: stretch;
}

.photo-section {
	flex: 1;
	background: linear-gradient(to right, var(--color-overlay-dark), var(--color-overlay-darker)), url('/elements/img/bg-rui.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.info-section {
	flex: 1;
	background-color: var(--color-secondary-bg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--spacing-xxl) var(--spacing-xxl) 0 var(--spacing-xxxl);
	max-height: 100vh;
	overflow-y: auto;

	h1 {
		font-size: var(--font-size-h1);
		line-height: var(--line-height-heading);
		color: var(--color-text-heading);
		margin-block-end: var(--spacing-m);
	}

	p {
		font-size: var(--font-size-base);
		margin-block-end: var(--spacing-l);
	}
}

.social-icons {
	display: flex;
	gap: var(--spacing-m);
	margin-block-end: var(--spacing-xxl);

	a {
		text-decoration: none;
		font-size: var(--font-size-icon);
		display: inline-flex;

		&:hover .social-svg-icon {
			background-color: var(--color-social-icon-hover);
		}
	}
}

.social-svg-icon {
	display: inline-block;
	width: calc(var(--font-size-icon) * 0.75);
	height: calc(var(--font-size-icon) * 0.75);
	background-color: var(--color-social-icon);
	transition: background-color var(--transition-duration) var(--transition-timing-function);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.linkedin-icon {
	-webkit-mask-image: url('/elements/icons/linkedin.svg');
	mask-image: url('/elements/icons/linkedin.svg');
}

.instagram-icon {
	-webkit-mask-image: url('/elements/icons/instagram.svg');
	mask-image: url('/elements/icons/instagram.svg');
}

.whatsapp-icon {
	-webkit-mask-image: url('/elements/icons/whatsapp.svg');
	mask-image: url('/elements/icons/whatsapp.svg');
}

.contact-form {
	max-width: var(--max-width-form);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);

	.form-group {
		position: relative;
		display: flex;
		flex-direction: column;

		label {
			position: absolute;
			top: 0;
			left: var(--spacing-s);
			transform: translateY(-50%);
			background-color: var(--color-secondary-bg);
			padding: 0 var(--spacing-xs);
			font-size: var(--font-size-input);
			color: var(--color-text-subtle);
			pointer-events: none;
			transition: color var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function);
		}

		input, textarea {
			width: 100%;
			padding: var(--spacing-s);
			border: 1px solid var(--color-border);
			border-radius: var(--border-radius-small);
			font-size: var(--font-size-text);
			color: var(--color-text-heading);
			font-family: inherit;
			background: transparent;
			outline: none;
			transition: border-color var(--transition-duration) var(--transition-timing-function);

			&:focus {
				border-color: var(--color-button-bg);
			}
		}

		textarea {
			min-height: var(--input-textarea-height);
			resize: vertical;
		}

		&:focus-within label {
			color: var(--color-button-bg);
			border-color: var(--color-button-bg);
		}
	}

	button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing-s);
		padding: var(--spacing-s);
		background-color: var(--color-button-bg);
		color: var(--color-button-text);
		border: none;
		border-radius: var(--border-radius-small);
		font-size: var(--font-size-button);
		font-family: inherit;
		cursor: pointer;
		transition: background-color var(--transition-duration) var(--transition-timing-function);

		&:hover {
			background-color: var(--color-button-bg-hover);
		}

		&.loading {
			pointer-events: none;

			&::after {
				content: '';
				width: 16px;
				height: 16px;
				border: 2px solid rgba(255, 255, 255, 0.3);
				border-top-color: var(--color-button-text);
				border-radius: 50%;
				animation: button-spin 0.6s linear infinite;
				flex-shrink: 0;
			}
		}
	}
}

@keyframes button-spin {
	to {
		transform: rotate(360deg);
	}
}

.status-message {
	max-width: var(--max-width-form);
	padding: 10px;
	margin-top: 15px;
	border-radius: var(--border-radius-small);
	text-align: center;
	border: 1px solid transparent;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;

	&.hidden {
		opacity: 0;
	}

	&.success {
		color: #155724;
		background-color: #d4edda;
		border-color: #c3e6cb;
	}

	&.error {
		color: #721c24;
		background-color: #f8d7da;
		border-color: #f5c6cb;
	}
}

.footer {
	margin-top: auto;
	padding-block-start: var(--spacing-xl);

	p {
		font-size: var(--font-size-footer);
		color: var(--color-text-subtle);
		text-align: left;
	}

	a {
		color: var(--color-link);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.grecaptcha-badge {
	visibility: hidden !important;
}

@media (max-width: 768px) {
	body {
		background: linear-gradient(var(--color-overlay-dark), var(--color-overlay-darker)), url('/elements/img/bg-rui.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.container {
		flex-direction: column;
		height: auto;
		min-height: 100vh;
	}

	.photo-section {
		display: none;
	}

	.info-section {
		background-color: var(--color-info-section-bg-mobile);
		padding: var(--spacing-xl);
		overflow-y: visible;
		max-height: none;

		h1 {
			font-size: var(--font-size-h1-mobile);
		}
	}

	.contact-form {
		max-width: 100%;

		.form-group {
			label {
				background-color: var(--color-secondary-bg);
			}

			input, textarea {
				background-color: var(--color-secondary-bg);
				border-color: var(--color-text-subtle);
			}
		}
	}

	.status-message {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.info-section {
		padding: var(--spacing-m);

		h1 {
			font-size: var(--font-size-h1-small-mobile);
		}
	}

	.contact-form {
		gap: var(--spacing-m);
	}

	.footer p {
		font-size: var(--font-size-footer-small-mobile);
	}
}