/* =========================================================
   AUTH - PONCE PARK
========================================================= */


/* =========================================================
   RESET
========================================================= */

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


.auth-body {
	margin: 0;

	font-family:
		"Urbanist",
		sans-serif;

	background:
		#0b0b0b;

	color:
		#111111;
}


/* =========================================================
   PÁGINA
========================================================= */

.auth-page {
	min-height: 760px;

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

	padding:
		50px
		24px;

	background:
		#0b0b0b;
}


.auth-shell {
	width:
		min(
			100%,
			1100px
		);

	min-height: 650px;

	display: grid;

	grid-template-columns:
		1fr
		1fr;

	overflow: hidden;

	border-radius: 24px;

	background:
		#ffffff;

	box-shadow:
		0
		25px
		70px
		rgba(
			0,
			0,
			0,
			.32
		);
}


/* =========================================================
   PAINEL DA MARCA
========================================================= */

.auth-brand-panel {
	position: relative;

	min-height: 650px;

	background-image:
		url("../img/hero-poncepark.webp");

	background-size:
		cover;

	background-position:
		center;
}


.auth-brand-overlay {
	position: absolute;

	inset: 0;

	background:
		#0c1b32;
}


.auth-brand-content {
	position: relative;

	z-index: 2;

	height: 100%;

	display: flex;

	flex-direction:
		column;

	justify-content:
		center;

	padding:
		55px;

	color:
		#ffffff;
}


.auth-logo img {
	width:
		190px;

	height:
		auto;
}


.auth-brand-content h1 {
	max-width:
		100%;

	margin:
		55px
		0
		18px;

	font-size:
		38px;

	line-height:
		1.08;

	font-weight:
		800;

	letter-spacing:
		-.6px;
}


.auth-brand-content p {
	max-width:
		410px;

	margin:
		0;

	color:
		rgba(
			255,
			255,
			255,
			.82
		);

	font-size:
		15px;

	line-height:
		1.6;
}


.auth-brand-benefits {
	display:
		grid;

	gap:
		13px;

	margin-top:
		36px;
}


.auth-brand-benefits div {
	display:
		flex;

	align-items:
		center;

	gap:
		10px;

	font-size:
		13px;
}


.auth-brand-benefits i {
	color:
		#f05a00;

	font-size:
		20px;
}


/* =========================================================
   PAINEL DE FORMULÁRIO
========================================================= */

.auth-form-panel {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		45px;

	background:
		#ffffff;
}


.auth-card {
	width:
		100%;

	max-width:
		390px;
}


.auth-kicker {
	display:
		block;

	margin-bottom:
		7px;

	color:
		#f05a00;

	font-size:
		10px;

	font-weight:
		800;

	letter-spacing:
		1.4px;
}


.auth-card-header h2 {
	margin:
		0;

	font-size:
		31px;

	font-weight:
		800;
}


.auth-card-header p {
	margin:
		8px
		0
		28px;

	color:
		#777777;

	font-size:
		13px;
}


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

.auth-form {
	display:
		grid;

	gap:
		18px;
}


.auth-field label {
	display:
		block;

	margin-bottom:
		7px;

	font-size:
		12px;

	font-weight:
		700;
}


.auth-field-top {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		12px;
}


.auth-field-top a {
	color:
		#f05a00;

	font-size:
		11px;

	font-weight:
		600;

	text-decoration:
		none;
}


.auth-control {
	position:
		relative;

	width:
		100%;
}


.auth-control > i {
	position:
		absolute;

	top:
		50%;

	left:
		14px;

	transform:
		translateY(-50%);

	color:
		#888888;
}


.auth-control input {
	width:
		100%;

	max-width:
		100%;

	height:
		50px;

	padding:
		0
		52px
		0
		42px;

	border:
		1px solid
		#dddddd;

	border-radius:
		10px;

	background:
		#ffffff;

	color:
		#151515;

	font-family:
		inherit;

	font-size:
		13px;

	outline:
		none;

	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}


.auth-control input::placeholder {
	color:
		#aaaaaa;
}


.auth-control input:focus {
	border-color:
		#f05a00;

	box-shadow:
		0
		0
		0
		3px
		rgba(
			240,
			90,
			0,
			.08
		);
}


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

.auth-primary-button {
	width:
		100%;

	height:
		52px;

	border:
		0;

	border-radius:
		10px;

	background:
		#f05a00;

	color:
		#ffffff;

	font-family:
		inherit;

	font-size:
		14px;

	font-weight:
		800;

	cursor:
		pointer;

	transition:
		background .2s ease,
		transform .2s ease,
		opacity .2s ease;
}


.auth-primary-button:hover:not(:disabled) {
	background:
		#dc5000;

	transform:
		translateY(-1px);
}


