.separador {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: visible;

  .separador__media {
    position: absolute;
    inset: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
  }

  .separador__gradiente {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      45deg,
      rgba(2, 6, 23, 0.1) 0%,
      rgba(26, 68, 109, 0.6) 30%,
      rgba(192, 236, 255, 0.1) 100%
    );
  }

  .separador__shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
  }

  .shape {
    position: absolute;
    right: 0;
    bottom: -20px;
  }

  .shape--1 {
    width: 170px;
    height: 100%;
    background: var(--azul);
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 0% 100%);
    z-index: 2;
  }

  .shape--2 {
    width: 250px;
    height: 90%;
    background: var(--blanco);
    clip-path: polygon(30% 55%, 100% 55%, 100% 100%, 0% 100%);
  }
}