.loader {
      display: inline-flex;
      gap: 8px;
      align-items: end;
      justify-content: center;
      height: 10px; /* altura del area del loader */
      user-select: none;
    }

    .loader .dot {
      width: 10px;              /* tamaño del punto */
      height: 10px;
      border-radius: 50%;
      background: #111;         /* color del punto */
      display: grid;
      transform-origin: center;
      animation: jump 0.7s ease-in-out infinite;
    }

    /* Retraso para cada punto */
    .loader .dot:nth-child(1) { animation-delay: 0s; }
    .loader .dot:nth-child(2) { animation-delay: 0.12s; }
    .loader .dot:nth-child(3) { animation-delay: 0.24s; }

    /* Animación: sube y baja, y cambia un poquito el tamaño */
    @keyframes jump {
      0%   { transform: translateY(0) scale(1); opacity: 0.6; }
      40%  { transform: translateY(-10px) scale(1.25); opacity: 1; }
      80%  { transform: translateY(0) scale(1); opacity: 0.7; }
      100% { transform: translateY(0) scale(1); opacity: 0.6; }
    }

    /* Variante en fondo oscuro (opcional) */
    .dark .loader .dot { background: #fff; }

    .wall {
      width: 250px;
      margin-bottom: 20px;
    }

    .main {
  display: grid;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  

}