.auth-primary-button:disabled {
	opacity:
		.6;

	cursor:
		not-allowed;

	transform:
		none;
}


/* =========================================================
   DIVISOR
========================================================= */

.auth-divider {
	position:
		relative;

	margin:
		26px
		0;

	text-align:
		center;
}


.auth-divider::before {
	content:
		"";

	position:
		absolute;

	top:
		50%;

	left:
		0;

	width:
		100%;

	height:
		1px;

	background:
		#eeeeee;
}


.auth-divider span {
	position:
		relative;

	padding:
		0
		12px;

	background:
		#ffffff;

	color:
		#999999;

	font-size:
		11px;
}

/* =========================================================
   GOOGLE
========================================================= */

.auth-google-button {
	width:
		100%;

	min-height:
		50px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		10px;

	border:
		1px solid
		#f45800;

	border-radius:
		10px;

	background:
		#ffffff;

	color:
		#f45800;

	font-family:
		inherit;

	font-size:
		14px;

	font-weight:
		700;

	text-decoration:
		none;

	cursor:
		pointer;

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


/* HOVER */
.auth-google-button:hover {
	border-color:
		#f45800;

	color:
		#f45800;

	background:
		#fff4ed;

	text-decoration:
		none;

	box-shadow:
		none;
}

/* CLIQUE */
.auth-google-button:active {
	background:
		#d94e00;

	border-color:
		#d94e00;

	color:
		#ffffff;
}


/* FOCO PELO TECLADO */
.auth-google-button:focus-visible {
	outline:
		2px solid
		rgba(244, 88, 0, 0.30);

	outline-offset:
		3px;
}

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

.auth-whatsapp-button {
	width:
		100%;

	min-height:
		54px;

	margin-top:
		12px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		10px;

	padding:
		0
		20px;

	border:
		1px solid
		#dddddd;

	border-radius:
		10px;

	background:
		#ffffff;

	color:
		#555555;

	font-family:
		inherit;

	font-size:
		15px;

	font-weight:
		700;

	cursor:
		pointer;

	transition:
		border-color .2s ease,
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}


.auth-whatsapp-button i {
	font-size:
		19px;

	color:
		#25d366;
}


.auth-whatsapp-button:hover {
	border-color:
		#25d366;

	background:
		#f7fff9;

	color:
		#1f1f1f;

	transform:
		translateY(-1px);
}


.auth-whatsapp-button:active {
	transform:
		translateY(0);
}


/* =========================================================
   RODAPÉ LOGIN
========================================================= */
.auth-footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center;
    margin-top: 5px;
}

.auth-footer-link span {
    line-height: 1.4;
}

.auth-footer-link a {
    display: inline-flex;
    align-items: center;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    color: #f45800;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-footer-link a:hover {
    color: #0c1b31;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-back-link {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		6px;

	margin-top:
		24px;

	color:
		#777777;

	font-size:
		11px;

	text-decoration:
		none;
}


/* =========================================================
   ALERTAS
========================================================= */

.auth-alert {
	display:
		flex;

	align-items:
		center;

	gap:
		8px;

	margin-bottom:
		18px;

	padding:
		11px
		13px;

	border-radius:
		9px;

	font-size:
		11px;
}


.auth-alert-error {
	border:
		1px solid
		#ffc2ae;

	background:
		#fff3ee;

	color:
		#a6310b;
}


.auth-alert-success {
	border:
		1px solid
		#bfe8c8;

	background:
		#f1fff4;

	color:
		#24783a;
}


/* =========================================================
   MOSTRAR / OCULTAR SENHA
========================================================= */

.auth-control input[type="password"],
.auth-control input[type="text"] {
	padding-right:
		52px;
}


.auth-password-toggle {
	position:
		absolute;

	top:
		50%;

	right:
		14px;

	transform:
		translateY(-50%);

	width:
		34px;

	height:
		34px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0;

	border:
		0;

	background:
		transparent;

	color:
		#8b8b8b;

	font-size:
		18px;

	cursor:
		pointer;

	z-index:
		5;
}


.auth-password-toggle:hover {
	color:
		#f05a00;
}


.auth-password-toggle:focus {
	outline:
		none;
}


.auth-password-toggle i {
	position:
		static;

	transform:
		none;

	pointer-events:
		none;

	font-size:
		18px;
}


/* =========================================================
   MODAL WHATSAPP
========================================================= */

.whatsapp-login-modal {
	position:
		fixed;

	inset:
		0;

	z-index:
		99999;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		24px;
}


.whatsapp-login-modal[hidden] {
	display:
		none !important;
}


.whatsapp-login-overlay {
	position:
		absolute;

	inset:
		0;

	background:
		rgba(
			2,
			8,
			18,
			.82
		);

	backdrop-filter:
		blur(7px);

	-webkit-backdrop-filter:
		blur(7px);
}


