/*
	* ============================================================
	* STYLE.CSS
	* ============================================================
	*
	* CSS UNIFICADO DAS PÁGINAS DE AUTENTICAÇÃO
	*
	* PÁGINA 1:
	* login.php
	* https://auth.devtrom.com/login.php
	*
	* PÁGINA 2:
	* esqueci_senha.php
	* https://auth.devtrom.com/esqueci_senha.php
	*
	* PÁGINA 3:
	* recuperar_senha.php
	* https://auth.devtrom.com/recuperar_senha.php
	*
	* ============================================================
	*
	* ESTRUTURA:
	*
	* 1. VARIÁVEIS GLOBAIS
	* 2. VARIÁVEIS ESPECÍFICAS DE CADA PÁGINA
	* 3. RESET GLOBAL
	* 4. BODY
	* 5. FUNDO ANIMADO
	* 6. PARTÍCULAS
	* 7. CONTAINER PRINCIPAL
	* 8. CARD
	* 9. CABEÇALHO
	* 10. LOGO - LOGIN
	* 11. ÍCONE - RECUPERAÇÃO
	* 12. TÍTULOS
	* 13. ELEMENTOS DO FORMULÁRIO
	* 14. AUTOFILL
	* 15. BOTÃO MOSTRAR SENHA
	* 16. LINKS
	* 17. BOTÃO PRINCIPAL - LOGIN
	* 18. BOTÃO BIOMÉTRICO - LOGIN
	* 19. BOTÃO WHATSAPP - ESQUECI SENHA
	* 20. BOTÃO SALVAR - RECUPERAR SENHA
	* 21. BOTÃO NOVO LINK - RECUPERAÇÃO INVÁLIDA
	* 22. DIVISOR
	* 23. RODAPÉ
	* 24. BADGE DE SEGURANÇA
	* 25. COPYRIGHT
	* 26. SPINNER
	* 27. ANIMAÇÕES
	* 28. RESPONSIVIDADE
	*
	* ============================================================
	*/

/* ============================================================
	1. VARIÁVEIS GLOBAIS
	============================================================ */

:root {
	/* GRADIENTE PRINCIPAL UTILIZADO NOS ELEMENTOS ROXOS */
	--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	/* FUNDO PRINCIPAL */
	--bg-dark: #0a0a0f;
	/* FUNDO DOS CARDS */
	--card-bg: rgba(255, 255, 255, 0.05);
	/* CORES DOS TEXTOS */
	--text-primary: #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.7);
	/* BORDA DOS ELEMENTOS GLASS */
	--border-glass: rgba(255, 255, 255, 0.1);
	/* BRILHO ROXO PADRÃO */
	--glow-purple: 0 0 20px rgba(118, 75, 162, 0.4);
	/*
	* VARIÁVEIS DE TEMA
	*
	* A página 1 utiliza roxo/azul.
	* A página 2 utiliza verde WhatsApp.
	* A página 3 utiliza verde esmeralda.
	*
	* O valor padrão abaixo corresponde à página 1.
	*/

	--accent-color: #667eea;
	--accent-color-hover: #764ba2;
	--accent-rgb: 102, 126, 234;
	--orb-1-color: rgba(102, 126, 234, 0.4);
	--orb-2-color: rgba(245, 87, 108, 0.3);
	--orb-3-color: rgba(56, 239, 125, 0.2);
	--shimmer-color: rgba(255, 255, 255, 0.3);
	--spinner-border: rgba(255, 255, 255, 0.3);
	--spinner-top: #ffffff;
}

/* ============================================================
	2. VARIÁVEIS ESPECÍFICAS DA PÁGINA 2
	====================================

	PÁGINA:
	esqueci_senha.php

	A página é identificada pela existência do elemento
	.btn-whatsapp.
	============================================================ */

body:has(.btn-whatsapp) {
	--accent-color: #25d366;
	--accent-color-hover: #2ae673;
	--accent-rgb: 37, 211, 102;
	--orb-1-color: rgba(37, 211, 102, 0.4);
	--orb-2-color: rgba(102, 126, 234, 0.3);
	--orb-3-color: rgba(118, 75, 162, 0.2);
	--shimmer-color: rgba(37, 211, 102, 0.5);
	--spinner-border: rgba(37, 211, 102, 0.3);
	--spinner-top: #25d366;
}

