/* =========================
   🔘 BOTÓN
========================= */
button {
  width: 100%;
  margin-top: var(--space-lg);
  padding: 14px var(--space-md); /* 🔥 más alto */
  line-height: 1.4;              /* 🔥 evita que se vea aplastado */
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--btn-hover-start) 0%,
    var(--btn-hover-intermedio) 10%,
    var(--btn-hover-medio) 20%,
    var(--btn-hover-medio) 80%,
    var(--btn-hover-intermedio) 90%,
    var(--btn-hover-start) 100%
  );
  color: var(--text-btn-hover);
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s;
  font-size: 18px;

  box-shadow: 0 4px 6px var(--shadow-button);

  box-sizing: border-box; /* 🔥 importante */
}

/* Hover */
button:hover {
  background: linear-gradient(
    90deg,
    var(--btn-start) 0%,
    var(--btn-intermedio) 10%,
    var(--btn-medio) 20%,
    var(--btn-medio) 80%,
    var(--btn-intermedio) 90%,
    var(--btn-start) 100%
  );
  transform: translateY(-1px);
  color: var(--text-btn); 
  box-shadow: 0 10px 18px rgba(0,0,0,0.45);
}

/* Click */
button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}