/* ===== VERDE ===== */

.btn-green.btn-solid {
  background: linear-gradient(
    135deg,
    var(--si-green),
    var(--si-green-light)
  );
}

.btn-green.btn-solid:hover {
  background: linear-gradient(
    135deg,
    var(--si-green-hover),
    var(--si-green)
  );
}

.btn-green.btn-outline {
  border-color: var(--si-green);
  color: var(--si-green);
}

.btn-green.btn-outline:hover {
  background: var(--si-green-soft);
  color: var(--si-green-hover);
}

.btn-green.btn-soft {
  background: var(--si-green-soft);
  border-color: var(--si-green-border);
  color: var(--si-green);
}

.btn-green.btn-soft:hover {
  background: var(--si-green);
  color: var(--si-white);
}


/* ===== AZUL ===== */

.btn-blue.btn-solid {
  background: linear-gradient(
    135deg,
    var(--si-blue-light),
    var(--si-blue)
  );
}

.btn-blue.btn-solid:hover {
  background: linear-gradient(
    135deg,
    var(--si-blue),
    var(--si-blue-hover)
  );
  color: #fff;
}

.btn-blue.btn-outline {
  border-color: var(--si-blue);
  color: var(--si-blue);
}

.btn-blue.btn-outline:hover {
  background: var(--si-blue-soft);
  color: var(--si-blue-hover);
}

.btn-blue.btn-soft {
  background: var(--si-blue-soft);
  border-color: var(--si-blue-border);
  color: var(--si-blue);
}

.btn-blue.btn-soft:hover {
  background: var(--si-blue);
  color: var(--si-white);
}


/* ===== WHATSAPP ===== */

.btn-whatsapp.btn-solid {
  background: linear-gradient(
    135deg,
    var(--si-wa),
    var(--si-wa-light)
  );
  box-shadow: 0 14px 36px var(--si-wa-shadow);
}

.btn-whatsapp.btn-solid:hover {
  background: linear-gradient(
    135deg,
    var(--si-wa-hover),
    var(--si-wa)
  );
  box-shadow: 0 18px 42px var(--si-wa-shadow);
  color: #fff;
}

.btn-whatsapp.btn-outline {
  border-color: var(--si-wa);
  color: var(--si-wa);
}

.btn-whatsapp.btn-outline:hover {
  background: var(--si-wa-soft);
  color: var(--si-wa-hover);
}

.btn-whatsapp.btn-soft {
  background: var(--si-wa-soft);
  border-color: var(--si-wa-border);
  color: var(--si-wa);
}

.btn-whatsapp.btn-soft:hover {
  background: var(--si-wa);
  color: var(--si-white);
}