.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;
}
.politicas{
  display: flex;
  width: 300px;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-lock {
  display: flex;
  width: 30px;
  height: 30px;
  background: #e0e007;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.btn-lock svg {
  width: 17px;
  height: 18px;
  fill: none;
  transform: translate3d(0, 0, 0);
}
.btn-lock svg .bling {
  stroke: #6666ff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3;
  stroke-dashoffset: 15;
  transition: all 0.3s ease;
}
.btn-lock svg .lock {
  stroke: #6666ff;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 36;
  transition: all 0.4s ease;
}
.btn-lock svg .lockb {
  fill: #6666ff;
  fill-rule: evenodd;
  clip-rule: evenodd;
  transform: rotate(8deg);
  transform-origin: 14px 20px;
  transition: all 0.2s ease;
}
#user_accept {
  display: none;
}
#user_accept:checked + label {
  background: #fff;
}
#user_accept:checked + label svg {
  opacity: 1;
}
#user_accept:checked + label svg .bling {
  animation: efecto 0.3s linear forwards;
  animation-delay: 0.2s;
}
#user_accept:checked + label svg .lock {
  stroke-dasharray: 48;
  animation: seguro 0.3s linear forwards;
}
#user_accept:checked + label svg .lockb {
  transform: rotate(0);
  transform-origin: 14px 22px;
}
.politicas p{
  font-family: r;
  font-size: 12px;
  color: #fff;
}
.politicas a{
  font-family: r;
  font-size: 12px;
  color: #fff;
}
@keyframes efecto {
  50% {
    stroke-dasharray: 3;
    stroke-dashoffset: 12;
  }
  100% {
    stroke-dasharray: 3;
    stroke-dashoffset: 9;
  }
}
@keyframes seguro {
  50% {
    transform: translateY(1px);
  }
}
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;
  }
  .politicas{
      width: 400px;
      gap: 10px;
  }
  .btn-lock {
      width: 30px;
      height: 30px;
  }
  .btn-lock svg {
      width: 17px;
      height: 18px;
  }
  .btn-lock svg .bling {
      stroke-width: 2.5;
      stroke-dasharray: 3;
      stroke-dashoffset: 15;
  }
  .btn-lock svg .lock {
      stroke-width: 4;
      stroke-dasharray: 36;
  }
  .btn-lock svg .lockb {
      transform-origin: 14px 20px;
  }
  #user_accept:checked + label svg .lock {
      stroke-dasharray: 48;
  }
  #user_accept:checked + label svg .lockb {
      transform-origin: 14px 22px;
  }
  .politicas p{
      font-size: 12px;
  }
  .politicas a{
      font-size: 12px;
  }
  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;
  }
  .politicas{
      width: 400px;
      gap: 10px;
  }
  .btn-lock {
      width: 27px;
      height: 27px;
  }
  .btn-lock svg {
      width: 15px;
      height: 16px;
  }
  .btn-lock svg .bling {
      stroke-width: 2.5;
      stroke-dasharray: 3;
      stroke-dashoffset: 15;
  }
  .btn-lock svg .lock {
      stroke-width: 4;
      stroke-dasharray: 36;
  }
  .btn-lock svg .lockb {
      transform-origin: 14px 20px;
  }
  #user_accept:checked + label svg .lock {
      stroke-dasharray: 48;
  }
  #user_accept:checked + label svg .lockb {
      transform-origin: 14px 22px;
  }
  .politicas p{
      font-size: 10px;
      line-height: 15px;
  }
  .politicas a{
      font-size: 10px;
  }
  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;
  }
  .politicas{
      width: 400px;
      gap: 10px;
  }
  .btn-lock {
      width: 27px;
      height: 27px;
  }
  .btn-lock svg {
      width: 15px;
      height: 16px;
  }
  .btn-lock svg .bling {
      stroke-width: 2.5;
      stroke-dasharray: 3;
      stroke-dashoffset: 15;
  }
  .btn-lock svg .lock {
      stroke-width: 4;
      stroke-dasharray: 36;
  }
  .btn-lock svg .lockb {
      transform-origin: 14px 20px;
  }
  #user_accept:checked + label svg .lock {
      stroke-dasharray: 48;
  }
  #user_accept:checked + label svg .lockb {
      transform-origin: 14px 22px;
  }
  .politicas p{
      font-size: 10px;
      line-height: 15px;
  }
  .politicas a{
      font-size: 10px;
  }
  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;
  }
  .politicas{
      width: 400px;
      gap: 10px;
  }
  .btn-lock {
      width: 27px;
      height: 27px;
  }
  .btn-lock svg {
      width: 15px;
      height: 16px;
  }
  .btn-lock svg .bling {
      stroke-width: 2.5;
      stroke-dasharray: 3;
      stroke-dashoffset: 15;
  }
  .btn-lock svg .lock {
      stroke-width: 4;
      stroke-dasharray: 36;
  }
  .btn-lock svg .lockb {
      transform-origin: 14px 20px;
  }
  #user_accept:checked + label svg .lock {
      stroke-dasharray: 48;
  }
  #user_accept:checked + label svg .lockb {
      transform-origin: 14px 22px;
  }
  .politicas p{
      font-size: 10px;
      line-height: 15px;
  }
  .politicas a{
      font-size: 10px;
  }
  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;
  }
  .politicas{
      width: 360px;
      gap: 7px;
  }
  .btn-lock {
      width: 27px;
      height: 27px;
  }
  .btn-lock svg {
      width: 15px;
      height: 16px;
  }
  .btn-lock svg .bling {
      stroke-width: 2.5;
      stroke-dasharray: 3;
      stroke-dashoffset: 15;
  }
  .btn-lock svg .lock {
      stroke-width: 4;
      stroke-dasharray: 36;
  }
  .btn-lock svg .lockb {
      transform-origin: 14px 20px;
  }
  #user_accept:checked + label svg .lock {
      stroke-dasharray: 48;
  }
  #user_accept:checked + label svg .lockb {
      transform-origin: 14px 22px;
  }
  .politicas p{
      font-size: 10px;
      line-height: 15px;
  }
  .politicas a{
      font-size: 10px;
  }
  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;
  }
  .politicas{
      width: 280px;
      gap: 7px;
  }
  .btn-lock {
      width: 25px;
      height: 25px;
  }
  .btn-lock svg {
      width: 13px;
      height: 14px;
  }
  .btn-lock svg .bling {
      stroke-width: 2.5;
      stroke-dasharray: 3;
      stroke-dashoffset: 15;
  }
  .btn-lock svg .lock {
      stroke-width: 4;
      stroke-dasharray: 36;
  }
  .btn-lock svg .lockb {
      transform-origin: 14px 20px;
  }
  #user_accept:checked + label svg .lock {
      stroke-dasharray: 48;
  }
  #user_accept:checked + label svg .lockb {
      transform-origin: 14px 22px;
  }
  .politicas p{
      font-size: 8px;
      line-height: 12px;
  }
  .politicas a{
      font-size: 8px;
  }
  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;
  }
}