/* =====================================================================================
   PRELOAD / AJAX LOADER – Clean / Premium
   - SEM ponto central
   - Fundo escurecido discreto
   - Cores: #01D3EB + branco
   ===================================================================================== */

/* -------------------------
   Overlay escurecido discreto
-------------------------- */
.Preload,
.Preload2
{
	width:100%;
	height:500% !important;
	min-height:500% !important;
	position:fixed;
	top:0 !important;

	z-index:9999999999999999999999999999999999999999999999999999999999999999 !important;
	text-align:center;

	/* ESCURECIMENTO SUAVE DO FUNDO */
	background: rgba(0,0,0,0.25);

	overflow:hidden;

	animation: fade 0.35s ease-out;
	transform: translate3d(0,0,0);
}

/* =====================================================================================
   Container central
   ===================================================================================== */
.Preload div,
.Preload2 div
{
	width:72px;
	height:72px;
	margin:0 auto;
	margin-top:20% !important;
	border-radius:50%;

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

	background: transparent;
	position: relative;
}

/* =====================================================================================
   Spinner principal (ANEL)
   ===================================================================================== */
.Preload div::before,
.Preload2 div::before
{
	content:"";
	position:absolute;
	width:72px;
	height:72px;
	border-radius:50%;

	border:4px solid rgba(1,211,235,0.25); /* azul claro */
	border-top-color:#01D3EB;              /* azul forte */
	border-right-color:#FFFFFF;            /* detalhe branco */

	animation: spin 0.85s linear infinite;
}

/* =====================================================================================
   BODY travado enquanto carrega
   ===================================================================================== */
body.Preload
{
	overflow:hidden !important;
	height:100%;
}

/* =====================================================================================
   Animações
   ===================================================================================== */
@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes fade {
	from { opacity:0; }
	to   { opacity:1; }
}

/* =====================================================================================
   Mobile
   ===================================================================================== */
@media screen and (max-width:900px)
{
	.Preload div,
	.Preload2 div
	{
		margin-top:60% !important;
	}
}