.bgp {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  background: url(../../rg/img/bg.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  justify-content: center;
  align-items: center;
}
.seccion-login {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: #7575ff;
  justify-content: center;
  align-items: center;
}
.content-logo {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.content-logo h1 {
  font-family: r;
  color: #fff;
}
form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.datos {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}
.datos label {
  display: flex;
  width: 100%;
}  
.usuario-bg {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
  pointer-events: none;
  box-shadow: rgba(33, 50, 66, 0.3) 0px 1px 4px;
}
input {
  font-family: r;
  color: #fff;
  width: 100%;
  background: none;
  border: none;
}
input:focus {
  outline: none;
}
::placeholder {
  font-family: r;
  color: #fff;
}
input:focus ~ .usuario-bg {
  border: 1px solid #fff;
  background: transparent;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
  -webkit-transition-delay: 9999s;
}
button {
  cursor: pointer;
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: center;
  border: none;
  overflow: hidden;
  transition: all 0.2s;
}
button h2 {
  font-family: r;
  font-size: 15px;
  color: #6666ff;
  transition: all 0.3s ease-in-out;
}
button svg {
  color: #6666ff;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}
button:hover .svg-wrapper {
  animation: movimiento 0.6s ease-in-out infinite alternate;
}
button:hover svg {
  transform: translateX(3em) rotate(45deg) scale(1.1);
}
button:hover h2 {
  transform: translateX(6.5em);
}
button:active {
  transform: scale(0.95);
}
@keyframes movimiento {
  from {
   transform: translateY(0.1em);
  }
 
  to {
   transform: translateY(-0.1em);
  }
}
h2{
  font-family: r;
  color: #fff;
}
.recover{
  font-family: n;
  color: #e0e007;
}
.recover:hover{
  color: #fff;
}
@media (min-width: 1367px) {
  .seccion-login {
      width: 540px;
      height: 540px;
      border-radius: 30px;
      gap: 30px;
  }
  .content-logo {
      gap: 10px;
  }
  .content-logo img{
      width: 161px;
      height: 40px;
  }
  h1 {
      font-size: 22px;
  }
  form{
      gap: 20px;
  }
  .datos {
      width: 360px;
  }
  .datos label {
      height: 50px;
  }
  .usuario-bg {
      border-radius: 30px;
  }
  input {
      font-size: 15px;
      margin-inline: 20px;
  }
  ::placeholder {
      font-size: 15px;
  }
  button {
      width: 140px;
      height: 35px;
      border-radius: 20px;
      gap: 10px;
  }
  button h2 {
      font-size: 15px;
  }
  h2{
      font-size: 15px;
  }
  .recover{
      font-size: 15px;
  }
}

@media (min-width: 1281px) and (max-width: 1366px) {
  .seccion-login {
      width: 480px;
      height: 480px;
      border-radius: 30px;
      gap: 30px;
  }
  .content-logo {
      gap: 10px;
  }
  .content-logo img{
      width: 121px;
      height: 30px;
  }
  h1 {
      font-size: 20px;
  }
  form{
      gap: 18px;
  }
  .datos {
      width: 360px;
  }
  .datos label {
      height: 40px;
  }
  .usuario-bg {
      border-radius: 20px;
  }
  input {
      font-size: 13px;
      margin-inline: 20px;
  }
  ::placeholder {
      font-size: 13px;
  }
  button {
      width: 120px;
      height: 30px;
      border-radius: 20px;
      gap: 5px;
  }
  button h2 {
      font-size: 13px;
  }
  button svg{
      width: 18px;
      height: 18px;
  }
  button:hover svg {
      transform: translateX(2.5em) rotate(45deg) scale(1.1);
  }
  button:hover h2 {
      transform: translateX(7em);
  }
  h2{
      font-size: 13px;
  }
  .recover{
      font-size: 13px;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .seccion-login {
      width: 480px;
      height: 480px;
      border-radius: 30px;
      gap: 30px;
  }
  .content-logo {
      gap: 10px;
  }
  .content-logo img{
      width: 121px;
      height: 30px;
  }
  h1 {
      font-size: 20px;
  }
  form{
      gap: 18px;
  }
  .datos {
      width: 360px;
  }
  .datos label {
      height: 40px;
  }
  .usuario-bg {
      border-radius: 20px;
  }
  input {
      font-size: 13px;
      margin-inline: 20px;
  }
  ::placeholder {
      font-size: 13px;
  }
  button {
      width: 120px;
      height: 30px;
      border-radius: 20px;
      gap: 5px;
  }
  button h2 {
      font-size: 13px;
  }
  button svg{
      width: 18px;
      height: 18px;
  }
  button:hover svg {
      transform: translateX(2.5em) rotate(45deg) scale(1.1);
  }
  button:hover h2 {
      transform: translateX(7em);
  }
  h2{
      font-size: 13px;
  }
  .recover{
      font-size: 13px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .seccion-login {
      width: 480px;
      height: 480px;
      border-radius: 30px;
      gap: 30px;
  }
  .content-logo {
      gap: 10px;
  }
  .content-logo img{
      width: 121px;
      height: 30px;
  }
  h1 {
      font-size: 20px;
  }
  form{
      gap: 18px;
  }
  .datos {
      width: 360px;
  }
  .datos label {
      height: 40px;
  }
  .usuario-bg {
      border-radius: 20px;
  }
  input {
      font-size: 13px;
      margin-inline: 20px;
  }
  ::placeholder {
      font-size: 13px;
  }
  button {
      width: 120px;
      height: 30px;
      border-radius: 20px;
      gap: 5px;
  }
  button h2 {
      font-size: 13px;
  }
  button svg{
      width: 18px;
      height: 18px;
  }
  button:hover svg {
      transform: translateX(2.5em) rotate(45deg) scale(1.1);
  }
  button:hover h2 {
      transform: translateX(7em);
  }
  h2{
      font-size: 13px;
  }
  .recover{
      font-size: 13px;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .seccion-login {
      width: 420px;
      height: 420px;
      border-radius: 30px;
      gap: 30px;
  }
  .content-logo {
      gap: 5px;
  }
  .content-logo img{
      width: 121px;
      height: 30px;
  }
  h1 {
      font-size: 15px;
  }
  form{
      gap: 15px;
  }
  .datos {
      width: 360px;
  }
  .datos label {
      height: 40px;
  }
  .usuario-bg {
      border-radius: 20px;
  }
  input {
      font-size: 12px;
      margin-inline: 20px;
  }
  ::placeholder {
      font-size: 12px;
  }
  button {
      width: 120px;
      height: 30px;
      border-radius: 20px;
      gap: 5px;
  }
  button h2 {
      font-size: 13px;
  }
  button svg{
      width: 15px;
      height: 15px;
  }
  button:hover svg {
      transform: translateX(2.2em) rotate(45deg) scale(1.1);
  }
  button:hover h2 {
      transform: translateX(7em);
  }
  h2{
      font-size: 11px;
  }
  .recover{
      font-size: 11px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .seccion-login {
      width: 310px;
      height: 420px;
      border-radius: 20px;
      gap: 20px;
  }
  .content-logo {
      gap: 5px;
  }
  .content-logo img{
      width: 121px;
      height: 30px;
  }
  h1 {
      font-size: 13px;
  }
  form{
      gap: 13px;
  }
  .datos {
      width: 280px;
  }
  .datos label {
      height: 35px;
  }
  .usuario-bg {
      border-radius: 20px;
  }
  input {
      font-size: 12px;
      margin-inline: 20px;
  }
  ::placeholder {
      font-size: 12px;
  }
  button {
      width: 120px;
      height: 30px;
      border-radius: 20px;
      gap: 5px;
  }
  button h2 {
      font-size: 12px;
  }
  button svg{
      width: 15px;
      height: 15px;
  }
  button:hover svg {
      transform: translateX(2.2em) rotate(45deg) scale(1.1);
  }
  button:hover h2 {
      transform: translateX(7.5em);
  }
  h2{
      font-size: 10px;
  }
  .recover{
      font-size: 10px;
  }
}