/* =========================================================
   TEMA CLARO - PÁGINA DE CONTATO
   ========================================================= */

/* Título principal */
.savegame-contato-header h1 {
	color: #1f232b !important;
}


/* Texto abaixo do título */
.savegame-contato-header p {
	color: #6b7280 !important;
}


/* Título do formulário */
.savegame-contato-card-header h2 {
	color: #1f232b !important;
}


/* Texto abaixo do título do formulário */
.savegame-contato-card-header p {
	color: #6b7280 !important;
}


/* Labels: Nome, E-mail, Assunto e Mensagem */
.savegame-form-grupo label {
	color: #374151 !important;
}


/* Texto digitado nos campos */
.savegame-form input,
.savegame-form select,
.savegame-form textarea {
	color: #1f232b !important;
}


/* Placeholder */
.savegame-form input::placeholder,
.savegame-form textarea::placeholder {
	color: #777f8c !important;
	opacity: 1;
}


/* Select */
.savegame-form select {
	color: #1f232b !important;
}


/* Opções do select */
.savegame-form select option {
	background: #ffffff;
	color: #1f232b;
}


/* Títulos dos cards laterais */
.savegame-info-titulo {
	color: #1f232b !important;
}


/* Texto dos cards laterais */
.savegame-info-conteudo p {
	color: #616975 !important;
}


/* Título do card de dica */
.savegame-contato-dica h3 {
	color: #1f232b !important;
}


/* Texto do card de dica */
.savegame-contato-dica p {
	color: #616975 !important;
}/**
 * Save Game - Página de Contato
 */


/* =========================================================
   BASE
   ========================================================= */

.savegame-contato {
	width: 100%;
	padding: 40px 0 60px;
}

.savegame-contato *,
.savegame-contato *::before,
.savegame-contato *::after {
	box-sizing: border-box;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.savegame-contato-container {
	width: 100%;
	max-width: 1200px;

	margin: 0 auto;
	padding: 0 20px;
}


/* =========================================================
   CABEÇALHO
   ========================================================= */

.savegame-contato-header {
	max-width: 720px;

	margin: 0 auto 40px;

	text-align: center;
}

.savegame-contato-tag {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	margin-bottom: 14px;

	padding: 6px 12px;

	border: 1px solid rgba(135, 88, 245, 0.35);
	border-radius: 999px;

	background: rgba(135, 88, 245, 0.08);

	color: #8758f5;

	font-size: 12px;
	font-weight: 700;

	letter-spacing: 1.2px;
}

.savegame-contato-header h1 {
	margin: 0 0 14px;

	color: #ffffff;

	font-size: clamp(30px, 5vw, 46px);
	font-weight: 800;
	line-height: 1.1;
}

.savegame-contato-header p {
	max-width: 620px;

	margin: 0 auto;

	color: #aeb7c5;

	font-size: 16px;
	line-height: 1.7;
}


/* =========================================================
   GRID
   ========================================================= */

.savegame-contato-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.65fr)
		minmax(280px, 0.8fr);

	gap: 24px;

	align-items: start;
}


/* =========================================================
   CARDS
   ========================================================= */

.savegame-contato-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.035),
			rgba(255, 255, 255, 0.015)
		);

	box-shadow:
		0 15px 40px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   FORMULÁRIO - CARD
   ========================================================= */

.savegame-contato-formulario {
	padding: 30px;
}

.savegame-contato-card-header {
	display: flex;

	align-items: center;

	gap: 15px;

	margin-bottom: 28px;
}

.savegame-contato-icone {
	display: flex;

	flex: 0 0 46px;

	width: 46px;
	height: 46px;

	align-items: center;
	justify-content: center;

	border: 1px solid rgba(135, 88, 245, 0.25);
	border-radius: 12px;

	background: rgba(135, 88, 245, 0.10);

	color: #8758f5;

	font-size: 21px;
	font-weight: 700;
}

.savegame-contato-card-header h2 {
	margin: 0 0 5px;

	color: #ffffff;

	font-size: 21px;
	font-weight: 700;
}

.savegame-contato-card-header p {
	margin: 0;

	color: #8994a5;

	font-size: 14px;
	line-height: 1.5;
}


/* =========================================================
   FORMULÁRIO
   ========================================================= */

.savegame-form {
	display: flex;

	flex-direction: column;

	gap: 21px;
}

.savegame-form-grupo {
	display: flex;

	flex-direction: column;

	gap: 8px;
}

.savegame-form-grupo label {
	color: #dce3ed;

	font-size: 14px;
	font-weight: 600;
}


/* =========================================================
   INPUTS
   ========================================================= */

