/* Variáveis CSS */
:root {
	--color-blue-dark-bg: #091525;
	--color-blue-highlight: #2c97df;
	--color-green-highlight: #5cb85c;
	--color-light-text: #E0E0E0;
	--color-medium-text: #BBBBBB;
	/* Define a largura máxima do conteúdo relativa ao viewport */
	--max-width: 60vw; 
}

/* Estilos Base e RWD */
body {
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--color-blue-dark-bg);
	color: var(--color-light-text);
	/* Uso de flexbox para alinhamento central relativo à altura da viewport (vh) */
	display: flex; 
	flex-direction: column;
	min-height: 100vh; /* Altura mínima de 100% do viewport height */
	align-items: center; /* Centraliza horizontalmente */
	justify-content: center; /* Centraliza verticalmente */
	text-align: center;
}

.container {
	/* Largura máxima relativa, garantindo que não ultrapasse 90% da tela */
	max-width: 90%; 
	width: min(100%, var(--max-width));
	padding: 4vh 2vw; /* Padding relativo ao viewport height e width */
	box-sizing: border-box;
}

/* Logótipo */
.logo {
	margin-bottom: 4vh; /* Margem relativa ao viewport height */
}

.logo img {
	max-width: 100%; /* A imagem nunca excede a largura do container */
	height: auto;
}

/* Títulos (Tipografia Fluida) */
h1 {
	/* O tamanho da fonte é fluido, adaptando-se entre 1.8em e 2.2em */
	font-size: clamp(1.8em, 5vw, 2.2em); 
	font-weight: 700;
	margin-bottom: 1.5vh; /* Margem relativa */
	color: var(--color-blue-highlight);
}

.analogy {
	font-size: clamp(1em, 3vw, 1.1em);
	font-style: italic;
	color: var(--color-medium-text);
	margin-bottom: 6vh; /* Margem relativa */
}

/* Formulário de Subscrição */
.subscription-form h2 {
	font-size: 1.5em;
	margin-bottom: 3vh; /* Margem relativa */
	color: var(--color-light-text);
}

.input-group {
	display: flex;
	flex-direction: column; 
	gap: 1.5vh; /* Espaçamento relativo */
	margin-bottom: 4vh; /* Margem relativa */
}

.subscription-form input[type="email"] {
	padding: 1.5vh 1vw; /* Padding relativo */
	border: 1px solid #555;
	border-radius: 8px;
	font-size: 1em;
	width: 100%;
	box-sizing: border-box;
	background-color: #333;
	color: var(--color-light-text);
}

.subscription-form input[type="email"]::placeholder {
	color: #999;
}

.subscription-form button {
	padding: 1.5vh 3vw; /* Padding relativo */
	background-color: var(--color-green-highlight);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 100%;
}

.subscription-form button:hover {
	background-color: #4b9c4b;
}

.privacy-note {
	font-size: 0.85em;
	color: #999;
	margin-bottom: 4vh; /* Margem relativa */
}

/* Ajustes para Desktop (a partir de 600px) */
@media (min-width: 600px) {
	.input-group {
		flex-direction: row; 
	}
	
	.subscription-form input[type="email"] {
		flex-grow: 1; 
		width: auto;
	}
	
	.subscription-form button {
		width: auto;
	}
}

/* Rodapé */
footer {
	margin-top: auto;
	padding: 2vh 0; /* Padding relativo */
	width: 100%;
	background-color: #111;
	color: #aaa;
	font-size: 0.9em;
}

.social-icons a {
	color: white;
	margin: 0 1.5vw; /* Margem relativa ao viewport width */
	font-size: 1.3em; 
	transition: color 0.3s;
}

.social-icons a:hover {
	color: var(--color-green-highlight);
}

.footer-links a {
	color: #aaa;
	text-decoration: none;
	margin: 0 1vw; /* Margem relativa */
	padding: 0.5vh 0.5vw; /* Padding relativo */
	transition: color 0.3s;
}

.footer-links a:hover {
	color: var(--color-green-highlight);
	text-decoration: underline;
}

/* Hoverlay (Overlay) */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw; /* Largura total do viewport */
	height: 100vh; /* Altura total do viewport */
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center; /* Centraliza horizontalmente no viewport */
	align-items: center; /* Centraliza verticalmente no viewport */
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.5s, opacity 0.5s linear;
}

#overlay.show {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear;
}

.overlay-content {
	background-color: white;
	padding: 4vh 4vw; /* Padding relativo ao viewport */
	border-radius: 8px;
	text-align: center;
	position: relative;
	max-width: 50vw; /* Largura máxima relativa */
	width: 90%;	
}

.overlay-close {
	position: absolute;
	top: 1.5vh; /* Posição relativa */
	left: 2vw; /* Posição relativa */
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	color: #333;
}

.overlay-title {
	font-size: clamp(20px, 4vw, 28px);
	margin-bottom: 3vh; /* Margem relativa */
	color: #333;
}

.overlay-buttons {
	display: flex;
	justify-content: center;
	gap: 2vw; /* Espaçamento relativo */
	margin-top: 3vh; /* Margem relativa */
}

/* Estilos aplicados ao elemento <a> para parecer um botão */
.overlay-link {
	padding: 1.5vh 3vw; /* Padding relativo */
	font-size: 1em; /* Fonte relativa ao elemento pai */
	font-weight: bold;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	width: 35%;
	box-sizing: border-box;
	transition: background-color 0.3s ease;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

/* --- Cores Corrigidas --- */

.overlay-link.green {
	background-color: var(--color-green-highlight);
	color: white;
}

.overlay-link.green:hover {
	background-color: #4b9c4b;
}

.overlay-link.blue {
	background-color: var(--color-blue-highlight);
	color: white;
}

.overlay-link.blue:hover {
	background-color: #2786D6;
}

/* Ajustes Mobile Específicos do Overlay */
@media (max-width: 600px) {
	.overlay-content {
		padding: 3vh 3vw; /* Padding relativo para mobile */
	}
	
	.overlay-buttons {
		flex-direction: column;
		gap: 2vh;
	}
	.overlay-link {
		width: 100%;
	}
}