.hero-section {
      background: linear-gradient(135deg, #007bff, #00a1ff);
      color: white;
      padding: 4rem 0;
    }
    .benefit-card {
      border: none;
      border-radius: 10px;
      transition: transform 0.3s ease;
    }
    .benefit-card:hover {
      transform: translateY(-5px);
    }
    .btn-cta {
      font-weight: bold;
      padding: 12px 30px;
      border-radius: 30px;
    }
    .discount-badge {
      position: absolute;
      top: -10px;
      right: -10px;
      background: #ff5722;
      color: white;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 0.9rem;
    }
    @media (max-width: 576px) {
      .hero-section h1 {
        font-size: 2rem;
      }
      .hero-section p {
        font-size: 1rem;
      }
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    .pulse {
      animation: pulse 1.5s infinite;
    }
    .bg-institucional {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.5), #0056b3); /* Azul profundo a azul medio */
  
  color: white;
}
.cta-final {
  max-width: 960px;
  margin: 0 auto;
}
.bg-primary-medium {
  background-color: #3a7bd5; /* tono medio del azul institucional */
  color: white;
}

.bg-primary-light {
  background-color: #d0e4ff; /* azul muy claro */
  color: #003366;
}

.bg-light-institucional {
  background-color: #edebf1;
  color: #003366; /* tono claro del azul institucional */
}
.comentarios {
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #2c3e50;
  background-color: #f9f9f9;
  padding: 1rem;
  border-left: 4px solid #0077b6;
  margin-bottom: 1.5rem;
}
.comentarios strong {
  color: #0077b6;
  font-weight: bold;
}