/* ============================================================
	3. VARIÁVEIS ESPECÍFICAS DA PÁGINA 3
	====================================

	PÁGINA:
	recuperar_senha.php

	A página é identificada pela existência do botão
	.btn-save ou .btn-new-link.
	============================================================ */
body:has(.btn-save),
body:has(.btn-new-link) {
	--accent-color: #10b981;
	--accent-color-hover: #34d399;
	--accent-rgb: 16, 185, 129;
	--orb-1-color: rgba(16, 185, 129, 0.4);
	--orb-2-color: rgba(102, 126, 234, 0.3);
	--orb-3-color: rgba(118, 75, 162, 0.2);
	--shimmer-color: rgba(16, 185, 129, 0.5);
	--spinner-border: rgba(16, 185, 129, 0.3);
	--spinner-top: #10b981;
}

/* ============================================================
	4. RESET GLOBAL
	============================================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ============================================================
	5. BODY
	============================================================ */
body {
	font-family: "Inter", sans-serif;
	background: var(--bg-dark);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
}

/* ============================================================
	6. FUNDO ANIMADO
	============================================================ */
/*
	* CONTAINER GERAL DAS ANIMAÇÕES DE FUNDO.
	*/
.bg-animation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/*
	* CONFIGURAÇÃO GERAL DOS ORBS.
	*/
.gradient-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
	animation: float 20s infinite ease-in-out;
}

/*
	* ORB 1
	*
	* PÁGINA 1:
	* Azul/roxo.
	*
	* PÁGINA 2:
	* Verde WhatsApp.
	*
	* PÁGINA 3:
	* Verde esmeralda.
	*
	* A cor é controlada pelas variáveis acima.
	*/

.orb-1 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--orb-1-color), transparent 70%);
	top: -200px;
	right: -200px;
	animation-delay: 0s;
}

/*
	* ORB 2
	*/
.orb-2 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, var(--orb-2-color), transparent 70%);
	bottom: -200px;
	left: -200px;
	animation-delay: -5s;
}

/*
	* ORB 3
	*/
.orb-3 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, var(--orb-3-color), transparent 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-delay: -10s;
}

/* ============================================================
	7. PARTÍCULAS
	============================================================ */
.particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.particle {
	position: absolute;
	background: white;
	border-radius: 50%;
	animation: particleFloat 15s infinite linear;
	opacity: 0;
}

/* ============================================================
	8. CONTAINER PRINCIPAL
	============================================================ */
.login-wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 620px;
	padding: 20px;
	margin: 20px 0;
}

/* ============================================================
	9. GLASS CARD
	============================================================ */
.login-card {
	background: var(--card-bg);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border: 1px solid var(--border-glass);
	border-radius: 32px;
	padding: 48px 40px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	animation: cardFadeIn 0.8s ease-out;
}

/*
	* LINHA ANIMADA NO TOPO DO CARD.
	*
	* A cor muda automaticamente conforme a página.
	*/
.login-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--shimmer-color), transparent);
	animation: shimmerBorder 3s infinite;
}

/* ============================================================
	10. CABEÇALHO
	============================================================ */
.login-header {
	text-align: center;
	margin-bottom: 40px;
	position: relative;
}

/* ============================================================
	11. LOGO - PÁGINA 1
	============================================================ */
/*
	* CONTAINER DA LOGO.
	*/
.logo-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

/*
	* WRAPPER DA LOGO REAL.
	*/
