.proceso {
  padding: var(--spacing-lg) var(--spacing-sm);
      background: linear-gradient(180deg, var(--azul) 0%, var(--blanco) 100%);

  @media (min-width: 768px) {
    padding: var(--spacing-md) var(--spacing-md);
  }

  @media (min-width: 1024px) {
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-xxl);
  }

  @media (min-width: 1280px) {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xxl);
  }

  .wrapper {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 450px;

    @media (min-width: 768px) {
      max-width: 760px;
    }

    @media (min-width: 1024px) {
      max-width: 850px;
    }

    @media (min-width: 1280px) {
      max-width: 1100px;
    }

    @media (min-width: 1366px) {
      max-width: 1280px;
    }

    .proceso__desc {
      width: 100%;
      max-width: 100%;
      text-align: center;
      color: var(--blanco);

      h2 {
        margin-bottom: 2rem;
      }

      .proceso__cards-wrapper {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr;
        width: 100%;

        @media (min-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
        }

        @media (min-width: 1024px) {
          gap: 2rem 3rem;
        }

        @media (min-width: 1280px) {
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem 1.8rem;
        }

        .proceso__cards-card {
          background: linear-gradient(135deg, var(--azul) 0%, #0f2942 100%);
          border: 1px solid var(--azullogo);
          border-radius: 1rem;
          padding: 1.2rem 1.2rem 1.5rem;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
          transition: transform 0.25s ease, background 0.25s ease,
            border-color 0.25s ease;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          color: var(--blanco);
          text-align: justify;
          cursor: pointer;
          transition: all 0.6s ease;

          &:hover {
            transform: translateY(-3px);
            background: rgba(255, 255, 255, 0.06);
            color: linear-gradient(180deg, var(--azulobs), var(--azullogo));
          }

          h3 {
            margin: 0.25rem 0 0;
            font-size: 0.98rem;

            @media (min-width: 1280px) {
              font-size: 1.12rem;
            }
          }

          p {
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
            text-align: justify;
            font-size: 0.95rem;
            font-weight: 300;

            @media (min-width: 1280px) {
              font-size: 0.99rem;
            }
          }

          .proceso__cards-icon {
            width: 40px;
            height: 40px;
            border-radius: 0.7rem;
            display: grid;
            place-items: center;
            background: var(--azullogo);
            border: 1px solid rgba(255, 255, 255, 0.12);
            font-size: 1.1rem;
          }
        }

        .proceso__cards-card--wide {
          @media (min-width: 1280px) {
            grid-column: span 3;
            display: grid;
            gap: 1rem;
          }
        }
      }
    }

    .proceso__steps-wrapper {
      display: grid;
      gap: 1.5rem;
      width: 100%;

      @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
      }

      @media (min-width: 1024px) {
          gap: 2rem 8rem;
        }


      @media (min-width: 1280px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 6rem 3.5rem;
      }

      .proceso__steps-item {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border-radius: 0.8rem;

        .proceso__steps-step {
          font-weight: 700;
          color: var(--azulobs);
          display: flex;
          align-items: center;
          gap: 1rem;

          .proceso-step-number {
            font-size: 3.4rem;
          }

          i {
            font-size: 1.8rem;
          }
        }

        .proceso__steps-content {
          h3 {
            margin-bottom: 0.5rem;
            font-size: 1.4rem;

            @media (min-width: 1280px) {
              font-size: 1.65rem;
            }

          }

          p {
            margin: 0;
            line-height: 1.5;
            text-align: justify;
            font-size: 0.95rem;

            @media (min-width: 1280px) {
              font-size: 1.05rem;
            }
          }
        }
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: 
      url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q 25 30, 50 50 T 100 50' fill='none' stroke='rgba(65, 108, 170, 0.06)' stroke-width='0.5'/%3E%3Cpath d='M0 60 Q 25 40, 50 60 T 100 60' fill='none' stroke='rgba(65, 108, 170, 0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    background-position: center;
    pointer-events: none;
    opacity: 0.7;
    
    @media (min-width: 768px) {
      background-size: 400px 400px;
    }
    
    @media (min-width: 1280px) {
      background-size: 500px 500px;
    }
  }
}

.proceso__steps h2{
    font-size: 1.55rem;
    margin-bottom: 1.25rem;

    @media (min-width: 1280px) {
      font-size: 2rem;
      margin-bottom: 1.9rem;
    }
}