.savegame-form input,
.savegame-form select,
.savegame-form textarea {
	width: 100%;

	margin: 0;

	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;

	outline: none;

	background: rgba(0, 0, 0, 0.18);

	color: #ffffff;

	font-family: inherit;
	font-size: 15px;

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		box-shadow 0.2s ease;
}

.savegame-form input,
.savegame-form select {
	height: 50px;

	padding: 0 15px;
}

.savegame-form textarea {
	min-height: 160px;

	padding: 14px 15px;

	resize: vertical;

	line-height: 1.6;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.savegame-form input::placeholder,
.savegame-form textarea::placeholder {
	color: #697586;
}


/* =========================================================
   SELECT
   ========================================================= */

.savegame-form select {
	cursor: pointer;
}

.savegame-form select option {
	background: #151a22;

	color: #ffffff;
}


/* =========================================================
   FOCUS
   ========================================================= */

.savegame-form input:focus,
.savegame-form select:focus,
.savegame-form textarea:focus {
	border-color: #8758f5;

	background: rgba(135, 88, 245, 0.035);

	box-shadow:
		0 0 0 3px rgba(135, 88, 245, 0.10);
}


/* =========================================================
   BOTÃO
   ========================================================= */

.savegame-form-botao {
	display: flex;

	width: 100%;

	align-items: center;
	justify-content: center;

	gap: 12px;

	min-height: 52px;

	margin-top: 3px;

	padding: 12px 20px;

	border: 0;
	border-radius: 10px;

	background: #8758f5;

	color: #ffffff;

	font-family: inherit;
	font-size: 15px;
	font-weight: 700;

	cursor: pointer;

	transition:
		transform 0.2s ease,
		background 0.2s ease,
		box-shadow 0.2s ease;
}

.savegame-form-botao:hover {
	background: #7547e8;

	transform: translateY(-2px);

	box-shadow:
		0 10px 25px rgba(135, 88, 245, 0.25);
}

.savegame-form-botao:active {
	transform: translateY(0);
}

.savegame-form-botao-seta {
	font-size: 20px;

	line-height: 1;

	transition: transform 0.2s ease;
}

.savegame-form-botao:hover
.savegame-form-botao-seta {
	transform: translateX(4px);
}


/* =========================================================
   COLUNA LATERAL
   ========================================================= */

.savegame-contato-lateral {
	display: flex;

	flex-direction: column;

	gap: 18px;
}


/* =========================================================
   CARDS DE INFORMAÇÃO
   ========================================================= */

.savegame-info-card {
	display: flex;

	align-items: flex-start;

	gap: 14px;

	padding: 21px;
}

.savegame-info-icone {
	display: flex;

	flex: 0 0 40px;

	width: 40px;
	height: 40px;

	align-items: center;
	justify-content: center;

	border: 1px solid rgba(135, 88, 245, 0.25);
	border-radius: 10px;

	background: rgba(135, 88, 245, 0.08);

	color: #8758f5;

	font-size: 17px;
	font-weight: 700;
}

.savegame-info-conteudo {
	min-width: 0;
}

.savegame-info-titulo {
	display: block;

	margin-bottom: 5px;

	color: #ffffff;

	font-size: 15px;
	font-weight: 700;
}

.savegame-info-conteudo a {
	display: block;

	max-width: 100%;

	margin-bottom: 9px;

	color: #8758f5;

	font-size: 14px;
	font-weight: 600;

	text-decoration: none;

	overflow-wrap: anywhere;
}

.savegame-info-conteudo a:hover {
	color: #a384ff;

	text-decoration: underline;
}

.savegame-info-conteudo p {
	margin: 0;

	color: #8f9baa;

	font-size: 13px;
	line-height: 1.6;
}


/* =========================================================
   CARD DE DICA
   ========================================================= */

.savegame-contato-dica {
	padding: 24px;

	border-color: rgba(135, 88, 245, 0.18);

	background:
		linear-gradient(
			145deg,
			rgba(135, 88, 245, 0.09),
			rgba(255, 255, 255, 0.015)
		);
}

.savegame-contato-dica-tag {
	display: inline-flex;

	margin-bottom: 13px;

	padding: 5px 9px;

	border-radius: 6px;

	background: rgba(135, 88, 245, 0.12);

	color: #8758f5;

	font-size: 10px;
	font-weight: 800;

	letter-spacing: 1px;
}

.savegame-contato-dica h3 {
	margin: 0 0 10px;

	color: #ffffff;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.savegame-contato-dica p {
	margin: 0;

	color: #939eae;

	font-size: 13px;
	line-height: 1.7;
}


/* =========================================================
   STATUS DO FORMULÁRIO DE CONTATO
   ========================================================= */

.savegame-form-status {
	display: none;

	padding: 13px 15px;

	border: 1px solid transparent;
	border-radius: 10px;

	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.savegame-form-status.visivel {
	display: block;
}

.savegame-form-status.sucesso {
	border-color: rgba(54, 211, 153, 0.25);

	background: rgba(54, 211, 153, 0.08);

	color: #76e6bb;
}

.savegame-form-status.erro {
	border-color: rgba(255, 96, 96, 0.25);

	background: rgba(255, 96, 96, 0.08);

	color: #ff9292;
}


/* =========================================================
   BOTÃO DURANTE O ENVIO
   ========================================================= */

.savegame-form-botao:disabled {
	cursor: not-allowed;

	opacity: 0.65;

	transform: none;

	box-shadow: none;
}

.savegame-form-botao.carregando
.savegame-form-botao-seta {
	animation: savegame-contato-loading 0.8s infinite alternate;
}

@keyframes savegame-contato-loading {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(5px);
	}

}


/* =========================================================
   HONEYPOT ANTI-SPAM
   ========================================================= */

.savegame-form-honeypot {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	margin: -1px !important;
	padding: 0 !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* =========================================================
   RESPONSIVO - TABLET
   ========================================================= */

@media (max-width: 900px) {

	.savegame-contato-grid {
		grid-template-columns: 1fr;
	}

	.savegame-contato-lateral {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.savegame-contato-dica {
		grid-column: 1 / -1;
	}

}


/* =========================================================
   RESPONSIVO - MOBILE
   ========================================================= */

@media (max-width: 600px) {

	.savegame-contato {
		padding: 25px 0 45px;
	}

	.savegame-contato-container {
		padding: 0 15px;
	}

	.savegame-contato-header {
		margin-bottom: 28px;
	}

	.savegame-contato-header h1 {
		font-size: 30px;
	}

	.savegame-contato-header p {
		font-size: 14px;
	}

	.savegame-contato-formulario {
		padding: 20px;
	}

	.savegame-contato-card-header {
		align-items: flex-start;
	}

	.savegame-contato-lateral {
		display: flex;
	}

	.savegame-info-card {
		padding: 18px;
	}

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

.savegame-form-botao:focus-visible,
.savegame-form input:focus-visible,
.savegame-form select:focus-visible,
.savegame-form textarea:focus-visible,
.savegame-info-conteudo a:focus-visible {
	outline: 2px solid #8758f5;
	outline-offset: 3px;
}

/* =========================================================
   CORREÇÃO DAS CORES DOS TEXTOS
   ========================================================= */

/* Texto digitado nos campos */
.savegame-form input,
.savegame-form select,
.savegame-form textarea {
	color: #222222 !important;
}

/* Placeholder */
.savegame-form input::placeholder,
.savegame-form textarea::placeholder {
	color: #777777 !important;
}

/* Opções do seletor */
.savegame-form select option {
	color: #222222;
}


/* Título do card lateral */
.savegame-contato-dica h3 {
	color: #222222 !important;
}

/* Texto do card lateral */
.savegame-contato-dica p {
	color: #555555 !important;
}


/* Títulos dos cards */
.savegame-info-titulo {
	color: #222222 !important;
}

/* Textos dos cards */
.savegame-info-conteudo p {
	color: #555555 !important;
}

/* =========================================================
   TEMA CLARO - PÁGINA DE CONTATO
   ========================================================= */

/* Título principal */
.savegame-contato-header h1 {
	color: #1f232b !important;
}


/* Texto abaixo do título */
.savegame-contato-header p {
	color: #6b7280 !important;
}


/* Título do formulário */
.savegame-contato-card-header h2 {
	color: #1f232b !important;
}


/* Texto abaixo do título do formulário */
.savegame-contato-card-header p {
	color: #6b7280 !important;
}


/* Labels: Nome, E-mail, Assunto e Mensagem */
.savegame-form-grupo label {
	color: #374151 !important;
}


/* Texto digitado nos campos */
.savegame-form input,
.savegame-form select,
.savegame-form textarea {
	color: #1f232b !important;
}


/* Placeholder */
.savegame-form input::placeholder,
.savegame-form textarea::placeholder {
	color: #777f8c !important;
	opacity: 1;
}


/* Select */
.savegame-form select {
	color: #1f232b !important;
}


/* Opções do select */
.savegame-form select option {
	background: #ffffff;
	color: #1f232b;
}


/* Títulos dos cards laterais */
.savegame-info-titulo {
	color: #1f232b !important;
}


/* Texto dos cards laterais */
.savegame-info-conteudo p {
	color: #616975 !important;
}


/* Título do card de dica */
.savegame-contato-dica h3 {
	color: #1f232b !important;
}


/* Texto do card de dica */
.savegame-contato-dica p {
	color: #616975 !important;
}