@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap');

:root {
	--color-primary-bg: #c0b29b;
	--color-primary-accent: #c0b29b;
	--color-secondary-bg: #fafafa;
	--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-status-message-bg: rgba(248, 249, 250, 0.90);
	--color-status-message-border: var(--color-border);
	--color-status-message-text: #333;
	--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.7);

	--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.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;
	--line-height-status: 1;

	--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-duration-medium: 0.5s;
	--transition-timing-function: ease;

	--max-width-form: 460px;
	--max-width-status-message: 460px;
	--max-width-status-message-mobile: 90%;
	--input-textarea-height: 80px;

	--z-index-status-message: 1000;
}

* {
	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);
	overflow: hidden;
	line-height: var(--line-height-body);
	color: var(--color-text-body);
}

::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(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-block-start: var(--spacing-xxl);
	padding-inline-end: var(--spacing-xxl);
	padding-block-end: 0;
	padding-inline-start: var(--spacing-xxxl); 
	max-height: 100vh;
	overflow-y: auto;
}

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

.info-section 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-l);
}

.social-icons a {
	text-decoration: none;
	font-size: var(--font-size-icon);
	display: inline-flex;
	align-items: center;
}

.social-icons a .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;
}

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

.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');
}

.facebook-icon {
	-webkit-mask-image: url('/elements/icons/facebook.svg');
	mask-image: url('/elements/icons/facebook.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-s);
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: var(--spacing-s);
	border: var(--border-thin);
	border-radius: var(--border-radius-small);
	font-size: var(--font-size-input);
	font-family: inherit;
}

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

.contact-form button {
	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);
}

.contact-form button:hover {
	background-color: var(--color-button-bg-hover);
}

.footer {
	margin-top: auto;
}

.footer p {
	font-size: var(--font-size-footer);
	color: var(--color-text-subtle);
	text-align: left;
	padding-block-start: var(--spacing-xl);
}

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

.footer a:hover {
	text-decoration: underline;
}

#status-message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: var(--max-width-status-message);
	z-index: var(--z-index-status-message);
	padding: var(--spacing-l);
	background-color: var(--color-status-message-bg);
	border: 1px solid var(--color-status-message-border);
	border-radius: var(--border-radius-small);
	color: var(--color-status-message-text);
	text-align: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity var(--transition-duration-medium) var(--transition-timing-function);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: var(--line-height-status);
}

#status-message.visible {
	opacity: 1;
	pointer-events: auto;
}

.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;
	}

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

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

	#status-message {
		width: var(--max-width-status-message-mobile);
		padding: var(--spacing-m);
	}
}

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

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

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

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