.servicios {
  width: 100%;
  padding: var(--spacing-sm) 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-lg) var(--spacing-lg);
  }

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

  .wrapper {
    margin: 0 auto;

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

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

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

  .servicios__title {
    text-align: center;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--blanco);

    @media (min-width: 768px) {
      margin-bottom: var(--spacing-lg);
    }

  }

  .servicios__cont {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 2rem;

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

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

    @media (min-width: 1280px) {
      gap: 3.5rem 2rem;
    }
  }

    .cards-servicios {
        margin: 0 auto;
        width: 100%;
        max-width: 296px;
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
        border-radius: 0.8rem;
        background-color: #f3f7fb;
        background-image: 
          repeating-linear-gradient(
            45deg,
            transparent,
            transparent 35px,
            rgba(26, 68, 109, 0.015) 35px,
            rgba(26, 68, 109, 0.015) 70px
          );
        background-size: 200% 200%;
        animation: movePattern 10s linear infinite;
        box-shadow: 0px 8px 20px 0px rgba(26, 68, 109, 0.3);
        cursor: pointer;
        transition: transform 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, background-color 0.5s ease;
        min-height: 340px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: var(--azulobs);

        -webkit-mask-image: url('../img/card-mask.svg');
        mask-image: url('../img/card-mask.svg');
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;

        @media (min-width: 768px) {
            max-width: 310px;
            min-height: 350px;
            padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
        }

        @media (min-width: 1024px) {
            max-width: 320px;
            min-height: 370px;
            padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
        }

        @media (min-width: 1280px) {
            max-width: 308px;
            min-height: 360px;
            padding: var(--spacing-md) 1.8rem var(--spacing-xl);
        }

        &:hover {
        background-color: var(--azul);
        background-image: 
            repeating-linear-gradient(
            45deg,
            transparent,
            transparent 35px,
            rgba(255, 255, 255, 0.015) 35px,
            rgba(255, 255, 255, 0.015) 70px
            ),
            linear-gradient(135deg, var(--azul) 0%, #0f2942 100%);
        background-size: 200% 200%, 100% 100%;
        animation: movePattern 10s linear infinite;
        color: #fafafa;
        transform: translateY(-3px);
        box-shadow: 0px 12px 45px 0px rgba(0, 0, 0, 0.3);

        .card-icon {
            i {
            transform: rotate(360deg);
            }
        }

        .card-button {
            button {
            background-color: #d4dcff;
            color: var(--azulobs);
            border-color: #d4dcff;
            }
        }
        }

        .card-icon {
        i {
            font-size: 1.5rem !important;
            transition: transform 0.8s ease;

            @media (min-width: 768px) {
                font-size: 1.7rem !important;
            }
        }

    }

    .card-title h3{
        @media (min-width: 1024px) {
            font-size: 1.7rem !important;
        }

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

    .card-button {
      button {
        padding: var(--spacing-xs);
        border-radius: 0.8rem;
        background-color: transparent;
        border: 1px solid var(--azulobs);
        transition: all 0.3s ease;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--azulobs);

        @media (min-width: 768px) {
          font-size: 1rem;
        }
      }
    }
  }
}

/* Animación de patrón de líneas */
@keyframes movePattern {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}