.loader__content{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #212e367b;
  z-index: 110;
}

/* Primera opción: Relajante*/

/* .loader {
    width: 40px;
    height: 60px;
    position: relative;
}
.loader::before,
.loader::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    clip-path: polygon(0 0,100% 0, 100% 67%,50% 67%,50% 34%,0 34%);
    animation: sp7 2s infinite;
}
.loader::after {
    --s:-1,-1;
}

@keyframes sp7 {
    0%,
    10%  {transform:scale(var(--s,1)) translate(0,0)        rotate(0deg)}
    33%  {transform:scale(var(--s,1)) translate(0,-20px)    rotate(0deg)}
    66%  {transform:scale(var(--s,1)) translate(10px,-20px) rotate(-90deg)}
    90%,
    100% {transform:scale(var(--s,1)) translate(10px,-10px) rotate(-90deg)}
} */

/* Segunda opción: Elegante */
.loader {
    width: 65px;
    aspect-ratio: 1;
    position: relative;
  }
  .loader:before,
  .loader:after {
    content: "";
    position: absolute;
    border-radius: 50px;
    box-shadow: 0 0 0 3px inset #fff;
    animation: l5 4s infinite;
  }
  .loader:after {
    animation-delay: 1.75s;
    border-radius: 0;
  }
  @keyframes l5{
    0%    {inset:0    35px 35px 0   }
    12.5% {inset:0    35px 0    0   }
    25%   {inset:35px 35px 0    0   }
    37.5% {inset:35px 0    0    0   }
    50%   {inset:35px 0    0    35px}
    62.5% {inset:0    0    0    35px}
    75%   {inset:0    0    35px 35px}
    87.5% {inset:0    0    35px 0   }
    100%  {inset:0    35px 35px 0   }
  }

  /* .loader {
    width: 60px;
    height: 16px;
    display: flex;
    justify-content: space-between;
    animation: l3-0 2s infinite alternate;
  }
  .loader:before,
  .loader:after {
    content: "";
    width: 16px;
    background: #3FB8AF;
    animation: l3-1 1s infinite alternate;
  }
  .loader:after {
    background: #FF3D7F;
    --s:-1;
  }
  @keyframes l3-0 {
     0%,40%   {transform: rotate(0)}
     80%,100% {transform: rotate(.5turn)}
  }
  @keyframes l3-1 {
     80%,100% {transform: translate(calc(var(--s,1)*14px))}
  } */


  /* .loader {
    width: 35px;
    aspect-ratio: 1;
    --c:no-repeat linear-gradient(#046D8B 0 0);
    background:
      var(--c) 0 0,
      var(--c) 100% 0,
      var(--c) 100% 100%,
      var(--c) 0 100%;
    animation: l1 1s infinite alternate;
  }
  @keyframes l1 {
    0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
    25%  {background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
    50%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
    75%  {background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
    90%,
    100% {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
  } */

  /* .loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
  }
  .loader::after,
  .loader::before {
    content: '';  
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    animation: animloader 2s ease-in-out infinite;
  }
  .loader::after {
    animation-delay: 1s;
  } 
@keyframes animloader {
    0%, 100% {
      transform: scale(0);
      opacity: 1;
}
    50% {
      transform: scale(1);
      opacity: 0;
}
  }
*/

  /* .loader {
    width: 48px;
    height: 48px;
    display: block;
    margin:15px auto;
    position: relative;
    color: #3FB8AF;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .loader::after,
  .loader::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: scale(0.5) translate(0, 0);
    background-color:#3FB8AF;
    border-radius: 50%;
    animation: animloader 1s infinite ease-in-out;
  }
  .loader::before {
    background-color: #FF3D7F;
    transform: scale(0.5) translate(-48px, -48px);
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes animloader {
      50% {
        transform: scale(1) translate(-50%, -50%);
  }
  }  */