#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
}

/* Líneas Verticales y Horizontal */
.line-vertical,
.line-horizontal {
    background: white;
    position: absolute;
    transform-origin: center center;
    /* Origen uniforme para todas las rotaciones */
    opacity: 0;
}

/* Líneas gruesas (A y M) */
.line-vertical.thick {
    width: 2px;
    height: 0;
    /* Se expande durante la animación */
}

/* Línea central más fina (para la X) */
.line-vertical.thin {
    width: 2px;
    height: 0;
}

/* Línea Horizontal para la X */
.line-horizontal {
    width: 0;
    /* Se expande horizontalmente */
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -50%);
}

/* Línea izquierda (A) */
#line1 {
    left: calc(50% - 40px);
}

/* Línea izquierda (X) */
#line2 {
    left: calc(50%);
}

/* Línea central (M) */
#line3 {
    left: calc(50% + 40px);
}

.line {
    width: 100%;
    height: 2px;
    background: white;
}

/* Contenedores de las letras */
#groupA, #groupM {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Inicialmente en el centro */
  #groupA {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #groupM {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Ajustes para pantallas pequeñas */
  @media (max-width: 768px) {
    #groupA, #groupM {
      transform: translate(-50%, -50%) scale(0.7); /* Reducimos el tamaño en móviles */
    }
  }
  
#content,.brxy-main-wrap {
    opacity: 0;
    /* Oculto durante la animación de carga */
    pointer-events: none;
    /* Desactivar interacción mientras está oculto */
}

#content.visible, .brxy-main-wrap.visible {
    opacity: 1;
    pointer-events: all;
}