.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 22px;
  border-radius: 40px;
  border: 3px solid #c40000;
  background: linear-gradient(145deg, #ff1e1e, #c10000);
  cursor: pointer;
  overflow: hidden;

  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.5),
    inset -3px -3px 6px rgba(0, 0, 0, 0.25),
    4px 4px 12px rgba(0, 0, 0, 0.25),
    -2px -2px 10px rgba(255, 255, 255, 0.4);

  transition:
    transform 0.15s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

/* Texto dentro del botón */
.button span {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 -1px 1px rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  display: inline-block;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

/* Efecto hover general */
.button:hover {
  background: linear-gradient(145deg, #ff3030, #d00000);
  transform: translateY(-2px);
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.6),
    inset -3px -3px 6px rgba(0, 0, 0, 0.25),
    6px 6px 14px rgba(0, 0, 0, 0.3),
    -3px -3px 12px rgba(255, 255, 255, 0.4);
}

/* Pequeño salto de letra individual al pasar el mouse */
.button span:hover {
  transform: translateY(-6px) scale(1.05);
}

/* Activo (clic sostenido) */
.button:active {
  transform: scale(0.97);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.4),
    inset -2px -2px 4px rgba(255, 255, 255, 0.5);
}

.button:active span {
  color: #ffe5e5;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.6),
    0 -1px 2px rgba(0, 0, 0, 0.5);
}

/* Accesibilidad */
.button:focus-visible {
  outline: 3px solid rgba(255, 80, 80, 0.6);
  outline-offset: 4px;
}