/* =========================================================
   DIALOG
========================================================= */

.whatsapp-login-dialog {
	position:
		relative;

	z-index:
		2;

	width:
		100%;

	max-width:
		480px;

	padding:
		40px;

	background:
		#ffffff;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			.7
		);

	border-radius:
		22px;

	box-shadow:
		0
		35px
		90px
		rgba(
			0,
			0,
			0,
			.38
		);

	animation:
		whatsappModalEntrada
		.25s
		ease;
}


@keyframes whatsappModalEntrada {

	from {
		opacity:
			0;

		transform:
			translateY(18px)
			scale(.98);
	}

	to {
		opacity:
			1;

		transform:
			translateY(0)
			scale(1);
	}

}


/* =========================================================
   FECHAR
========================================================= */

.whatsapp-login-close {
	position:
		absolute;

	top:
		17px;

	right:
		17px;

	width:
		40px;

	height:
		40px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0;

	border:
		0;

	border-radius:
		50%;

	background:
		#f4f5f6;

	color:
		#777777;

	font-size:
		16px;

	cursor:
		pointer;

	transition:
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}


.whatsapp-login-close:hover {
	background:
		#eceeef;

	color:
		#111111;

	transform:
		rotate(5deg);
}


/* =========================================================
   ETAPAS
========================================================= */

.whatsapp-login-etapa[hidden] {
	display:
		none !important;
}


.whatsapp-login-etapa {
	width:
		100%;
}


.whatsapp-login-etapa h3 {
	margin:
		0
		0
		8px;

	font-size:
		27px;

	line-height:
		1.15;

	font-weight:
		800;

	color:
		#171717;
}


.whatsapp-login-etapa > p,
.whatsapp-login-cabecalho > p {
	margin:
		0;

	font-size:
		14px;

	line-height:
		1.55;

	color:
		#737373;
}


/* =========================================================
   ÍCONE WHATSAPP ETAPA TELEFONE
========================================================= */

.whatsapp-login-icon {
	width:
		62px;

	height:
		62px;

	margin-bottom:
		20px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	border-radius:
		17px;

	background:
		#eafbf0;

	color:
		#25d366;

	font-size:
		30px;
}


.whatsapp-login-cabecalho {
	margin-bottom:
		26px;
}


.whatsapp-login-kicker {
	display:
		block;

	margin-bottom:
		6px;

	color:
		#f45800;

	font-size:
		10px;

	font-weight:
		800;

	letter-spacing:
		1.3px;
}


.whatsapp-login-dialog .auth-field {
	margin-bottom:
		18px;
}


.whatsapp-login-dialog .auth-control {
	background:
		#ffffff;
}


.whatsapp-login-dialog .auth-alert {
	margin:
		0
		0
		18px;

	text-align:
		left;
}


/* =========================================================
   ETAPA CÓDIGO
========================================================= */

.whatsapp-login-etapa-codigo {
	text-align:
		center;
}


/* =========================================================
   TOPO DA ETAPA CÓDIGO
========================================================= */

.whatsapp-codigo-header {
	position:
		relative;

	min-height:
		48px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	margin-bottom:
		20px;
}


.whatsapp-codigo-voltar {
	position:
		absolute;

	left:
		0;

	top:
		50%;

	transform:
		translateY(-50%);

	width:
		42px;

	height:
		42px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0;

	border:
		0;

	border-radius:
		50%;

	background:
		transparent;

	color:
		#f45800;

	font-size:
		24px;

	cursor:
		pointer;

	transition:
		background .2s ease;
}


.whatsapp-codigo-voltar:hover {
	background:
		#fff2ea;
}


.whatsapp-codigo-icone {
	width:
		48px;

	height:
		48px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	border-radius:
		14px;

	background:
		#eafbf0;

	color:
		#25d366;

	font-size:
		24px;
}


/* =========================================================
   TÍTULO / TEXTO
========================================================= */

.whatsapp-login-etapa-codigo h3 {
	margin:
		0
		0
		8px;

	font-size:
		25px;

	line-height:
		1.2;

	font-weight:
		800;

	color:
		#171717;
}


.whatsapp-codigo-texto {
	max-width:
		330px;

	margin:
		0
		auto
		8px !important;

	font-size:
		14px;

	line-height:
		1.45;

	color:
		#777777;
}


/* =========================================================
   TELEFONE
========================================================= */

.whatsapp-codigo-telefone {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		9px;

	margin-bottom:
		34px;
}


.whatsapp-codigo-telefone i {
	font-size:
		21px;

	color:
		#25d366;
}


.whatsapp-codigo-telefone strong {
	font-size:
		16px;

	font-weight:
		800;

	color:
		#222222;

	letter-spacing:
		.2px;
}


/* =========================================================
   6 DÍGITOS
========================================================= */

