.btn {
    display: inline-block;
    padding: 16px 40px;
    font-size: 1.1rem;
    letter-spacing: 1px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(90deg, #04376B, #1A5AA3);
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(4, 55, 107, 0.25);
  }
  
  /* HOVER */
  .btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(90deg, #1A5AA3, #4A8ED9);
    box-shadow: 0 12px 25px rgba(4, 55, 107, 0.35);
  }
  
  /* CLICK */
  .btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(4, 55, 107, 0.25);
  }
  
  /* ACCESIBILIDAD */
  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 181, 192, 0.5),
                0 8px 20px rgba(4, 55, 107, 0.25);
  }
  
  /* VARIANTE ROSA */
  .btn-pink {
    background: linear-gradient(90deg, #FF9BB0, #FFB5C0);
    box-shadow: 0 8px 20px rgba(255, 155, 176, 0.35);
  }
  
  .btn-pink:hover {
    background: linear-gradient(90deg, #FFB5C0, #FFD1DA);
  }
  
  /* RESPONSIVE */
  @media (max-width: 480px) {
    .btn {
      width: 100%;
      padding: 16px;
      font-size: 1rem;
    }
  }