:root {
  /* Colores nombrados según la paleta */
  --blue-light:    #a4cceb;
  --pink-light:    #f6a7c5;
  --yellow-light:  #faf5ac;
  --gray-dark:     #535158;
  --white:         #ffffff;

  --blue:          #26b4e7;
  --pink:          #f72d8e;
  --yellow:        #ffe81b;
  --black-soft:    #222222;
  --white-soft:    #f7f6f1;

  --blue-dark:     #18475c;
  --burgundy:      #6c143a;
  --yellow-olive:  #ccc225;
  --black:         #050505;
  --gray-light:    #dcdbdb;
}

/* ...tu CSS original... */

body {
  font-family: 'Public Sans', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.nav-link, .btn, .cta-btn, .hero-title {
  font-family: 'Space Grotesk', sans-serif;
}

.hero-title {
  font-size: 2.7rem;
  font-weight: 700;
 color: var(--black-soft);
}

.section-title {
  font-size: 2.1rem;
  font-weight: 700;
}

.hero-img {
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
  object-fit: cover;
  width: 100%;
  height: 350px;
  max-height: 45vw;
}

.beneficio-icono,
.icon-lg {
  font-size: 2.4rem;
  color:var(--black-soft);
  margin-bottom: 0.4rem;
}

.bg-light2 {
  background: #f7fafc;
}

.value-box {
  background: #f3f8f5;
  border-radius: 1rem;
  padding: 1.5rem 1rem;
}

.footer-bg {
  background: #202B37;
  color: #fff;
}

.footer-logo {
  height: 25px;
  margin-bottom: 0.5rem;
}

.footer-link {
  color: #9dc1b7;
  text-decoration: none;
}

.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.legal-strip {
  font-size: 0.9rem;
  color: #b0b9be;
}

.carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 280px;
  border-radius: 0.8rem;
}

.form-control:focus {
  border-color: #2a7853;
  box-shadow: 0 0 0 0.2rem rgba(36,123,73,0.13);
}

.cta-wapp {
  background: #25d366;
  color: #fff;
  border-radius: 1.1rem;
}

.cta-wapp:hover {
  background: #21bb5c;
  color: #fff;
}

.icon-contact {
  font-size: 2rem;
  color: #247b49;
}

.required {
  color: #e22;
}

.g-recaptcha {
  transform: scale(1.06);
  transform-origin: 0 0;
}

.alert {
  font-size: 1.08rem;
}

.service-card {
  border: 0;
  border-radius: 1.1rem;
  box-shadow: 0 8px 30px rgba(50,80,70,.10);
  transition: transform .15s;
  background: #fff;
  overflow: hidden;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-8px) scale(1.025);
}

.service-img {
  width: 100%;
  height: 192px;
  object-fit: cover;
}

.service-icon {
  font-size: 2.2rem;
  color: #247b49;
  margin-bottom: 0.7rem;
}

.modal-header,
.modal-footer {
  border: 0;
}

.modal-content {
  border-radius: 1.1rem;
}

@media (max-width: 575px) {
  .service-img {
    height: 144px;
  }
}