.logo-wrapper {
	width: auto;
	max-width: 200px;
	height: auto;
	padding: 12px 24px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	display: none;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

/*
	* IMAGEM DA LOGO.
	*/
.logo-wrapper img {
	max-width: 180px;
	max-height: 70px;
	object-fit: contain;
}

/*
	* CÍRCULO EXIBIDO QUANDO NÃO EXISTE LOGO.
	*/
.logo-circle {
	width: 72px;
	height: 72px;
	border-radius: 20px;
	background: var(--primary-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--glow-purple);
	animation: pulseGlowPurple 2s infinite;
}

/*
	* ÍCONE DO CÍRCULO DA LOGO.
	*/
.logo-circle i {
	font-size: 36px;
	color: white;
}

/*
	* QUANDO EXISTE LOGO:
	*
	* ESCONDE O CÍRCULO.
	*/
.logo-container.has-logo .logo-circle {
	display: none;
}

/*
	* QUANDO EXISTE LOGO:
	*
	* MOSTRA A LOGO.
	*/
.logo-container.has-logo .logo-wrapper {
	display: flex;
	animation: pulseGlowPurple 2s infinite;
}

/* ============================================================
	12. ÍCONE - PÁGINAS 2 E 3
	============================================================ */
.icon-circle {
	width: 72px;
	height: 72px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	animation: pulseGlowGreen 2s infinite;
}

/*
	* PÁGINA 2
	*
	* ÍCONE DO WHATSAPP.
	*/
body:has(.btn-whatsapp) .icon-circle {
	background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
	box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
	animation: pulseGlowWhatsapp 2s infinite;
}

/*

	* PÁGINA 3 - ESTADO VÁLIDO.
	*/
.icon-circle.valid {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
	animation: pulseGlowGreen 2s infinite;
}

/*
	* PÁGINA 3 - ESTADO INVÁLIDO.
	*/
.icon-circle.invalid {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
	animation: pulseGlowRed 2s infinite;
}

/*
	* ÍCONE INTERNO.
	*/
.icon-circle i {
	font-size: 36px;

	color: white;
}

/* ============================================================
	13. TÍTULOS
	============================================================ */
.welcome-title {
	font-size: 28px;
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 8px;
	letter-spacing: -0.5px;
}

.welcome-subtitle {
	font-size: 15px;
	color: var(--text-secondary);
	font-weight: 400;
	/*
	* O line-height estava presente nas páginas 2 e 3.
	*
	* Mantemos aqui porque não prejudica a página 1
	* e garante o comportamento das páginas que possuem
	* subtítulos maiores.
	*/
	line-height: 1.6;
}

/* ============================================================
	14. ELEMENTOS DO FORMULÁRIO
	============================================================ */
.form-group {
	margin-bottom: 24px;
	position: relative;
}

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/*
	* CONTAINER DO INPUT.
	*/
.input-container {
	position: relative;
}

/*
	* ÍCONE DO INPUT.
	*/
.input-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-secondary);
	font-size: 18px;
	transition: all 0.3s ease;
	z-index: 1;
	pointer-events: none;
}

/*
	* INPUT PRINCIPAL.
	*/
.form-control {
	width: 100%;
	padding: 16px 16px 16px 48px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-glass);
	border-radius: 16px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	transition: all 0.3s ease;
	outline: none;
}

/*
	* PLACEHOLDER.
	*/
.form-control::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

/*
	* INPUT EM FOCO.
	*
	* A cor acompanha automaticamente a página.
	*/
.form-control:focus {
	border-color: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

/*
	* ÍCONE DO INPUT EM FOCO.
	*/

.form-control:focus ~ .input-icon {
	color: var(--accent-color);
}
/* ============================================================
	15. AUTOFILL
	============================================================ */
/*
	* CORRIGE O AUTOFILL AUTOMÁTICO DO NAVEGADOR.
	*/
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px rgba(10, 10, 15, 0.95) inset !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff;
}

/* ============================================================
	16. BOTÃO MOSTRAR/OCULTAR SENHA
	============================================================ */
.password-toggle {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 18px;
	transition: all 0.3s ease;
	padding: 4px;
	z-index: 1;
}

.password-toggle:hover {
	color: var(--accent-color);
}

/* ============================================================
	17. LINKS
	============================================================ */
/*
	* LINK "ESQUECI MINHA SENHA"
	*
	* UTILIZADO NA PÁGINA 1.
	*/
.forgot-password {
	font-size: 13px;
	color: #667eea;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}
.forgot-password:hover {
	color: #764ba2;
	text-decoration: underline;
}

/*
	* LINK "VOLTAR"
	*
	* UTILIZADO NAS PÁGINAS 2 E 3.
	*/
.back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	margin-top: 24px;
}

.back-link:hover {
	color: #ffffff;
}
.back-link i {
	font-size: 16px;
	transition: transform 0.3s ease;
}
.back-link:hover i {
	transform: translateX(-3px);
}

/* ============================================================
	18. BOTÃO PRINCIPAL - PÁGINA 1
	============================================================ */
.btn-primary {
	width: 100%;
	padding: 16px;
	background: var(--primary-gradient);
	border: none;
	border-radius: 16px;
	color: white;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

/*
	* EFEITO DE BRILHO DO BOTÃO.
	*/
.btn-primary::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.5s ease;
}
.btn-primary:hover::before {
	transform: translate(-50%, -50%) scale(1);
}
.btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ============================================================
	19. BOTÃO BIOMÉTRICO - PÁGINA 1
	============================================================ */