.whatsapp-codigo-campos {
	width:
		100%;

	max-width:
		340px;

	margin:
		0
		auto
		28px;

	display:
		grid;

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

	gap:
		14px;
}


.whatsapp-codigo-digito {
	width:
		100%;

	min-width:
		0;

	height:
		58px;

	padding:
		0;

	border:
		0;

	border-bottom:
		2px solid
		#d8d8d8;

	border-radius:
		0;

	background:
		transparent;

	color:
		#171717;

	font-family:
		inherit;

	font-size:
		29px;

	font-weight:
		800;

	text-align:
		center;

	outline:
		none;

	caret-color:
		#f45800;

	-webkit-appearance:
		none;

	appearance:
		none;

	transition:
		border-color .2s ease,
		color .2s ease;
}


.whatsapp-codigo-digito:focus {
	border-bottom-color:
		#f45800;
}


.whatsapp-codigo-digito:valid {
	border-bottom-color:
		#f45800;
}


/* =========================================================
   CONTADOR
========================================================= */

.whatsapp-codigo-contador {
	min-height:
		22px;

	margin:
		0
		0
		22px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		4px;

	color:
		#aaaaaa;

	font-size:
		13px;
}


.whatsapp-codigo-contador[hidden] {
	display:
		none !important;
}


.whatsapp-codigo-contador strong {
	color:
		#777777;

	font-weight:
		700;
}


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

.whatsapp-codigo-entrar {
	margin-top:
		0 !important;
}


/* =========================================================
   REENVIAR
========================================================= */

.whatsapp-reenviar-area {
	min-height:
		44px;

	margin-top:
		14px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		5px;

	font-size:
		13px;

	color:
		#999999;
}


.whatsapp-reenviar-button {
	width:
		auto;

	margin:
		0;

	padding:
		5px
		2px;

	border:
		0;

	background:
		transparent;

	color:
		#f45800;

	font-family:
		inherit;

	font-size:
		13px;

	font-weight:
		800;

	cursor:
		pointer;
}


.whatsapp-reenviar-button:not(:disabled):hover {
	text-decoration:
		underline;
}


.whatsapp-reenviar-button:disabled {
	color:
		#c5c5c5;

	cursor:
		not-allowed;

	text-decoration:
		none;
}


/* =========================================================
   SEGURANÇA
========================================================= */

.whatsapp-codigo-seguranca {
	margin-top:
		20px;

	padding-top:
		17px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		7px;

	border-top:
		1px solid
		#eeeeee;

	color:
		#9a9a9a;

	font-size:
		11px;
}


.whatsapp-codigo-seguranca i {
	color:
		#25d366;

	font-size:
		15px;
}


/* =========================================================
   BLOQUEAR SCROLL COM MODAL
========================================================= */

.auth-modal-open {
	overflow:
		hidden;
}


/* =========================================================
   HIDDEN ALERTAS
========================================================= */

#whatsappLoginErro[hidden],
#whatsappCodigoErro[hidden] {
	display:
		none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
	max-width: 800px
) {

	/*
	 * No Safari do iPhone, campos com fonte menor que 16px
	 * recebem zoom automático ao ganhar foco.
	 */
	.auth-control input,
	.auth-control input[type="email"],
	.auth-control input[type="password"],
	.auth-control input[type="text"],
	.auth-control input[type="tel"] {

		font-size:
			16px;

	}


	/*
	 * O fundo geral acompanha o rodapé no mobile.
	 * A área do login continua preta através de .auth-page.
	 * Isso elimina a faixa preta depois do footer.
	 */
	.auth-body {

		background:
			#0c1b31;

	}


	.auth-page {
		padding:
			20px
			12px;
	}


	.auth-shell {
		grid-template-columns:
			1fr;
	}


	.auth-brand-panel {
		min-height:
			310px;
	}


	.auth-brand-content {
		padding:
			30px;
	}


	.auth-brand-content h1 {
		margin-top:
			30px;

		font-size:
			30px;
	}


	.auth-form-panel {
		padding:
			38px
			24px;
	}

}


/* =========================================================
   MOBILE MODAL
========================================================= */

@media (
	max-width: 600px
) {

	.whatsapp-login-modal {
		padding:
			14px;
	}


	.whatsapp-login-dialog {
		max-width:
			100%;

		padding:
			32px
			22px
			26px;

		border-radius:
			18px;
	}


	.whatsapp-login-etapa h3 {
		font-size:
			23px;
	}


	.whatsapp-login-etapa-codigo h3 {
		font-size:
			22px;
	}


	.whatsapp-codigo-campos {
		max-width:
			300px;

		gap:
			9px;
	}


	.whatsapp-codigo-digito {
		height:
			50px;

		font-size:
			24px;
	}


	.whatsapp-codigo-telefone strong {
		font-size:
			15px;
	}

}