/* ===========================================
  PROFILE BUTTONS - CTAs primarios compartidos
=========================================== */

.btn-cta {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--p-morado);
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(117, 102, 219, 0.3);
  transition: all 0.2s ease;
}

.btn-cta:hover,
.btn-cta:focus {
  background: #6354c4;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(117, 102, 219, 0.4);
  text-decoration: none;
}

.btn-cta svg {
  transition: transform 0.2s ease;
}

.btn-cta:hover svg {
  transform: translateX(3px);
}

/* -------------------------------------------
  Variante verde
------------------------------------------- */
.btn-cta--verde {
  background: var(--p-verde);
  box-shadow: 0 4px 12px rgba(24, 180, 176, 0.3);
}

.btn-cta--verde:hover,
.btn-cta--verde:focus {
  background: #14a8a4;
  box-shadow: 0 6px 16px rgba(24, 180, 176, 0.4);
}

/* -------------------------------------------
  Variante rosado
------------------------------------------- */
.btn-cta--rosado {
  background: var(--p-rosado);
  box-shadow: 0 4px 12px rgba(237, 84, 130, 0.3);
}

.btn-cta--rosado:hover,
.btn-cta--rosado:focus {
  background: #d94774;
  box-shadow: 0 6px 16px rgba(237, 84, 130, 0.4);
}

/* -------------------------------------------
  Responsive: pasa de full-width mobile a inline en desktop
------------------------------------------- */
@media (min-width: 576px) {
  .btn-cta {
    width: auto;
  }
}