.btn-biometric {
	width: 100%;
	padding: 16px;
	background: rgba(56, 239, 125, 0.15);
	border: 1px solid rgba(56, 239, 125, 0.3);
	border-radius: 16px;
	color: #38ef7d;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	position: relative;
	overflow: hidden;
	text-shadow: 0 0 10px rgba(56, 239, 125, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/*
	* EFEITO DE BRILHO.
	*/
.btn-biometric::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(56, 239, 125, 0.1), transparent);
	transition: left 0.5s ease;
}
.btn-biometric:hover {
	background: rgba(56, 239, 125, 0.25);
	border-color: rgba(56, 239, 125, 0.5);
	color: #4aff8f;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(56, 239, 125, 0.2);
	text-shadow: 0 0 15px rgba(56, 239, 125, 0.8);
}
.btn-biometric:hover::before {
	left: 100%;
}
.btn-biometric:active {
	transform: translateY(0);
	background: rgba(56, 239, 125, 0.2);
}
.btn-biometric i {
	font-size: 20px;
	color: #38ef7d;
	filter: drop-shadow(0 0 8px rgba(56, 239, 125, 0.6));
	transition: all 0.3s ease;
}
.btn-biometric:hover i {
	color: #4aff8f;
	filter: drop-shadow(0 0 12px rgba(56, 239, 125, 0.9));
}

/* ============================================================
	20. BOTÃO WHATSAPP - PÁGINA 2
	============================================================ */
.btn-whatsapp {
	width: 100%;
	padding: 16px;
	background: rgba(37, 211, 102, 0.15);
	border: 1px solid rgba(37, 211, 102, 0.3);
	border-radius: 16px;
	color: #25d366;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	position: relative;
	overflow: hidden;
	text-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/*
	* EFEITO DE BRILHO.
	*/
.btn-whatsapp::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(37, 211, 102, 0.1), transparent);
	transition: left 0.5s ease;
}

.btn-whatsapp:hover {
	background: rgba(37, 211, 102, 0.25);
	border-color: rgba(37, 211, 102, 0.5);
	color: #2ae673;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(37, 211, 102, 0.2);
	text-shadow: 0 0 15px rgba(37, 211, 102, 0.8);
}
.btn-whatsapp:hover::before {
	left: 100%;
}
.btn-whatsapp:active {
	transform: translateY(0);
	background: rgba(37, 211, 102, 0.2);
}
.btn-whatsapp:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
.btn-whatsapp i {
	font-size: 20px;
	color: #25d366;
	filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.6));
	transition: all 0.3s ease;
}
.btn-whatsapp:hover i {
	color: #2ae673;
	filter: drop-shadow(0 0 12px rgba(37, 211, 102, 0.9));
}

/* ============================================================
	21. BOTÃO SALVAR - PÁGINA 3
	============================================================ */
.btn-save {
	width: 100%;
	padding: 16px;
	background: rgba(16, 185, 129, 0.15);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: 16px;
	color: #10b981;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	position: relative;
	overflow: hidden;
	text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/*
	* EFEITO DE BRILHO.
	*/
.btn-save::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
	transition: left 0.5s ease;
}
.btn-save:hover {
	background: rgba(16, 185, 129, 0.25);
	border-color: rgba(16, 185, 129, 0.5);
	color: #34d399;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
	text-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
}
.btn-save:hover::before {
	left: 100%;
}
.btn-save:active {
	transform: translateY(0);
	background: rgba(16, 185, 129, 0.2);
}
.btn-save:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
.btn-save i {
	font-size: 20px;
	color: #10b981;
	filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
	transition: all 0.3s ease;
}
.btn-save:hover i {
	color: #34d399;
	filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.9));
}

/* ============================================================
	22. BOTÃO NOVO LINK - PÁGINA 3 / ESTADO INVÁLIDO
	============================================================ */
.btn-new-link {
	width: 100%;
	padding: 16px;
	background: var(--primary-gradient);
	border: none;
	border-radius: 16px;
	color: white;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
}
.btn-new-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
	color: white;
}

/*
	* EFEITO DE BRILHO.
	*/
