/* ==============================
   GRID
============================== */

.saldo-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  width: 100%;
}


/* ==============================
   CARDS
============================== */

.saldo-feature-card {
  position: relative;
  overflow: hidden;

  background-color: #ffffff;

  background-image:
    linear-gradient(
      rgba(255,255,255,.76),
      rgba(255,255,255,.76)
    ),
    url('https://saldo.protostech.com/wp-content/uploads/2026/09/ChatGPT-Image-2-sept-2026-09_31_38-p.webp');

  background-size: cover;
  background-repeat: no-repeat;

  border-radius: 22px;
  padding: 30px 28px 28px;
  min-height: 220px;

  box-shadow:
    0 14px 35px rgba(30,45,61,.10);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


/* Pequeño detalle teal superior */

.saldo-feature-card::before {
  content: "";
  position: absolute;

  top: 0;
  left: 28px;

  width: 52px;
  height: 4px;

  background: #4AAC9F;

  border-radius: 0 0 8px 8px;
}


/* ==============================
   VARIACIÓN DE LA TEXTURA
============================== */

/* Hace que el patrón no se vea
   exactamente igual en las 6 cards */

.saldo-feature-card:nth-child(1) {
  background-position: 72% 18%;
}

.saldo-feature-card:nth-child(2) {
  background-position: 25% 72%;
}

.saldo-feature-card:nth-child(3) {
  background-position: 85% 55%;
}

.saldo-feature-card:nth-child(4) {
  background-position: 15% 42%;
}

.saldo-feature-card:nth-child(5) {
  background-position: 72% 82%;
}

.saldo-feature-card:nth-child(6) {
  background-position: 35% 15%;
}


/* ==============================
   HOVER
============================== */

.saldo-feature-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 18px 42px rgba(30,45,61,.14);
}


/* ==============================
   ICONOS
============================== */

.saldo-feature-icon {
  position: relative;
  z-index: 2;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 22px;

  border-radius: 14px;

  background: rgba(74,172,159,.12);
}


.saldo-feature-icon svg {
  width: 24px;
  height: 24px;

  fill: none;

  stroke: #167C75;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==============================
   TIPOGRAFÍA
============================== */

.saldo-feature-card h3,
.saldo-feature-card p {
  position: relative;
  z-index: 2;
}


.saldo-feature-card h3 {
  font-family: 'Inter', sans-serif;

  font-size: 20px;
  line-height: 1.25em;

  font-weight: 600;

  color: #1E2D3D;

  margin: 0 0 10px 0;
}


.saldo-feature-card p {
  font-family: 'Inter', sans-serif;

  font-size: 15px;
  line-height: 1.6em;

  font-weight: 400;

  color: #697280;

  margin: 0;
}


/* ==============================
   TABLET
============================== */

@media (max-width: 980px) {

  .saldo-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .saldo-feature-card {
    min-height: 210px;
  }

}


/* ==============================
   MOBILE
============================== */

@media (max-width: 767px) {

  .saldo-features {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .saldo-feature-card {
    min-height: auto;

    padding: 24px 22px;

    border-radius: 18px;

    background-size: 125%;
  }


  .saldo-feature-card::before {
    left: 22px;
    width: 46px;
  }


  .saldo-feature-icon {
    width: 44px;
    height: 44px;

    margin-bottom: 18px;

    border-radius: 12px;
  }


  .saldo-feature-icon svg {
    width: 21px;
    height: 21px;
  }


  .saldo-feature-card h3 {
    font-size: 18px;
  }


  .saldo-feature-card p {
    font-size: 14px;
    line-height: 1.55em;
  }

}