.loading-js { visibility: hidden; opacity: 0; width: 100%; height: 100vh; height: 100dvh; position: fixed; top: 0; left: 0; z-index: 9999999; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.3s ease-in-out, visibility 0.3s; overflow: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}
.loading-js.active { visibility: visible; opacity: 1; animation: fadeInLoading 0.3s ease-in-out;}
.loading-js.hiding { opacity: 0; animation: fadeOutLoading 0.3s ease-in-out;}
.loading-js .engloba-loading { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; touch-action: none;}
.loading-js .engloba-loading .square-center { width: 140px; height: 140px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; border-radius: 20px; flex-direction: column; gap: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); transform: scale(0.8); opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); will-change: transform, opacity;}
.loading-js.active .engloba-loading .square-center { transform: scale(1); opacity: 1; animation: scaleInLoading 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.loading-js.hiding .engloba-loading .square-center { transform: scale(0.8); opacity: 0; animation: scaleOutLoading 0.3s ease-in-out;}
.loading-js .engloba-loading .square-center p { width: 100%; color: #ffffff; text-align: center; margin: 0; font-family: montserrat; font-size: 13px; font-weight: 500; letter-spacing: 0.5px; opacity: 0.9;}
.loading-js .engloba-loading .square-center .lds-roller { display: inline-block; position: relative; width: 80px; height: 80px;}
.loading-js .engloba-loading .square-center .lds-roller div { animation: ldsRollerLoading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px;}
.loading-js .engloba-loading .square-center .lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: -4px 0 0 -4px; box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(1) { animation-delay: -0.036s;}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(1):after { top: 63px; left: 63px; background: linear-gradient(135deg, #b0b0b0 0%, #d6d6d6 100%);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(2) { animation-delay: -0.072s;}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(2):after { top: 68px; left: 56px; background: linear-gradient(135deg, #c2c2c2 0%, #e0e0e0 100%);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(3) { animation-delay: -0.108s;}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(3):after { top: 71px; left: 48px; background: linear-gradient(135deg, #d0d0d0 0%, #f0f0f0 100%);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(4) { animation-delay: -0.144s;}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(4):after { top: 72px; left: 40px; background: linear-gradient(135deg, #e0e0e0 0%, #f7f7f7 100%);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(5) { animation-delay: -0.18s;}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(5):after { top: 71px; left: 32px; background: linear-gradient(135deg, #f0f0f0 0%, #cfcfcf 100%);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(6) { animation-delay: -0.216s;}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(6):after { top: 68px; left: 24px; background: linear-gradient(135deg, #cfcfcf 0%, #bdbdbd 100%);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(7) { animation-delay: -0.252s;} 
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(7):after { top: 63px; left: 17px; background: linear-gradient(135deg, #bdbdbd 0%, #a0a0a0 100%);}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(8) { animation-delay: -0.288s;}
.loading-js .engloba-loading .square-center .lds-roller div:nth-child(8):after { top: 56px; left: 12px; background: linear-gradient(135deg, #a0a0a0 0%, #d0d0d0 100%);}

.loader { width: 60px; height: 60px; border-radius: 50%; display: inline-block; position: relative; border: 4px solid; border-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) transparent transparent; box-sizing: border-box; animation: rotationLoading 1s linear infinite; }
.loader::after { content: ''; box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 4px solid; border-color: transparent transparent #ccc #ccc; width: 48px; height: 48px; border-radius: 50%; animation: rotationBackLoading 0.8s linear infinite; transform-origin: center center; }
.loader::before { content: ''; box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 4px solid; border-color: #999 transparent transparent #999; width: 36px; height: 36px; border-radius: 50%; animation: rotationLoading 1.2s linear infinite; transform-origin: center center; }

@keyframes ldsRollerLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBackLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

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

@keyframes scaleInLoading {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

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

@keyframes scaleOutLoading {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}

@media only screen and (max-width: 768px) {
  .loading-js {min-height: -webkit-fill-available;}
  .loading-js .engloba-loading {min-height: -webkit-fill-available;}
  .loading-js .engloba-loading .square-center {width: 120px;height: 120px;border-radius: 16px;gap: 12px;}
  .loading-js .engloba-loading .square-center p {font-size: 12px;}
  .loader {width: 50px;height: 50px;border-width: 3px;}
  .loader::after {border-width: 3px;width: 40px;height: 40px;}
  .loader::before {border-width: 3px;width: 30px;height: 30px;}
}