.btn-new-link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.5s ease;
}
.btn-new-link:hover::before {
	transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
	23. DIVISOR
	============================================================ */
.divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 32px 0;
}
.divider::before,
.divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--border-glass);
}
.divider-text {
	padding: 0 20px;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ============================================================
	24. RODAPÉ
	============================================================ */
.auth-footer {
	text-align: center;
	margin-top: 24px;
}

/* ============================================================
	25. BADGE DE SEGURANÇA
	============================================================ */
.secure-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}
.secure-badge i {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
}
.secure-badge:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.7);
}
.secure-badge:hover i {
	color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
	26. COPYRIGHT
	============================================================ */
.copyright {
	text-align: center;
	margin-top: 40px;
	color: rgba(255, 255, 255, 0.3);
	font-size: 12px;
}

/* ============================================================
	27. LOADING SPINNER
	============================================================ */
.spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--spinner-border);
	border-radius: 50%;
	border-top-color: var(--spinner-top);
	animation: spin 0.8s linear infinite;
}

/* ============================================================
	28. ANIMAÇÕES
	============================================================ */
/* ------------------------------------------------------------
	ANIMAÇÃO DOS ORBS
	------------------------------------------------------------ */
@keyframes float {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	25% {
		transform: translate(100px, -50px) scale(1.1);
	}
	50% {
		transform: translate(-50px, 100px) scale(0.9);
	}
	75% {
		transform: translate(-100px, -100px) scale(1.05);
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DAS PARTÍCULAS
	------------------------------------------------------------ */
@keyframes particleFloat {
	0% {
		opacity: 0;
		transform: translateY(100vh) scale(0);
	}
	10% {
		opacity: 0.8;
	}
	90% {
		opacity: 0.8;
	}
	100% {
		opacity: 0;
		transform: translateY(-100vh) scale(1);
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DE ENTRADA DO CARD
	------------------------------------------------------------ */
@keyframes cardFadeIn {
	from {
		opacity: 0;

		transform: translateY(30px);
	}
	to {
		opacity: 1;

		transform: translateY(0);
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DA LINHA SUPERIOR DO CARD
	------------------------------------------------------------ */
@keyframes shimmerBorder {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.8;
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DO BRILHO ROXO
	-----------------------
	UTILIZADA PELA PÁGINA 1.
	------------------------------------------------------------ */
@keyframes pulseGlowPurple {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(118, 75, 162, 0.4);
	}
	50% {
		box-shadow: 0 0 40px rgba(118, 75, 162, 0.7);
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DO BRILHO WHATSAPP
	------------------------------------------------------------ */
@keyframes pulseGlowWhatsapp {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
	}

	50% {
		box-shadow: 0 0 40px rgba(37, 211, 102, 0.7);
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DO BRILHO ESMERALDA
	------------------------------------------------------------ */
@keyframes pulseGlowGreen {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
	}
	50% {
		box-shadow: 0 0 40px rgba(16, 185, 129, 0.7);
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DO BRILHO VERMELHO
	------------------------------------------------------------ */
@keyframes pulseGlowRed {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
	}
	50% {
		box-shadow: 0 0 40px rgba(239, 68, 68, 0.7);
	}
}

/* ------------------------------------------------------------
	ANIMAÇÃO DO SPINNER
	------------------------------------------------------------ */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================
	29. RESPONSIVIDADE
	============================================================ */
@media (max-width: 576px) {
	/* --------------------------------------------------------
	CARD
	-------------------------------------------------------- */
	.login-card {
		padding: 32px 24px;
		border-radius: 24px;
	}

	/* --------------------------------------------------------
	TÍTULO
	-------------------------------------------------------- */
	.welcome-title {
		font-size: 24px;
	}

	/* --------------------------------------------------------
	LOGO CIRCULAR - PÁGINA 1
	-------------------------------------------------------- */
	.logo-circle {
		width: 56px;
		height: 56px;

		border-radius: 16px;
	}
	.logo-circle i {
		font-size: 28px;
	}

	/* --------------------------------------------------------
	LOGO REAL - PÁGINA 1
	-------------------------------------------------------- */
	.logo-wrapper {
		padding: 10px 20px;
	}
	.logo-wrapper img {
		max-width: 140px;
		max-height: 50px;
	}

	/* --------------------------------------------------------
	ÍCONE - PÁGINAS 2 E 3
	-------------------------------------------------------- */
	.icon-circle {
		width: 56px;
		height: 56px;

		border-radius: 16px;
	}
	.icon-circle i {
		font-size: 28px;
	}
}

/* ============================================================
	FIM DO STYLE.CSS
	============================================================ */