:root { --bg: #55585a;
        --primary: #b28e5c;
        --solid: #9d2148;
        --btnbuscar-w: 250px;
        --dot2-w: calc(var(--btnbuscar-w) * .2);  
        --tr4-X: calc(var(--btnbuscar-w) - var(--dot2-w)); }

/* Reset general */
* { box-sizing: border-box; }
*:before, *:after { box-sizing: border-box; }

/* Contenedor principal del botón */
.btnbuscar {
  position: relative;
  margin: auto;
  width: var(--btnbuscar-w);
  height: 50px;
  border: solid #55585a; /* borde trasladado desde el inline */
  border-radius: 25em;
  text-align: center;
  cursor: pointer;
  top: 0px; /* espacio arriba del botón */
  background-color: #55585a;
  float: right; /* 👈 lo manda al lado derecho */
}

/* Punto animado */
.dot2 {
  content: '';
  position: absolute;
  top: -10px; /* trasladado desde el inline */
  left: -7px;
  width: var(--dot2-w);
  height: 60px;
  border-radius: 100%;
  transition: all 300ms ease;
  display: none;
}

/* Efecto visual del punto */
.dot2:after {
  content: '';
  position: absolute;
  left: calc(50% - .4em);
  top: 0em;
  height: .8em;
  width: .8em;
  background: #fff;
  border-radius: 1em;
  border: .25em solid var(--solid);
  box-shadow: 0 0 .7em var(--solid),
              0 0 2em var(--primary);
}

/* Animación al hacer hover */
.btnbuscar:hover .dot2,
.btnbuscar:focus .dot2:after {
  animation: atom 3s infinite linear;
  display: block;  
}

@keyframes atom {
  0%   { transform: translateX(0) rotate(0); }
  30%  { transform: translateX(var(--tr4-X)) rotate(0); }
  50%  { transform: translateX(var(--tr4-X)) rotate(180deg); }
  80%  { transform: translateX(0) rotate(180deg); }
  100% { transform: translateX(0) rotate(360deg); }
}

/* ======= BOTÓN ACCESAR (ESTILO PROPIO) ======= */
.btnaccesar {
  position: relative;
  margin: 0;                 /* 👉 Lo deja alineado al lado izquierdo */
  width: var(--btnbuscar-w);
  height: 20px;
  border-radius: 5em;
  text-align: center;
  cursor: pointer;
  background-color: #9d2148;
  border: solid #9d2148;
  display: inline-block;      /* 👉 Para que el link de "Olvidaste..." quede a su derecha */
  vertical-align: middle;     /* 👉 Para que queden alineados verticalmente */
}

/* El botón dentro */
#btn__accesar {
  width: 100%;        /* 👉 Hace todo el botón clickeable */
  height: 100%;       /* 👉 Ocupa toda la altura del contenedor */
  background: none;
  border: none;       /* quitar el borde blanco que pusiste solo para testear */
  color: #FFF;
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5em; /* opcional para mantener forma redondeada */
  padding-top: 5px;   /* si quieres bajar un poco el texto */
  position: relative; /* necesario para ubicar el dot2 */
}

/* Dot animado igual al otro botón */
.btnaccesar .dot2 {
  top: -10px;
  left: -7px;
  width: var(--dot2-w);
  height: 60px;
  border-radius: 100%;
  transition: all 300ms ease;
  display: none;
}

.btnaccesar:hover .dot2,
.btnaccesar:focus .dot2:after {
  animation: atom 3s infinite linear;
  display: block;
}

.login-buttons {
  margin-left: 50px;
}

.login-buttons .btn-link {
    color: #9D2148 !important;
    font-weight: bold;
    margin-top: 10px;
    display: block;          /* Hace que el link quede debajo */
    margin-left: 40px;
}