/*------------------------------------------------------------------------------*/
/*Priority*/


/*Body*/
body {
  margin: 0;
  padding: 0;
  
  /* Ocultamos el contenido sin transición ni animación */
  visibility: hidden !important;
}

/* Cuando ya cargaron las fuentes y quitemos el preloader, 
   mostramos el body de golpe */
body.preloader-loaded {
  visibility: visible !important; 
}

/*Menu Panel*/
.menu-panel{
  position: fixed;
  left: 0;
  z-index: 1102;
  width: 100%;
  height: calc(100% - 72px);
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
}
/*Header League Selctor*/
.header-social-toggle .social-menu{
	visibility: hidden !important;
    opacity: 0 !important;
}
 
/*texto oculto*/
.screen-reader-text {
    position: absolute;
    clip: rect(1px,1px,1px,1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}


/*lazyload*/


/*------------------------------------------------------------------------------*/
/*Preloader*/

.preloader svg {
  fill: var(--color-preloader-base);
}
.preloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-color: var(--color-preloader-bg);
  z-index: 999999;
  transform: translateY(100vh);
  opacity: 0;
  transition: opacity 0.7s 0.55s cubic-bezier(0.86, 0, 0.07, 1);
  min-height: 180px;
}
.preloader-is--active .preloader-overlay {
  transform: translateY(0);
  opacity: 1;
}
.preloader-inner {
  animation-duration: 0.1s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}



/**/
.lds-grid {
  display: inline-block;
  position: relative;
  width: 96px; /* Ajustado para 3 columnas más compactas */
  height: 80px; /* Ajustado para 4 filas más compactas */
}

.lds-grid div {
  position: absolute;
  width: 16px; /* Tamaño más pequeño para el rombo */
  height: 16px;
  background: var(--color-preloader-accent); /* Color personalizable */
  transform: rotate(45deg); /* Rotación para el efecto de rombo */
  animation: lds-grid 1.2s linear infinite;
}

/* Fila 1 */
.lds-grid div:nth-child(1) {
  top: 0px;
  left: 32px; /* Centrado en la primera fila */
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 0px;
  left: 64px; /* Ajustado para la segunda columna */
  animation-delay: -0.2s;
}

/* Fila 2 */
.lds-grid div:nth-child(3) {
  top: 16px; /* Separación ajustada */
  left: 16px; /* Desplazamiento escalonado */
  animation-delay: -0.2s;
}
.lds-grid div:nth-child(4) {
  top: 16px;
  left: 48px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 16px;
  left: 80px;
  animation-delay: -0.6s;
}

/* Fila 3 */
.lds-grid div:nth-child(6) {
  top: 32px; /* Continuación alineada */
  left: 32px; /* Centrado */
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(7) {
  top: 32px;
  left: 64px;
  animation-delay: -0.6s;
}

/* Fila 4 */
.lds-grid div:nth-child(8) {
  top: 48px;
  left: 16px; /* Escalonado como la fila 2 */
  animation-delay: -0.6s;
}
.lds-grid div:nth-child(9) {
  top: 48px;
  left: 48px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(10) {
  top: 48px;
  left: 80px;
  animation-delay: -1s;
}
.lds-grid div:nth-child(11) {
  top: 32px;
  left: 0px;
  animation-delay: -0.8s;
}

@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}



/*------------------------------------------------------------------------------*/
/*General*/


  /*Preloader*/
  .preloader-overlay{
      background-color: var(--color-dark) !important;
  }
  
  body.preloader-is--active .preloader-overlay{
      visibility: visible !important;
  }
     
  
  body:not(.preloader-is--active) .preloader-overlay{
      visibility: hidden !important;
  }