/* ==========================================================================
   Componente: blur inferior fijo (Framer "Blur Gradient": blur 7px, "toBottom").
   Igual que en producción: en todas las páginas menos el Home.
   Dos capas enmascaradas para que el desenfoque crezca de forma gradual hacia abajo.
   ========================================================================== */

@layer components {
  .blur-gradient {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    height: 100px;
    pointer-events: none;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    &::before {
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      mask-image: linear-gradient(to bottom, transparent 50%, #000 90%);
    }

    &::after {
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      mask-image: linear-gradient(to bottom, transparent 75%, #000);
    }
  }
}