.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%);
    }
    }  */