/* =========================
   BOTONES
========================= */
.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.btn-hero{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.btn-hero-primary{
  background: rgba(37,99,235,1); /* azul */
  color: #fff;
  border-color: rgba(37,99,235,1);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.20);
}

.btn-hero-primary:hover{
  transform: translateY(-1px);
  opacity: .95;
  background: rgb(30, 75, 170); /* azul */
  color: #fff;
  border-color: rgb(30, 75, 170);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.20);
}

.btn-hero-secondary{
  background: rgba(15, 23, 42, 0.06); /* gris suave */
  color: rgba(15, 23, 42, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
}

.btn-hero-secondary:hover{
  color: rgba(15, 23, 42, 0.92);
  filter: brightness(0.98);
}

/* Mobile: botones full width */
@media (max-width: 576px){
  .btn-hero{ width: 100%; }
}

/* CTA button */
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 14px;
  background: #F5930B;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .08s ease, filter .15s ease;
}

.cta-btn:hover{
  transform: translateY(-1px);
  opacity: .95;
  background: #d18213;
  color: #ffffff;
  border-color: #d18213;
  box-shadow: 0 10px 18px rgba(245, 147, 11, 0.20);
}

.cta-btn:active{
  transform: translateY(1px);
}

/* Hace que <a class="plan-btn ..."> se vea igual que botón */
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* quita subrayado */
  color: inherit;
  /* evita azul de link */
  cursor: pointer;
}

.plan-btn:hover,
.plan-btn:focus {
  text-decoration: none;
  color: inherit;
}